introducing sidebar toggling (js); all sources moved to src folder

.jshintrc

@@ -0,0 +1,23 @@
+{
+    "camelcase"    : true,
+    "curly"        : true,
+    "eqeqeq"       : true,
+    "forin"        : true,
+    "indent"       : 4,
+    "latedef"      : true,
+    "newcap"       : true,
+    "nonew"        : false,
+    "quotmark"     : "double",
+    "undef"        : true,
+    "unused"       : true,
+    "strict"       : true,
+    "maxparams"    : 3,
+    "maxdepth"     : 3,
+    "maxstatements": 16,
+    "maxlen"       : 80,
+    "shadow"       : false,
+    "browser"      : true,
+    "jquery"       : true,
+    "globals"      : {
+    }
+}

Gruntfile.js

@@ -1,6 +1,8 @@
 module.exports = function(grunt) {
 
   grunt.initConfig({
+    src: "src/",
+
     sass: {
       options: {
         sourceMap: false,
@@ -8,29 +10,51 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'stylesheets/application.css': 'sass/application.scss'
+          'stylesheets/application.css': '<%= src %>sass/application.scss'
         }
       },
       redmine_backlogs: {
         files: {
-          'plugins/redmine_backlogs/global.css':         'sass/plugins/redmine_backlogs/global.scss',
-          'plugins/redmine_backlogs/master_backlog.css': 'sass/plugins/redmine_backlogs/master_backlog.scss',
-          'plugins/redmine_backlogs/statistics.css':     'sass/plugins/redmine_backlogs/statistics.scss',
-          'plugins/redmine_backlogs/taskboard.css':      'sass/plugins/redmine_backlogs/taskboard.scss'
+          'plugins/redmine_backlogs/global.css':
+            '<%= src %>sass/plugins/redmine_backlogs/global.scss',
+          'plugins/redmine_backlogs/master_backlog.css':
+            '<%= src %>sass/plugins/redmine_backlogs/master_backlog.scss',
+          'plugins/redmine_backlogs/statistics.css':
+            '<%= src %>sass/plugins/redmine_backlogs/statistics.scss',
+          'plugins/redmine_backlogs/taskboard.css':
+            '<%= src %>sass/plugins/redmine_backlogs/taskboard.scss'
         }
       }
     },
 
+    uglify: {
+      build: {
+        src: [
+          '<%= src %>javascripts/modules/*.js',
+          '<%= src %>javascripts/theme.js'
+        ],
+        dest: 'javascripts/theme.js'
+      }
+    },
+
     watch: {
       css: {
-        files: ['sass/**/*.scss'],
-        tasks: ['sass']
+        files: ['<%= src %>sass/**/*.scss'],
+        tasks: ['css']
+      },
+      js: {
+        files: ['<%= src %>javascripts/src/*.js'],
+        tasks: ['js']
       }
     }
   });
 
   grunt.loadNpmTasks('grunt-sass');
   grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks("grunt-contrib-uglify");
 
-  grunt.registerTask('default', ['sass']);
+  grunt.registerTask('css', ['sass']);
+  grunt.registerTask('js', ['uglify']);
+
+  grunt.registerTask('default', ['css', 'js']);
 };

javascripts/theme.js

@@ -0,0 +1 @@
+var PurpleMine=PurpleMine||{};PurpleMine.SidebarToggler=function(){"use strict";function a(){b=this,this.sidebarVisible=!0,this.sidebarHiding=null,this.$toggler=null,this.$main=$("#main"),this.$sidebar=$("#sidebar"),window.localStorage&&(this.sidebarVisible=null===localStorage.getItem("PurpleMine:sidebarHidden")),this.$sidebar.length>0&&!1===this.$main.hasClass("nosidebar")&&(this.buildButton(),this.bindKeyHandler()),!1===this.sidebarVisible&&this.hideSidebar(!0)}var b;return a.prototype.bindKeyHandler=function(){var a=document.getElementsByTagName("body")[0];window.onkeydown=function(c){a===c.target&&83===c.keyCode&&!1===c.ctrlKey&&!1===c.altKey&&!1===c.shiftKey&&b.toggleSidebar()}},a.prototype.buildButton=function(){var a,b="pl"===document.documentElement.lang?"Pokaż/ukryj panel boczny":"Toggle sidebar",c="sidebar-toggler";c+="left"===this.$sidebar.css("float")?" sidebar-toggler--left":" sidebar-toggler--right",a='<a href="javascript:;" class="'+c+'" title="'+b+'"></a>',this.$toggler=$(a),this.$main.append(this.$toggler),this.$toggler.on("click",this.toggleSidebar)},a.prototype.toggleSidebar=function(){b.sidebarVisible?b.hideSidebar():b.showSidebar()},a.prototype.hideSidebar=function(a){!0===a?this.$sidebar.addClass("sidebar-hiding sidebar-hidden"):(this.$sidebar.addClass("sidebar-hiding"),this.sidebarHiding=setTimeout(function(){b.$sidebar.addClass("sidebar-hidden")},500)),this.$toggler.addClass("sidebar-hidden"),this.sidebarVisible=!1,window.localStorage&&localStorage.setItem("PurpleMine:sidebarHidden","x")},a.prototype.showSidebar=function(){clearTimeout(this.sidebarHiding),this.$sidebar.removeClass("sidebar-hidden",0).removeClass("sidebar-hiding"),this.$toggler.removeClass("sidebar-hidden"),this.sidebarVisible=!0,window.localStorage&&localStorage.removeItem("PurpleMine:sidebarHidden")},a}(),$(function(){"use strict";new PurpleMine.SidebarToggler});

