atlas_assets 0.8.1 → 0.8.2

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    ZDA0YmFkNWNmZWExNzY4ZTQ5OWU3NzAwZmE1MDMwM2Q0NjUzNWM5Yw==
+    ZjdhNTAzOWU1MWE0NjRhN2E2MjllYTcxZTIzNTFlZjdkZTBkYTRlMA==
   data.tar.gz: !binary |-
-    YzlmNjg2OGY3ZGYwNjA2YjM3MzNlMDFlM2I2ZDdiMWQzMjViZGQ0ZQ==
+    YTgzNjcyNDJkYzYzOWE2OTI3ZGM3YzhmMzAxYzYzZTA2NmRjOTBkZA==
 SHA512:
   metadata.gz: !binary |-
-    ZmJlYmU5ZTYxZWFkOGUwOTUzNGMyMDNjZjBhOWE2N2NlYTVmZWVmZDc1ZjAz
-    YzNkOTQ0ZThlMDAwYmEyZjlkMDgzNzlmYzkzZTMxMTk2NmZkNWQ1OWQzMzc2
-    YWMzOWMxYzQxNGUxODk1MzQxMDg1NGVkNGJmYTQxOTY2MDc0M2E=
+    NDk5ZTJjNjNlZjRhZGZhMzJhMTg5ODZmNDY4NmI4MWZlYTMwYTk3YmQwMjQ4
+    ZDU0ZGVjNTdlYmVjZDZhZWI4YjYwZTQ3ZDdhYzhjODA0OTNmNmQyYzlmNzIx
+    Yzc3MDg3M2Y0MTU1MjMwOTE5MTcyZjM1MTJlYzI4OGU5NzUyZjU=
   data.tar.gz: !binary |-
-    Nzg5ZDVmMDZhMzkyNjBlMTljMGIyNDI0NzgwZjkzZWQ4NWE0ZTEyNDcxMTg2
-    YTZmZGYxNWU5ZTllY2YyODQ1MjVhMjM0YzAzNzY4ZjU3ZGNhMTY0NDQ0ZTQ3
-    NjUzMzVhNGU2YTY3ZGIzMzZkM2RiODBkYzJjNDQxYmI5OTc2NTA=
+    YmY2YzU4NGI1MjYwM2E3YjVjYWMyNGVjNzFkOTBhZDBlYjUwMzI2NjZmZjNi
+    ODVjYzY2NDcxNTdmN2Q5YjY0YTkxMjJmMzVlMDc4Yzg4ODM3YmMzNDBiY2Q1
+    YjE0MWI2MjczNmMxNjhjZDY3MjZlYmEzNjQ4MjAyZDQ5N2FkMzg=

data/Gemfile.lock

@@ -1,16 +1,18 @@
 GIT
   remote: git://github.com/ixti/jekyll-assets.git
-  revision: ab60a35479b683258bef7ca5b4692964c5659589
+  revision: 21ae354ac898b87cd797fd5dc1449fe8b1004a5a
   specs:
-    jekyll-assets (0.7.9)
+    jekyll-assets (0.8.0)
       jekyll (>= 1.0.0, < 3.0.0)
       sass
       sprockets (~> 2.10)
+      sprockets-helpers
+      sprockets-sass
 
 PATH
   remote: .
   specs:
-    atlas_assets (0.8.0)
+    atlas_assets (0.8.1)
       handlebars_assets (~> 0.15)
 
 GEM
@@ -32,9 +34,9 @@ GEM
       eco-source
       execjs
     eco-source (1.1.0.rc.1)
-    execjs (2.1.0)
+    execjs (2.2.1)
     fast-stemmer (1.0.2)
-    handlebars_assets (0.16)
+    handlebars_assets (0.17.1)
       execjs (>= 1.2.9)
       multi_json
       sprockets (>= 2.0.3)
@@ -74,6 +76,11 @@ GEM
       multi_json (~> 1.0)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
+    sprockets-helpers (1.1.0)
+      sprockets (~> 2.0)
+    sprockets-sass (1.1.0)
+      sprockets (~> 2.0)
+      tilt (~> 1.1)
     tilt (1.4.1)
     yajl-ruby (1.1.0)
 

data/Procfile.dev

@@ -1,2 +1,3 @@
 web: bundle exec jekyll serve -w
-sass: sass --watch lib/assets/stylesheets:docs/ignore
+sass: sass --watch lib/assets/stylesheets:docs/ignore
+coffee: coffee -o docs/ignore -wc lib/assets/javascripts

data/docs/_posts/2014-07-15-drop-button.md

