Category: javascript

I have a query regarding the sizes of Graphics. I’m trying to code collision detection, my code is as follows:

const collided = (objectBounds, bounds) => {
  return (
    objectBounds.x + objectBounds.width > bounds.x &&
    bounds.x + bounds.width > objectBounds.x &&
    objectBounds.y + objectBounds.height > bounds.y &&
    bounds.y + bounds.height > objectBounds.y
  );
};

const restrictPosToObjectBounds = (objectBounds, bounds, oldBounds) => {
  if (collided(objectBounds, bounds)) return oldPos;
  else
    return {
      x: bounds.x,
      y: bounds.y
    };
};

And then I’ll call it like this:

const objectPosition = object.getLocalBounds()
const oldPosition = object.getLocalBounds()
restrictPosToObjectBounds (
    objectPosition,
    {
      ...getNewPos(oldPosition),
      width:oldPosition.width,
      height:oldPosition.height,
    },
    oldPosition
  )

Which kinda works, but it there would be a big gap around the object I’m colliding with, leaving me unable to properly collide with it

If I change my collide function to this (dividing the width and heights by half)

const collided = (objectBounds, bounds) => {
  return (
    objectBounds.x + objectBounds.width / 2 > bounds.x &&
    bounds.x + bounds.width / 2  > objectBounds.x &&
    objectBounds.y + objectBounds.height / 2  > bounds.y &&
    bounds.y + bounds.height / 2  > objectBounds.y
  );
};

Then it works properly, any idea why? Is the scale of a Graphic rendered differently or something, how do it get its accurate width and height?

I have this javascript code.

How would i remove the animation from it and just show and hide the elements

here is just the javascript code.

If needed i can post the html

………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

var $allTiles = $(".js-tile");
var $Tiles = $(".Tiles");

$(".Tiles > .Tile").each(function(i, el) {  
  
  var $tile = $(el);
  var target = $tile.children(".Tile-flyout");
  
  // get each items flyout height with extra buffer
  var thisHeight = target.children(".Tile-content").outerHeight()+20;
  
  // Create ne timeline in paused state
  var tl = new TimelineMax({
    paused: true,
    reversed:true//,
    //forward: true // not a valid GSAP property 
  });

  TweenLite.set(target, {
    height:0,
    autoAlpha: 0,
    display: "none"//,
  });    
  // animate stuff
  tl.to(target, 1, {
    delay: 0.5,
    height: thisHeight,
    autoAlpha: 1,
    display: "block",
    ease: Cubic.easeInOut,
    overwrite: "none"
  });
  // store timeline in DOM node
  el.animation = tl;
  
  // create element event handler
  $(el).on("click", function(event) {
    
    event.preventDefault();
    
    var that = this;
    var currentTile = $(this);
    
    $(".Tiles > .Tile.is-expanded").not(this).each(function(i, element){
        console.log('reverse?');
        element.animation.reverse();
        currentTile.removeClass("not-expanded");
    }); 
     
     $allTiles.not(currentTile).removeClass("is-expanded");
     $allTiles.not(currentTile).removeClass("not-expanded");
    
     currentTile.toggleClass("is-expanded");

     if (this.animation.reversed()) {
          console.log('1');
          $allTiles.not(currentTile).addClass("not-expanded");
       
          this.animation.play();
          target.removeClass("reversing");
     } else {
          console.log('2');
          this.animation.reverse();
          target.addClass("reversing");
     }
  });  
});

I want to use the following JQuery plugin as part of my React app, and haven’t had success in doing so: http://viima.github.io/jquery-comments/#link-3. This is a comments plugin that creates threads/replies.

Currently, I’ve tried to integrate it as follows, but to no avail:

import React, { Component } from "react";
import $ from "jquery";
import "./jquery-comments.css";
import "./jquery-comments";

class Comments extends Component {
  componentDidMount() {
    this.$el = $("#comments-container");
    this.$el.comments({
      profilePictureURL:
        "https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png",
      getComments: function (success, error) {
        var commentsArray = [
          {
            id: 1,
            created: "2015-10-01",
            content: "Lorem ipsum dolort sit amet",
            fullname: "Simon Powell",
            upvote_count: 2,
            user_has_upvoted: false,
          },
        ];
        success(commentsArray);
      },
    });
  }

  render() {
    return <div ref={(el) => (this.el = el)}></div>;
  }
}

export default Comments;

I have a date range picker on my website.

