atlas_assets 0.8.1 → 0.8.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. checksums.yaml +8 -8
  2. data/Gemfile.lock +12 -5
  3. data/Procfile.dev +2 -1
  4. data/docs/_posts/2014-07-15-drop-button.md +92 -0
  5. data/lib/assets/javascripts/templates/dropbutton.jst.eco +7 -0
  6. data/lib/assets/javascripts/templates/dropbutton_item.jst.eco +1 -0
  7. data/lib/assets/javascripts/views/dropbutton.coffee +85 -0
  8. data/lib/assets/stylesheets/atlas_assets.scss +1 -0
  9. data/lib/assets/stylesheets/atlas_assets/_dropbutton.scss +72 -0
  10. data/lib/atlas_assets/version.rb +1 -1
  11. metadata +7 -2
checksums.yaml CHANGED
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- ZDA0YmFkNWNmZWExNzY4ZTQ5OWU3NzAwZmE1MDMwM2Q0NjUzNWM5Yw==
4
+ ZjdhNTAzOWU1MWE0NjRhN2E2MjllYTcxZTIzNTFlZjdkZTBkYTRlMA==
5
5
  data.tar.gz: !binary |-
6
- YzlmNjg2OGY3ZGYwNjA2YjM3MzNlMDFlM2I2ZDdiMWQzMjViZGQ0ZQ==
6
+ YTgzNjcyNDJkYzYzOWE2OTI3ZGM3YzhmMzAxYzYzZTA2NmRjOTBkZA==
7
7
  SHA512:
8
8
  metadata.gz: !binary |-
9
- ZmJlYmU5ZTYxZWFkOGUwOTUzNGMyMDNjZjBhOWE2N2NlYTVmZWVmZDc1ZjAz
10
- YzNkOTQ0ZThlMDAwYmEyZjlkMDgzNzlmYzkzZTMxMTk2NmZkNWQ1OWQzMzc2
11
- YWMzOWMxYzQxNGUxODk1MzQxMDg1NGVkNGJmYTQxOTY2MDc0M2E=
9
+ NDk5ZTJjNjNlZjRhZGZhMzJhMTg5ODZmNDY4NmI4MWZlYTMwYTk3YmQwMjQ4
10
+ ZDU0ZGVjNTdlYmVjZDZhZWI4YjYwZTQ3ZDdhYzhjODA0OTNmNmQyYzlmNzIx
11
+ Yzc3MDg3M2Y0MTU1MjMwOTE5MTcyZjM1MTJlYzI4OGU5NzUyZjU=
12
12
  data.tar.gz: !binary |-
13
- Nzg5ZDVmMDZhMzkyNjBlMTljMGIyNDI0NzgwZjkzZWQ4NWE0ZTEyNDcxMTg2
14
- YTZmZGYxNWU5ZTllY2YyODQ1MjVhMjM0YzAzNzY4ZjU3ZGNhMTY0NDQ0ZTQ3
15
- NjUzMzVhNGU2YTY3ZGIzMzZkM2RiODBkYzJjNDQxYmI5OTc2NTA=
13
+ YmY2YzU4NGI1MjYwM2E3YjVjYWMyNGVjNzFkOTBhZDBlYjUwMzI2NjZmZjNi
14
+ ODVjYzY2NDcxNTdmN2Q5YjY0YTkxMjJmMzVlMDc4Yzg4ODM3YmMzNDBiY2Q1
15
+ YjE0MWI2MjczNmMxNjhjZDY3MjZlYmEzNjQ4MjAyZDQ5N2FkMzg=
data/Gemfile.lock CHANGED
@@ -1,16 +1,18 @@
1
1
  GIT
2
2
  remote: git://github.com/ixti/jekyll-assets.git
3
- revision: ab60a35479b683258bef7ca5b4692964c5659589
3
+ revision: 21ae354ac898b87cd797fd5dc1449fe8b1004a5a
4
4
  specs:
5
- jekyll-assets (0.7.9)
5
+ jekyll-assets (0.8.0)
6
6
  jekyll (>= 1.0.0, < 3.0.0)
7
7
  sass
8
8
  sprockets (~> 2.10)
9
+ sprockets-helpers
10
+ sprockets-sass
9
11
 
10
12
  PATH
