hubspot / drop Goto Github PK

When i got a new version of Drop.js recently (through bower update), I was very confused that package.json and bower.json did not reflect this version number. They're not even the same (package.json has 0.5.4 and bower.json states 0.5.5 while Drop.js is (per git tag) on 0.5.7).

The following seems to cause the drop to disappear:

drop.tether.position()

It requires some almost indescribable finagling to get the drop back.

Presuming the issue is apparent I would be grateful for any thoughts on what might be happening here. I am happy to provide more details, too.

Cheers

Steps to reproduce:

bower install drop

Added to end of HTML body:

<script src="bower_components/drop/drop.js"></script>
<script>
    drop = new Drop({
          target: document.querySelector('.code-tips .active'),
          content: 'Welcome to the future!',
          attach: 'bottom left',
          openOn: 'click'
    });
</script>

Error in console:

Uncaught TypeError: Cannot call method 'split' of undefined - drop.js:1474

It would be of quite some convenience if Drops cleaned themselves up when their respective target was removed from the DOM.

I am not sure of the best way to check for this ... Just a couple handy links:

• detect changes in the dom
• Detecting when DOM Elements have been Removed with jQuery

I will post more if I find a handy solution.

Cheers

When trying to remove a Drop instance, I always get a "Cannot read property 'removeChild' of null" error. This is likely because the drop element is no longer a child of an existing element in the DOM?

This may be because the code (at Line 384) defines the remove method as

remove() {
    this.close();
    if (typeof this.drop.parentNode !== 'undefined') {
        this.drop.parentNode.removeChild(this.drop);
    }
}

and is checking if parentNode is undefined rather than null. The following might suffice, instead, since it covers undefined, as well as null, and shouldn't have any negative side effects (a DOM node can't be falsy unless it's null).

remove() {
    this.close();
    if (this.drop.parentNode) {
        this.drop.parentNode.removeChild(this.drop);
    }
}

In the meantime, I'll try and find a way to avoid removing a Drop instance when it doesn't exist in the DOM, in my own code.

Where can I find documentation on which files should I include for drop to work? Do I have to include all files under "js" and "css" folders for both tether and drop releases? Specially tether seems to have a lot of stuff there, likes utils.js and others. Must mention that I cannot use the minified versions because I want my app's whole code to be easily reviewed.

Add CSS minification task

Just some food for thought on working with Drop and the Bootstrap framework.

Bootstrap has the following z-indexes:

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1010;
@zindex-tooltip:           1030;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

As well, popular form elements like input tags, carousels, pagination and buttons have a z-index between 2 and 10.

Since Drop styles do not have a z-index, the drops are hidden or obscured by all of the above.

It seems to makes sense for Drop to appear over zindex-modal i.e. giving the .drop class a z-index > 1050.

This might be worthy of a patch, depending on whether this makes sense for your plans for Drop. Alternatively, since Bootstrap is quite popular (and other frameworks have similar issues), it might be worth noting in the documentation making Drop work with Bootstrap requires CSS like the following:

.drop {
  z-index: 1060;
}

Cheers

A wide drop will overflow horizontally, making part of the drop invisible. This appears to be as-designed. Here is a jsFiddle illustrating the issue.

It would be really nice, if it is possible, if there were a way for a drop to re-position itself horizontally as it overflows.

The easiest end-user workaround is to add tetherOptions.constraints like this:

 new Drop(
   tetherOptions:
      constraints: [
        to: 'scrollParent',
        attachment: 'together',
        pin: true
      ]
  )

Here is a jsFiddle

Thanks to the brilliant design of tether, this works quite well. The only issue, as you can see from the latter jsFiddle, is that the arrow that points to the target is missing.

So really, what we're talking about here is the little arrow thingy. It's a small thing, but to some it's important, so I thought I'd mention it. :)

Cheers.

In drop-theme-arrow-bounce

-moz-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));

Doesn't work, because Firefox doesn't fully support filter yet. So you end up with no outline around the Drop, which is confusing (but not a huge deal).

I keep getting this error, I get it in the documentation as well when I try to Run the code.

I'm just trying to setup a very simple test and I've done:

        drop = new Drop({
          target: document.querySelector('.drop-target'),
          content: 'Welcome to the future!',
          position: 'bottom left',
          openOn: 'click'
        });

