Sidebar Positioning

CHANGES.rst

@@ -2,10 +2,13 @@ Changelog
 =========
 
 
-1.0.0b2 (unreleased)
+1.1.0b2 (unreleased)
 --------------------
 
-- Nothing changed yet.
+Added:
+
+- Added option to trigger the sidebar from left and right side of screen. #30
+  [netroxen
 
 
 1.0.0b1 (2019-08-14)

setup.py

@@ -14,7 +14,7 @@
 
 setup(
     name='collective.sidebar',
-    version='1.0.0b2.dev0',
+    version='1.1.0b2.dev0',
     description="A sidebar for Plone to consolidate toolbar and navigation.",
     long_description=long_description,
     classifiers=[

src/collective/sidebar/browser/static/sidebar.js

@@ -1,28 +1,52 @@
-(function($) {
+(function ($) {
   'use strict'; // Start of use strict
 
-  $(document).ready(function() {
-
-    // Add burger icon to navigation
+  function nearTo($element, distance, side, event) {
+    var left = $element.offset().left;
+    var loffset = left + distance;
+    var right = left + $element.width();
+    var roffset = right - distance;
+    var x = event.pageX;
+    if (side == 'left') {
+      return x < loffset;
+    };
+    if (side == 'right') {
+      return x > roffset;
+    };
+  };
+
+  $(document).ready(function () {
+
+    // Burger Icon
     $('#portal-globalnav').prepend('<li id=\"portaltab-burger-menu\"><i class=\"glyphicon glyphicon-menu-hamburger\" /></li>');
 
     // Mouse
-    $('body').on('mousemove',function(event) {
-      if (event.pageX < 20) {
-        $('body').attr('data-with-sidebar', 'true');
-      }
+    $('body').mousemove(function (event) {
+      var nav = $('#portal-navigation');
+      var offset = 10;
+      if (nav.hasClass('sidebar-left')) {
+        var nearby = nearTo(nav, offset, 'left', event);
+        if (nearby) {
+          $('body').attr('data-with-sidebar', 'true');
+        };
+      } else {
+        var nearby = nearTo(nav, offset, 'right', event);
+        if (nearby) {
+          $('body').attr('data-with-sidebar', 'true');
+        };
+      };
     });
 
     // Burger
 
-    $('#portaltab-burger-menu').click(function(e) {
+    $('#portaltab-burger-menu').click(function (e) {
       e.preventDefault();
       $('body').attr('data-with-sidebar', 'true');
     });
 
     // Sidebar Cover
 
-    $('#portal-navigation-cover').click(function(e) {
+    $('#portal-navigation-cover').click(function (e) {
       e.preventDefault();
       $('body').attr('data-with-sidebar', '');
     });

src/collective/sidebar/browser/static/sidebar.less

@@ -34,12 +34,27 @@
 
 #portal-navigation {
   height: 100vh;
-  left: 0;
   position: fixed;
   top: 0;
   visibility: hidden;
   z-index: 999;
 
+  &.sidebar-left {
+    left: 0;
+
+    .menu {
+      transform: translate3d(-250px, 0, 0);
+    }
+  }
+
+  &.sidebar-right {
+    right: 0;
+
+    .menu {
+      transform: translate3d(250px, 0, 0);
+    }
+  }
+
   ::-webkit-scrollbar-track {
     background-color: transparent;
     border: 0;
@@ -64,7 +79,6 @@
     overflow-y: scroll;
     padding: 30px;
     position: relative;
-    transform: translate3d(-250px, 0, 0);
     width: 250px;
     will-change: transform;
     z-index: 90;

src/collective/sidebar/browser/templates/sidebar.pt

@@ -11,7 +11,9 @@
        tal:define="items view/get_items;
                    back view/get_back;
                    token context/@@authenticator/token;
-                   token_arg python:'&_authenticator=' + token"
+                   token_arg python:'&_authenticator=' + token;
+                   sidebar_position python:context.portal_registry['collective.sidebar.sidebar_position']"
+       class="${python:'sidebar-right' if sidebar_position == 'right' else 'sidebar-left'}"
        i18n:domain="collective.sidebar">
 
     <div class="menu">

src/collective/sidebar/controlpanel/config.py

@@ -0,0 +1,13 @@
+# -*- coding: utf-8 -*-
+
+from collective.sidebar import _
+from zope.schema.vocabulary import SimpleTerm
+from zope.schema.vocabulary import SimpleVocabulary
+
+
+positionTerms = [
+    SimpleTerm(value=u'left', title=_(u'choice_left', default=u'Left')),
+    SimpleTerm(value=u'right', title=_(u'choice_right', default=u'Right')),
+]
+
+positionVocabulary = SimpleVocabulary(positionTerms)

src/collective/sidebar/controlpanel/controlpanel.py

@@ -1,5 +1,6 @@
 # -*- coding: utf-8 -*-
 
+from .config import positionVocabulary
 from collective.sidebar import _
 from plone.app.registry.browser.controlpanel import ControlPanelFormWrapper
 from plone.app.registry.browser.controlpanel import RegistryEditForm
@@ -17,7 +18,10 @@ class IControlPanel(Interface):
         ),
         description=_(
             u'controlpanel_sidebar_show_root_nav_description',
-            default=(u'When enabled, the sidebar will display the root level navigation.'),  # noqa: 501
+            default=(
+                u'When enabled, the sidebar will display '
+                u'the root level navigation.'
+            ),
         ),
         required=False,
         default=False,
@@ -30,7 +34,10 @@ class IControlPanel(Interface):
         ),
         description=_(
             u'controlpanel_sidebar_show_actions_description',
-            default=(u'Show actions section including object buttons for cut, copy, paste, etc.'),  # noqa: 501
+            default=(
+                u'Show actions section including object '
+                u'buttons for cut, copy, paste, etc.'
+            ),
         ),
         required=False,
         default=True,
@@ -56,7 +63,10 @@ class IControlPanel(Interface):
         ),
         description=_(
             u'controlpanel_sidebar_enable_collapse_description',
-            default=(u'When enabled, the sidebar sections can be collapsed. This feature is only available when cookies are enabled.'),  # noqa: 501
+            default=(
+                u'When enabled, the sidebar sections can be collapsed. '
+                u'This feature is only available when cookies are enabled.'
+            ),
         ),
         required=False,
         default=False,
@@ -68,16 +78,37 @@ class IControlPanel(Interface):
         description=_(
             u'controlpanel_sidebar_choose_icon_font_description',
             default=(
-                u'When you installed a different icon font, you can tell '
-                u'sidebar here to use it. For Fontello we assume you set '
-                u'"icon" as font name. '
-                u'Caution: This does not install the icon font!')
+                u'When a different icon font is installed, you can tell the '
+                u'sidebar to use it. For Fontello we assume you\'ve set '
+                u'\"icon\" as the font prefix. '
+                u'Note: This does not install the icon font!')
+        ),
+        values=(
+            'Glyphicons',
+            'Fontello',
+            'Font Awesome',
+            'Font Awesome Pro',
+            'Font Awesome Light',
+            'Font Awesome Duotone',
         ),
-        values=('Glyphicons', 'Fontello', 'Font Awesome', 'Font Awesome Pro', 'Font Awesome Light', 'Font Awesome Duotone'),  # noqa: 501
         default='Glyphicons',
         required=True
     )
 
+    sidebar_position = schema.Choice(
+        title=_(
+            u'controlpanel_sidebar_sidebar_position_title',
+            default='Sidebar Position',
+        ),
+        description=_(
+            u'controlpanel_sidebar_sidebar_position_description',
+            default=u'Display the sidebar on the left or right.',
+        ),
+        vocabulary=positionVocabulary,
+        required=True,
+        default='left',
+    )
+
 
 class ControlPanelEditForm(RegistryEditForm):
     schema = IControlPanel

src/collective/sidebar/locales/collective.sidebar.pot

@@ -4,7 +4,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
-"POT-Creation-Date: 2019-08-14 10:39+0000\n"
+"POT-Creation-Date: 2019-08-30 11:43+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI +ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -62,6 +62,16 @@ msgstr ""
 msgid "back"
 msgstr ""
 
+#. Default: "Left"
+#: collective/sidebar/controlpanel/config.py
+msgid "choice_left"
+msgstr ""
+
+#. Default: "Right"
+#: collective/sidebar/controlpanel/config.py
+msgid "choice_right"
+msgstr ""
+
 #. Default: "Collective Sidebar"
 #: collective/sidebar/controlpanel/controlpanel.py
 msgid "collective_sidebar_title"
@@ -72,7 +82,7 @@ msgstr ""
 msgid "contents"
 msgstr ""
 
-#. Default: "When you installed a different icon font, you can tell sidebar here to use it. For Fontello we assume you set \"icon\" as font name. Caution: This does not install the icon font!"
+#. Default: "When a different icon font is installed, you can tell the sidebar to use it. For Fontello we assume you've set \"icon\" as the font prefix. Note: This does not install the icon font!"
 #: collective/sidebar/controlpanel/controlpanel.py
 msgid "controlpanel_sidebar_choose_icon_font_description"
 msgstr ""
@@ -122,6 +132,16 @@ msgstr ""
 msgid "controlpanel_sidebar_show_root_nav_title"
 msgstr ""
 
+#. Default: "Display the sidebar on the left or right."
+#: collective/sidebar/controlpanel/controlpanel.py
+msgid "controlpanel_sidebar_sidebar_position_description"
+msgstr ""
+
+#. Default: "Sidebar Position"
+#: collective/sidebar/controlpanel/controlpanel.py
+msgid "controlpanel_sidebar_sidebar_position_title"
+msgstr ""
+
 #. Default: "Add item to default page"
 #: collective/sidebar/browser/sidebar.py
 msgid "default_page_folder"