@@ -0,0 +1,92 @@
+---
+layout: default
+title:  "Drop Button"
+---
+
+Drop Button
+===========
+
+<div class="dropbutton"></div>
+
+Use this drop button when you want to have one main button but also maybe sometimes a few other actions that are useful to have but you don't think will get used often.
+
+
+~~~javascript
+$(function () {
+    window.dropbutton = new classes.DropButtonView({ 
+        models: [{
+            label: "Main option",
+            main: true,
+            onclick: "http://google.com"
+        },
+        {
+            label: "Secondary option",
+            onclick: function () {
+                alert("You clicked the secondary option")
+            },
+            className: "secondary"
+        },
+        {
+            label: "Tertiary option",
+            onclick: "/colors.html"
+        },
+        {
+            label: "Quaternary?",
+            onclick: "/tabs.html",
+            className: "quaternary warning"
+        }]
+    })
+    $('.dropbutton').html(dropbutton.render().el)
+})
+~~~
+
+Custom CSS:
+
+~~~css
+.quaternary.warning {
+    background-color: red;
+}
+
+.secondary a {
+    color: green;
+}
+~~~
+
+<style>
+.quaternary.warning {
+    background-color: red;
+}
+
+.secondary a {
+    color: green;
+}
+</style>
+
+<script type="text/javascript">
+$(function () {
+    window.dropbutton = new classes.DropButtonView({ 
+        models: [{
+            label: "Main option",
+            main: true,
+            onclick: "http://google.com"
+        },
+        {
+            label: "Secondary option",
+            onclick: function () {
+                alert("You clicked the secondary option")
+            },
+            className: "secondary"
+        },
+        {
+            label: "Tertiary option",
+            onclick: "/colors.html"
+        },
+        {
+            label: "Quaternary?",
+            onclick: "/tabs.html",
+            className: "quaternary warning"
+        }]
+    })
+    $('.dropbutton').html(dropbutton.render().el)
+})
+</script>

data/lib/assets/javascripts/templates/dropbutton.jst.eco

@@ -0,0 +1,7 @@
+<a class="drpb-main" href="<%= @functionator(@main_button.onclick) %>"><%= @main_button.label %></a>
+<a href="#" class="drpb-btn">
+  &nbsp;
+</a>
+
+<div class="drpb-drop">
+</div>

data/lib/assets/javascripts/templates/dropbutton_item.jst.eco

@@ -0,0 +1 @@
+<a href="<%= @functionator(@model.onclick) %>"><%= @model.label %></a>

data/lib/assets/javascripts/views/dropbutton.coffee

@@ -0,0 +1,85 @@
+classes.DropButtonView = Backbone.View.extend
+  events:
+    'click .drpb-main a': 'click_main'
+
+  className: 'drpb'
+
+  initialize: (opts) ->
+    if !opts.models? and !opts.collection?
+      throw new Error("DropButtonView must be instantiated with either a collection or array of objects")
+    else if opts.collection?
+      @collection = opts.collection
+    else
+      @collection = new Backbone.Collection(opts.models)
+
+    @template = JST["templates/dropbutton"]
+    @main_button = @get_main()
+    @others = @collection.reject((m) => m is @main_button)
+    @subviews = []
+
+    _.each @others, (other) =>
+      view = new classes.DropButtonItemView({model:other})
+      @subviews.push view
+
+  # Set the main element for the button, if nothing is specified opt for the
+  # first model.
+  get_main: ->
+    d = @collection.find (m) -> m.get('main') is true
+    if d?
+      d
+    else
+      @collection.first()
+
+  # Listener for a click event on the main button
+  click_main: ->
+    if _.isFunction @main_button.get('onclick')
+      @main_button.get('onclick')()
+      false
+
+  functionator: (v) -> if _.isFunction(v) then "#" else v
+
+  render: ->
+    @$el.html @template({
+      functionator: @functionator,
+      main_button: @main_button.toJSON(),
+      others: @others
+    })
+
+    # Render each item as a view because a click event could be a function not
+    # just a link.
+    _.each @subviews, (view) =>
+      @$('.drpb-drop').append(view.render().el)
+
+    # Sets up dropdown on small button
+    @drop = new Drop
+      target: @$el.find('.drpb-btn')[0]
+      content: @$('.drpb-drop')[0]
+      position: 'bottom right'
+      openOn: 'click'
+      tetherOptions:
+        offset: '2px -1px'
+
+    @
+
+classes.DropButtonItemView = Backbone.View.extend
+  events:
+    'click a': 'click'
+
+  click: ->
+    if _.isFunction(@model.get('onclick'))
+      @model.get('onclick')()
+      false
+
+  functionator: (v) -> if _.isFunction(v) then "#" else v
+
+  initialize: (opts) ->
+    @model = opts.model
+    @template = JST['templates/dropbutton_item']
+    @$el.addClass(@model.get('className'))
+
+  render: ->
+    @$el.html(@template({
+      functionator: @functionator,
+      model: @model.toJSON()
+    }))
+    @

