formagic 0.2.9 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d508096eac275d9a5cda7683ee526942a362f180
4
- data.tar.gz: 9be79c0064286a486972bfa13f4b40bb4b9d7101
3
+ metadata.gz: 571f9dadd00731d428741b45677cc3e6d8f8afc6
4
+ data.tar.gz: e9133e7c8253186d6d4003a8d4e590fc278f9704
5
5
  SHA512:
6
- metadata.gz: e007928a2ca6e76eed02fadfdc360d68cd237132820ae2aa9727f40bf39cf90852e89a87d3f52f63c11e72e2ed5b8ef757c148c2114c5dc4e25ed228d86d994e
7
- data.tar.gz: ebf4d48bbb2a6b0e23d882af094ed01d42b2865730d612d6e9e60171714a433199bd5d73062039e066bd5a30ef7eb85ee85943767eb1aff7808ece32a1eefc41
6
+ metadata.gz: aecbde39dde0cd4b97b7c833731ca7d7ce4718ccd9a3d502db939587e3cd6bde5c7245e7d4c288800dc846f6f408154c439fef482d8ecbdaeb5ccc23ca7b883e
7
+ data.tar.gz: 42190bef935b4670c816914d12800b4d52e574957c567c13cbbd7fef0113fa9bb48d8dc9c4e42d723cd551a3df1b9fd91d888abed93c4c866b99b7f039c80f41
@@ -14,15 +14,37 @@
14
14
  #
15
15
  # -----------------------------------------------------------------------------
16
16
 
17
+ @_expandableGroupStateCache = {}
18
+
17
19
  class @ExpandableGroup
18
20
  constructor: (@form, @group, name) ->
19
21
  @$expander =$ """<a href='#' class='group-edit hidden'>#{ name }</a>"""
20
22
  @group.$el.before @$expander
21
23
 
24
+ @_restoreExpanderFromCache()
25
+
22
26
  @$expander.on 'click', (e) =>
23
27
  @$expander.toggleClass('hidden')
28
+ @_cacheExpanderState()
24
29
  e.preventDefault()
25
30
 
26
31
 
32
+ _restoreExpanderFromCache: ->
33
+ if _expandableGroupStateCache.__hash
34
+
35
+ if _expandableGroupStateCache.__hash == window.location.hash
36
+ if _expandableGroupStateCache[@_groupId()]
37
+ @$expander.removeClass 'hidden'
38
+
39
+ if _expandableGroupStateCache.__hash.endsWith 'new'
40
+ @$expander.removeClass 'hidden'
41
+
42
+
43
+ _cacheExpanderState: ->
44
+ _expandableGroupStateCache.__hash = window.location.hash
45
+ _expandableGroupStateCache[@_groupId()] = @group.$el.is(':visible')
27
46
 
28
47
 