and

      <div class="example-inner">
          <a class="drop-target drop-target-example-drop-theme-arrows-bounce-dark">Size</a>
          <div class="drop-content">
              <input type="range" />
          </div>
      </div>

Is this correct? or am I missing something...

Thank you

Hi,

I like drop but I wouldn't say that it supports "IE9+ and all modern browsers".

Looking at http://caniuse.com/#feat=calc it seems calc has a lot of bugs in many IE versions. Android support seems to be quite poor and Opera Mini does not support the feature at all.

For every drop instance, there is an event bound to the document for handling close. I have a single page application so the bound events to the document are never removed and after a while, there will be thousands of events bound to the document.

http://jsfiddle.net/DL9kN/

The destroyed drop doesn't get removed from allDrops, so when another drop event occurs, updateBodyClasses -> hasClass breaks.

Hi!
I am trying to use drop with require.js. As far as I see, the drop element doesn't reposition itself on window resize or scroll event. Using it straight without require.js everything works fine.

Sample code:

require.config({
    baseUrl: './',
    paths: {
        'TetherUtils': 'bower_components/tether/js/utils',
        'Tether': 'bower_components/tether/js/tether',
        'Drop': 'bower_components/drop/js/drop'
    },
    shim: {
        'TetherUtils': {
            'exports': 'TetherUtils'
        },
        'Tether': {
            'exports': 'Tether',
            'deps': ['TetherUtils']
        },
        'Drop': {
            'exports': 'Drop',
            'deps': ['Tether']
        }
    }
});

require(['Drop'], function (Drop) {

   var drop =  new Drop({
        target: document.querySelector('.button'),
        content: '<div class="__drop__element">DROP ELEMENT</div>',
        placement: 'bottom center',
       constrainToWindow: true,
        openOn: 'click'
    });
});

Whoops:
http://github.hubspot.com/drop

@zackbloom

Seems like a solution is right in front of me, but I'm not finding it. Can this be done?

drop = new Drop({
  target: target,
  content: content,
  openOn: 'click',
  remove: true
});

$(content).on('click', function(e) {
  // some funny stuff
  drop.close();
});

npm introduced scoped packages making it possible to name these projects without conflict eg. @hubspot/drop. However, it would make it inconsistent with bower, so holding off until bower adds similar support.

Same things applies to tooltip, shepherd, and select.

http://jsfiddle.net/eyu8rw6L/

Middle ones work ok, top and bottom ones do not display their arrows.

Is there a simple way to destroy all drops at once? I'm using Ember and would like to clean up my view on willClearRender() .

Something like

willClearRender: ->
  for drop in drops
    drop.destroy()

Or how would one do this? Maybe I'm just overlooking something really simple.

Specifically little WebKit implementations like Monochrome or Duo that use an outdated WebKit browser: they fire a webkitTransitionEnd event, but not a standard transitionend like newer browsers.

I've got a fix in pull request #29 that fixes this.

Come across a bit of a strange issue when using the 'left top' position. Have been able to replicate it with a jsfiddle;

http://jsfiddle.net/hyFcr/

The first few mouse overs, the drop is too far to the left, but after 2 or three mouse overs, it goes back to sitting in it's correct place.

First mouseover:
http://i.imgur.com/UIHVT0m.png

After a couple:
http://i.imgur.com/juSkIuT.png

If a Drop.js is set to appear below an element, the constrainToWindow: true option will make it appear above the element instead if necessary to fit inside the viewport.

But if the horisontal center of the anchor point of the Drop is close to the left or right edge of the window, it may go outside the window horisontally as seen here:

Is there any built-in way to fix that issue? Ideally I think it would shift the content to fit the viewport width, but the arrow would stay put, becoming off-centered.

Is there a way to fire an event when the Dropdown is shown?, I read the documentation, but still is not clear.
I tried using 'on' this but is not working:
on(eventName, handler, [ctx])

I apologize for my inexperienced ahead of time.

I place the tether js and css folder contents into the appropriate folders, link the tether.css and tether-theme-arrows.css. Then add in the 6 js files utils,tether.min, shift, markAttachment, constraint, abutment.