package.json

@@ -20,6 +20,7 @@
   "homepage": "https://github.com/HolonGlobe/PurpleMine2",
   "devDependencies": {
     "grunt": "^0.4.5",
+    "grunt-contrib-uglify": "^0.7.0",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-sass": "^0.18.0"
   }

src/javascripts/modules/SidebarToggler.js

@@ -0,0 +1,131 @@
+var PurpleMine = PurpleMine || {};
+
+PurpleMine.SidebarToggler = (function()
+{
+    "use strict";
+
+    var self; // Make it work for browsers without Function.prototype.bind
+
+    function SidebarToggler()
+    {
+        self = this;
+
+        this.sidebarVisible = true;
+        this.sidebarHiding  = null;
+        this.$toggler       = null;
+        this.$main          = $("#main");
+        this.$sidebar       = $("#sidebar");
+
+        if (window.localStorage)
+        {
+            this.sidebarVisible =
+                null === localStorage.getItem("PurpleMine:sidebarHidden");
+        }
+
+        if (this.$sidebar.length > 0 &&
+            false === this.$main.hasClass("nosidebar"))
+        {
+            this.buildButton();
+            this.bindKeyHandler();
+        }
+
+        if (false === this.sidebarVisible)
+        {
+            this.hideSidebar(true);
+        }
+    }
+
+    SidebarToggler.prototype.bindKeyHandler = function()
+    {
+        var body = document.getElementsByTagName("body")[0];
+
+        window.onkeydown = function(event)
+        {
+            if (body === event.target && 83 === event.keyCode && // "s"
+                false === event.ctrlKey && false === event.altKey &&
+                false === event.shiftKey)
+            {
+                self.toggleSidebar();
+            }
+        };
+    };
+
+    SidebarToggler.prototype.buildButton = function()
+    {
+        var togglerLabel = document.documentElement.lang === "pl" ?
+                            "Pokaż/ukryj panel boczny" :
+                            "Toggle sidebar",
+            togglerClass = "sidebar-toggler",
+            togglerHtml;
+
+        if ("left" === this.$sidebar.css("float"))
+        {
+            togglerClass += " sidebar-toggler--left";
+        }
+        else
+        {
+            togglerClass += " sidebar-toggler--right";
+        }
+
+        togglerHtml = "<a href=\"javascript:;\" class=\"" + togglerClass +
+                        "\" title=\"" + togglerLabel + "\"></a>";
+        this.$toggler = $(togglerHtml);
+
+        this.$main.append(this.$toggler);
+        this.$toggler.on("click", this.toggleSidebar);
+    };
+
+    SidebarToggler.prototype.toggleSidebar = function()
+    {
+        if (self.sidebarVisible)
+        {
+            self.hideSidebar();
+        }
+        else
+        {
+            self.showSidebar();
+        }
+    };
+
+    SidebarToggler.prototype.hideSidebar = function(immediate)
+    {
+        if (true === immediate)
+        {
+            this.$sidebar.addClass("sidebar-hiding sidebar-hidden");
+        }
+        else
+        {
+            this.$sidebar.addClass("sidebar-hiding");
+            this.sidebarHiding = setTimeout(function sidebarTimeout()
+            {
+                self.$sidebar.addClass("sidebar-hidden");
+            }, 500);
+        }
+
+        this.$toggler.addClass("sidebar-hidden");
+        this.sidebarVisible = false;
+
+        if (window.localStorage)
+        {
+            localStorage.setItem("PurpleMine:sidebarHidden", "x");
+        }
+    };
+
+    SidebarToggler.prototype.showSidebar = function()
+    {
+        clearTimeout(this.sidebarHiding);
+        this.$sidebar
+                .removeClass("sidebar-hidden", 0)
+                .removeClass("sidebar-hiding");
+
+        this.$toggler.removeClass("sidebar-hidden");
+        this.sidebarVisible = true;
+
+        if (window.localStorage)
+        {
+            localStorage.removeItem("PurpleMine:sidebarHidden");
+        }
+    };
+
+    return SidebarToggler;
+}());

