pure-admin-rails 2.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 2e7b3065a35d3f75ded4fa531de494100f54d934
+  data.tar.gz: b966fa106742cdba9b3671e1ac1cef23c091f6e8
+SHA512:
+  metadata.gz: a165071ff0c55c59a8890fa0d47f8f346dec5c4ed2041772bcdc1d86b6047a3bd3782c99cb20a7370e83366e26a060f6f3f20c92585ad5216bd556b854ba5c78
+  data.tar.gz: bc6c3ddafc4d6041709a481b0df665940e5e77ed5f82b9b993b7d3f35b848ffcad398655a42831a1bda7de2ff7366ec190832e3c2314470559a9053524aeab30

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Grant Colegate
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,131 @@
+# pure-admin-rails
+
+[![Build Status](https://travis-ci.org/blaknite/pure-admin-rails.svg?branch=master)](https://travis-ci.org/blaknite/pure-admin-rails)
+
+Pure CSS Admin Template for Rails 4+.
+
+Forms work with SimpleForm, breadcrumbs with crumpet.
+
+## Installation
+
+Add these lines to your Gemfile
+```ruby
+# Admin theme + dependencies
+gem 'pure-admin-rails', github: 'blaknite/pure-admin-rails', branch: 'master'
+gem 'pure-css-reset-rails', github: 'blaknite/pure-css-reset-rails', branch: 'master'
+gem 'exo2-rails', github: 'blaknite/exo2-rails', branch: 'master'
+gem 'crummy', github: 'blaknite/crummy', branch: 'master'
+gem 'font-awesome-rails'
+gem 'select2-rails'
+gem 'pure-css-rails'
+```
+
+Run
+```console
+rails generate pure_admin:layout
+rails generate pure_admin:simple_form
+```
+
+Then edit ```app/views/layouts/admin.html.erb``` to your liking.
+
+## Dependencies
+
+- Pure CSS
+- jQuery
+- waypoints.js
+- [Select2](https://select2.github.io/)
+
+## Usage
+
+### Portlets
+
+Portlets are optionally collapsable containers that can be passed a block, or a source URL.
+
+#### Simple Portlets
+
+The simplest incarnation of a portlet is,
+```erb
+<%= portlet do %>
+  <p>Hello, world</p>
+<% end %>
+```
+<img src="readme-assets/simple-portlet.png" width="100%">
+
+You may also give a title to portlets.
+```erb
+<%= portlet 'Greeting' do %>
+  <p>Hello, world</p>
+<% end %>
+```
+<img src="readme-assets/simple-portlet-with-title.png" width="100%">
+
+Titles can have [icons](https://fortawesome.github.io/Font-Awesome/icons/), too.
+```erb
+<%= portlet 'Greeting', icon: 'hand-peace-o' do %>
+  <p>Hello, world</p>
+<% end %>
+```
+<img src="readme-assets/simple-portlet-with-icon.png" width="100%">
+
+To make a portlet collapsable, add the `expand: true` option to the `portlet` method.
+```erb
+<%= portlet 'Greeting', icon: 'hand-peace-o', expand: true do %>
+  <p>Hello, world</p>
+<% end %>
+```
+<img src="readme-assets/simple-portlet-expanded.png" width="100%">
+
+If you want the portlet to be collapsed by default, simply add `expand: false` instead.
+<img src="readme-assets/simple-portlet-collapsed.png" width="100%">
+
+Any other options that can be passed to Rails' `content_tag` are respected on the portlet too, for example:
+
+```erb
+<%= portlet 'Greeting', class: 'is-supported' do %>
+...
+<%= portlet 'Greeting', data: { attributes: 'are-too' } do %>
+...
+```
+
+#### Source Portlets
+
+Source portlets are given a source URL which, when expanded, will fetch the content at this URL and display it within the portlet body.
+
+Source portlets require a title be given, to give the user somewhere to click to expand.
+
+For this example, the following file was created:
+```html
+<!-- public/test.html -->
+<h2>Congratulations!</h2>
+<p>This page was loaded via AJAX.</p>
+```
+
+```erb
+<%= portlet 'Source Portlet', source: '/test' %>
+```
+<img src="readme-assets/source-portlet.png" width="100%">
+
+When the portlet is clicked, the content at the source URL will be retrieved and displayed in the body.
+<img src="readme-assets/source-portlet-expanded.png" width="100%">
+
+If the AJAX request begins to take too long, the portlet will assume a loading state.
+<img src="readme-assets/source-portlet-loading.png" width="100%">
+
+Like Simple Portlets, Source Portlets can be expanded by default.
+The difference however, is that this loading happens when the document is ready.
+To enable this, simply add the familiar `expand: true` to the options.
+```erb
+<%= portlet 'Source Portlet', source: '/test', expand: true %>
+```
+
+You can additionally expand a portlet via the URL string.
+If you add a class to the portlet you can then target this with a hash at the end of your URL.
+When this is loaded, a portlet with a class that is the same as the hash will be expanded.
+
+```erb
+<%= portlet 'Source Portlet', source: '/test', class: 'source-test' %>
+```
+
+```console
+http://localhost:3000/{page}#source-test
+```

data/app/assets/javascripts/pure_admin.js

@@ -0,0 +1,6 @@
+//= require jquery.throttledebounce
+//= require jquery.waypoints
+//= require_tree ./pure_admin
+
+var PureAdmin = PureAdmin || {};
+PureAdmin.LOADING_TIMEOUT = 300;

data/app/assets/javascripts/pure_admin/dropdown.js

@@ -0,0 +1,178 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.dropdown = {
+  // Enable drop-down menus in Pure
+  // Inspired by YUI3 gallery-simple-menu by Julien LeComte
+  // [https://github.com/yui/yui3-gallery/blob/master/src/gallery-simple-menu/js/simple-menu.js]
+
+  PureDropdown: function(dropdownParent) {
+    var PREFIX = 'pure-',
+    ACTIVE_CLASS_NAME = PREFIX + 'menu-active',
+    ARIA_ROLE = 'role',
+    ARIA_HIDDEN = 'aria-hidden',
+    MENU_OPEN = 0,
+    MENU_CLOSED = 1,
+    MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
+    MENU_ACTIVE_SELECTOR = '.pure-menu-active',
+    MENU_LINK_SELECTOR = '.pure-menu-link',
+    MENU_SELECTOR = '.pure-menu-children',
+    DISMISS_EVENT = (window.hasOwnProperty &&
+        window.hasOwnProperty('ontouchstart')) ?
+      'touchstart' : 'mousedown',
+
+    ARROW_KEYS_ENABLED = true,
+
+    ddm = this; // drop down menu
+
+    dropdownParent.classList.add('initialized');
+
+    this._state = MENU_CLOSED;
+
+    this.show = function () {
+      if (this._state !== MENU_OPEN) {
+        this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);
+        this._menu.setAttribute(ARIA_HIDDEN, false);
+        this._state = MENU_OPEN;
+      }
+    };
+
+    this.hide = function () {
+      if (this._state !== MENU_CLOSED) {
+        this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);
+        this._menu.setAttribute(ARIA_HIDDEN, true);
+        this._link.focus();
+        this._state = MENU_CLOSED;
+      }
+    };
+
+    this.toggle = function () {
+      this[this._state === MENU_CLOSED ? 'show' : 'hide']();
+    };
+
+    this.halt = function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    };
+
+    this._dropdownParent = dropdownParent;
+    this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR);
+    this._menu = this._dropdownParent.querySelector(MENU_SELECTOR);
+    this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR);
+
+    // Set ARIA attributes
+    this._link.setAttribute('aria-haspopup', 'true');
+    this._menu.setAttribute(ARIA_ROLE, 'menu');
+    this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id'));
+    this._menu.setAttribute('aria-hidden', 'true');
+    [].forEach.call(
+        this._menu.querySelectorAll('li'),
+        function(el){
+          el.setAttribute(ARIA_ROLE, 'presentation');
+        }
+        );
+    [].forEach.call(
+        this._menu.querySelectorAll('a'),
+        function(el){
+          el.setAttribute(ARIA_ROLE, 'menuitem');
+        }
+        );
+
+    // Toggle on click
+    this._link.addEventListener('click', function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+      ddm.toggle();
+    });
+
+    // Keyboard navigation
+    document.addEventListener('keydown', function (e) {
+      var currentLink,
+      previousSibling,
+      nextSibling,
+      previousLink,
+      nextLink;
+
+      // if the menu isn't active, ignore
+      if (ddm._state !== MENU_OPEN) {
+        return;
+      }
+
+      // if the menu is the parent of an open, active submenu, ignore
+      if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) {
+        return;
+      }
+
+      currentLink = ddm._menu.querySelector(':focus');
+
+      // Dismiss an open menu on ESC
+      if (e.keyCode === 27) {
+        /* Esc */
+        ddm.halt(e);
+        ddm.hide();
+      }
+      // Go to the next link on down arrow
+      else if (ARROW_KEYS_ENABLED && e.keyCode === 40) {
+        /* Down arrow */
+        ddm.halt(e);
+        // get the nextSibling (an LI) of the current link's LI
+        nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null;
+        // if the nextSibling is a text node (not an element), go to the next one
+        while (nextSibling && nextSibling.nodeType !== 1) {
+          nextSibling = nextSibling.nextSibling;
+        }
+        nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;
+        // if there is no currently focused link, focus the first one
+        if (!currentLink) {
+          ddm._menu.querySelector('.pure-menu-link').focus();
+        }
+        else if (nextLink) {
+          nextLink.focus();
+        }
+      }
+      // Go to the previous link on up arrow
+      else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {
+        /* Up arrow */
+        ddm.halt(e);
+        // get the currently focused link
+        previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null;
+        while (previousSibling && previousSibling.nodeType !== 1) {
+          previousSibling = previousSibling.previousSibling;
+        }
+        previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null;
+        // if there is no currently focused link, focus the last link
+        if (!currentLink) {
+          ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();
+        }
+        // else if there is a previous item, go to the previous item
+        else if (previousLink) {
+          previousLink.focus();
+        }
+      }
+    });
+
+    // Dismiss an open menu on outside event
+    document.addEventListener(DISMISS_EVENT, function (e) {
+      var target = e.target;
+      if (target !== ddm._link && !ddm._menu.contains(target)) {
+        ddm.hide();
+        ddm._link.blur();
+      }
+    });
+
+  },
+
+  initDropdowns: function() {
+    var dropdownParents = document.querySelectorAll('.pure-menu-has-children:not(.initialized)');
+    for (var i = 0; i < dropdownParents.length; i++) {
+      var ddm = new PureAdmin.dropdown.PureDropdown(dropdownParents[i]);
+    }
+  }
+};
+
+$(document).ready(function(context) {
+  PureAdmin.dropdown.initDropdowns();
+});
+
+$(document).on('ajaxSuccess', function(context) {
+  PureAdmin.dropdown.initDropdowns();
+});