11
13
  remote: .
12
14
  specs:
13
- atlas_assets (0.8.0)
15
+ atlas_assets (0.8.1)
14
16
  handlebars_assets (~> 0.15)
15
17
 
16
18
  GEM
@@ -32,9 +34,9 @@ GEM
32
34
  eco-source
33
35
  execjs
34
36
  eco-source (1.1.0.rc.1)
35
- execjs (2.1.0)
37
+ execjs (2.2.1)
36
38
  fast-stemmer (1.0.2)
37
- handlebars_assets (0.16)
39
+ handlebars_assets (0.17.1)
38
40
  execjs (>= 1.2.9)
39
41
  multi_json
40
42
  sprockets (>= 2.0.3)
@@ -74,6 +76,11 @@ GEM
74
76
  multi_json (~> 1.0)
75
77
  rack (~> 1.0)
76
78
  tilt (~> 1.1, != 1.3.0)
79
+ sprockets-helpers (1.1.0)
80
+ sprockets (~> 2.0)
81
+ sprockets-sass (1.1.0)
82
+ sprockets (~> 2.0)
83
+ tilt (~> 1.1)
77
84
  tilt (1.4.1)
78
85
  yajl-ruby (1.1.0)
79
86
 
data/Procfile.dev CHANGED
@@ -1,2 +1,3 @@
1
1
  web: bundle exec jekyll serve -w
