Merge pull request #30 from it3s/stick-component

Stick component

app/assets/javascripts/components/stick.js.coffee

@@ -0,0 +1,17 @@
+#= require jquery.sticky
+#
+App.components.stick = (container) ->
+  {
+    container: container,
+
+    init: ->
+      data = @container.data 'stick'
+
+      @container.sticky
+        className: 'stick'
+        wrapperClassName: 'stick-wrapper'
+        topSpacing: data?.top_spacing
+        bottomSpacing: data?.bottom_spacing
+        getWidthFrom: data?.get_width_from
+
+  }

app/assets/stylesheets/_settings.css.scss

@@ -72,6 +72,10 @@ $text-link-hover-color-fg: #14636E;
 $text-link-hover-color-bg: #B1DDE8;
 $text-link-visited-color: #004047;
 
+$main-color-bg: $white;
+$stick-color-bg: $white;
+$stick-color-shadow: $meppit-blue;
+
 // Typography
 $main-font: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
 $highlight-font: Cambria, Georgia, serif;

app/assets/stylesheets/application.css.scss

@@ -30,6 +30,7 @@
 @import "shared/contacts";
 @import "shared/uploader";
 @import "shared/tags";
+@import "shared/stick";
 
 @import "sessions/sign_in";
 

app/assets/stylesheets/core/_base.css.scss

