Drop Drop, use Tether directly

iDoRecall · Aug 31, 2015 · 841c253 · 841c253
1 parent acb9495
commit 841c253
Show file tree

Hide file tree

Showing 8 changed files with 286 additions and 268 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -99,6 +99,6 @@
 
     // Custom globals, from http://docs.meteor.com, in the order they appear there
     "globals"       : {
-        "Drop"      : false     // HubSpot's Drop libary
+        "Tether"      : false   // HubSpot's Tether libary
     }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,18 @@
 # SelectionMenu changelog
 
+## 2015-08-30, v3.2.0
+
+* drop dependency on Drop, use Tether directly
+* deprecate `menuHTML` in favor of `content`
+
+
 ## 2015-07-29, v3.1.0
 
 * using [HubSpot's Drop](http://github.hubspot.com/drop/) library for better positioning
 * this is a pre-release before dropping Drop and using [Tether](http://github.hubspot.com/tether/) directly
-* updated iDoRecall demo text instead of the Lorem Ipsum
+* update iDoRecall demo text instead of the Lorem Ipsum
 
 
 ## 2015-06-03, v2.0.1
 
-* revamped [Molily's library](https://github.com/molily/selectionmenu)
+* revamp [Molily's library](https://github.com/molily/selectionmenu)
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Automated cross-browser testing with Selenium driven by Node.js gracefully provi
 
 The motivation for creating this module was having a sleek contextual selection mechanism in the Chrome extension for [iDoRecall](https://idorecall.com). 
 
-This module was inspired by [Mathias Schäfer's work from 2011](https://github.com/molily/selectionmenu). It was brought up to date with modern browsers (Chrome, Firefox, Safari, Opera, IE9+) and the AMD module pattern, then revamped to use [HubSpot's excellent Drop library](http://github.hubspot.com/drop/) for better positioning. A neat trick, detecting the direction of the selection (forward vs. backward), was inspired by [Xavier Damman](https://github.com/xdamman/)'s [selection-sharer](https://github.com/xdamman/selection-sharer).
+This module was inspired by [Mathias Schäfer's work from 2011](https://github.com/molily/selectionmenu). It was brought up to date with modern browsers (Chrome, Firefox, Safari, Opera, IE9+) and the AMD module pattern, then revamped to use [HubSpot's Tether library](http://github.hubspot.com/tether/) for better positioning. A neat trick, detecting the direction of the selection (forward vs. backward), was inspired by [Xavier Damman](https://github.com/xdamman/)'s [selection-sharer](https://github.com/xdamman/selection-sharer).
 
 The idea and the implementation originally resemble the selection context menu on nytimes.com, but the script is way simpler and easier to integrate. 
 
@@ -43,7 +43,8 @@ Create an instance of SelectionMenu by calling `new SelectionMenu`.
 Pass an object literal with the following options:
 
 * `container` (DOM element): The element where the copy event is observed. Normally that's the main text container.
-* `menuHTML` (string): A string of HTML for the menu e.g. a list of links.
+* `content` (string or DOM element): An HTML string for the menu, or a DOM element containing the menu. If the element was `hidden` or had `display: none`, we'll show and hide it appropriately.
+* `menuHTML` (string): *DEPRECATED* - use `content` instead. A string of HTML for the menu, such as list of links. Typically obtained via `.innerHTML`. TODO or get it from a textarea like Webix
 * `handler` (function): A handler function which is called when the user clicks on the menu. Use the passed click event to access the click link and respond to the user's action.
 * `minlength` (number, optional): Only display the menu if the selected text has at least this length. Defaults to 5 characters.
 * `maxlength` (number, optional): Only display the menu if the selected text is at most this long. Defaults to `Infinity`.
@@ -115,7 +116,7 @@ new SelectionMenu({
 
 ## Browser compatibility
 
-The script uses the [W3C DOM Range](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html), which is [available in modern browsers](https://developer.mozilla.org/en-US/docs/Web/API/Range): IE9+, Chrome, Firefox, Safari, Opera. HubSpot's Drop library is based on [Tether, which does not support IE8 for good reasons](http://github.hubspot.com/tether/overview/why_we_dont_support_ie_8/).
+The script uses the [W3C DOM Range](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html), which is [available in modern browsers](https://developer.mozilla.org/en-US/docs/Web/API/Range): IE9+, Chrome, Firefox, Safari, Opera. HubSpot's [Tether library does not support IE8 for good reasons](http://github.hubspot.com/tether/overview/why_we_dont_support_ie_8/).
 
 
 ## Known issues
@@ -130,7 +131,7 @@ The script uses the [W3C DOM Range](http://www.w3.org/TR/DOM-Level-2-Traversal-R
 ## Upcoming features
 
 * Automatically align left or right the menu arrow if it was created near the left or right border of the container. For now it's always centered.
-* Drop dependency on Drop and use Tether directly
+* Pop up the menu even if the mouseup occurs outside of the container, e.g. if the user drags from the left and releases the button past the right edge of the container
 
 
 ## License and copyright

diff --git a/demos/iDoRecall-menu.css b/demos/iDoRecall-menu.css
@@ -1,20 +1,18 @@
-/* div. so as not to target the span.selection-menu that Drop creates */
-div.selection-menu {
+.selection-menu {
   font: 20px/100% Roboto, sans-serif;
-  background: #464646;
   color: white;
   text-transform: uppercase;
-  position: relative;
+  position: absolute;
   padding: 0;
   min-width: 388px;
 }
-div.selection-menu img {
+.selection-menu img {
   width: 37px;
 }
-div.selection-menu:hover {
+.selection-menu:hover {
   color: #B3B3B3;
 }
-div.selection-menu ul {
+.selection-menu ul {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -24,7 +22,7 @@ div.selection-menu ul {
   margin: 0;
   padding: 0;
 }
-div.selection-menu li {
+.selection-menu li {
   cursor: pointer;
   display: inline-block;
   padding: .75em 1em;
@@ -33,10 +31,10 @@ div.selection-menu li {
   -webkit-touch-callout: none;
   -moz-user-select: none;
 }
-div.selection-menu li.shortcut {
+.selection-menu li.shortcut {
   font-weight: bold;
 }
-div.selection-menu li:first-child {
+.selection-menu li:first-child {
   border: none;
   padding: 0 .4em;
   /* or padding 0 & margin auto .4em but the hover selection is smaller */
@@ -46,46 +44,32 @@ div.selection-menu li:first-child {
           align-self: center;
   /* For IE10; Chrome acts correctly on margin+padding alone */
 }
-div.selection-menu li a {
+.selection-menu li a {
   display: inline-block;
 }
-div.selection-menu li:hover {
+.selection-menu li:hover {
   background: #3FA9F5;
   color: white;
 }
 /* don't highlight the image */
-div.selection-menu li:first-child:hover {
+.selection-menu li:first-child:hover {
   background: transparent;
 }
-.drop-element,
-.drop-element:after,
-.drop-element:before,
-.drop-element *,
-.drop-element *:after,
-.drop-element *:before {
+.tether-smenu-element,
+.tether-smenu-element:after,
+.tether-smenu-element:before,
+.tether-smenu-element *,
+.tether-smenu-element *:after,
+.tether-smenu-element *:before {
   box-sizing: border-box;
 }
-.drop-element {
-  position: absolute;
-  display: none;
-}
-.drop-element.drop-open {
-  display: block;
-}
-.drop-element.drop-theme-idr {
-  max-width: 100%;
-  max-height: 100%;
-  background: transparent;
-}
-.drop-element.drop-theme-idr .drop-content {
+.tether-smenu-element > * {
   position: relative;
   background: #464646;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
   -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
   filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
 }
-.drop-element.drop-theme-idr .drop-content:before {
+.tether-smenu-element > *:before {
   content: "";
   display: block;
   position: absolute;
@@ -95,102 +79,102 @@ div.selection-menu li:first-child:hover {
   border-width: 16px;
   border-style: solid;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-center .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-center > ul {
   margin-bottom: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-center .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-center > ul:before {
   top: 100%;
   left: 50%;
   margin-left: -16px;
   border-top-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-center .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-center > * {
   margin-top: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-center .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-center > *:before {
   bottom: 100%;
   left: 50%;
   margin-left: -16px;
   border-bottom-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-right.drop-element-attached-middle .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-right.tether-smenu-element-attached-middle > * {
   margin-right: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-right.drop-element-attached-middle .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-right.tether-smenu-element-attached-middle > *:before {
   left: 100%;
   top: 50%;
   margin-top: -16px;
   border-left-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-left.drop-element-attached-middle .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-left.tether-smenu-element-attached-middle > * {
   margin-left: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-left.drop-element-attached-middle .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-left.tether-smenu-element-attached-middle > *:before {
   right: 100%;
   top: 50%;
   margin-top: -16px;
   border-right-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-left.tether-smenu-target-attached-bottom > * {
   margin-top: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-left.tether-smenu-target-attached-bottom > *:before {
   bottom: 100%;
   left: 16px;
   border-bottom-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-right.tether-smenu-target-attached-bottom > * {
   margin-top: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-right.tether-smenu-target-attached-bottom > *:before {
   bottom: 100%;
   right: 16px;
   border-bottom-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-left.tether-smenu-target-attached-top > * {
   margin-bottom: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-left.tether-smenu-target-attached-top > *:before {
   top: 100%;
   left: 16px;
   border-top-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-right.tether-smenu-target-attached-top > * {
   margin-bottom: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-right.tether-smenu-target-attached-top > *:before {
   top: 100%;
   right: 16px;
   border-top-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-right.tether-smenu-target-attached-left > * {
   margin-right: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-right.tether-smenu-target-attached-left > *:before {
   top: 16px;
   left: 100%;
   border-left-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-left.tether-smenu-target-attached-right > * {
   margin-left: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-top.tether-smenu-element-attached-left.tether-smenu-target-attached-right > *:before {
   top: 16px;
   right: 100%;
   border-right-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-right.tether-smenu-target-attached-left > * {
   margin-right: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-right.tether-smenu-target-attached-left > *:before {
   bottom: 16px;
   left: 100%;
   border-left-color: #464646;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-left.tether-smenu-target-attached-right > * {
   margin-left: 16px;
 }
-.drop-element.drop-theme-idr.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before {
+.tether-smenu-element.tether-smenu-element-attached-bottom.tether-smenu-element-attached-left.tether-smenu-target-attached-right > *:before {
   bottom: 16px;
   right: 100%;
   border-right-color: #464646;