48
+ _groupId: ->
49
+ groupIndex = $('form').find(".group.#{ @group.klassName }").index(@group.$el)
50
+ return "#{ @group.klassName }-#{ groupIndex }"
@@ -0,0 +1,128 @@
1
+ # -----------------------------------------------------------------------------
2
+ # Author: Alexander Kravets <alex@slatestudio.com>,
3
+ # Slate Studio (http://www.slatestudio.com)
4
+ #
5
+ # Coding Guide:
6
+ # https://github.com/thoughtbot/guides/tree/master/style/coffeescript
7
+ # -----------------------------------------------------------------------------
8
+
9
+ # -----------------------------------------------------------------------------
10
+ # INPUT LIST
11
+ # -----------------------------------------------------------------------------
12
+ # Allows to create/delete/reorder list items connected to dynamic or static
13
+ # collection. Value should be an array of objects.
14
+ #
15
+ # All items should be unique for now.
16
+ #
17
+ # Dependencies:
18
+ #= require formagic/inputs/list_reorder
19
+ #
20
+ # -----------------------------------------------------------------------------
21
+
22
+ class @InputArray extends InputString
23
+ # PRIVATE ===============================================
24
+
25
+ _add_input: ->
26
+ # hidden input that stores ids, we use __LIST__ prefix to identify
27
+ # ARRAY input type and process it's value while form submission.
28
+ name = if @config.namePrefix then "#{ @config.namePrefix }[__LIST__#{ @config.klassName }]" else "[__LIST__#{ @config.klassName }]"
29
+
30
+ @$input =$ "<input type='hidden' name='#{ name }' value='' />"
31
+ @$el.append @$input
32
+
33
+ # list holder for items
34
+ @reorderContainerClass = @config.klassName
35
+ @$items =$ "<ul class='#{ @reorderContainerClass }'></ul>"
36
+ @$el.append @$items
37
+
38
+ @config.placeholder ||= 'Add new value'
39
+ @_create_string_input_el(@config.placeholder)
40
+
41
+ @_render_items()
42
+ @_update_input_value()
43
+
44
+
45
+ _values: ->
46
+ @$items.children('li').map((i, el) -> $(el).data('value')).get()
47
+
48
+
49
+ _update_input_value: ->
50
+ input_value = @_values().join('|||')
51
+
52
+ @$input.val(input_value)
53
+ @$input.trigger('change')
54
+
55
+
56
+ _remove_item: ($el) ->
57
+ $el.parent().remove()
58
+ @_update_input_value()
59
+
60
+
61
+ _render_items: ->
62
+ @$items.html('')
63
+
64
+ for v in @value
65
+ @_render_item(v)
66
+
67
+
68
+ _render_item: (o) ->
69
+ value = _escapeHtml(o)
70
+
71
+ listItem =$ """<li data-value='#{ value }'>
72
+ <span class='icon-reorder' data-container-class='#{ @reorderContainerClass }'></span>
73
+ #{ value }
74
+ <a href='#' class='action_remove'>Remove</a>
75
+ </li>"""
76
+ @$items.append(listItem)
77
+
78
+ @_update_input_value()
79
+
80
+
81
+ _create_string_input_el: (placeholder) ->
82
+ @$stringInput =$ "<input type='text' placeholder='#{ placeholder }' />"
83
+ @$el.append @$stringInput
84
+
85
+
86
+ _bind_string_input: ->
87
+ @$stringInput.on 'keyup', (e) =>
88
+ if e.keyCode == 13
89
+ val = $(e.currentTarget).val()
90
+ @_render_item(val)
91
+ $(e.currentTarget).val('')
92
+
93
+
94
+ # PUBLIC ================================================
95
+
96
+ initialize: ->
97
+ @config.beforeInitialize?(this)
98
+
99
+ # input for new values
100
+ @_bind_string_input()
101
+
102
+ # remove
103
+ @$items.on 'click', '.action_remove', (e) =>
104
+ e.preventDefault()
105
+ if confirm('Are you sure?') then @_remove_item($(e.currentTarget))
106
+
107
+ @_bind_reorder()
108
+
109
+ @config.onInitialize?(this)
110
+
111
+
112
+ updateValue: (@value) ->
113
+ @_render_items()
114
+
115
+
116
+ hash: (hash={}) ->
117
+ hash[@config.klassName] = @_values()
118
+ return hash
119
+
120
+
121
+ include(InputArray, inputListReorder)
122
+
123
+
124
+ chr.formInputs['array'] = InputArray
125
+
126
+
127
+
128
+
@@ -52,10 +52,7 @@ class @InputList extends InputString
52
52
  ids = []
53
53
  @$items.children('li').each (i, el) -> ids.push $(el).attr('data-id')
54
54
 
55
- # @TODO: we need a better separator here, comma is too generic
56
- # it's used cause most cases list of IDs concidered to be here,
57
- # we might make this a @config setting.
58
- value = ids.join(',')
55
+ value = ids.join('|||')
59
56
 
60
57
  @$input.val(value)
61
58
  @$input.trigger('change')
@@ -11,13 +11,16 @@
11
11
  #= require ./formagic/inputs/document
12
12
  #= require ./formagic/inputs/documents
13
13
  #= require ./formagic/inputs/file
14
- #= require ./formagic/inputs/html
15
14
  #= require ./formagic/inputs/image
16
15
  #= require ./formagic/inputs/list
17
- #= require ./formagic/inputs/markdown
18
16
  #= require ./formagic/inputs/password
19
- #= require ./formagic/inputs/redactor
20
17
  #= require ./formagic/inputs/select
21
18
  #= require ./formagic/inputs/select2
22
19
  #= require ./formagic/inputs/time
23
- #= require ./formagic/inputs/url
20
+ #= require ./formagic/inputs/url
21
+ #= require ./formagic/inputs/array
22
+
23
+ ## OPTIONAL
24
+ # require ./formagic/inputs/redactor
25
+ # require ./formagic/inputs/html
26
+ # require ./formagic/inputs/markdown
@@ -0,0 +1,51 @@
1
+ /* Array Input -------------------------------------------- */
2
+
3
+ .input-array {
4
+ input {
5
+ padding-left : 2.5em;
6
+ margin-top : .25em;
7
+ }
8
+
9
+ ul {
10
+ margin : 0 0 0 2.5em;
11
+ padding : 0;
12
+ list-style : none;
13
+ line-height : 1.5;
14
+
15
+ li {
16
+ @include user-select(none); position: relative;
17
+
18
+ a {
19
+ color : $formagic-assertive-color;
20
+ font-size : .75em;
21
+ &:hover {
22
+ opacity : .5;
23
+ }
24
+ }
25
+ }
26
+ }
27
+
28
+ .slip-reordering {
29
+ color : $formagic-positive-color;
30
+ }
31
+
32
+ .icon-reorder {
33
+ @include position(absolute);
34
+ left : -2.5em;
35
+ height : 1.5em;
36
+ &:before {
37
+ background-position : 10px 3px;
38
+ height : 1.5em;
39
+ }
40
+ }
41
+
42
+ // input:after {
43
+ // content: '+';
44
+ // display: block;
45
+ // width: 40px;
46
+ // height: 24px;
47
+ // position: absolute; left: 12px; top: -3px;
48
+ // font-size: 22px;
49
+ // color: $formagic-border-color;
50
+ // }
51
+ }
@@ -22,6 +22,7 @@
22
22
  }