When a user inputs the date and time range, I want to send separately within the form the startDate and the endDate

daterangepicker code:

    $('input[name="datetimes"]').daterangepicker({
        timePicker: true,
        timePickerIncrement: 5,
        startDate: moment().startOf('hour'),
        endDate: moment().startOf('hour').add(32, 'hour'),
        locale: {
          format: 'YYYY-MM-DD hh:mm'
        },
        opens: 'center',
        drops: 'auto'
    });

And this is what I tried:

$('#formid').submit(function(e) {
    e.preventDefault();
    let startDate = ($('#datetimes').data('daterangepicker').startDate).format('YYYY-MM-DD hh:mm');
    let endDate = ($('#datetimes').data('daterangepicker').endDate).format('YYYY-MM-DD hh:mm');
    $(this).append('<input type="hidden" name="start_date" value='+startDate+' /> ');
    $(this).append('<input type="hidden" name="end_date" value='+endDate+' /> ');
    this.submit();
});

Before the this.submit(); I did a console.log(startDate) and thi is what I am getting:

I am getting the date and the time (as expected), but then if I try doing a print(request.POST) in the view (django back-end), this is what I get:

Somehow, during the POST the HH:mm disappeared.

How can I keep the values of hh:mm during the POST?

I’m seeing a lot of Javascript plugins utilizing a pattern like the one below in the beginning of the main plugin script.

I’ve tried looking up the Internet but couldn’t find any explanation and I don’t have any idea why this is needed.

Excerpt from Datatables:

(function( factory ) {
    "use strict";

    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        module.exports = function (root, $) {
            if ( ! root ) {
                // CommonJS environments without a window global must pass a
                // root. This will give an error otherwise
                root = window;
            }

            if ( ! $ ) {
                $ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
                    require('jquery') :
                    require('jquery')( root );
            }

            return factory( $, root, root.document );
        };
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }
}
(function( $, window, document, undefined )
...

Excerpt from Slick.js

;(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {
...

I am getting this error while trying to map an array with the object.

Type 'unknown' is not assignable to type 'ReactNode'.
  Type 'unknown' is not assignable to type 'ReactPortal'.ts(2322)
index.d.ts(1353, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'

Here is my code.

const data = [
  {
    label: "CLIENT ID",
    value: "clientId",
  },
  {
    label: "BILLING CUSTOMER ID",
    value: "billingCustomerId",
  },
  {
    label: "EMAIL",
    value: "email",
  },
  {
    label: "PHONE NUMBER",
    value: "phoneNumber",
  },
  {
    label: "BUSINESS NAME",
    value: "businessName",
  },
  {
    label: "BILLING ADDRESS",
    value: "billingAddress",
  },
  {
    label: "TAX DETAILS",
    value: "taxDetails",
  },
  {
    label: "LOCATION",
    value: "location",
  },
  {
    label: "LANGUAGE",
    value: "language",
  },
];
const ProfileDetail = (props: any) => {
 

 
  const dispatch = useDispatch();
  useEffect(() => {
    if (clientId !== null && userMasterId !== null && accessToken !== null) {
     
      clientDetail(accessToken, clientId);
    }
  }, [clientId, userMasterId, accessToken]);
  const profileState: any = useSelector((state: any) => state.profileBilling);
  const clientDetail = async (aToken: string, cId: string) => {
    await dispatch(getClientDetailThunk(aToken, cId));
  };

  return (
    <div>
      {data.map((item: any, i: number) => {
        return (
          <Box marginY={2} key={item.label}>
            <Typography className={classes.menuTitle}>{item.label}</Typography>
            <p className={classes.menuSubtitle}>
              {item.value === Object.keys(profileState?.cDetail)[i].     // I tried to map the array value like this so that i don't have to repeat this block of code.
                ? Object.values(profileState?.cDetail)[i]
                :  null}
            </p>
          </Box>
        );
      })}
    </div>
  );
};

export default ProfileDetail;

I am not sure if i am doing it write or wrong. But the code is working on UI but it is showing the typescript error which i am not sure how to resolve.

This how profileState.cDetail looks like.

{
billingAddress: "Street2",
billingCustomerId: "cus_Kf4ylZZmyALR6f",
businessName: "xxxxxxx",
clientId: "67f3b1f6",
email: "[email protected]",
language: "English",
location: "xxxx",
phoneNumber: "1234123412",
taxDetails: "123",
}