With that done, anytime I try and use it I get a "ReferenceError: Tether is not defined" in my console.

Steps to reproduce:

• Visit http://nyh.name/signup.html (static copy of a real site, to catch the bug). I can see the issue in Chrome, Firefox, Safari on OS X.
• Input "[email protected]" (sic) into the email field
• Hit "tab" or click the "Password" field

Expected a centered drop:

But I get a non-centered drop:

However, if you hit shift+tab, then tab (or click the email field and then back to the password field), the drop is close()d and reopen()ed and then becomes correctly centered.

I started debugging this a bit, but it wasn't obvious to me, and I figured you guys might have some insight.

The interesting parts of the CoffeeScript for that logic is basically (simplified – you can see the full non-minified JS here):

  currentSuggestion = null

  # Show content on email blur.
  $field.blur ->
    $(this).mailcheck EMAIL_DOMAINS,
      suggested: ($element, suggestion) ->
        currentSuggestion = suggestion
        drop.close()  # So `open()` actually calls `content()` again.
        drop.open()

      empty: ($element) ->
        drop.close()

  # The tooltip content.
  # Drop.js calls this method every time before it `open()`s.
  content = (_) ->
    return unless currentSuggestion
    currentSuggestion.someValue

  # Must be called after `content` is defined.
  drop = new Drop
    classes: "drop-theme tooltip tooltip--red"
    target: $field[0]
    content: content
    openOn: null
    position: "bottom center"

Great project guys! Any plans to support right click functionality?

We've written a wrapper for Angular and would love to add right click support:
https://github.com/stevenh77/drop-ng

      document.addEventListener('DOMContentLoaded', function() {
        return Drop.updateBodyClasses();
      });

If a Drop isn't instantiated before DOMContentLoaded this produces an error undefined.

Using the example file index.html
1> all links are broken.,it needs to be at root level.
2> my interest was in the List flyout. How can use this with unknown number between 2-25. and can it be nested?
3> how do get it to show only below the clicked box, right now it jumps above and below on scroll.

Thanks

Update documentations to reflect v1.0.x. Also update build steps to build new documentations.

Getting the same issue on your demo page as well as my own website.
IE9 is ok IE8 is not.