2
- sass: sass --watch lib/assets/stylesheets:docs/ignore
2
+ sass: sass --watch lib/assets/stylesheets:docs/ignore
3
+ coffee: coffee -o docs/ignore -wc lib/assets/javascripts
data/docs/_posts/2014-07-15-drop-button.md ADDED
@@ -0,0 +1,92 @@
1
+ ---
2
+ layout: default
3
+ title: "Drop Button"
4
+ ---
5
+
6
+ Drop Button
7
+ ===========
8
+
9
+ <div class="dropbutton"></div>
10
+
11
+ 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.
12
+
13
+
14
+ ~~~javascript
15
+ $(function () {
16
+ window.dropbutton = new classes.DropButtonView({
17
+ models: [{
18
+ label: "Main option",
19
+ main: true,
20
+ onclick: "http://google.com"
21
+ },
22
+ {
23
+ label: "Secondary option",
24
+ onclick: function () {
25
+ alert("You clicked the secondary option")
26
+ },
27
+ className: "secondary"
28
+ },
29
+ {
30
+ label: "Tertiary option",
31
+ onclick: "/colors.html"
32
+ },
33
+ {
34
+ label: "Quaternary?",
35
+ onclick: "/tabs.html",
36
+ className: "quaternary warning"
37
+ }]
38
+ })
39
+ $('.dropbutton').html(dropbutton.render().el)
40
+ })
41
+ ~~~
42
+
43
+ Custom CSS:
44
+
45
+ ~~~css
46
+ .quaternary.warning {
47
+ background-color: red;
48
+ }
49
+
50
+ .secondary a {
51
+ color: green;
52
+ }
53
+ ~~~
54
+
55
+ <style>
56
+ .quaternary.warning {
57
+ background-color: red;
58
+ }
59
+
60
+ .secondary a {
61
+ color: green;
62
+ }
63
+ </style>
64
+
65
+ <script type="text/javascript">
66
+ $(function () {
67
+ window.dropbutton = new classes.DropButtonView({
68
+ models: [{
69
+ label: "Main option",
70
+ main: true,
71
+ onclick: "http://google.com"
72
+ },
73
+ {
74
+ label: "Secondary option",
75
+ onclick: function () {
76
+ alert("You clicked the secondary option")
77
+ },
78
+ className: "secondary"
79
+ },
80
+ {
81
+ label: "Tertiary option",
82
+ onclick: "/colors.html"
83
+ },
84
+ {
85
+ label: "Quaternary?",
86
+ onclick: "/tabs.html",
87
+ className: "quaternary warning"
88
+ }]
89
+ })
90
+ $('.dropbutton').html(dropbutton.render().el)
91
+ })
92
+ </script>
data/lib/assets/javascripts/templates/dropbutton.jst.eco ADDED
@@ -0,0 +1,7 @@
1
+ <a class="drpb-main" href="<%= @functionator(@main_button.onclick) %>"><%= @main_button.label %></a>
2
+ <a href="#" class="drpb-btn">
3
+ &nbsp;
4
+ </a>
5
+
6
+ <div class="drpb-drop">
7
+ </div>
data/lib/assets/javascripts/templates/dropbutton_item.jst.eco ADDED
@@ -0,0 +1 @@
1
+ <a href="<%= @functionator(@model.onclick) %>"><%= @model.label %></a>
data/lib/assets/javascripts/views/dropbutton.coffee ADDED
@@ -0,0 +1,85 @@
1
+ classes.DropButtonView = Backbone.View.extend
2
+ events:
3
+ 'click .drpb-main a': 'click_main'
4
+
5
+ className: 'drpb'
6
+
7
+ initialize: (opts) ->
8
+ if !opts.models? and !opts.collection?
9
+ throw new Error("DropButtonView must be instantiated with either a collection or array of objects")
10
+ else if opts.collection?
11
+ @collection = opts.collection
12
+ else
13
+ @collection = new Backbone.Collection(opts.models)
14
+
15
+ @template = JST["templates/dropbutton"]
16
+ @main_button = @get_main()
17
+ @others = @collection.reject((m) => m is @main_button)
18
+ @subviews = []
19
+
20
+ _.each @others, (other) =>
21
+ view = new classes.DropButtonItemView({model:other})
22
+ @subviews.push view
23
+
24
+ # Set the main element for the button, if nothing is specified opt for the
25
+ # first model.
26
+ get_main: ->
27
+ d = @collection.find (m) -> m.get('main') is true
28
+ if d?
29
+ d
30
+ else
31
+ @collection.first()
32
+
33
+ # Listener for a click event on the main button
34
+ click_main: ->
35
+ if _.isFunction @main_button.get('onclick')
36
+ @main_button.get('onclick')()
37
+ false
38
+
39
+ functionator: (v) -> if _.isFunction(v) then "#" else v
40
+
41
+ render: ->
42
+ @$el.html @template({
43
+ functionator: @functionator,
44
+ main_button: @main_button.toJSON(),
45
+ others: @others
46
+ })
47
+
48
+ # Render each item as a view because a click event could be a function not
49
+ # just a link.
50
+ _.each @subviews, (view) =>
51
+ @$('.drpb-drop').append(view.render().el)
52
+
53
+ # Sets up dropdown on small button
54
+ @drop = new Drop
55
+ target: @$el.find('.drpb-btn')[0]
56
+ content: @$('.drpb-drop')[0]
57
+ position: 'bottom right'
58
+ openOn: 'click'
59
+ tetherOptions:
60
+ offset: '2px -1px'
61
+
62
+ @
63
+
64
+ classes.DropButtonItemView = Backbone.View.extend
65
+ events:
66
+ 'click a': 'click'
67
+
68
+ click: ->
69
+ if _.isFunction(@model.get('onclick'))
70
+ @model.get('onclick')()
71
+ false
72
+
73
+ functionator: (v) -> if _.isFunction(v) then "#" else v
74
+
75
+ initialize: (opts) ->
76
+ @model = opts.model
77
+ @template = JST['templates/dropbutton_item']
78
+ @$el.addClass(@model.get('className'))
79
+
80
+ render: ->
81
+ @$el.html(@template({
82
+ functionator: @functionator,
83
+ model: @model.toJSON()
84
+ }))
85
+ @
data/lib/assets/stylesheets/atlas_assets.scss CHANGED
@@ -20,6 +20,7 @@
20
20
  @import "atlas_assets/tabs";
21
21
  @import "atlas_assets/utilities";
22
22
  @import "atlas_assets/chosen";
23
+ @import "atlas_assets/dropbutton";
23
24
 
24
25
  @import "atlas_assets/drop-theme-arrows-bounce-dark";
25
26
  @import "atlas_assets/drop-theme-arrows-bounce";
