atlas_assets 0.6.6.1 → 0.6.7

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    NTNiMjY5MWJhNGRjNjQzYzhhNGRlMjYzODhlZGJkMzE0N2E2ODY1NA==
+    MGZiMDhkMDc3ZDM3OWI0MjE3ZjIzMGU0MGU1ZGE5YjRhYWVhYTgzMg==
   data.tar.gz: !binary |-
-    Y2FiMjRmN2NiN2QzODUyYjE3N2MxNzcyOTQwZTM5MjZlMDUzYTc2MQ==
+    MGViZTczY2MxYjE3YjQ5MTJjNzU5MzY2ZjI5MmU2OTcyZGU0ZmJmMg==
 SHA512:
   metadata.gz: !binary |-
-    NTJmMzg3YzQ3MmI5MmM3MDc5MDVmZGFjMzYyNzBlNDdkZTIwYjYwYTEwNDNi
-    NTVmNWE3ODNmMDczNjcyMDc3YTk0NmZjN2MzZDUxMTI4ZjI4NzVmNDI2YTVh
-    NThhYmM2OWVjYTc5ZTY4NDRhMmNiMTJmMDBkODgyNzhiNWQwZDA=
+    YjIyNDc0OWNiMzk0YTVkNTJlMWVmNDJlYzU3ODlkNDA1ZTZkNTk1ZDU0YjI1
+    NzQ0ZjBjNmM0YmM3YWJiMGI4MmI3MGQxYTVkOGJhODZkMjg4NGRmYmIyZjc5
+    NzZkYjFhMzU3NjM0MzhlYzZiY2ZhYzBjMTM1MDBkZmFhZDMyMjA=
   data.tar.gz: !binary |-
-    YjJkNTFhMmRkOWM1ZDgxYTVkOTEyNzEyMzEwN2FhYjQ1MDNkY2Y1MzYzNzE4
-    NTQxZDg4MDkwMjM2YjRiZGFhMGEyYTYyZDYzMjJjZGM4M2I4ZmQ2NTg1MDg0
-    OWQxMjIzMzlkNzMwMjFkOTA1NWYyZjA2YzlmMzI3ZGI4NWU5ODU=
+    N2M5NDU3MTdkMGM1NWJkNTg3NzNlMTk1NDg2MGMyNWRkNGNkYzhiNWIzNDM4
+    YTRlYzk1ODM0ZDUzYjNiZGRmNWI2ZjE3NmY4YmU1OTc5NjQ5Mzg0ZWZhODk0
+    NjFkNTFkMzM4Y2FiYWY0NmYwNDRjMTE5MmY0NWU5YTgyODYzYzA=

data/Gemfile

@@ -14,4 +14,5 @@ gem "rack-rewrite", "~> 1.3.3"
 gem "pygmentize", "~> 0.0.3"
 gem "kramdown", "~> 1.0.2"
 gem "coderay", "~> 1.0.9"
-gem "puma", "~> 2.0.1"
+gem "puma", "~> 2.0.1"
+gem "eco", "~> 1.0.0"

data/Gemfile.lock

@@ -1,15 +1,16 @@
 GIT
   remote: git://github.com/ixti/jekyll-assets.git
-  revision: 20875e89be0d460bc79e82cc741b2893d5fc0c83
+  revision: 4ce7eeb9eb4af29b14b77ba32addf05889f6961c
   specs:
     jekyll-assets (0.7.7)
       jekyll (~> 1.0)
+      sass
       sprockets (~> 2.10)
 
 PATH
   remote: .
   specs:
-    atlas_assets (0.6.6)
+    atlas_assets (0.6.6.1)
       handlebars_assets (~> 0.15)
 
 GEM
@@ -26,6 +27,11 @@ GEM
     commander (4.1.6)
       highline (~> 1.6.11)
     directory_watcher (1.4.1)
+    eco (1.0.0)
+      coffee-script
+      eco-source
+      execjs
+    eco-source (1.1.0.rc.1)
     execjs (2.0.2)
     fast-stemmer (1.0.2)
     handlebars_assets (0.15)
@@ -48,7 +54,7 @@ GEM
     kramdown (1.0.2)
     liquid (2.5.5)
     maruku (0.7.1)