Doesn't seem to like the defining a new drop:
newDrop = new Drop({

https://www.dropbox.com/s/o94ey01vywlso6z/Screenshot%202014-03-17%2010.47.38.png

newDrop = new Drop({

Specifically it's moaning about this in drop.js (I've added some text pointing out the line in the function below)

(function() {
var event, lastCall, lastDuration, pendingTimeout, tick, _i, _len, _ref1, _results;
lastCall = null;
lastDuration = null;
pendingTimeout = null;
tick = function() {
  if ((lastDuration != null) && lastDuration > 16) {
    lastDuration = Math.min(lastDuration - 16, 250);
    pendingTimeout = setTimeout(tick, 250);
    return;
  }
  if ((lastCall != null) && (now() - lastCall) < 10) {
    return;
  }
  if (pendingTimeout != null) {
    clearTimeout(pendingTimeout);
    pendingTimeout = null;
  }
  lastCall = now();
  position();
  return lastDuration = now() - lastCall;
};
_ref1 = ['resize', 'scroll', 'touchmove'];
_results = [];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
  event = _ref1[_i];
  _results.push(window.addEventListener(event, tick)); // IT'S MOANING ABOUT THIS LINE 
}
return _results;
})();

When I load "Drop" after "Tether", and follow documentation, but always got error: Tether Error: Both element and target must be defined, I want to know how to defined element, thanks

Is there any way to programmatically disable drop? I'd like to allow the drop to be activated only in certain circumstances.

Thanks!

Example: http://jsfiddle.net/XqWdA/

When I've got openOn: 'hover' set, it still seems to respond to clicks. This appears to be a bug?

Similar to 195fa0e, I'd like the option to supply Drop with a content-generating function that returns an HTMLElement (rather than a string that is assigned to @content.innerHTML). The main advantage I hope to gain here is that event handlers & other data on the original content element will be preserved when passed to Drop.

I'm using the following code to instantiate the plugin, however, the dropdown always pops up in the top left of the screen. It doesn't seem to be attaching to the element properly. (I don't see transforms applied in the css at all).

        var drop = new Drop({
          target: target,
          classes: theme,
          content: '<div class="yep">This is working fine</div>',
          theme: theme,
          constrainToWindow: true,
          constrainToScrollParent: false,
          position: 'bottom',
          openOn: 'click'
        });

I've even tried calling drop.position() to no avail.

No errors in console. Any suggestions on how to debug this? (I don't know if this matters, but it's being used within an angular directive)

Tether element and target seem to be set properly on the drop object. Also, target is a dom object.

When I pass in custom classes to Drop, it applies those classes to BOTH the target and the drop element. Now, if I wanted those on the target, I'd add them myself. But since Drop creates the drop container itself, I get why it'd accept custom classes.

Is there some way to suppress the addition of my classes onto the target, too? I'm adding like emailCompositionWindow to the drop element, which sets up widths and stuff, and those same classes are being applied to the button. I'm also adding js-email-composition-window which is for testing, and now I've got two elements in my DOM with those classes, which breaks tests :(

Any help would be hugely appreciated!

Thanks!

I seem to be having an issue with the drop Y positioning incorrectly when the target is contained in a div with absolute positioning.

Here is the demo: http://stevenhollidge.com/drop-ng/example/wijmo-grid/positioning-bug.html

I need to be able to use absolute positioning, any ideas what's going wrong and how best to solve?

Hope you can help!

Broken:

Fix:

https://github.com/HubSpot/drop/blob/master/coffee/drop.coffee#L301

This line seems to intend to remove a destroyed drop from allDrops. However, removeFromArray expects an array, while allDrops is a hash.

Hey, It would be really nice if drop (and tether and all of the other awesome libraries) would be available on bower/npm. Also if they would have module support (amd/require/es6) that would be really helpfull. Is it possible?

edit: Ok I see it on bower now, was searching for drop.js before. (would be a good idea to add it to the readme, how to install it via bower)

Hi there,

as Drop.js concatenates the Tether library to create a standalone library file (drop.min.js), we should move (in bower.json) the Tether dependency from "dependencies" to "devDependencies".

These are the advantages:

1. people that only include Drop.js as a dependency in their projects won't have to download Tether as well. This is especially important in cases where the CI servers are configured not to preserve the bower_components folder, but to checkout all dependencies from scratch in each run (even if it uses a cache).
2. people who just want to include bower_components/**/*.min.js won't have to explicitly exclude tether.min.js. This is especially important as Drop.js still works when not excluding tether.min.js explicitly. What's really bad in this situation is, that all tether modules are registered twice, slowing down all tether related positioning stuff by a factor of 2.

Yet even better solution:
Leave Tether as a dependency and rewrite Drop.js to NOT include tether itself, but to make use of whatever Tether library is already included in the page. This allows people to be more flexible, e.g. they can decide to use a patched version of Tether, without having to dig into the CoffeScript-compiled version that ships with Drop.js.

Is there a reason that the demo is not included in the distribution?

when i try to run the the welcome example on my computer, the javascript console give me two errors:

1: Uncaught ReferenceError: Tether is not defined drop.js:7
2: Uncaught ReferenceError: Drop is not defined welcome.js:4

what do i wrong? i would be pleased if you can help me

Is there a way to invoke a function when a Drop is opened? I am trying to call some data using Ajax that would replace the content of the Drop but I can't seem to find a way to do it. Any suggestion?

.notify-panel{
width: 300px;
z-index: 1120;
}
the drop also shows bellow the input.
I don't want the drop shows below the input.

Hi,

The drop will always be placed on top of the drop-target, even though you specify "bottom something" in the options.

I am using Drop in an Ember project.

After some debugging, i could see that the transcribe method gets called 2 times (not sure why) for every click on the target .The first call (right after a page refresh) places it appropriately at the bottom of my target. Then the method is called again causing my drop to move from the bottom (the position I wanted), to the top.

If I summarize :

-- Refresh the page, the drop is instantiated
-- 1st lick on the target
---- first call to transcribe, the drop is well placed
---- second call to transcribe, the drop align with the top of the target
Then for every click on the target, the transcribe method gets called 2 times with false Y pos so that the drop stays on top of the target.

Any clue on why this happens ?
Thanks