data/lib/assets/stylesheets/atlas_assets/_dropbutton.scss ADDED
@@ -0,0 +1,72 @@
1
+ @import "atlas_assets/_variables";
2
+ @import "atlas_assets/_mixins";
3
+
4
+ .drpb, .drpb-drop {
5
+ @include box-sizing(border-box);
6
+ width: 200px;
7
+ }
8
+
9
+ .drpb {
10
+ @include border-radius($defaultBorderRadius);
11
+ border: 1px solid $defaultBorderColor;
12
+ display: table;
13
+
14
+ .drpb-main,
15
+ .drpb-btn {
16
+ @include box-sizing(border-box);
17
+ background-color: $defaultBackgroundColor;
18
+ display: table-cell;
19
+ padding: 5px;
20
+
21
+ &:hover {
22
+ background-color: $lightest_blue;
23
+ text-decoration: none;
24
+ }
25
+ }
26
+
27
+ .drpb-main {
28
+ }
29
+
30
+ .drpb-btn {
31
+ border-left: 1px solid $defaultBorderColor;
32
+ width: 20px;
33
+ background: image-url('chosen-sprite.png') 4px 5px no-repeat $defaultBackgroundColor;
34
+
35
+ &:hover, &.drop-enabled {
36
+ background-color: $lightest_blue;
37
+ }
38
+ }
39
+ }
40
+
41
+ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
42
+
43
+ .drpb .drpb-btn {
44
+ background-image: image-url('chosen-sprite@2x.png') !important;
45
+ }
46
+ }
47
+
48
+ .drpb-drop {
49
+ background: $defaultBackgroundColor;
50
+ border-top: 2px solid $defaultBorderColor;
51
+
52
+ div {
53
+ border-bottom: 1px solid $defaultBorderColor;
54
+ border-left: 1px solid $defaultBorderColor;
55
+ border-right: 1px solid $defaultBorderColor;
56
+
57
+ &:last-child {
58
+ @include border-bottom-right-radius($defaultBorderRadius);
59
+ @include border-bottom-left-radius($defaultBorderRadius);
60
+ }
61
+
62
+ a {
63
+ display: block;
64
+ padding: 4px 5px;
65
+
66
+ &:hover {
67
+ background-color: $lightest_blue;
68
+ text-decoration: none;
69
+ }
70
+ }
71
+ }
72
+ }
data/lib/atlas_assets/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Atlas
2
2
  module Assets
3
- VERSION = "0.8.1"
3
+ VERSION = "0.8.2"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: atlas_assets
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.8.1
4
+ version: 0.8.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Rune Skjoldborg Madsen
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-06-30 00:00:00.000000000 Z
11
+ date: 2014-07-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: handlebars_assets
@@ -62,6 +62,7 @@ files:
62
62
  - docs/_posts/2014-03-12-drop.md
63
63
  - docs/_posts/2014-04-03-keypress.md
64
64
  - docs/_posts/2014-05-05-select.md
65
+ - docs/_posts/2014-07-15-drop-button.md
65
66
  - docs/_posts/2014-2-10-colors.md
66
67
  - docs/glyphicons-license.txt
67
68
  - docs/index.html
@@ -97,8 +98,11 @@ files:
97
98
  - lib/assets/javascripts/libraries/underscore.js
98
99
  - lib/assets/javascripts/models/dropdown.coffee
99
100
  - lib/assets/javascripts/tabs.js
101
+ - lib/assets/javascripts/templates/dropbutton.jst.eco
102
+ - lib/assets/javascripts/templates/dropbutton_item.jst.eco
100
103
  - lib/assets/javascripts/templates/dropdown.hbs
101
104
  - lib/assets/javascripts/templates/select.jst.eco
105
+ - lib/assets/javascripts/views/dropbutton.coffee
102
106
  - lib/assets/javascripts/views/dropdown_view.coffee
103
107
  - lib/assets/javascripts/views/select.coffee
104
108
  - lib/assets/stylesheets/atlas_assets.scss
@@ -107,6 +111,7 @@ files:
107
111
  - lib/assets/stylesheets/atlas_assets/_buttons.scss
108
112
  - lib/assets/stylesheets/atlas_assets/_chosen.scss
109
113
  - lib/assets/stylesheets/atlas_assets/_code.scss
114
+ - lib/assets/stylesheets/atlas_assets/_dropbutton.scss
110
115
  - lib/assets/stylesheets/atlas_assets/_dropdown.scss
111
116
  - lib/assets/stylesheets/atlas_assets/_flash.scss
112
117
  - lib/assets/stylesheets/atlas_assets/_fontawesome.scss