src/javascripts/theme.js

@@ -0,0 +1,7 @@
+$(function()
+{
+    /* global PurpleMine */
+    "use strict";
+
+    new PurpleMine.SidebarToggler();
+});

src/sass/_variables.scss

@@ -13,9 +13,9 @@ $color-trackers:                true !default;
 $colored-issue:                 true !default;
 $use-gravatars:                 true !default;
 $use-font-awesome:              true !default;
-$hide-sidebar-on-screen-xs:     true !default;
 $issue-subject-large:           true !default;
 $bubble-journal-wiki-note:      true !default;
+$enable-sidebar-toggler:        true !default;
 
 
 //== Colors

src/sass/application.scss

@@ -36,3 +36,9 @@
 //
 
 @import "components/plugins";
+
+
+//== Built-in JavaScript plugins
+//
+
+@import "javascripts/sidebar-toggler";

src/sass/components/_content.scss

@@ -45,12 +45,6 @@
         }
     }
 
-    @if $hide-sidebar-on-screen-xs {
-        @media screen and (max-width: $screen-xs-max) {
-            display: none;
-        }
-    }
-
     .nosidebar & {
         width: 0;
         margin: 0;

src/sass/javascripts/_sidebar-toggler.scss

@@ -0,0 +1,121 @@
+@if $enable-sidebar-toggler {
+    $toggler-position-v:        1px;
+    $toggler-position-h:        1px;
+    $arrow-right:               "../images/bullet_arrow_right.png";
+    $arrow-left:                "../images/bullet_arrow_left.png";
+
+    @if $use-font-awesome {
+        $arrow-right:           $fa-var-caret-square-o-right;
+        $arrow-left:            $fa-var-caret-square-o-left;
+    }
+
+    #main {
+        position: relative;
+    }
+
+    #sidebar {
+        @if $fixed-layout {
+            opacity: 1;
+            @include transition(margin .5s, opacity .5s);
+        } @else {
+            @include transition(margin .5s);
+        }
+
+        &.sidebar-hiding {
+            @if $fixed-layout {
+                opacity: 0;
+            }
+            @if $sidebar-position == "left" {
+                margin-left: -$sidebar-width;
+            } @else {
+                margin-right: -$sidebar-width;
+            }
+        }
+
+        &.sidebar-hidden {
+            display: none;
+        }
+    }
+
+    .sidebar-toggler {
+        @include user-select(none);
+
+        display: block;
+        position: absolute;
+        top: $toggler-position-v;
+
+        @if $use-font-awesome {
+            @extend %fa-icon;
+            color: $gray-light;
+            line-height: 1;
+
+            &:before {
+                margin-right: 0;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                color: $gray;
+            }
+        } @else {
+            width: 15px;
+            height: 15px;
+            border-radius: $border-radius-base;
+            background-repeat: no-repeat;
+            background-position: center center;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: $gray-lighter;
+            }
+        }
+
+        @if $sidebar-position == "left" {
+            left: $toggler-position-h;
+
+            @if $use-font-awesome {
+                &:before {
+                    content: $arrow-left;
+                }
+            } @else {
+                background-image: url($arrow-left);
+            }
+        } @else {
+            right: $toggler-position-h;
+
+            @if $use-font-awesome {
+                &:before {
+                    content: $arrow-right;
+                }
+            } @else {
+                background-image: url($arrow-right);
+            }
+        }
+
+        &.sidebar-hidden {
+            @if $sidebar-position == "left" {
+                @if $use-font-awesome {
+                    &:before {
+                        content: $arrow-right;
+                    }
+                } @else {
+                    background-image: url($arrow-right);
+                }
+            } @else {
+                @if $use-font-awesome {
+                    &:before {
+                        content: $arrow-left;
+                    }
+                } @else {
+                    background-image: url($arrow-left);
+                }
+            }
+        }
+    }
+} @else {
+    .sidebar-toggler {
+        display: none;
+    }
+}