Annotation drawer / all displays can access the reading text

[amandavisconti]

Mobile Sliding Menu module loads the view correctly, but the Highlighted Annos module ceases to work when it's on. [x ] Get highlighted annos module working with drawer (just needed duplicate instance of annosidebar in page layout removed) [x] Icon opens when clicked, closes when clicked again (or anywhere else on page) [x] Mmenu module only loads on book content type pages! [x] Get rid of weird second racing overlay as drawer opens (Mmenu Options / mm-slide was causing this) [x] Get drawer defaulting open so people know it's there AND/OR get drawer defaulting open on widescreens

[amandavisconti]

Oh boy! Highlighted Annos module works after removing the duplicate annosidebar from the book page layout. Now it's just styling and gesture-testing. [later edit: lol]

To make whole page shift over (instead of menu sliding out on top) Turn off MMENU OPTIONS/ MMenu Slide checkbox MMENU CONFIGURATION / Off-Canvas (Add-On) / pageSelector = .annotator-wrapper (default is body > div)

Lots of good demos and documentation here: http://mmenu.frebsite.nl/documentation/addons/off-canvas.html

[amandavisconti]

Working on getting drawer defaulting open so people know it's there AND/OR get drawer defaulting open on widescreen (note: having off-canvas turned on might be conflicting w/the CSS+JS widescreen fix): [x] Check off-canvas is not enabled [x] Add widescreen CSS. For now, appended it inside a @media min-width 900 to custom.css; switched a few lines to get in on right instead of left side. Works (changes depending on browser width) except that #annoclicker click-to-close doesn't work (needed on smaller widths). [n/a] Add widescreen extension to JS CSS: theme HTML header, theme .info JS: mmenu module/js/mmenu.js, or libraries/mmenu/main/src/js/jquery.mmenu.min.all.js

[amandavisconti]

I've got this partially working; widescreen CSS obviously works fine. Still need to enable the extension, which will hopefully complete the final piece of differentiating behavior between wide and small screens.

Using with #my-menu didn't work anywhere, but it's probably not the right selector. Trying: [x] #annoclicker [x] #mmenu_right [x] #mm-mmenu_right (check Firebug for clone ID) [x] .mm-menu [x] Try loading in header AFTER template script add-in. [x] Try cloning the menu [x] Try on clean vanilla Drupal install (and keep on left instead of right side for clarity) [x] Try Responsive Menus instead (all types broke annosidebar) Sidr (drawer) => breaks annosidebar (may need to fix selector in Highlighted Annos module?) codrops' Google Nexus (always sidebar) Mean Menu (generic hamburger)

Change probably needs to be made via library, so doesn't need to be Drupal-module-specific This page suggests the script can be added right into the HTML header, although Firebug doesn't like the $ in $(document).ready. This is resolved by using jQuery in place of $, but mmenu module still isn't hearing the extension JS.

[amandavisconti]

Started testing mmenu on a fresh Drupal install at local/IU.com. Adding the widescreen CSS and turning off-canvas ON produces:

1. Screen smaller than 900px: default no drawer display, click to open in free space to side of content, NO click to close; drag to open AND click to close
2. Screen larger than 900px: default no drawer display, click to open AND close for slide-over content, or drag to open only (no close)

= click preferred over drag (also more visually intuitive)

Options:

1. Using just the widescreen CSS could work, if I could get large screens to show the drawer as default instead of needing click to open.
2. Another option is turning off-canvas OFF for widescreens and ON for smaller (see http://mmenu.frebsite.nl/on-and-off-canvas.html)
3. Another option is using https://www.drupal.org/node/2324139 to "Enable or disable mmenu by conditions", clone the menu and have one menu for wide and one for small

[amandavisconti]

Moved widescreen CSS's

#mm-blocker {
display: none !important; 
}

to main custom.css (i.e. out of media query) as this allows users to continue selecting highlights and annotating text when the menu is out.

[amandavisconti]

Widescreen demo (non-Drupal): http://mmenu.frebsite.nl/demo/index.html?demo=widescreen (uses the JS from the "widescreen" mmenu module extension).

CSS fix makes widescreen work:

     /* Keeps menu visible on widescreens */
    .mm-menu.mm-front, .mm-menu.mm-next {
    -webkit-transform: none !important;
      -moz-transform: none !important;
      -ms-transform: none !important;
      -o-transform: none !important;
      transform: none !important;
    }

Also need to display: none #annoclicker for widescreen.

Widescreen (>1000px): menu always visible next to text Smallscreen (<1000px): click to slide menu over text (text remains accessible), needs click-to-close

[amandavisconti]

[x] Institute click-to-close on smallscreen. This is directly caused by removal of mm-blocker overlay, which is what you click on to close. If you can find where in the JS this is set and change it to #annoclicker, we'll be cooking with petrol. [x] Despite statement that any # link to the page itself will function as a close button when clicked, changing #annoclicker to <div id="annoclicker"><a href="#"></a></div> did not work. ("The plugin also automatically binds a click event that closes the menu to every A element that links to the page.") [x] Change from click to drag and see if works in all four instances? Didn't help with getting closed, but I'll leave both drag and click turned on so tablet/phone users can gesture drag (hopefully). [X] Turn #mm-blocker into a small close button? Much easier and cleaner than replacing #mm-blocker with #annoclicker in various JS. Just needs styling now, but it works! [unexplored option] Try to use following to create a closing button:

    <script type="text/javascript">
       $(document).ready(function() {
          $("#my-menu").mmenu({
             // Options
          });
          var API = $("#my-menu").data( "mmenu" );

          $("#my-button").click(function() {
             API.close();
          });
       });
    </script>

[amandavisconti]

Drawer functionality is complete!

• Widescreen (>1000px): menu always visible next to text
• Smallscreen (<1000px): click #annoclicker or drag to slide menu over text (text remains accessible), click ##mm-blocker to close

[x] Styling #mm-blocker as close icon. Current difficulty: z-index isn't working to place the icon over the mmenu (between 0 and 1 flips; even over 9000, so this isn't a layer precedence issue), possible because of how the overlay/UI blocker code is written or order deployed. Found rogue CSS in module files, reduced from z-index 10000 to 1.

Stopped between switching back from right menu to left. [x] Add .node-type-book to media query so that widescreen only happens on book pages!

[amandavisconti]

111 (minipager breaking drawer+Highlighted Annos) fixed by displaying all, but now Highlighted Annos isn't working—places correct annos at top of view but displays rest of annos on page beneath.

This was fixed by removing "sort by post date (ascending)" from the view.

[amandavisconti]

Moving remaining tasks to #130 and closing