megatron 0.1.89 → 0.2.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.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/megatron/index.js +34 -94
  3. data/app/assets/javascripts/megatron/utils/activate-nav-items.js +20 -0
  4. data/app/assets/javascripts/megatron/utils/auto-navigate.js +11 -14
  5. data/app/assets/javascripts/megatron/utils/clipboard.js +9 -1
  6. data/app/assets/javascripts/megatron/utils/form-flash.js +14 -0
  7. data/app/assets/javascripts/megatron/utils/form-notify.js +50 -38
  8. data/app/assets/javascripts/megatron/utils/highlight-code.js +46 -0
  9. data/app/assets/javascripts/megatron/utils/messages.js +10 -6
  10. data/app/assets/javascripts/megatron/utils/progress-bar.js +9 -0
  11. data/app/assets/javascripts/megatron/utils/text-helpers.js +17 -7
  12. data/app/assets/stylesheets/megatron/modules/forms/_range-input.scss +37 -37
  13. data/app/helpers/megatron/application_helper.rb +9 -7
  14. data/app/helpers/megatron/form_helper.rb +6 -4
  15. data/app/views/layouts/megatron/application.html.slim +1 -1
  16. data/lib/megatron/helper.rb +27 -29
  17. data/lib/megatron/version.rb +1 -1
  18. data/public/assets/megatron/{megatron-0.1.89.css → megatron-0.2.0.css} +2 -2
  19. data/public/assets/megatron/megatron-0.2.0.css.gz +0 -0
  20. data/public/assets/megatron/{megatron-0.1.89.css.map → megatron-0.2.0.css.map} +2 -2
  21. data/public/assets/megatron/{megatron-0.1.89.js → megatron-0.2.0.js} +105 -134
  22. data/public/assets/megatron/megatron-0.2.0.js.gz +0 -0
  23. data/public/assets/megatron/megatron-0.2.0.map.json +1 -0
  24. data/public/assets/megatron/{megatron-error-pages-0.1.89.css → megatron-error-pages-0.2.0.css} +0 -0
  25. data/public/assets/megatron/{megatron-error-pages-0.1.89.css.gz → megatron-error-pages-0.2.0.css.gz} +0 -0
  26. metadata +14 -22
  27. data/app/assets/javascripts/megatron/form.js +0 -36
  28. data/app/assets/javascripts/megatron/link.js +0 -58
  29. data/app/assets/javascripts/megatron/utils/index.js +0 -81
  30. data/app/assets/javascripts/megatron/utils/range-input-helper.js +0 -280
  31. data/app/assets/javascripts/megatron/utils/time/date-to-html.js +0 -59
  32. data/app/assets/javascripts/megatron/utils/time/time-switch.js +0 -84
  33. data/app/assets/javascripts/megatron/utils/time/timeago.js +0 -95
  34. data/app/assets/javascripts/megatron/utils/toggler.js +0 -274
  35. data/app/assets/stylesheets/_example.scss +0 -76
  36. data/app/assets/stylesheets/_grid.scss +0 -41
  37. data/app/assets/stylesheets/_typography.scss +0 -38
  38. data/app/assets/stylesheets/application.scss +0 -19
  39. data/public/assets/megatron/megatron-0.1.89.css.gz +0 -0
  40. data/public/assets/megatron/megatron-0.1.89.js.gz +0 -0
  41. data/public/assets/megatron/megatron-0.1.89.map.json +0 -1
