refactor repeated 'drawer' pattern

www/code/inner.js

@@ -85,31 +85,10 @@ define([
         var $content = $(h('div.cp-toolbar-drawer-content', {
             tabindex: 1
         })).hide();
-        $theme.click(function () {
-            $content.toggle();
-            $theme.removeClass('cp-toolbar-button-active');
-            if ($content.is(':visible')) {
-                $theme.addClass('cp-toolbar-button-active');
-                $content.focus();
-                var wh = $(window).height();
-                var topPos = $theme[0].getBoundingClientRect().bottom;
-                $content.css('max-height', Math.floor(wh - topPos - 1)+'px');
-            }
-        });
-        var onBlur = function (e) {
-            if (e.relatedTarget) {
-                var $relatedTarget = $(e.relatedTarget);
 
-                if ($relatedTarget.is('.cp-toolbar-drawer-button')) { return; }
-                if ($relatedTarget.parents('.cp-toolbar-drawer-content').length) {
-                    $relatedTarget.blur(onBlur);
-                    return;
-                }
-            }
-            $theme.removeClass('cp-toolbar-button-active');
-            $content.hide();
-        };
-        $content.blur(onBlur).appendTo($theme);
+        // set up all the necessary events
+        UI.createDrawer($theme, $content);
+
         framework._.toolbar.$theme = $content;
         framework._.toolbar.$bottomL.append($theme);
     };

www/common/common-interface.js

@@ -1364,5 +1364,38 @@ define([
         };
     };
 
+    /*  Given two jquery objects (a 'button' and a 'drawer')
+        add handlers to make it such that clicking the button
+        displays the drawer contents, and blurring the button
+        hides the drawer content. Used for toolbar buttons at the moment.
+    */
+    UI.createDrawer = function ($button, $content) {
+        $button.click(function () {
+            $content.toggle();
+            $button.removeClass('cp-toolbar-button-active');
+            if ($content.is(':visible')) {
+                $button.addClass('cp-toolbar-button-active');
+                $content.focus();
+                var wh = $(window).height();
+                var topPos = $button[0].getBoundingClientRect().bottom;
+                $content.css('max-height', Math.floor(wh - topPos - 1)+'px');
+            }
+        });
+        var onBlur = function (e) {
+            if (e.relatedTarget) {
+                var $relatedTarget = $(e.relatedTarget);
+
+                if ($relatedTarget.is('.cp-toolbar-drawer-button')) { return; }
+                if ($relatedTarget.parents('.cp-toolbar-drawer-content').length) {
+                    $relatedTarget.blur(onBlur);
+                    return;
+                }
+            }
+            $button.removeClass('cp-toolbar-button-active');
+            $content.hide();
+        };
+        $content.blur(onBlur).appendTo($button);
+    };
+
     return UI;
 });

www/common/toolbar.js

@@ -91,7 +91,6 @@ MessengerUI, Messages) {
         var $file = $toolbar.find('.'+BOTTOM_LEFT_CLS);
 
         if (!config.hideDrawer) {
-            // XXX a lot of this logic is duplicated (code, slide, here)
             var $drawer = $(h('button.' + FILE_CLS, [
                 h('i.fa.fa-file-o'),
                 h('span.cp-button-name', Messages.toolbar_file)
@@ -99,30 +98,8 @@ MessengerUI, Messages) {
             var $drawerContent = $('<div>', {
                 'class': DRAWER_CLS,
                 'tabindex': 1
-            }).appendTo($drawer).hide();
-            $drawer.click(function () {
-                $drawerContent.toggle();
-                $drawer.removeClass('cp-toolbar-button-active');
-                if ($drawerContent.is(':visible')) {
-                    $drawer.addClass('cp-toolbar-button-active');
-                    $drawerContent.focus();
-                    var wh = $(window).height();
-                    var topPos = $drawer[0].getBoundingClientRect().bottom;
-                    $drawerContent.css('max-height', Math.floor(wh - topPos - 1)+'px');
-                }
-            });
-            var onBlur = function (e) {
-                if (e.relatedTarget) {
-                    if ($(e.relatedTarget).is('.cp-toolbar-drawer-button')) { return; }
-                    if ($(e.relatedTarget).parents('.'+DRAWER_CLS).length) {
-                        $(e.relatedTarget).blur(onBlur);
-                        return;
-                    }
-                }
-                $drawer.removeClass('cp-toolbar-button-active');
-                $drawerContent.hide();
-            };
-            $drawerContent.blur(onBlur);
+            }).hide();
+            UI.createDrawer($drawer, $drawerContent);
         }
 
         // The 'notitle' class removes the line added for the title with a small screen

www/slide/inner.js

@@ -100,7 +100,6 @@ define([
         });
     };
 
-    // XXX this function is a duplicate of /code/
     var mkThemeButton = function (framework) {
         var $theme = $(h('button.cp-toolbar-appmenu', [
             h('i.cptools.cptools-palette'),
@@ -109,29 +108,10 @@ define([
         var $content = $(h('div.cp-toolbar-drawer-content', {
             tabindex: 1
         })).hide();
-        $theme.click(function () {
-            $content.toggle();
-            $theme.removeClass('cp-toolbar-button-active');
-            if ($content.is(':visible')) {
-                $theme.addClass('cp-toolbar-button-active');
-                $content.focus();
-                var wh = $(window).height();
-                var topPos = $theme[0].getBoundingClientRect().bottom;
-                $content.css('max-height', Math.floor(wh - topPos - 1)+'px');
-            }
-        });
-        var onBlur = function (e) {
-            if (e.relatedTarget) {
-                if ($(e.relatedTarget).is('.cp-toolbar-drawer-button')) { return; }
-                if ($(e.relatedTarget).parents('.cp-toolbar-drawer-content').length) {
-                    $(e.relatedTarget).blur(onBlur);
-                    return;
-                }
-            }
-            $theme.removeClass('cp-toolbar-button-active');
-            $content.hide();
-        };
-        $content.blur(onBlur).appendTo($theme);
+
+        // set up all the necessary events
+        UI.createDrawer($theme, $content);
+
         framework._.toolbar.$theme = $content;
         framework._.toolbar.$bottomL.append($theme);
     };