@@ -4,6 +4,7 @@ body {
   font: $base-font-size $main-font;
   -webkit-font-smoothing: subpixel-antialiased;
   color: $text-color;
+  background-color: $main-color-bg;
 }
 
 a {
@@ -59,12 +60,12 @@ h3 {
   @include button;
 }
 
-.blocker { z-index: 1000 !important; }
+.blocker { z-index: 10000 !important; }
 .modal {
   @include box-sizing(content-box);
 
   &.current  {
-    z-index: 1001 !important;
+    z-index: 10001 !important;
     background: $meppit-light-blue;
   }
 }

app/assets/stylesheets/core/_forms.css.scss

@@ -54,7 +54,7 @@ form {
   }
 
   .form-actions {
-    margin-bottom: 20px;
+    padding: 15px 0;
 
     .edit-save {
       display: inline-block;

app/assets/stylesheets/shared/_stick.css.scss

@@ -0,0 +1,8 @@
+.stick > * {
+  background-color: $stick-color-bg;
+  z-index: 2000;
+}
+
+.page .stick > * {
+  box-shadow: $stick-color-shadow 0px 5px 3px -3px;
+}

app/assets/stylesheets/shared/_toolbar.css.scss

@@ -1,8 +1,15 @@
 .toolbar {
   @include span-columns(1);
-  // FIXME: Use the correct url
-  background: url('imgs/toolbar-bg.png') no-repeat right top;
-  min-height: 430px;
+
+  .toolbar-buttons {
+    background: url('imgs/toolbar-bg.png') no-repeat right top;
+    min-height: 430px;
+    float: left;
+  }
+
+  li {
+    margin: 15px 10px;
+  }
 
   a {
     display: block;
@@ -11,7 +18,6 @@
     text-align: center;
     padding: 7px 0;
     border-radius: 5px;
-    margin: 15px 10px;
 
     &:hover, &.active {
       background-color: $meppit-dark-blue;

app/views/shared/_toolbar.html.erb

@@ -1,9 +1,11 @@
-<ul class="toolbar" role="toolbar">
-  <% tools_list(object, local_assigns[:only] || :all).each do |tool| %>
-    <li title="<%= tool[:title] %>">
-      <a class="<%= 'active' if request.path == tool[:url] %>" href="<%= tool[:url] %>" role="button">
-        <%= icon tool[:icon], '', :class => "fa-lg fa-fw" %>
-      </a>
-    </li>
-  <% end %>
-</ul>
+<div class="toolbar">
+  <ul class="toolbar-buttons" role="toolbar" data-components="stick">
+    <% tools_list(object, local_assigns[:only] || :all).each do |tool| %>
+      <li title="<%= tool[:title] %>">
+        <a class="<%= 'active' if request.path == tool[:url] %>" href="<%= tool[:url] %>" role="button">
+          <%= icon tool[:icon], '', :class => "fa-lg fa-fw" %>
+        </a>
+      </li>
+    <% end %>
+  </ul>
+</div>

app/views/users/edit.html.erb

@@ -3,7 +3,7 @@
 <div class="page user-profile edit" >
   <%= remote_form_for @user do |f| %>
 
-  <div class="form-actions">
+    <div class="form-actions" data-components="stick" data-stick='{ "get_width_from": ".user-profile.page" }'>
     <%= submit_tag t('save'), :class => "edit-save" %>
     <%= link_to t('cancel'), url_for(@user) %>
   </div>

docs/components/stick.md

@@ -0,0 +1,18 @@
+## Stick
+
+"stick" content
+
+### markup
+
+```
+<div data-components="stick" data-stick='{"options": "goes here"}'>
+  Always visible
+</div>
+```
+
+### Options
+```
+:top_spacing => default 0
+:bottom_spacing => default 0
+:get_width_from => default undefined
+```

spec/javascripts/components/stick_spec.js.coffee

@@ -0,0 +1,20 @@
+#= require spec_helper
+
+describe "stick", ->
+  beforeEach ->
+    @container = $ JST['templates/stick']()
+
+  it 'initializes component', ->
+    spy App.components, 'stick', =>
+      App.mediator.publish 'components:start', @container
+      expect(App.components.stick).to.be.called
+
+
+  describe 'component', ->
+    beforeEach ->
+      @component = App.components.stick @container
+
+    it 'calls jquery-sticky plugin', ->
+      spy @component.container, 'sticky', =>
+        @component.init()
+        expect(@component.container.sticky).to.be.called

spec/javascripts/templates/stick.jst.ejs

@@ -0,0 +1,5 @@
+<div id="container">
+  <div id="test" data-components="stick">
+    content
+  </div>
+</div>

vendor/assets/javascripts/jquery.sticky.js

@@ -0,0 +1,160 @@
+// Sticky Plugin v1.0.0 for jQuery
+// =============
+// Author: Anthony Garand
+// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
+// Improvements by Leonardo C. Daronco (daronco)
+// Created: 2/14/2011
+// Date: 2/12/2012
+// Website: http://labs.anthonygarand.com/sticky
+// Description: Makes an element on the page stick on the screen as you scroll
+//       It will only set the 'top' and 'position' of your element, you
+//       might need to adjust the width in some cases.
+
+(function($) {
+  var defaults = {
+      topSpacing: 0,
+      bottomSpacing: 0,
+      className: 'is-sticky',
+      wrapperClassName: 'sticky-wrapper',
+      center: false,
+      getWidthFrom: ''
+    },
+    $window = $(window),
+    $document = $(document),
+    sticked = [],
+    windowHeight = $window.height(),
+    scroller = function() {
+      var scrollTop = $window.scrollTop(),
+        documentHeight = $document.height(),
+        dwh = documentHeight - windowHeight,
+        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
+
+      for (var i = 0; i < sticked.length; i++) {
+        var s = sticked[i],
+          elementTop = s.stickyWrapper.offset().top,
+          etse = elementTop - s.topSpacing - extra;
+
+        if (scrollTop <= etse) {
+          if (s.currentTop !== null) {
+            s.stickyElement
+              .css('position', '')
+              .css('top', '');
+            s.stickyElement.parent().removeClass(s.className);
+            s.currentTop = null;
+          }
+        }
+        else {
+          var newTop = documentHeight - s.stickyElement.outerHeight()
+            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
+          if (newTop < 0) {
+            newTop = newTop + s.topSpacing;
+          } else {
+            newTop = s.topSpacing;
+          }
+          if (s.currentTop != newTop) {
+            s.stickyElement
+              .css('position', 'fixed')
+              .css('top', newTop);
+
+            if (typeof s.getWidthFrom !== 'undefined') {
+              s.stickyElement.css('width', $(s.getWidthFrom).width());
+            }
+
+            s.stickyElement.parent().addClass(s.className);
+            s.currentTop = newTop;
+          }
+        }
+      }
+    },
+    resizer = function() {
+      windowHeight = $window.height();
+    },
+    methods = {
+      init: function(options) {
+        var o = $.extend(defaults, options);
+        return this.each(function() {
+          var stickyElement = $(this);
+
+          var stickyId = stickyElement.attr('id');
+          var wrapper = $('<div></div>')
+            .attr('id', stickyId + '-sticky-wrapper')
+            .addClass(o.wrapperClassName);
+          stickyElement.wrapAll(wrapper);
+
+          if (o.center) {
+            stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
+          }
+
+          if (stickyElement.css("float") == "right") {
+            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
+          }
+
+          var stickyWrapper = stickyElement.parent();
+          stickyWrapper.css('height', stickyElement.outerHeight());
+          sticked.push({
+            topSpacing: o.topSpacing,
+            bottomSpacing: o.bottomSpacing,
+            stickyElement: stickyElement,
+            currentTop: null,
+            stickyWrapper: stickyWrapper,
+            className: o.className,
+            getWidthFrom: o.getWidthFrom
+          });
+        });
+      },
+      update: scroller,
+      unstick: function(options) {
+        return this.each(function() {
+          var unstickyElement = $(this);
+
+          removeIdx = -1;
+          for (var i = 0; i < sticked.length; i++) 
+          {
+            if (sticked[i].stickyElement.get(0) == unstickyElement.get(0))
+            {
+                removeIdx = i;
+            }
+          }
+          if(removeIdx != -1)
+          {
+            sticked.splice(removeIdx,1);
+            unstickyElement.unwrap();
+            unstickyElement.removeAttr('style');
+          }
+        });
+      }
+    };
+
+  // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
+  if (window.addEventListener) {
+    window.addEventListener('scroll', scroller, false);
+    window.addEventListener('resize', resizer, false);
+  } else if (window.attachEvent) {
+    window.attachEvent('onscroll', scroller);
+    window.attachEvent('onresize', resizer);
+  }
+
+  $.fn.sticky = function(method) {
+    if (methods[method]) {
+      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    } else if (typeof method === 'object' || !method ) {
+      return methods.init.apply( this, arguments );
+    } else {
+      $.error('Method ' + method + ' does not exist on jQuery.sticky');
+    }
+  };
+
+  $.fn.unstick = function(method) {
+    if (methods[method]) {
+      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    } else if (typeof method === 'object' || !method ) {
+      return methods.unstick.apply( this, arguments );
+    } else {
+      $.error('Method ' + method + ' does not exist on jQuery.sticky');
+    }
+
+  };
+  $(function() {
+    setTimeout(scroller, 0);
+  });
+})(jQuery);