data/lib/assets/stylesheets/atlas_assets.scss

@@ -20,6 +20,7 @@
 @import "atlas_assets/tabs";
 @import "atlas_assets/utilities";
 @import "atlas_assets/chosen";
+@import "atlas_assets/dropbutton";
 
 @import "atlas_assets/drop-theme-arrows-bounce-dark";
 @import "atlas_assets/drop-theme-arrows-bounce";

data/lib/assets/stylesheets/atlas_assets/_dropbutton.scss

@@ -0,0 +1,72 @@
+@import "atlas_assets/_variables";
+@import "atlas_assets/_mixins";
+
+.drpb, .drpb-drop {
+  @include box-sizing(border-box);
+  width: 200px;
+}
+
+.drpb {
+  @include border-radius($defaultBorderRadius);
+  border: 1px solid $defaultBorderColor;
+  display: table;
+
+  .drpb-main,
+  .drpb-btn {
+    @include box-sizing(border-box);
+    background-color: $defaultBackgroundColor;
+    display: table-cell;
+    padding: 5px;
+
+    &:hover {
+      background-color: $lightest_blue;
+      text-decoration: none;
+    }
+  }
+
+  .drpb-main {
+  }
+
+  .drpb-btn {
+    border-left: 1px solid $defaultBorderColor;
+    width: 20px;
+    background: image-url('chosen-sprite.png') 4px 5px no-repeat $defaultBackgroundColor;
+
+    &:hover, &.drop-enabled {
+      background-color: $lightest_blue;
+    }
+  }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
+
+  .drpb .drpb-btn {
+    background-image: image-url('chosen-sprite@2x.png') !important;
+  }
+}
+
+.drpb-drop {
+  background: $defaultBackgroundColor;
+  border-top: 2px solid $defaultBorderColor;
+
+  div {
+    border-bottom: 1px solid $defaultBorderColor;
+    border-left: 1px solid $defaultBorderColor;
+    border-right: 1px solid $defaultBorderColor;
+
+    &:last-child {
+      @include border-bottom-right-radius($defaultBorderRadius);
+      @include border-bottom-left-radius($defaultBorderRadius);
+    }
+
+    a {
+      display: block;
+      padding: 4px 5px;
+
+      &:hover {
+        background-color: $lightest_blue;
+        text-decoration: none;
+      }
+    }
+  }
+}

data/lib/atlas_assets/version.rb

@@ -1,5 +1,5 @@
 module Atlas
 	module Assets
-		VERSION = "0.8.1"
+		VERSION = "0.8.2"
 	end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: atlas_assets
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.8.2
 platform: ruby
 authors:
 - Rune Skjoldborg Madsen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-30 00:00:00.000000000 Z
+date: 2014-07-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: handlebars_assets
@@ -62,6 +62,7 @@ files:
 - docs/_posts/2014-03-12-drop.md
 - docs/_posts/2014-04-03-keypress.md
 - docs/_posts/2014-05-05-select.md
+- docs/_posts/2014-07-15-drop-button.md
 - docs/_posts/2014-2-10-colors.md
 - docs/glyphicons-license.txt
 - docs/index.html
@@ -97,8 +98,11 @@ files:
 - lib/assets/javascripts/libraries/underscore.js
 - lib/assets/javascripts/models/dropdown.coffee
 - lib/assets/javascripts/tabs.js
+- lib/assets/javascripts/templates/dropbutton.jst.eco
+- lib/assets/javascripts/templates/dropbutton_item.jst.eco
 - lib/assets/javascripts/templates/dropdown.hbs
 - lib/assets/javascripts/templates/select.jst.eco
+- lib/assets/javascripts/views/dropbutton.coffee
 - lib/assets/javascripts/views/dropdown_view.coffee
 - lib/assets/javascripts/views/select.coffee
 - lib/assets/stylesheets/atlas_assets.scss
@@ -107,6 +111,7 @@ files:
 - lib/assets/stylesheets/atlas_assets/_buttons.scss
 - lib/assets/stylesheets/atlas_assets/_chosen.scss
 - lib/assets/stylesheets/atlas_assets/_code.scss
+- lib/assets/stylesheets/atlas_assets/_dropbutton.scss
 - lib/assets/stylesheets/atlas_assets/_dropdown.scss
 - lib/assets/stylesheets/atlas_assets/_flash.scss
 - lib/assets/stylesheets/atlas_assets/_fontawesome.scss