23
23
 
24
24
  & > ul > li > .icon-reorder {
25
+ @include position(absolute);
25
26
  z-index : 1;
26
27
  left : 0;
27
28
  top : 1em;
@@ -31,7 +32,7 @@
31
32
  background-color : white;
32
33
 
33
34
  & > .form-input:first-of-type {
34
- padding-left : 2.4em;
35
+ padding-left : 2.5em;
35
36
  }
36
37
  }
37
38
  }
@@ -47,6 +48,10 @@
47
48
  }
48
49
  }
49
50
 
51
+ .nested-forms ul:empty + .nested-form-new {
52
+ margin-top : 0;
53
+ }
54
+
50
55
  .nested-form-delete {
51
56
  @include position(absolute, .35em .3em null null);
52
57
  @include hide-text;
@@ -58,7 +63,7 @@
58
63
  width : 1.5em;
59
64
 
60
65
  &:before {
61
- @include position(absolute, null 7px null null);
66
+ @include position(absolute, null .45em null null);
62
67
  line-height : 1.35em;
63
68
  content : '\00d7';
64
69
  color : $formagic-label-color;
@@ -1,6 +1,10 @@
1
1
  /* String Input ------------------------------------------- */
2
2
 
3
3
  .input-string {
4
+ input {
5
+ line-height: 1.2;
6
+ }
7
+
4
8
  .twitter-typeahead {
5
9
  width : 100%;
6
10
  }
@@ -77,7 +77,8 @@
77
77
  .input-switch {
78
78
  padding-top: .75em;
79
79
  .label {
80
- cursor : pointer;
80
+ cursor : pointer;
81
+ line-height : 1.9;
81
82
  }
82
83
  .switch {
83
84
  @include switch;
@@ -4,9 +4,10 @@
4
4
  min-height : 82px;
5
5
 
6
6
  textarea {
7
- box-sizing : border-box;
8
- min-height : 20px;
9
- overflow : auto;
10
- resize : none;
7
+ box-sizing : border-box;
8
+ min-height : 20px;
9
+ overflow : auto;
10
+ resize : none;
11
+ line-height : 1.2;
11
12
  }
12
13
  }
@@ -1,11 +1,11 @@
1
1
  @import "normalize-rails";
2
2
 
3
- $formagic-base-color : rgb( 89, 89, 89) !default;
3
+ $formagic-base-color : #333 !default;
4
4
  $formagic-positive-color : rgb( 74,135,238) !default;
5
5
  $formagic-assertive-color : rgb(239, 78, 58) !default;
6
6
  $formagic-label-color : lighten($formagic-base-color, 25%);
7
7
  $formagic-placeholder-color : rgb(210,210,210) !default;
8
- $formagic-border-color : rgb(246,246,246) !default;
8
+ $formagic-border-color : #eee !default;
9
9
 
10
10
  @mixin custom-scrollbar($color, $bg-color, $radius) {
11
11
  &::-webkit-scrollbar { width: 6px; background-color: $bg-color; }
@@ -71,7 +71,7 @@ $formagic-border-color : rgb(246,246,246) !default;
71
71
  @import "formagic/string";
72
72
  @import "formagic/switch";
73
73
  @import "formagic/text";
74
-
74
+ @import "formagic/array";
75
75
 
76
76
 
77
77
 
@@ -1,3 +1,3 @@
1
1
  module Formagic
2
- VERSION = "0.2.9"
2
+ VERSION = "0.3.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: formagic
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.9
4
+ version: 0.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Alexander Kravets
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2015-09-11 00:00:00.000000000 Z
11
+ date: 2015-10-11 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bourbon
@@ -91,6 +91,7 @@ files:
91
91
  - app/assets/javascripts/formagic.coffee
92
92
  - app/assets/javascripts/formagic/form.coffee
93
93
  - app/assets/javascripts/formagic/group.coffee
94
+ - app/assets/javascripts/formagic/inputs/array.coffee
94
95
  - app/assets/javascripts/formagic/inputs/checkbox.coffee
95
96
  - app/assets/javascripts/formagic/inputs/color.coffee
96
97
  - app/assets/javascripts/formagic/inputs/date.coffee
@@ -129,6 +130,7 @@ files:
129
130
  - app/assets/javascripts/vendor/redactor.table.js
130
131
  - app/assets/javascripts/vendor/select2.js
131
132
  - app/assets/stylesheets/formagic.scss
133
+ - app/assets/stylesheets/formagic/array.scss
132
134
  - app/assets/stylesheets/formagic/checkbox.scss
133
135
  - app/assets/stylesheets/formagic/color.scss
134
136
  - app/assets/stylesheets/formagic/date.scss