data/app/assets/javascripts/pure_admin/flash_messages.js

@@ -0,0 +1,13 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.flashMessages = {
+  create: function(type, message) {
+    $('#flashes').prepend('<div class="flash ' + type + '">' + message + '</div>');
+    $('#flashes .flash:not(.bound-close)').addClass('bound-close')
+      .on('click', PureAdmin.flashMessages.destroy);
+  },
+
+  destroy: function(event) {
+    $(event.target).closest('.flash').remove();
+  }
+};

data/app/assets/javascripts/pure_admin/inputs.js

@@ -0,0 +1,24 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.inputs = {
+  initAll: function(context) {
+    for (var inputType in PureAdmin.inputs) {
+      inputTypeObj = PureAdmin.inputs[inputType];
+      if (typeof(inputTypeObj) === 'object') {
+        inputTypeObj.init();
+      }
+    }
+  }
+};
+
+$(document).ready(function(context) {
+  PureAdmin.inputs.initAll(context);
+});
+
+$(document).on('ajaxSuccess', function(context) {
+  PureAdmin.inputs.initAll(context);
+});
+
+$(document).on('turbolinks:load', function(context) {
+  PureAdmin.inputs.initAll(context);
+});

data/app/assets/javascripts/pure_admin/inputs/select.js

@@ -0,0 +1,21 @@
+if (!PureAdmin) {
+  console.error('You must load the PureAdmin JavaScript first before loading this JavaScript.');
+}
+
+PureAdmin.inputs.select = {
+  init: function(context) {
+    $('.pure-admin-select').select2({
+      theme: 'pure-admin',
+      templateResult: PureAdmin.inputs.select.formatResult,
+      templateSelection: PureAdmin.inputs.select.formatResult,
+
+      escapeMarkup: function(markup) {
+        return markup;
+      },
+    });
+  },
+
+  formatResult: function(result) {
+    return result.name || result.text || '<span class="text-muted">(blank)</span>';
+  }
+};