@@ -1,95 +0,0 @@
1
- // Timeago by Brandon Mathis, based on JavaScript Pretty Date Copyright (c) 2011 John Resig
2
- // Returns relative time
3
-
4
- let Timeago = {
5
- // setup HTML templates
6
- setup: function timeagoSetup() {
7
-
8
- var timeEls = document.querySelectorAll('.timeago[datetime]')
9
-
10
- Array.prototype.forEach.call(timeEls, function(el) {
11
- var datetime = el.attributes.datetime.value
12
- var style = el.dataset.timeagoStyle
13
- el.innerHTML = Timeago.parse(datetime, style)
14
- })
15
- },
16
-
17
- // If a browser can't handle dates, bail.
18
- browserSupport: function timeagoBrowserSupport() {
19
- return !isNaN(new Date("2014-01-29T18:14:29+00:00").getDate())
20
- },
21
-
22
- parse: function timeagoParse(time, style) {
23
-
24
- style = style || "normal"
25
- if (typeof(time) == 'string') {
26
- time = new Date(time)
27
- }
28
-
29
- if (style === 'short')
30
- var say = {
31
- just_now: "now",
32
- minute_ago: "1m",
33
- minutes_ago: "m",
34
- hour_ago: "1h",
35
- hours_ago: "h",
36
- yesterday: "1d",
37
- days_ago: "d",
38
- last_week: "1w",
39
- weeks_ago: "w"
40
- }
41
-
42
- if (style === 'normal')
43
- var say = {
44
- just_now: "just now",
45
- minute_ago: "1 minute",
46
- minutes_ago: " minutes",
47
- hour_ago: "1 hour",
48
- hours_ago: " hours",
49
- yesterday: "1 day",
50
- days_ago: " days",
51
- last_week: "1 week",
52
- weeks_ago: " weeks"
53
- }
54
-
55
- if (style === 'long')
56
- var say = {
57
- just_now: "just now",
58
- minute_ago: "1 minute ago",
59
- minutes_ago: " minutes ago",
60
- hour_ago: "1 hour ago",
61
- hours_ago: " hours ago",
62
- yesterday: "1 day ago",
63
- days_ago: " days ago",
64
- last_week: "1 week ago",
65
- weeks_ago: " weeks ago"
66
- }
67
-
68
- var secs = ((new Date().getTime() - new Date(time).getTime()) / 1000)
69
- var mins = Math.floor(secs / 60)
70
- var hours = Math.floor(secs / 3600)
71
- var days = Math.floor(secs / 86400)
72
- var weeks = Math.floor(days / 7)
73
- var months = Math.floor(days / 30)
74
-
75
- if(isNaN(secs) || days < 0) {
76
- return false
77
- }
78
-
79
- if(days === 0) {
80
- if (secs < 60) return say.just_now
81
- else if(secs < 120) return say.minute_ago
82
- else if(secs < 3600) return mins + say.minutes_ago
83
- else if(secs < 7200) return say.hour_ago
84
- else return hours + say.hours_ago
85
- } else {
86
- if(days === 1) return say.yesterday
87
- else if(days < 7) return days + say.days_ago
88
- else if(weeks === 1) return say.last_week
89
- else return weeks + say.weeks_ago
90
- }
91
- }
92
- }
93
-
94
- module.exports = Timeago
95
-
@@ -1,274 +0,0 @@
1
- var bean = require('bean')
2
-
3
- require('compose-tap-event')
4
-
5
- var Toggler = {
6
- checkboxSelector: "[type=checkbox][data-toggle], [type=checkbox][data-show], [type=checkbox][data-hide]",
7
- radioSelector: "input[type=radio][data-show], input[type=radio][data-add-class]",
8
- selectSelector: "option[data-show]",
9
-
10
- listen: function togglerListen(){
11
- bean.on(document, "click", "[data-toggle], [data-show], [data-hide], [data-toggle-class], [data-add-class], [data-remove-class]", Toggler.trigger)
12
- bean.on(document, "change", ".select-toggler", Toggler.trigger)
13
- },
14
-
15
- refresh: function togglerRefresh(){
16
- Toggler.toggleRadios()
17
- Toggler.toggleCheckboxes()
18
- Toggler.setupSelects()
19
- },
20
-
21
- trigger: function togglerTrigger(event) {
22
- var target = event.currentTarget
23
-
24
- if (target.tagName.toLowerCase() == 'a' && target.getAttribute('href') == "#") {
25
- event.preventDefault()
26
- event.stop()
27
- }
28
-
29
- if (target.type == 'radio') {
30
- Toggler.toggleRadios(document.querySelectorAll('input[name="'+ target.name +'"]'))
31
- Toggler.dispatch(target, 'addClass')
32
- } else if (target.type == 'checkbox') {
33
- Toggler.toggleCheckbox(target)
34
- } else if (target.tagName.toLowerCase() == 'select') {
35
- Toggler.toggleSelect(target)
36
- } else {
37
- Toggler.dispatch(target, 'hide')
38
- Toggler.dispatch(target, 'toggle')
39
- Toggler.dispatch(target, 'show')
40
- Toggler.dispatch(target, 'removeClass')
41
- Toggler.dispatch(target, 'toggleClass')
42
- Toggler.dispatch(target, 'addClass')
43
- }
44
- },
45
-
46
- dispatch: function togglerDispatch(el, type, force) {
47
- var dispatchedElements
48
-
49
- if (el.dataset[type]){
50
- if (type.match(/class/i)){
51
- Toggler.setClass(el.dataset[type], type, el)
52
- } else {
53
- Toggler.setState(el.dataset[type], type)
54
- }
55
- }
56
- },
57
-
58
- // Add, remove, or toggle classnames, triggered by elements with:
59
- // data-hide-class, data-show-class, and data-toggle-class values
60
- //
61
- // Data value examples:
62
- // - "classname" - add/remove/toggle classname on current element
63
- // - "foo bar" - multiple classnames, separated by spaces (like html class property)
64
- // - "foo bar; selector" - change classnames on elements matched by selector
65
- // - "foo bar; selector, selector" - match multiple selectors
66
- //
67
-
68
- setClass: function (selectors, action, el){
69
- if (typeof(action) == 'boolean') {
70
- action = (action ? 'add' : 'remove')
71
- }
72
-
73
- // Get selector and classnames, format: "classname classname; selector,selector"
74
- var settings = selectors.split(';')
75
- var classnames = settings[0].trim()
76
- var matches = []
77
- selectors = settings[1]
78
-
79
- // If no slectors are present, use the current el for classnames
80
- if (selectors) {
81
- matches = document.querySelectorAll(selectors)
82
- } else {
83
- matches = [el]
84
- }
85
-
86
- Array.prototype.forEach.call(matches, function(match){
87
- Array.prototype.forEach.call(classnames.split(' '), function(classname) {
88
- match.classList[action.replace(/Class/,'')](classname)
89
- })
90
-
91
- Toggler.triggerTogglerEventsOnChildren(match, 'class')
92
- })
93
- },
94
-
95
- setState: function(selectors, state) {
96
- var matches = document.querySelectorAll(selectors)
97
-
98
- Array.prototype.forEach.call(matches, function(match){
99
- var action = Toggler.toggleAction(match, state)
100
-
101
- Toggler[action](match)
102
- Toggler.triggerTogglerEventsOnChildren(match, action)
103
- })
104
- },
105
-
106
- toggleAction: function(el, action) {
107
-
108
- if (typeof(action) == 'boolean') {
109
- action = (action ? 'show' : 'hide')
110
- }
111
-
112
- if (action == 'toggle') {
113
- if (el.offsetParent === null) {
114
- action = 'show'
115
- } else {
116
- action = 'hide'
117
- }
118
- }
119
-
120
- return action
121
-
122
- },
123
-
124
- show: function(el) {
125
- el.classList.remove('hidden')
126
- el.classList.add('visible')
127
-
128
- // Focus on key element if an element expects focus
129
- var focusEl = el.querySelector('[data-focus]')
130
- if (focusEl) { focusEl.focus() }
131
-
132
- // Trigger input event on ranges that have been hidden
133
- var ranges = el.querySelectorAll('[type=range]')
134
- },
135
-
136
- hide: function togglerHide(el) {
137
- el.classList.remove('visible')
138
- el.classList.add('hidden')
139
- },
140
-
141
- getLeafNodes: function (parent) {
142
- // is the parent itself a leaf node?
143
- if (!parent.hasChildNodes()) return [parent]
144
-
145
- var nodes = Array.prototype.slice.call(parent.getElementsByTagName("*"), 0)
146
-
147
- return nodes.filter(function(elem) {
148
- return elem.children && elem.children.length === 0
149
- })
150
- },
151
-
152
- triggerTogglerEventsOnChildren: function(el, eventName){
153
- // we care about leaf nodes since the event will bubble to
154
- // non-leaf nodes from the leaf nodes
155
- var leafChildNodes = Toggler.getLeafNodes(el)
156
-
157
- Array.prototype.forEach.call(leafChildNodes, function(node) {
158
- // 'toggler:show', 'toggler:hide', etc
159
- bean.fire(node, "toggler:" + eventName)
160
- })
161
- },
162
-
163
- toggleRadios: function togglerToggleRadio(radios) {
164
- radios = radios || document.querySelectorAll('input[type=radio][data-show], input[type=radio][data-add-class]')
165
-
166
- var checked = []
167
- var process = function(radio) {
168
- if (radio.dataset.show)
169
- Toggler.setState(radio.dataset.show, radio.checked)
170
-
171
- if (radio.dataset.addClass)
172
- Toggler.setClass(radio.dataset.addClass, radio.checked)
173
- }
174
-
175
- Array.prototype.forEach.call(radios, function(radio){
176
- if (radio.checked) {
177
- checked.push(radio)
178
- } else {
179
- process(radio)
180
- }
181
- })
182
-
183
- Array.prototype.forEach.call(checked, process)
184
- },
185
-
186
- toggleCheckbox: function togglerToggeCheckbox(checkbox) {
187
- // Visibility toggling
188
- if (checkbox.dataset.hide)
189
- Toggler.setState(checkbox.dataset.hide, !checkbox.checked)
190
- if (checkbox.dataset.toggle)
191
- Toggler.setState(checkbox.dataset.toggle, 'toggle')
192
- if (checkbox.dataset.show)
193
- Toggler.setState(checkbox.dataset.show, checkbox.checked)
194
-
195
- // Class toggling
196
- if (checkbox.dataset.removeClass)
197
- Toggler.setClass(checkbox.dataset.removeClass, !checkbox.checked, checkbox)
198
- if (checkbox.dataset.toggleClass)
199
- Toggler.setClass(checkbox.dataset.toggleClass, 'toggle', checkbox)
200
- if (checkbox.dataset.addClass)
201
- Toggler.setClass(checkbox.dataset.addClass, checkbox.checked, checkbox)
202
- },
203
-
204
- toggleSelect: function togglerToggleSelect(select) {
205
- var option = select.selectedOptions[0]
206
- Toggler.dispatch(option, 'hide')
207
- Toggler.dispatch(option, 'show')
208
- Toggler.dispatch(option, 'addClass')
209
- Toggler.dispatch(option, 'removeClass')
210
- },
211
-
212
- toggleCheckboxes: function togglerToggleCheckboxes(checkboxes) {
213
- checkboxes = checkboxes || document.querySelectorAll(Toggler.checkboxSelector)
214
-
215
- Array.prototype.forEach.call(checkboxes, Toggler.toggleCheckbox)
216
- },
217
-
218
- // Add data-hide to each <option> containing the selectors from other
219
- // option's data-show. This makes the toggling of elements exclusive.
220
- //
221
- setupSelects: function togglerSetupSelects(selects){
222
- selects = selects || document.querySelectorAll(Toggler.selectSelector)
223
-
224
- Array.prototype.forEach.call(selects, function(option){
225
- if (!option.dataset.hide) {
226
-
227
- var select = Toggler.getSelectFromOption(option)
228
- select.classList.add('select-toggler')
229
- var options = select.querySelectorAll('option')
230
- var selectors = Toggler.showAttributes(options)
231
-
232
- Array.prototype.forEach.call(options, function(o) {
233
- option.dataset.hide = selectors.filter(function(selector){
234
- return option.dataset.show != selector && selector != ""
235
- }).join(',')
236
- })
237
-
238
- // Ensure that currently selected option is toggled properly
239
- //
240
- Toggler.toggleSelect(select)
241
- }
242
- })
243
- },
244
-
245
- // Find parent <select> for an option (accounts for option groups)
246
- //
247
- getSelectFromOption: function togglerGetSelectFromOption(el) {
248
- var p = el.parentElement
249
-
250
- if (p.tagName.toLowerCase() == 'select') {
251
- return p
252
- } else {
253
- return Toggler.getSelectFromOption(p)
254
- }
255
- },
256
-
257
- // Return an array of all data-show values from elements
258
- //
259
- showAttributes: function togglerShowAttributes(elements) {
260
- return Array.prototype.map.call(elements, function(el) {
261
- return el.dataset.show
262
- })
263
- },
264
-
265
- toggleSelects: function togglerToggleSelects(selects) {
266
- var selects = selects || 'option[data-show]'
267
-
268
- Array.prototype.forEach.call(document.querySelectorAll(radios), function(radio) {
269
- Toggler.setState(radio.dataset.show, radio.checked)
270
- })
271
- }
272
- }
273
-
274
- module.exports = Toggler
@@ -1,76 +0,0 @@
1
- .demo {
2
- margin: 1.6em 0;
3
- }
4
- .demo-header {
5
- overflow: hidden;
6
- margin: 1.2em 0;
7
- }
8
-
9
- .demo-heading {
10
- display: inline-block;
11
- font-weight: normal;
12
- vertical-align: bottom;
13
- float: left;
14
- margin: 0;
15
- }
16
-
17
- .demo-source-toggle {
18
- float: right;
19
- vertical-align: bottom;
20
- }
21
-
22
- .demo-box {
23
- list-style: none;
24
- position: relative;
25
- margin-bottom: $block-margin;
26
- border: 1px solid $page-border;
27
- background: #fafafa;
28
- margin-top: $block-margin + 2em;
29
-
30
- &-row {
31
- padding: 10px;
32
- border-bottom: 1px solid #e5e5e5;
33
- position: relative;
34
-
35
- &:last-child {
36
- border-bottom: 0;
37
- }
38
- }
39
-
40
- &.padded {
41
- @include pad_box;
42
- pre {
43
- padding: 0;
44
- }
45
- }
46
-
47
- .heading-anchor:after {
48
- top: -.8em;
49
- left: -.8em;
50
- }
51
-
52
- .demo-header {
53
- position: absolute;
54
- top: -30px;
55
- left: -1px;
56
- right: -1px;
57
- padding: 0 1em;
58
- margin: 0;
59
- border: 1px solid #e5e5e5;
60
- background: #f5f5f5;
61
- font-family: Helvetica, Arial, sans-serif;
62
- line-height: 30px;
63
- font-size: 13px;
64
- z-index: 2;
65
- color: $light-text-color;
66
- }
67
-
68
- .demo-heading {
69
- font-size: 1em;
70
- }
71
-
72
- pre {
73
- border: none;
74
- margin: 0;
75
- }
76
- }
@@ -1,41 +0,0 @@
1
- .grid-demo .grid-cell {
2
-
3
- code {
4
- display: inline-block;
5
- color: #fff;
6
- background: hsl(200, 65%, 72%);
7
- width: 100%;
8
- border: none;
9
- border-radius: 0px;
10
- line-height: 1.8em;
11
- margin-bottom: 1px;
12
- }
13
- .grid {
14
- code {
15
- background: hsl(160, 45%, 72%);
16
- }
17
- }
18
- }
19
-
20
- .cell-size-demo {
21
- .grid-cell:nth-child(even) {
22
- code {
23
- background: hsl(200, 12%, 90%);
24
- color: #444;
25
- }
26
- }
27
- }
28
-
29
- .gutter-demo {
30
- .grid-cell:nth-child(2) code {
31
- background: hsl(160, 45%, 72%);
32
- }
33
-
34
- .grid-cell:nth-child(3) code {
35
- background: hsl(0, 45%, 72%);
36
- }
37
-
38
- .grid-cell:nth-child(4) code {
39
- background: hsl(240, 45%, 72%);
40
- }
41
- }