adminlte2-rails 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 10a368779e6b3e376e246f5de6875b7c07fad726
-  data.tar.gz: d9bce280e352957869e9fe3c3a075e40b2963f63
+  metadata.gz: c572cbc8c12791d3fc726536f67ad3c1507d0f77
+  data.tar.gz: d965133c397d915618115b5b843d55411305eb90
 SHA512:
-  metadata.gz: d56312bfb81b07322786648ab5d288aee303844e55e9d0453ad096400996ca87edb41421c1323e5889143f1cfb7571d28580f4985fe1d00755c84bed6c574e9f
-  data.tar.gz: 704ac14d33d0583da98c970c23757666c8f35b95932626b23c0e2fbc482596000197a40c48d7fbd21b4e9d0652ed5c10cd5c729a3bdac409eedd0837dcc24504
+  metadata.gz: 521396842262051e20941be07e7ce87e5f6ea14c2d020368a46183add93adc8ec36acf6fc0ab5a73def3cc812297be474e054228f8a3a82e0b4663a7fe35fab8
+  data.tar.gz: f70bfb63e519a53c90e4c2edae10902c278b8413fbdadc7b2748cf8aeded5c601de2894b9653636f511242ea31d0f9dab6fb103d22c875360c8428fe63c944a5

data/CHANGELOG.md

@@ -1,4 +1,10 @@
-## 0.0.4 (WIP)
+## 0.0.6 (WIP)
+
+## 0.0.5
+- Update HTML / JS / CSS to AdminLTE 2.1.0
+- Add Sidebar introduced in AdminteLTE 2.1.0
+
+## 0.0.4
 - Layout: add alert
 - Layout: Add controller / action name to body
 - New plugins:

data/lib/adminlte2/rails/version.rb

@@ -1,5 +1,5 @@
 module AdminLTE2
   module Rails
-    VERSION = '0.0.4'
+    VERSION = '0.0.5'
   end
 end

data/lib/generators/admin_lte2/templates/_admin_lte_2_header.html.erb

@@ -2,7 +2,12 @@
 <header class="main-header">
 
   <!-- Logo -->
-  <a href="/" class="logo"><b>Admin</b>LTE</a>
+  <a href="/" class="logo">
+    <!-- mini logo for sidebar mini 50x50 pixels -->
+    <span class="logo-mini"><b>A</b>LT</span>
+    <!-- logo for regular state and mobile devices -->
+    <span class="logo-lg"><b>Admin</b>LTE</span>
+  </a>
 
   <!-- Header Navbar -->
   <nav class="navbar navbar-static-top" role="navigation">
@@ -144,6 +149,9 @@
             </li>
           </ul>
         </li>
+        <li>
+          <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+        </li>
       </ul>
     </div>
   </nav>

data/lib/generators/admin_lte2/templates/_admin_lte_2_sidebar.html.erb

@@ -20,9 +20,9 @@
     <form action="#" method="get" class="sidebar-form">
       <div class="input-group">
         <input type="text" name="q" class="form-control" placeholder="Search..."/>
-                <span class="input-group-btn">
-                  <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
-                </span>
+        <span class="input-group-btn">
+          <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+        </span>
       </div>
     </form>
     <!-- /.search form -->
@@ -30,11 +30,11 @@
     <!-- Sidebar Menu -->
     <ul class="sidebar-menu">
       <li class="header">HEADER</li>
-      <!-- Optionally, you can add icons to the links -->
-      <li class="active"><a href="#"><span>Link</span></a><</li>
-      <li><a href="#"><span>Another Link</span></a></li>
+        <!-- Optionally, you can add icons to the links -->
+      <li class="active"><a href="#"><i class='fa fa-link'></i> <span>Link</span></a></li>
+      <li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li>
       <li class="treeview">
-        <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
+        <a href="#"><i class='fa fa-link'></i> <span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
         <ul class="treeview-menu">
           <li><a href="#">Link in level 2</a></li>
           <li><a href="#">Link in level 2</a></li>