data/app/assets/javascripts/pure_admin/main_header.js

@@ -0,0 +1,21 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.header = {
+  ready: function() {
+    $('#wrap').waypoint(function(direction) {
+      $('#back-to-top').toggle(direction === 'down');
+    }, { offset: -300 });
+
+    $('#wrap').waypoint(function(direction) {
+      $('#wrap').toggleClass('no-header', direction === 'down');
+    }, { offset: -48 });
+
+    $('#back-to-top').on('click', $.debounce(1000, true, function() {
+      $("html, body").animate({ scrollTop: 0 }, 300);
+      $('#wrap').removeClass('no-header');
+    }));
+  }
+};
+
+$(document).ready(PureAdmin.header.ready)
+$(document).on('turbolinks:load', PureAdmin.header.ready)

data/app/assets/javascripts/pure_admin/main_menu.js

@@ -0,0 +1,108 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.mainMenu = {
+  scroll: function(element, event) {
+    var menu = element.find('> nav');
+    var menuList = menu.find('> .pure-menu-list');
+
+    // do not scroll if list is shorter than document
+    if ( menuList.width() < $(document).width() ) return;
+
+    // determine which scroll button was clicked
+    var direction = $(event.target).closest('.fade-left, .fade-right').data('direction');
+
+    // determine how far to scroll each click and the extremes of scrolling
+    var maxOffset = menuList.width() - $(document).width();
+    var minStep = $(document).width() / 3;
+    var offset = maxOffset / 4;
+    if ( maxOffset < minStep ) offset = maxOffset;
+    if ( offset < minStep ) offset = minStep;
+
+    if ( direction == 'left' ) {
+      // we're scrolling left
+      if ( menu.scrollLeft() - offset < offset / 2 ) {
+        menu.animate({ scrollLeft: 0 }, 100);
+      } else {
+        menu.animate({ scrollLeft: menu.scrollLeft() - offset }, 100);
+      }
+    } else if ( direction == 'right' ) {
+      // we're scrolling right
+      if ( menu.scrollLeft() + offset > maxOffset - offset / 2 ) {
+        menu.animate({ scrollLeft: maxOffset }, 300);
+      } else {
+        menu.animate({ scrollLeft: menu.scrollLeft() + offset }, 100);
+      }
+    }
+  },
+
+  updateArrows: function(element) {
+    var menu = element.find('nav');
+    var menuList = menu.find('.pure-menu-list');
+    var leftArrow = element.find('.fade-left');
+    var rightArrow = element.find('.fade-right');
+
+    // determine how far to scroll each click and the extremes of scrolling
+    var maxOffset = menuList.width() - $(document).width();
+
+    // toggle the navigation arrows
+    rightArrow.toggle(menu.scrollLeft() < maxOffset);
+    leftArrow.toggle(menu.scrollLeft() > 0);
+  },
+
+  openSubMenu: function(element) {
+    var mainMenu = $('#main-menu');
+    var subMenu = $('#sub-menu');
+    var subMenuContent = element.find('> .sub-menu').clone() || '';
+
+    mainMenu.addClass('navigating').find('.pure-menu-item').removeClass('menu-active');
+    mainMenu.find('.pure-menu-link').off('click', PureAdmin.mainMenu.closeSubMenu);
+    if ( subMenuContent.length > 0 ) {
+      element.addClass('menu-active');
+      element.find('.pure-menu-link').on('click', PureAdmin.mainMenu.closeSubMenu);
+      subMenu.removeClass('hidden').find('.pure-menu').html(subMenuContent);
+
+      PureAdmin.mainMenu.updateArrows(subMenu);
+    }
+  },
+
+  closeSubMenu: function() {
+    var mainMenu = $('#main-menu');
+    var subMenu = $('#sub-menu');
+
+    subMenu.addClass('hidden').find('.pure-menu').html($('#main-menu .current > .sub-menu').clone());
+    mainMenu.removeClass('navigating').find('.pure-menu-item').removeClass('menu-active');
+    mainMenu.find('.pure-menu-link').off('click', PureAdmin.mainMenu.closeSubMenu);
+  },
+
+  ready: function() {
+    PureAdmin.mainMenu.updateArrows($('#main-menu'));
+
+    $('*[rel=main-menu-scroll]').on('click', function(event) {
+      PureAdmin.mainMenu.scroll($('#main-menu'), event);
+    });
+
+    $('*[rel=sub-menu-scroll]').on('click', function(event) {
+      PureAdmin.mainMenu.scroll($('#sub-menu'), event);
+    });
+
+    $('#main-menu nav').on('scroll', function(event) {
+      PureAdmin.mainMenu.updateArrows($('#main-menu'));
+    });
+
+    $('#sub-menu nav').on('scroll', function(event) {
+      PureAdmin.mainMenu.updateArrows($('#sub-menu'));
+    });
+
+    $('#main-menu .pure-menu-link').on('click', function(event) {
+      var element = $(event.target).closest('li');
+      PureAdmin.mainMenu.openSubMenu(element);
+    });
+
+    $('#main').on('click', function(event) {
+      PureAdmin.mainMenu.closeSubMenu();
+    });
+  }
+};
+
+$(document).ready(PureAdmin.mainMenu.ready)
+$(document).on('turbolinks:load', PureAdmin.mainMenu.ready)