-    multi_json (1.9.2)
+    multi_json (1.9.3)
     posix-spawn (0.3.8)
     puma (2.0.1)
       rack (>= 1.1, < 2.0)
@@ -63,7 +69,7 @@ GEM
     rake (10.0.4)
     safe_yaml (0.7.1)
     sass (3.2.19)
-    sprockets (2.12.0)
+    sprockets (2.12.1)
       hike (~> 1.2)
       multi_json (~> 1.0)
       rack (~> 1.0)
@@ -78,6 +84,7 @@ DEPENDENCIES
   atlas_assets!
   coderay (~> 1.0.9)
   coffee-script
+  eco
   jekyll (~> 1.0.2)
   jekyll-assets!
   kramdown (~> 1.0.2)

data/docs/_layouts/default.html

@@ -5,7 +5,6 @@
     <title>{{ page.title }}</title>
     {% stylesheet atlas_assets %}
     {% javascript atlas_assets %}
-    <script>JST = HandlebarsTemplates</script>
     <style type="text/css">
       body {
         padding: 60px 0px;

data/docs/_plugins/jekyll_assets.rb

@@ -1,3 +1 @@
-require 'handlebars_assets'
-Sprockets.append_path HandlebarsAssets.path
 require "jekyll-assets"

data/docs/_posts/2013-10-28-dropdown.md

@@ -3,7 +3,7 @@ layout: default
 title:  "Dropdowns"
 ---
 
-Dropdowns
+Dropdowns _(deprecated)_
 ======
 
 

data/docs/_posts/2014-05-05-select.md

@@ -0,0 +1,116 @@
+---
+layout: default
+title:  "Select View"
+---
+
+Select View
+======
+
+`classes.SelectView` is a wrapper for the `Select.js` library.
+
+## Simple Array Example
+
+The SelectView can be implemented with a simple array. It will construct a Backbone Collection out of the array of values that you pass.
+
+<div id="simple-array"></div>
+
+~~~js
+var select1 = new classes.SelectView({
+    values: ["Rune","Steve","Zach"],
+    helper: "Owner"
+})
+$('#simple-array').html(select1.render().el)
+
+// Listen for change events
+select1.on("change", function (model) {
+    console.log(model)
+    $('#simple-array').append(model.get('label'))
+})
+~~~
+
+<script>
+var select1 = new classes.SelectView({
+    values: ["Rune","Steve","Zach"],
+    helper: "Owner"
+})
+$('#simple-array').html(select1.render().el)
+
+// Listen for change events
+select1.on("change", function (model) {
+    console.log(model)
+    $('#simple-array').append(model.get('label'))
+})
+</script>
+
+## Backbone Collection
+
+To implement a SelectView with a Backbone Collection, you must pass both a collection and specify which attribute is to be the label.
+
+<div id="collection-example"></div>
+
+~~~js
+var select2 = new classes.SelectView({
+    collection: new Backbone.Collection([
+        {name:"Rune", key:"madsen"},
+        {label:"Steve", key:"klise"},
+        {label:"Zach", key:"Schwartz"}
+    ]),
+    label: "name",
+})
+$('#collection-example').html(select2.render().el)
+
+// Listen for changes
+select2.on('change', function (model) {
+    $('collection-example').append(model.get('key'))
+})
+~~~
+
+<script>
+var select2 = new classes.SelectView({
+    collection: new Backbone.Collection([
+        {name:"Rune", key:"madsen"},
+        {name:"Steve", key:"klise"},
+        {name:"Zach", key:"schwartz"}
+    ]),
+    label: "name",
+})
+$('#collection-example').html(select2.render().el)
+
+// Listen for changes
+select2.on('change', function (model) {
+    $('#collection-example').append(model.get('key'))
+})
+</script>
+
+
+## Helpers
+
+You can also add helper text!
+
+<div id="helper-example"></div>
+
+~~~js
+var select3 = new classes.SelectView({
+    collection: new Backbone.Collection([
+        {name:"Rune", key:"madsen"},
+        {name:"Steve", key:"klise"},
+        {name:"Zach", key:"schwartz"}
+    ]),
+    helper: "NAMES!",
+    label: "name",
+})
+$('#helper-example').html(select3.render().el)
+~~~
+
+<script>
+var select3 = new classes.SelectView({
+    collection: new Backbone.Collection([
+        {name:"Rune", key:"madsen"},
+        {name:"Steve", key:"klise"},
+        {name:"Zach", key:"schwartz"}
+    ]),
+    helper: "NAMES!",
+    label: "name",
+})
+$('#helper-example').html(select3.render().el)
+</script>

data/lib/assets/javascripts/atlas_assets.js

@@ -1,7 +1,6 @@
 //= require libraries/jquery
 //= require libraries/jquery_ujs
 //= require libraries/underscore
-//= require handlebars.runtime
 //= require libraries/string
 //= require libraries/backbone
 //= require libraries/bootstrap

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

@@ -0,0 +1,12 @@
+<% if @helper?: %>
+  <span class="helper"><%= @helper%></span>
+  <div class="dropdown-with-helper-container">
+<% end %>
+<select class="dropdown-list" <% if @multiple: %>multiple<% end %> <% if @placeholder?: %>data-placeholder='<%= @placeholder %>'<% end %>>
+  <% for model in @models: %>
+  <option <% if model.selected?: %>selected<% end %> <% if model.disabled: %>disabled<% end %>><%= model.label %></option>
+  <% end %>
+</select>
+<% if @helper?: %>
+</div>
+<% end %>

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

@@ -0,0 +1,12 @@
+<% if @helper?: %>
+  <span class="helper"><%= @helper %>:</span>
+  <div class="dropdown-with-helper-container">
+<% end %>
+<select class="dropdown-list" <% if @multiple: %>multiple<% end %> <% if @placeholder?: %>data-placeholder='<%= @placeholder %>'<% end %>>
+  <% for model in @models: %>
+  <option <% if model.selected?: %>selected<% end %> <% if model.disabled: %>disabled<% end %>><%= model.get('label') %></option>
+  <% end %>
+</select>
+<% if @helper?: %>
+</div>
+<% end %>

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

@@ -7,7 +7,7 @@ classes.DropdownView = Backbone.View.extend
     if !@collection?
       @collection = new classes.DropdownCollection
     @opts = _.extend({width: "100%", disable_search_threshold: 4}, opts)
-    @template = JST["dropdown"];
+    @template = JST["templates/dropdown"];
     @listenTo(@collection, 'add', @render)
     @collection.each (model) =>
       @set_default(model)
@@ -24,7 +24,8 @@ classes.DropdownView = Backbone.View.extend
 
   render: () ->
     @rendered = true;
-    @$el.html(this.template(_.extend(@opts, {models: @collection.toJSON()})))
+    t = @
+    @$el.html(t.template(_.extend(@opts, {models: @collection.toJSON()})))
 
     this.delegateEvents();
     @$('.dropdown-list').chosen({width: @opts.width, disable_search_threshold: @opts.disable_search_threshold}).change((e,selected) =>

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

@@ -0,0 +1,63 @@
+# Two ways to createa a Select dropdown
+#
+# Start with a Backbone Collection and a specified label
+#
+# select_view = new classes.SelectView({
+#   collection:some_collection,
+#   label: "name"
+# })
+#
+# Start with an array
+#
+# select_view = new classes.SelectView({
+#   values: ["rune","steve","zach"]
+# })
+
+class classes.SelectView extends Backbone.View
+
+  defaults: {label: 'label'}
+  className: "select-dropdown"
+
+  initialize: (options) ->
+    @rendered = false
+
+    @label = if options.label then options.label else "label"
+    @helper = options.helper if options.helper?
+
+    # The select view needs a collection.
+    if !@collection
+      @collection = @collection_from_values(options.values)
+    else if @collection.length > 0
+      t = @
+      @collection.each (model,@label) -> t.set_model_label(model)
+
+    @template = JST["templates/select"]
+    @listenTo(@collection, 'add', @add_model)
+    @listenTo(@collection, 'remove', @render)
+    @listenTo(@, 'rendered', @bind_select)
+
+  collection_from_values: (values) ->
+    @collection = new Backbone.Collection(_.map(values, (v) ->
+      return {"label": v}
+    ))
+
+  add_model: (m) ->
+    @set_model_label(m)
+    @render().el
+
+  set_model_label: (model) =>
+    model.set('label',model.get(@label))
+
+  bind_select: ->
+    t = @
+    @rendered = true
+    @select = new Select({el: @$el.find('select')[0] })
+    @select.on('change', (v) ->
+      selected_model = t.collection.find((m) -> m.get(t.label) is v.value)
+      t.trigger('change', selected_model)
+    )
+
+  render: ->
+    @$el.html(@template({models:@collection.models, helper:@helper}))
+    @trigger('rendered') if !@rendered
+    @

data/lib/assets/stylesheets/atlas_assets.scss

@@ -27,6 +27,7 @@
 @import "atlas_assets/drop-theme-basic";
 
 @import "atlas_assets/select-theme-defaults";
+@import "atlas_assets/select";
 
 @import "atlas_assets/responsive-utilities";
 @import "atlas_assets/responsive-768-979";

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

@@ -0,0 +1,12 @@
+.select-dropdown {
+  display: inline-block;
+  margin: 6px 0;
+
+  .helper {
+    padding-right: 4px;
+  }
+
+  .dropdown-with-helper-container {
+    margin-right: 8px;
+  }
+}

data/lib/atlas_assets.rb

@@ -1,3 +1 @@
-require 'atlas_assets/engine'
-require 'handlebars_assets'
-HandlebarsAssets::Config.template_namespace = 'JST'
+require 'atlas_assets/engine'

data/lib/atlas_assets/version.rb

@@ -1,5 +1,5 @@
 module Atlas
 	module Assets
-		VERSION = "0.6.6.1"
+		VERSION = "0.6.7"
 	end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: atlas_assets
 version: !ruby/object:Gem::Version
-  version: 0.6.6.1
+  version: 0.6.7
 platform: ruby
 authors:
 - Rune Skjoldborg Madsen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-04-16 00:00:00.000000000 Z
+date: 2014-05-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: handlebars_assets
@@ -61,6 +61,7 @@ files:
 - docs/_posts/2013-10-28-dropdown.md
 - docs/_posts/2014-03-12-drop.md
 - docs/_posts/2014-04-03-keypress.md
+- docs/_posts/2014-05-05-select.md
 - docs/_posts/2014-2-10-colors.md
 - docs/glyphicons-license.txt
 - docs/index.html
@@ -96,8 +97,10 @@ files:
 - lib/assets/javascripts/libraries/underscore.js
 - lib/assets/javascripts/models/dropdown.coffee
 - lib/assets/javascripts/tabs.js
-- lib/assets/javascripts/templates/dropdown.hbs
+- lib/assets/javascripts/templates/dropdown.jst.eco
+- lib/assets/javascripts/templates/select.jst.eco
 - lib/assets/javascripts/views/dropdown_view.coffee
+- lib/assets/javascripts/views/select.coffee
 - lib/assets/stylesheets/atlas_assets.scss
 - lib/assets/stylesheets/atlas_assets/_boxes.scss
 - lib/assets/stylesheets/atlas_assets/_button-groups.scss
@@ -122,6 +125,7 @@ files:
 - lib/assets/stylesheets/atlas_assets/_responsive-767.scss
 - lib/assets/stylesheets/atlas_assets/_responsive-768-979.scss
 - lib/assets/stylesheets/atlas_assets/_responsive-utilities.scss
+- lib/assets/stylesheets/atlas_assets/_select.scss
 - lib/assets/stylesheets/atlas_assets/_tabs.scss
 - lib/assets/stylesheets/atlas_assets/_utilities.scss
 - lib/assets/stylesheets/atlas_assets/_variables.scss

data/lib/assets/javascripts/templates/dropdown.hbs

@@ -1,12 +0,0 @@
-{{#if helper}}
-  <span class="helper">{{helper}}</span>
-  <div class="dropdown-with-helper-container">
-{{/if}}
-<select class="dropdown-list" {{#if multiple}}multiple{{/if}} {{#if placeholder}}data-placeholder='{{placeholder}}'{{/if}}>
-  {{#each models}}
-  <option {{#if selected}}selected{{/if}} {{#if disabled}}disabled{{/if}}>{{label}}</option>
-  {{/each}}
-</select>
-{{#if helper}}
-</div>
-{{/if}}