data/lib/generators/admin_lte2/templates/admin_lte_2.html.erb

@@ -5,18 +5,18 @@
   <title>AdminLTE 2 | Dashboard</title>
   <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
-  <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+  <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
-  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
+  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
   <%= csrf_meta_tags %>
 </head>
 
-<body class="skin-blue fixed <%= params[:controller].parameterize %> <%= action_name %>">
+<body class="skin-blue sidebar-mini fixed <%= params[:controller].parameterize %> <%= action_name %>">
   <div class="wrapper">
 
     <%= render partial: 'layouts/admin_lte_2_header' %>
@@ -68,6 +68,67 @@
       <strong>Copyright &copy; 2015 <a href="#">Company</a>.</strong> All rights reserved.
     </footer>
 
+    <aside class="control-sidebar control-sidebar-dark">
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-home"></i></a></li>
+          <li class=""><a href="#control-sidebar-settings-tab" data-toggle="tab" aria-expanded="false"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane active" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class="control-sidebar-menu">
+              <li>
+                <a href="javascript::;">
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3>
+            <ul class="control-sidebar-menu">
+              <li>
+                <a href="javascript::;">
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked="">
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside>
+
+      <div class="control-sidebar-bg" style="position: fixed; height: auto;"></div>
+
   </div><!-- ./wrapper -->
 
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

data/vendor/assets/javascripts/app.js

@@ -7,7 +7,7 @@
  * @Author  Almsaeed Studio
  * @Support <http://www.almsaeedstudio.com>
  * @Email   <support@almsaeedstudio.com>
- * @version 2.0.3
+ * @version 2.1.0
  * @license MIT <http://opensource.org/licenses/MIT>
  */
 
@@ -41,12 +41,20 @@ $.AdminLTE.options = {
   navbarMenuSlimscroll: true,
   navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
   navbarMenuHeight: "200px", //The height of the inner menu
+  //General animation speed for JS animated elements such as box collapse/expand and
+  //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
+  //'fast', 'normal', or 'slow'
+  animationSpeed: 500,
   //Sidebar push menu toggle button selector
   sidebarToggleSelector: "[data-toggle='offcanvas']",
   //Activate sidebar push menu
   sidebarPushMenu: true,
   //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
   sidebarSlimScroll: true,
+  //Enable sidebar expand on hover effect for sidebar mini
+  //This option is forced to true if both the fixed layout and sidebar mini
+  //are used together
+  sidebarExpandOnHover: false,
   //BoxRefresh Plugin
   enableBoxRefresh: true,
   //Bootstrap.js tooltip
@@ -57,18 +65,28 @@ $.AdminLTE.options = {
   //choose to enable the plugin, make sure you load the script
   //before AdminLTE's app.js
   enableFastclick: true,
+  //Control Sidebar Options
+  enableControlSidebar: true,
+  controlSidebarOptions: {
+    //Which button should trigger the open/close event
+    toggleBtnSelector: "[data-toggle='control-sidebar']",
+    //The sidebar selector
+    selector: ".control-sidebar",
+    //Enable slide over content
+    slide: true
+  },
   //Box Widget Plugin. Enable this plugin
   //to allow boxes to be collapsed and/or removed
   enableBoxWidget: true,
   //Box Widget plugin options
   boxWidgetOptions: {
     boxWidgetIcons: {
-      //The icon that triggers the collapse event
-      collapse: 'fa fa-minus',
-      //The icon that trigger the opening event
-      open: 'fa fa-plus',
-      //The icon that triggers the removing event
-      remove: 'fa fa-times'
+      //Collapse icon
+      collapse: 'fa-minus',
+      //Open icon
+      open: 'fa-plus',
+      //Remove icon
+      remove: 'fa-times'
     },
     boxWidgetSelectors: {
       //Remove button selector
@@ -114,218 +132,457 @@ $.AdminLTE.options = {
   }
 };
 
-/* ----------------------
- * - AdminLTE Functions -
- * ----------------------
- * All AdminLTE functions are implemented below.
+/* ------------------
+ * - Implementation -
+ * ------------------
+ * The next block of code implements AdminLTE's
+ * functions and plugins as specified by the
+ * options above.
  */
+$(function () {
+  //Extend options if external options exist
+  if (typeof AdminLTEOptions !== "undefined") {
+    $.extend(true,
+            $.AdminLTE.options,
+            AdminLTEOptions);
+  }
 
-/* prepareLayout
- * =============
- * Fixes the layout height in case min-height fails.
- *
- * @type Object
- * @usage $.AdminLTE.layout.activate()
- *        $.AdminLTE.layout.fix()
- *        $.AdminLTE.layout.fixSidebar()
+  //Easy access to options
+  var o = $.AdminLTE.options;
+
+  //Set up the object
+  _init();
+
+  //Activate the layout maker
+  $.AdminLTE.layout.activate();
+
+  //Enable sidebar tree view controls
+  $.AdminLTE.tree('.sidebar');
+
+  //Enable control sidebar
+  if (o.enableControlSidebar) {
+    $.AdminLTE.controlSidebar.activate();
+  }
+
+  //Add slimscroll to navbar dropdown
+  if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
+    $(".navbar .menu").slimscroll({
+      height: o.navbarMenuHeight,
+      alwaysVisible: false,
+      size: o.navbarMenuSlimscrollWidth
+    }).css("width", "100%");
+  }
+
+  //Activate sidebar push menu
+  if (o.sidebarPushMenu) {
+    $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
+  }
+
+  //Activate Bootstrap tooltip
+  if (o.enableBSToppltip) {
+    $('body').tooltip({
+      selector: o.BSTooltipSelector
+    });
+  }
+
+  //Activate box widget
+  if (o.enableBoxWidget) {
+    $.AdminLTE.boxWidget.activate();
+  }
+
+  //Activate fast click
+  if (o.enableFastclick && typeof FastClick != 'undefined') {
+    FastClick.attach(document.body);
+  }
+
+  //Activate direct chat widget
+  if (o.directChat.enable) {
+    $(o.directChat.contactToggleSelector).on('click', function () {
+      var box = $(this).parents('.direct-chat').first();
+      box.toggleClass('direct-chat-contacts-open');
+    });
+  }
+
+  /*
+   * INITIALIZE BUTTON TOGGLE
+   * ------------------------
+   */
+  $('.btn-group[data-toggle="btn-toggle"]').each(function () {
+    var group = $(this);
+    $(this).find(".btn").on('click', function (e) {
+      group.find(".btn.active").removeClass("active");
+      $(this).addClass("active");
+      e.preventDefault();
+    });
+
+  });
+});
+
+/* ----------------------------------
+ * - Initialize the AdminLTE Object -
+ * ----------------------------------
+ * All AdminLTE functions are implemented below.
  */
-$.AdminLTE.layout = {
-  activate: function () {
-    var _this = this;
-    _this.fix();
-    _this.fixSidebar();
-    $(window, ".wrapper").resize(function () {
+function _init() {
+
+  /* Layout
+   * ======
+   * Fixes the layout height in case min-height fails.
+   *
+   * @type Object
+   * @usage $.AdminLTE.layout.activate()
+   *        $.AdminLTE.layout.fix()
+   *        $.AdminLTE.layout.fixSidebar()
+   */
+  $.AdminLTE.layout = {
+    activate: function () {
+      var _this = this;
       _this.fix();
       _this.fixSidebar();
-    });
-  },
-  fix: function () {
-    //Get window height and the wrapper height
-    var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
-    var window_height = $(window).height();
-    var sidebar_height = $(".sidebar").height();
-    //Set the min-height of the content and sidebar based on the
-    //the height of the document.
-    if ($("body").hasClass("fixed")) {
-      $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
-    } else {
-      if (window_height >= sidebar_height) {
-        $(".content-wrapper, .right-side").css('min-height', window_height - neg);
+      $(window, ".wrapper").resize(function () {
+        _this.fix();
+        _this.fixSidebar();
+      });
+    },
+    fix: function () {
+      //Get window height and the wrapper height
+      var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
+      var window_height = $(window).height();
+      var sidebar_height = $(".sidebar").height();
+      //Set the min-height of the content and sidebar based on the
+      //the height of the document.
+      if ($("body").hasClass("fixed")) {
+        $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
       } else {
-        $(".content-wrapper, .right-side").css('min-height', sidebar_height);
+        var postSetWidth;
+        if (window_height >= sidebar_height) {
+          $(".content-wrapper, .right-side").css('min-height', window_height - neg);
+          postSetWidth = window_height - neg;
+        } else {
+          $(".content-wrapper, .right-side").css('min-height', sidebar_height);
+          postSetWidth = sidebar_height;
+        }
+
+        //Fix for the control sidebar height
+        var controlSidebar = $($.AdminLTE.options.controlSidebarOptions.selector);
+        if (typeof controlSidebar !== "undefined") {
+          if (controlSidebar.height() > postSetWidth)
+            $(".content-wrapper, .right-side").css('min-height', controlSidebar.height());
+        }
+
       }
-    }
-  },
-  fixSidebar: function () {
-    //Make sure the body tag has the .fixed class
-    if (!$("body").hasClass("fixed")) {
-      if (typeof $.fn.slimScroll != 'undefined') {
-        $(".sidebar").slimScroll({destroy: true}).height("auto");
+    },
+    fixSidebar: function () {
+      //Make sure the body tag has the .fixed class
+      if (!$("body").hasClass("fixed")) {
+        if (typeof $.fn.slimScroll != 'undefined') {
+          $(".sidebar").slimScroll({destroy: true}).height("auto");
+        }
+        return;
+      } else if (typeof $.fn.slimScroll == 'undefined' && console) {
+        console.error("Error: the fixed layout requires the slimscroll plugin!");
       }
-      return;
-    } else if (typeof $.fn.slimScroll == 'undefined' && console) {
-      console.error("Error: the fixed layout requires the slimscroll plugin!");
-    }
-    //Enable slimscroll for fixed layout
-    if ($.AdminLTE.options.sidebarSlimScroll) {
-      if (typeof $.fn.slimScroll != 'undefined') {
-        //Distroy if it exists
-        $(".sidebar").slimScroll({destroy: true}).height("auto");
-        //Add slimscroll
-        $(".sidebar").slimscroll({
-          height: ($(window).height() - $(".main-header").height()) + "px",
-          color: "rgba(0,0,0,0.2)",
-          size: "3px"
-        });
+      //Enable slimscroll for fixed layout
+      if ($.AdminLTE.options.sidebarSlimScroll) {
+        if (typeof $.fn.slimScroll != 'undefined') {
+          //Destroy if it exists
+          $(".sidebar").slimScroll({destroy: true}).height("auto");
+          //Add slimscroll
+          $(".sidebar").slimscroll({
+            height: ($(window).height() - $(".main-header").height()) + "px",
+            color: "rgba(0,0,0,0.2)",
+            size: "3px"
+          });
+        }
       }
     }
-  }
-};
+  };
 
-/* PushMenu()
- * ==========
- * Adds the push menu functionality to the sidebar.
- *
- * @type Function
- * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
- */
-$.AdminLTE.pushMenu = function (toggleBtn) {
-  //Get the screen sizes
-  var screenSizes = this.options.screenSizes;
+  /* PushMenu()
+   * ==========
+   * Adds the push menu functionality to the sidebar.
+   *
+   * @type Function
+   * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
+   */
+  $.AdminLTE.pushMenu = {
+    activate: function (toggleBtn) {
+      //Get the screen sizes
+      var screenSizes = $.AdminLTE.options.screenSizes;
 
-  //Enable sidebar toggle
-  $(toggleBtn).click(function (e) {
-    e.preventDefault();
+      //Enable sidebar toggle
+      $(toggleBtn).on('click', function (e) {
+        e.preventDefault();
 
-    //Enable sidebar push menu
-    if ($(window).width() > (screenSizes.sm - 1)) {
-      $("body").toggleClass('sidebar-collapse');
-    }
-    //Handle sidebar push menu for small screens
-    else {
-      if ($("body").hasClass('sidebar-open')) {
-        $("body").removeClass('sidebar-open');
-        $("body").removeClass('sidebar-collapse')
-      } else {
-        $("body").addClass('sidebar-open');
-      }
-    }
-  });
+        //Enable sidebar push menu
+        if ($(window).width() > (screenSizes.sm - 1)) {
+          $("body").toggleClass('sidebar-collapse');
+        }
+        //Handle sidebar push menu for small screens
+        else {
+          if ($("body").hasClass('sidebar-open')) {
+            $("body").removeClass('sidebar-open');
+            $("body").removeClass('sidebar-collapse')
+          } else {
+            $("body").addClass('sidebar-open');
+          }
+        }
+      });
 
-  $(".content-wrapper").click(function () {
-    //Enable hide menu when clicking on the content-wrapper on small screens
-    if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
-      $("body").removeClass('sidebar-open');
-    }
-  });
+      $(".content-wrapper").click(function () {
+        //Enable hide menu when clicking on the content-wrapper on small screens
+        if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
+          $("body").removeClass('sidebar-open');
+        }
+      });
 
-};
+      //Enable expand on hover for sidebar mini
+      if ($.AdminLTE.options.sidebarExpandOnHover
+              || ($('body').hasClass('fixed')
+                      && $('body').hasClass('sidebar-mini'))) {
+        this.expandOnHover();
+      }
 
-/* Tree()
- * ======
- * Converts the sidebar into a multilevel
- * tree view menu.
- *
- * @type Function
- * @Usage: $.AdminLTE.tree('.sidebar')
- */
-$.AdminLTE.tree = function (menu) {
-  var _this = this;
-
-  $("li a", $(menu)).click(function (e) {
-    //Get the clicked link and the next element
-    var $this = $(this);
-    var checkElement = $this.next();
-
-    //Check if the next element is a menu and is visible
-    if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
-      //Close the menu
-      checkElement.slideUp('normal', function () {
-        checkElement.removeClass('menu-open');
-        //Fix the layout in case the sidebar stretches over the height of the window
-        //_this.layout.fix();
-      });
-      checkElement.parent("li").removeClass("active");
-    }
-    //If the menu is not visible
-    else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
-      //Get the parent menu
-      var parent = $this.parents('ul').first();
-      //Close all open menus within the parent
-      var ul = parent.find('ul:visible').slideUp('normal');
-      //Remove the menu-open class from the parent
-      ul.removeClass('menu-open');
-      //Get the parent li
-      var parent_li = $this.parent("li");
-
-      //Open the target menu and add the menu-open class
-      checkElement.slideDown('normal', function () {
-        //Add the class active to the parent li
-        checkElement.addClass('menu-open');
-        parent.find('li.active').removeClass('active');
-        parent_li.addClass('active');
-        //Fix the layout in case the sidebar stretches over the height of the window
-        _this.layout.fix();
+    },
+    expandOnHover: function () {
+      var _this = this;
+      var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
+      //Expand sidebar on hover
+      $('.main-sidebar').hover(function () {
+        if ($('body').hasClass('sidebar-mini')
+                && $("body").hasClass('sidebar-collapse')
+                && $(window).width() > screenWidth) {
+          _this.expand();
+        }
+      }, function () {
+        if ($('body').hasClass('sidebar-mini')
+                && $('body').hasClass('sidebar-expanded-on-hover')
+                && $(window).width() > screenWidth) {
+          _this.collapse();
+        }
       });
+    },
+    expand: function () {
+      $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
+    },
+    collapse: function () {
+      if ($('body').hasClass('sidebar-expanded-on-hover')) {
+        $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
+      }
     }
-    //if this isn't a link, prevent the page from being redirected
-    if (checkElement.is('.treeview-menu')) {
-      e.preventDefault();
-    }
-  });
-};
+  };
 
-/* BoxWidget
- * =========
- * BoxWidget is plugin to handle collapsing and
- * removing boxes from the screen.
- *
- * @type Object
- * @usage $.AdminLTE.boxWidget.activate()
- *        Set all of your option in the main $.AdminLTE.options object
- */
-$.AdminLTE.boxWidget = {
-  activate: function () {
-    var o = $.AdminLTE.options;
+  /* Tree()
+   * ======
+   * Converts the sidebar into a multilevel
+   * tree view menu.
+   *
+   * @type Function
+   * @Usage: $.AdminLTE.tree('.sidebar')
+   */
+  $.AdminLTE.tree = function (menu) {
     var _this = this;
-    //Listen for collapse event triggers
-    $(o.boxWidgetOptions.boxWidgetSelectors.collapse).click(function (e) {
-      e.preventDefault();
-      _this.collapse($(this));
+    var animationSpeed = $.AdminLTE.options.animationSpeed;
+    $("li a", $(menu)).on('click', function (e) {
+      //Get the clicked link and the next element
+      var $this = $(this);
+      var checkElement = $this.next();
+
+      //Check if the next element is a menu and is visible
+      if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
+        //Close the menu
+        checkElement.slideUp(animationSpeed, function () {
+          checkElement.removeClass('menu-open');
+          //Fix the layout in case the sidebar stretches over the height of the window
+          //_this.layout.fix();
+        });
+        checkElement.parent("li").removeClass("active");
+      }
+      //If the menu is not visible
+      else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
+        //Get the parent menu
+        var parent = $this.parents('ul').first();
+        //Close all open menus within the parent
+        var ul = parent.find('ul:visible').slideUp(animationSpeed);
+        //Remove the menu-open class from the parent
+        ul.removeClass('menu-open');
+        //Get the parent li
+        var parent_li = $this.parent("li");
+
+        //Open the target menu and add the menu-open class
+        checkElement.slideDown(animationSpeed, function () {
+          //Add the class active to the parent li
+          checkElement.addClass('menu-open');
+          parent.find('li.active').removeClass('active');
+          parent_li.addClass('active');
+          //Fix the layout in case the sidebar stretches over the height of the window
+          _this.layout.fix();
+        });
+      }
+      //if this isn't a link, prevent the page from being redirected
+      if (checkElement.is('.treeview-menu')) {
+        e.preventDefault();
+      }
     });
+  };
 
-    //Listen for remove event triggers
-    $(o.boxWidgetOptions.boxWidgetSelectors.remove).click(function (e) {
-      e.preventDefault();
-      _this.remove($(this));
-    });
-  },
-  collapse: function (element) {
-    //Find the box parent
-    var box = element.parents(".box").first();
-    //Find the body and the footer
-    var bf = box.find(".box-body, .box-footer");
-    if (!box.hasClass("collapsed-box")) {
-      //Convert minus into plus
-      element.children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
-      bf.slideUp(300, function () {
-        box.addClass("collapsed-box");
+  /* ControlSidebar
+   * ==============
+   * Adds functionality to the right sidebar
+   *
+   * @type Object
+   * @usage $.AdminLTE.controlSidebar.activate(options)
+   */
+  $.AdminLTE.controlSidebar = {
+    //instantiate the object
+    activate: function () {
+      //Get the object
+      var _this = this;
+      //Update options
+      var o = $.AdminLTE.options.controlSidebarOptions;
+      //Get the sidebar
+      var sidebar = $(o.selector);
+      //The toggle button
+      var btn = $(o.toggleBtnSelector);
+
+      //Listen to the click event
+      btn.on('click', function (e) {
+        e.preventDefault();
+        //If the sidebar is not open
+        if (!sidebar.hasClass('control-sidebar-open')
+                && !$('body').hasClass('control-sidebar-open')) {
+          //Open the sidebar
+          _this.open(sidebar, o.slide);
+        } else {
+          _this.close(sidebar, o.slide);
+        }
+      });
+
+      //If the body has a boxed layout, fix the sidebar bg position
+      var bg = $(".control-sidebar-bg");
+      _this._fix(bg);
+
+      //If the body has a fixed layout, make the control sidebar fixed
+      if ($('body').hasClass('fixed')) {
+        _this._fixForFixed(sidebar);
+      } else {
+        //If the content height is less than the sidebar's height, force max height
+        if ($('.content-wrapper, .right-side').height() < sidebar.height()) {
+          _this._fixForContent(sidebar);
+        }
+      }
+    },
+    //Open the control sidebar
+    open: function (sidebar, slide) {
+      var _this = this;
+      //Slide over content
+      if (slide) {
+        sidebar.addClass('control-sidebar-open');
+      } else {
+        //Push the content by adding the open class to the body instead
+        //of the sidebar itself
+        $('body').addClass('control-sidebar-open');
+      }
+    },
+    //Close the control sidebar
+    close: function (sidebar, slide) {
+      if (slide) {
+        sidebar.removeClass('control-sidebar-open');
+      } else {
+        $('body').removeClass('control-sidebar-open');
+      }
+    },
+    _fix: function (sidebar) {
+      var _this = this;
+      if ($("body").hasClass('layout-boxed')) {
+        sidebar.css('position', 'absolute');
+        sidebar.height($(".wrapper").height());
+        $(window).resize(function () {
+          _this._fix(sidebar);
+        });
+      } else {
+        sidebar.css({
+          'position': 'fixed',
+          'height': 'auto'
+        });
+      }
+    },
+    _fixForFixed: function (sidebar) {
+      sidebar.css({
+        'position': 'fixed',
+        'max-height': '100%',
+        'overflow': 'auto',
+        'padding-bottom': '50px'
+      });
+    },
+    _fixForContent: function (sidebar) {
+      $(".content-wrapper, .right-side").css('min-height', sidebar.height());
+    }
+  };
+
+  /* BoxWidget
+   * =========
+   * BoxWidget is a plugin to handle collapsing and
+   * removing boxes from the screen.
+   *
+   * @type Object
+   * @usage $.AdminLTE.boxWidget.activate()
+   *        Set all your options in the main $.AdminLTE.options object
+   */
+  $.AdminLTE.boxWidget = {
+    selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
+    icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
+    animationSpeed: $.AdminLTE.options.animationSpeed,
+    activate: function (_box) {
+      var _this = this;
+      if (! _box) {
+        _box = document; // activate all boxes per default
+      }
+      //Listen for collapse event triggers
+      $(_box).find(_this.selectors.collapse).on('click', function (e) {
+        e.preventDefault();
+        _this.collapse($(this));
       });
-    } else {
-      //Convert plus into minus
-      element.children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
-      bf.slideDown(300, function () {
-        box.removeClass("collapsed-box");
+
+      //Listen for remove event triggers
+      $(_box).find(_this.selectors.remove).on('click', function (e) {
+        e.preventDefault();
+        _this.remove($(this));
       });
+    },
+    collapse: function (element) {
+      var _this = this;
+      //Find the box parent
+      var box = element.parents(".box").first();
+      //Find the body and the footer
+      var box_content = box.find("> .box-body, > .box-footer");
+      if (!box.hasClass("collapsed-box")) {
+        //Convert minus into plus
+        element.children(":first")
+                .removeClass(_this.icons.collapse)
+                .addClass(_this.icons.open);
+        //Hide the content
+        box_content.slideUp(_this.animationSpeed, function () {
+          box.addClass("collapsed-box");
+        });
+      } else {
+        //Convert plus into minus
+        element.children(":first")
+                .removeClass(_this.icons.open)
+                .addClass(_this.icons.collapse);
+        //Show the content
+        box_content.slideDown(_this.animationSpeed, function () {
+          box.removeClass("collapsed-box");
+        });
+      }
+    },
+    remove: function (element) {
+      //Find the box parent
+      var box = element.parents(".box").first();
+      box.slideUp(this.animationSpeed);
     }
-  },
-  remove: function (element) {
-    //Find the box parent
-    var box = element.parents(".box").first();
-    box.slideUp();
-  },
-  options: $.AdminLTE.options.boxWidgetOptions
-};
+  };
+}
 
 /* ------------------
  * - Custom Plugins -
@@ -336,7 +593,7 @@ $.AdminLTE.boxWidget = {
 /*
  * BOX REFRESH BUTTON
  * ------------------
- * This is a custom plugin to use with the compenet BOX. It allows you to add
+ * This is a custom plugin to use with the component BOX. It allows you to add
  * a refresh button to the box. It converts the box's state to a loading state.
  *
  * @type plugin
@@ -348,7 +605,7 @@ $.AdminLTE.boxWidget = {
 
     // Render options
     var settings = $.extend({
-      //Refressh button selector
+      //Refresh button selector
       trigger: ".refresh-btn",
       //File source to be loaded (e.g: ajax/src.php)
       source: "",
@@ -377,7 +634,7 @@ $.AdminLTE.boxWidget = {
       var rBtn = box.find(settings.trigger).first();
 
       //On trigger click
-      rBtn.click(function (e) {
+      rBtn.on('click', function (e) {
         e.preventDefault();
         //Add loading overlay
         start(box);
@@ -407,6 +664,23 @@ $.AdminLTE.boxWidget = {
 
 })(jQuery);
 
+/*
+ * EXPLICIT BOX ACTIVATION
+ * -----------------------
+ * This is a custom plugin to use with the component BOX. It allows you to activate
+ * a box inserted in the DOM after the app.js was loaded.
+ *
+ * @type plugin
+ * @usage $("#box-widget").activateBox();
+ */
+(function ($) {
+
+  $.fn.activateBox = function () {
+    $.AdminLTE.boxWidget.activate(this);
+  };
+
+})(jQuery);
+
 /*
  * TODO LIST CUSTOM PLUGIN
  * -----------------------
@@ -451,73 +725,4 @@ $.AdminLTE.boxWidget = {
       }
     });
   };
-}(jQuery));
-
-/* ------------------
- * - Implementation -
- * ------------------
- * The next block of code implements AdminLTE's
- * functions and plugins as specified by the
- * options above.
- */
-$(function () {
-  //Easy access to options
-  var o = $.AdminLTE.options;
-
-  //Activate the layout maker
-  $.AdminLTE.layout.activate();
-
-  //Enable sidebar tree view controls
-  $.AdminLTE.tree('.sidebar');
-
-  //Add slimscroll to navbar dropdown
-  if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
-    $(".navbar .menu").slimscroll({
-      height: "200px",
-      alwaysVisible: false,
-      size: "3px"
-    }).css("width", "100%");
-  }
-
-  //Activate sidebar push menu
-  if (o.sidebarPushMenu) {
-    $.AdminLTE.pushMenu(o.sidebarToggleSelector);
-  }
-
-  //Activate Bootstrap tooltip
-  if (o.enableBSToppltip) {
-    $(o.BSTooltipSelector).tooltip();
-  }
-
-  //Activate box widget
-  if (o.enableBoxWidget) {
-    $.AdminLTE.boxWidget.activate();
-  }
-
-  //Activate fast click
-  if (o.enableFastclick && typeof FastClick != 'undefined') {
-    FastClick.attach(document.body);
-  }
-
-  //Activate direct chat widget
-  if (o.directChat.enable) {
-    $(o.directChat.contactToggleSelector).click(function () {
-      var box = $(this).parents('.direct-chat').first();
-      box.toggleClass('direct-chat-contacts-open');
-    });
-  }
-
-  /*
-   * INITIALIZE BUTTON TOGGLE
-   * ------------------------
-   */
-  $('.btn-group[data-toggle="btn-toggle"]').each(function () {
-    var group = $(this);
-    $(this).find(".btn").click(function (e) {
-      group.find(".btn.active").removeClass("active");
-      $(this).addClass("active");
-      e.preventDefault();
-    });
-
-  });
-});
+}(jQuery));