semantic_ui_rails 0.0.2

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 (78) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE +20 -0
  5. data/README.md +4 -0
  6. data/Rakefile +1 -0
  7. data/app/assets/fonts/semantic/icons.eot +0 -0
  8. data/app/assets/fonts/semantic/icons.svg +450 -0
  9. data/app/assets/fonts/semantic/icons.ttf +0 -0
  10. data/app/assets/fonts/semantic/icons.woff +0 -0
  11. data/app/assets/images/semantic/loader-large-inverted.gif +0 -0
  12. data/app/assets/images/semantic/loader-large.gif +0 -0
  13. data/app/assets/images/semantic/loader-medium-inverted.gif +0 -0
  14. data/app/assets/images/semantic/loader-medium.gif +0 -0
  15. data/app/assets/images/semantic/loader-mini-inverted.gif +0 -0
  16. data/app/assets/images/semantic/loader-mini.gif +0 -0
  17. data/app/assets/images/semantic/loader-small-inverted.gif +0 -0
  18. data/app/assets/images/semantic/loader-small.gif +0 -0
  19. data/app/assets/javascript/semantic/accordion.js +411 -0
  20. data/app/assets/javascript/semantic/behavior/api.js +666 -0
  21. data/app/assets/javascript/semantic/behavior/colorize.js +271 -0
  22. data/app/assets/javascript/semantic/behavior/form.js +703 -0
  23. data/app/assets/javascript/semantic/behavior/state.js +752 -0
  24. data/app/assets/javascript/semantic/chatroom.js +766 -0
  25. data/app/assets/javascript/semantic/checkbox.js +348 -0
  26. data/app/assets/javascript/semantic/dimmer.js +524 -0
  27. data/app/assets/javascript/semantic/dropdown.js +707 -0
  28. data/app/assets/javascript/semantic/modal.js +478 -0
  29. data/app/assets/javascript/semantic/nag.js +542 -0
  30. data/app/assets/javascript/semantic/popup.js +721 -0
  31. data/app/assets/javascript/semantic/rating.js +358 -0
  32. data/app/assets/javascript/semantic/search.js +769 -0
  33. data/app/assets/javascript/semantic/shape.js +776 -0
  34. data/app/assets/javascript/semantic/sidebar.js +489 -0
  35. data/app/assets/javascript/semantic/tab.js +674 -0
  36. data/app/assets/javascript/semantic/transition.js +650 -0
  37. data/app/assets/javascript/semantic/video.js +459 -0
  38. data/app/assets/stylesheets/semantic/accordion.css +97 -0
  39. data/app/assets/stylesheets/semantic/breadcrumb.css +66 -0
  40. data/app/assets/stylesheets/semantic/button.css +993 -0
  41. data/app/assets/stylesheets/semantic/chatroom.css +242 -0
  42. data/app/assets/stylesheets/semantic/checkbox.css +300 -0
  43. data/app/assets/stylesheets/semantic/comment.css +178 -0
  44. data/app/assets/stylesheets/semantic/dimmer.css +185 -0
  45. data/app/assets/stylesheets/semantic/divider.css +155 -0
  46. data/app/assets/stylesheets/semantic/dropdown.css +415 -0
  47. data/app/assets/stylesheets/semantic/feed.css +126 -0
  48. data/app/assets/stylesheets/semantic/form.css +427 -0
  49. data/app/assets/stylesheets/semantic/grid.css +561 -0
  50. data/app/assets/stylesheets/semantic/header.css +277 -0
  51. data/app/assets/stylesheets/semantic/icon.css +811 -0
  52. data/app/assets/stylesheets/semantic/image.css +143 -0
  53. data/app/assets/stylesheets/semantic/input.css +225 -0
  54. data/app/assets/stylesheets/semantic/item.css +564 -0
  55. data/app/assets/stylesheets/semantic/label.css +687 -0
  56. data/app/assets/stylesheets/semantic/list.css +418 -0
  57. data/app/assets/stylesheets/semantic/loader.css +148 -0
  58. data/app/assets/stylesheets/semantic/menu.css +1409 -0
  59. data/app/assets/stylesheets/semantic/message.css +242 -0
  60. data/app/assets/stylesheets/semantic/modal.css +123 -0
  61. data/app/assets/stylesheets/semantic/nag.css +130 -0
  62. data/app/assets/stylesheets/semantic/popup.css +209 -0
  63. data/app/assets/stylesheets/semantic/progress.css +257 -0
  64. data/app/assets/stylesheets/semantic/rating.css +120 -0
  65. data/app/assets/stylesheets/semantic/reveal.css +283 -0
  66. data/app/assets/stylesheets/semantic/search.css +222 -0
  67. data/app/assets/stylesheets/semantic/segment.css +362 -0
  68. data/app/assets/stylesheets/semantic/shape.css +87 -0
  69. data/app/assets/stylesheets/semantic/sidebar.css +100 -0
  70. data/app/assets/stylesheets/semantic/step.css +240 -0
  71. data/app/assets/stylesheets/semantic/tab.css +52 -0
  72. data/app/assets/stylesheets/semantic/table.css +468 -0
  73. data/app/assets/stylesheets/semantic/transition.css +867 -0
  74. data/app/assets/stylesheets/semantic/video.css +81 -0
  75. data/lib/semantic_ui_rails/version.rb +3 -0
  76. data/lib/semantic_ui_rails.rb +7 -0
  77. data/semantic_ui_rails.gemspec +23 -0
  78. metadata +149 -0
@@ -0,0 +1,650 @@
1
+ /* ******************************
2
+ Semantic Module: Transition
3
+ Author: Jack Lukic
4
+ Notes: First Commit March 25, 2013
5
+
6
+ A module for controlling css animations
7
+
8
+ ****************************** */
9
+
10
+ ;(function ( $, window, document, undefined ) {
11
+
12
+ $.fn.transition = function() {
13
+ var
14
+ $allModules = $(this),
15
+ moduleSelector = $allModules.selector || '',
16
+
17
+ time = new Date().getTime(),
18
+ performance = [],
19
+
20
+ moduleArguments = arguments,
21
+ query = moduleArguments[0],
22
+ queryArguments = [].slice.call(arguments, 1),
23
+ methodInvoked = (typeof query === 'string'),
24
+
25
+ requestAnimationFrame = window.requestAnimationFrame
26
+ || window.mozRequestAnimationFrame
27
+ || window.webkitRequestAnimationFrame
28
+ || window.msRequestAnimationFrame
29
+ || function(callback) { setTimeout(callback, 0); },
30
+
31
+ invokedResponse
32
+ ;
33
+ $allModules
34
+ .each(function() {
35
+ var
36
+ $module = $(this),
37
+ element = this,
38
+
39
+ // set at run time
40
+ settings,
41
+ instance,
42
+
43
+ error,
44
+ className,
45
+ metadata,
46
+ animationEnd,
47
+ animationName,
48
+
49
+ namespace,
50
+ moduleNamespace,
51
+ module
52
+ ;
53
+
54
+ module = {
55
+
56
+ initialize: function() {
57
+ // get settings
58
+ settings = module.get.settings.apply(element, moduleArguments);
59
+ module.verbose('Converted arguments into settings object', settings);
60
+
61
+ // set shortcuts
62
+ error = settings.error;
63
+ className = settings.className;
64
+ namespace = settings.namespace;
65
+ metadata = settings.metadata;
66
+ moduleNamespace = 'module-' + namespace;
67
+
68
+ animationEnd = module.get.animationEvent();
69
+ animationName = module.get.animationName();
70
+
71
+ instance = $module.data(moduleNamespace);
72
+
73
+ if(instance === undefined) {
74
+ module.instantiate();
75
+ }
76
+ if(methodInvoked) {
77
+ methodInvoked = module.invoke(query);
78
+ }
79
+ // no internal method was found matching query or query not made
80
+ if(methodInvoked === false) {
81
+ module.animate();
82
+ }
83
+ },
84
+
85
+ instantiate: function() {
86
+ module.verbose('Storing instance of module', module);
87
+ instance = module;
88
+ $module
89
+ .data(moduleNamespace, instance)
90
+ ;
91
+ },
92
+
93
+ destroy: function() {
94
+ module.verbose('Destroying previous module for', element);
95
+ $module
96
+ .removeData(moduleNamespace)
97
+ ;
98
+ },
99
+
100
+ animate: function(overrideSettings) {
101
+ settings = overrideSettings || settings;
102
+ module.debug('Preparing animation', settings.animation);
103
+ if(module.is.animating()) {
104
+ if(settings.queue) {
105
+ module.queue(settings.animation);
106
+ }
107
+ return false;
108
+ }
109
+ module.save.conditions();
110
+ module.set.duration(settings.duration);
111
+ module.set.animating();
112
+ module.repaint();
113
+ $module
114
+ .addClass(className.transition)
115
+ .addClass(settings.animation)
116
+ .one(animationEnd, module.complete)
117
+ ;
118
+ if(!module.has.direction() && module.can.transition()) {
119
+ module.set.direction();
120
+ }
121
+ if(!module.can.animate()) {
122
+ module.restore.conditions();
123
+ module.error(error.noAnimation);
124
+ return false;
125
+ }
126
+ module.show();
127
+ module.debug('Starting tween', settings.animation, $module.attr('class'));
128
+ },
129
+
130
+ queue: function(animation) {
131
+ module.debug('Queueing animation of', animation);
132
+ instance.queuing = true;
133
+ $module
134
+ .one(animationEnd, function() {
135
+ instance.queuing = false;
136
+ module.animate.apply(this, settings);
137
+ })
138
+ ;
139
+ },
140
+
141
+ complete: function () {
142
+ module.verbose('CSS animation complete', settings.animation);
143
+ if(!module.is.looping()) {
144
+ if($module.hasClass(className.outward)) {
145
+ module.restore.conditions();
146
+ module.hide();
147
+ }
148
+ else if($module.hasClass(className.inward)) {
149
+ module.restore.conditions();
150
+ module.show();
151
+ }
152
+ else {
153
+ module.restore.conditions();
154
+ }
155
+ module.remove.animating();
156
+ }
157
+ $.proxy(settings.complete, this)();
158
+ },
159
+
160
+ repaint: function(fakeAssignment) {
161
+ module.verbose('Forcing repaint event');
162
+ fakeAssignment = element.offsetWidth;
163
+ },
164
+
165
+ has: {
166
+ direction: function(animation) {
167
+ animation = animation || settings.animation;
168
+ if( $module.hasClass(className.inward) || $module.hasClass(className.outward) ) {
169
+ return true;
170
+ }
171
+ }
172
+ },
173
+
174
+ set: {
175
+
176
+ animating: function() {
177
+ $module.addClass(className.animating);
178
+ },
179
+
180
+ direction: function() {
181
+ if($module.is(':visible')) {
182
+ module.debug('Automatically determining the direction of animation', 'Outward');
183
+ $module
184
+ .addClass(className.outward)
185
+ .removeClass(className.inward)
186
+ ;
187
+ }
188
+ else {
189
+ module.debug('Automatically determining the direction of animation', 'Inward');
190
+ $module
191
+ .addClass(className.inward)
192
+ .removeClass(className.outward)
193
+ ;
194
+ }
195
+ },
196
+
197
+ looping: function() {
198
+ module.debug('Transition set to loop');
199
+ $module
200
+ .addClass(className.looping)
201
+ ;
202
+ },
203
+
204
+ duration: function(duration) {
205
+ duration = duration || settings.duration;
206
+ duration = (typeof duration == 'number')
207
+ ? duration + 'ms'
208
+ : duration
209
+ ;
210
+ module.verbose('Setting animation duration', duration);
211
+ $module
212
+ .css({
213
+ '-webkit-animation-duration': duration,
214
+ '-moz-animation-duration': duration,
215
+ '-ms-animation-duration': duration,
216
+ '-o-animation-duration': duration,
217
+ 'animation-duration': duration
218
+ })
219
+ ;
220
+ }
221
+ },
222
+
223
+ save: {
224
+ conditions: function() {
225
+ module.cache = {
226
+ className : $module.attr('class'),
227
+ style : $module.attr('style')
228
+ };
229
+ module.verbose('Saving original attributes', module.cache);
230
+ }
231
+ },
232
+
233
+ restore: {
234
+ conditions: function() {
235
+ if(typeof module.cache === undefined) {
236
+ module.error(error.cache);
237
+ return false;
238
+ }
239
+ if(module.cache.className) {
240
+ $module.attr('class', module.cache.className);
241
+ }
242
+ else {
243
+ $module.removeAttr('class');
244
+ }
245
+ if(module.cache.style) {
246
+ $module.attr('style', module.cache.style);
247
+ }
248
+ else {
249
+ $module.removeAttr('style');
250
+ }
251
+ if(module.is.looping()) {
252
+ module.remove.looping();
253
+ }
254
+ module.verbose('Restoring original attributes', module.cache);
255
+ }
256
+ },
257
+
258
+ remove: {
259
+
260
+ animating: function() {
261
+ $module.removeClass(className.animating);
262
+ },
263
+
264
+ looping: function() {
265
+ module.debug('Transitions are no longer looping');
266
+ $module
267
+ .removeClass(className.looping)
268
+ ;
269
+ module.repaint();
270
+ }
271
+
272
+ },
273
+
274
+ get: {
275
+
276
+ settings: function(animation, duration, complete) {
277
+ // single settings object
278
+ if($.isPlainObject(animation)) {
279
+ return $.extend(true, {}, $.fn.transition.settings, animation);
280
+ }
281
+ // all arguments provided
282
+ else if(typeof complete == 'function') {
283
+ return $.extend(true, {}, $.fn.transition.settings, {
284
+ animation : animation,
285
+ complete : complete,
286
+ duration : duration
287
+ });
288
+ }
289
+ // only duration provided
290
+ else if(typeof duration == 'string' || typeof duration == 'number') {
291
+ return $.extend(true, {}, $.fn.transition.settings, {
292
+ animation : animation,
293
+ duration : duration
294
+ });
295
+ }
296
+ // duration is actually settings object
297
+ else if(typeof duration == 'object') {
298
+ return $.extend(true, {}, $.fn.transition.settings, duration, {
299
+ animation : animation
300
+ });
301
+ }
302
+ // duration is actually callback
303
+ else if(typeof duration == 'function') {
304
+ return $.extend(true, {}, $.fn.transition.settings, {
305
+ animation : animation,
306
+ complete : duration
307
+ });
308
+ }
309
+ // only animation provided
310
+ else {
311
+ return $.extend(true, {}, $.fn.transition.settings, {
312
+ animation : animation
313
+ });
314
+ }
315
+ return $.fn.transition.settings;
316
+ },
317
+
318
+ animationName: function() {
319
+ var
320
+ element = document.createElement('div'),
321
+ animations = {
322
+ 'animation' :'animationName',
323
+ 'OAnimation' :'oAnimationName',
324
+ 'MozAnimation' :'mozAnimationName',
325
+ 'WebkitAnimation' :'webkitAnimationName'
326
+ },
327
+ animation
328
+ ;
329
+ for(animation in animations){
330
+ if( element.style[animation] !== undefined ){
331
+ module.verbose('Determining animation vendor name property', animations[animation]);
332
+ return animations[animation];
333
+ }
334
+ }
335
+ return false;
336
+ },
337
+
338
+ animationEvent: function() {
339
+ var
340
+ element = document.createElement('div'),
341
+ animations = {
342
+ 'animation' :'animationend',
343
+ 'OAnimation' :'oAnimationEnd',
344
+ 'MozAnimation' :'mozAnimationEnd',
345
+ 'WebkitAnimation' :'webkitAnimationEnd'
346
+ },
347
+ animation
348
+ ;
349
+ for(animation in animations){
350
+ if( element.style[animation] !== undefined ){
351
+ module.verbose('Determining animation vendor end event', animations[animation]);
352
+ return animations[animation];
353
+ }
354
+ }
355
+ return false;
356
+ }
357
+
358
+ },
359
+
360
+ can: {
361
+ animate: function() {
362
+ if($module.css(animationName) !== 'none') {
363
+ module.debug('CSS definition found');
364
+ return true;
365
+ }
366
+ else {
367
+ module.debug('Unable to find css definition');
368
+ return false;
369
+ }
370
+ },
371
+ transition: function() {
372
+ var
373
+ $clone = $('<div>').addClass( $module.attr('class') ).appendTo($('body')),
374
+ currentAnimation = $clone.css(animationName),
375
+ inAnimation = $clone.addClass(className.inward).css(animationName)
376
+ ;
377
+ if(currentAnimation != inAnimation) {
378
+ module.debug('In/out transitions exist');
379
+ $clone.remove();
380
+ return true;
381
+ }
382
+ else {
383
+ module.debug('Static animation found');
384
+ $clone.remove();
385
+ return false;
386
+ }
387
+ }
388
+ },
389
+
390
+ is: {
391
+ animating: function() {
392
+ return $module.hasClass(className.animating);
393
+ },
394
+ looping: function() {
395
+ return $module.hasClass(className.looping);
396
+ },
397
+ visible: function() {
398
+ return $module.is(':visible');
399
+ }
400
+ },
401
+
402
+ hide: function() {
403
+ module.verbose('Hiding element');
404
+ $module
405
+ .removeClass(className.visible)
406
+ .addClass(className.transition)
407
+ .addClass(className.hidden)
408
+ ;
409
+ },
410
+ show: function() {
411
+ module.verbose('Showing element');
412
+ $module
413
+ .removeClass(className.hidden)
414
+ .addClass(className.transition)
415
+ .addClass(className.visible)
416
+ ;
417
+ },
418
+
419
+ start: function() {
420
+ module.verbose('Starting animation');
421
+ $module.removeClass(className.disabled);
422
+ },
423
+
424
+ stop: function() {
425
+ module.debug('Stopping animation');
426
+ $module.addClass(className.disabled);
427
+ },
428
+
429
+ toggle: function() {
430
+ module.debug('Toggling play status');
431
+ $module.toggleClass(className.disabled);
432
+ },
433
+
434
+ setting: function(name, value) {
435
+ if(value !== undefined) {
436
+ if( $.isPlainObject(name) ) {
437
+ $.extend(true, settings, name);
438
+ }
439
+ else {
440
+ settings[name] = value;
441
+ }
442
+ }
443
+ else {
444
+ return settings[name];
445
+ }
446
+ },
447
+ internal: function(name, value) {
448
+ if(value !== undefined) {
449
+ if( $.isPlainObject(name) ) {
450
+ $.extend(true, module, name);
451
+ }
452
+ else {
453
+ module[name] = value;
454
+ }
455
+ }
456
+ else {
457
+ return module[name];
458
+ }
459
+ },
460
+ debug: function() {
461
+ if(settings.debug) {
462
+ if(settings.performance) {
463
+ module.performance.log(arguments);
464
+ }
465
+ else {
466
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
467
+ module.debug.apply(console, arguments);
468
+ }
469
+ }
470
+ },
471
+ verbose: function() {
472
+ if(settings.verbose && settings.debug) {
473
+ if(settings.performance) {
474
+ module.performance.log(arguments);
475
+ }
476
+ else {
477
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
478
+ module.verbose.apply(console, arguments);
479
+ }
480
+ }
481
+ },
482
+ error: function() {
483
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
484
+ module.error.apply(console, arguments);
485
+ },
486
+ performance: {
487
+ log: function(message) {
488
+ var
489
+ currentTime,
490
+ executionTime,
491
+ previousTime
492
+ ;
493
+ if(settings.performance) {
494
+ currentTime = new Date().getTime();
495
+ previousTime = time || currentTime;
496
+ executionTime = currentTime - previousTime;
497
+ time = currentTime;
498
+ performance.push({
499
+ 'Element' : element,
500
+ 'Name' : message[0],
501
+ 'Arguments' : [].slice.call(message, 1) || '',
502
+ 'Execution Time' : executionTime
503
+ });
504
+ }
505
+ clearTimeout(module.performance.timer);
506
+ module.performance.timer = setTimeout(module.performance.display, 100);
507
+ },
508
+ display: function() {
509
+ var
510
+ title = settings.name + ':',
511
+ totalTime = 0
512
+ ;
513
+ time = false;
514
+ clearTimeout(module.performance.timer);
515
+ $.each(performance, function(index, data) {
516
+ totalTime += data['Execution Time'];
517
+ });
518
+ title += ' ' + totalTime + 'ms';
519
+ if(moduleSelector) {
520
+ title += ' \'' + moduleSelector + '\'';
521
+ }
522
+ if($allModules.size() > 1) {
523
+ title += ' ' + '(' + $allModules.size() + ')';
524
+ }
525
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
526
+ console.groupCollapsed(title);
527
+ if(console.table) {
528
+ console.table(performance);
529
+ }
530
+ else {
531
+ $.each(performance, function(index, data) {
532
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
533
+ });
534
+ }
535
+ console.groupEnd();
536
+ }
537
+ performance = [];
538
+ }
539
+ },
540
+ invoke: function(query, passedArguments, context) {
541
+ var
542
+ maxDepth,
543
+ found,
544
+ response
545
+ ;
546
+ passedArguments = passedArguments || queryArguments;
547
+ context = element || context;
548
+ if(typeof query == 'string' && instance !== undefined) {
549
+ query = query.split(/[\. ]/);
550
+ maxDepth = query.length - 1;
551
+ $.each(query, function(depth, value) {
552
+ var camelCaseValue = (depth != maxDepth)
553
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
554
+ : query
555
+ ;
556
+ if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
557
+ instance = instance[value];
558
+ }
559
+ else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
560
+ instance = instance[camelCaseValue];
561
+ }
562
+ else if( instance[value] !== undefined ) {
563
+ found = instance[value];
564
+ return false;
565
+ }
566
+ else if( instance[camelCaseValue] !== undefined ) {
567
+ found = instance[camelCaseValue];
568
+ return false;
569
+ }
570
+ else {
571
+ return false;
572
+ }
573
+ });
574
+ }
575
+ if ( $.isFunction( found ) ) {
576
+ response = found.apply(context, passedArguments);
577
+ }
578
+ else if(found !== undefined) {
579
+ response = found;
580
+ }
581
+ if($.isArray(invokedResponse)) {
582
+ invokedResponse.push(response);
583
+ }
584
+ else if(typeof invokedResponse == 'string') {
585
+ invokedResponse = [invokedResponse, response];
586
+ }
587
+ else if(response !== undefined) {
588
+ invokedResponse = response;
589
+ }
590
+ return found || false;
591
+ }
592
+ };
593
+ module.initialize();
594
+ })
595
+ ;
596
+ return (invokedResponse !== undefined)
597
+ ? invokedResponse
598
+ : this
599
+ ;
600
+ };
601
+
602
+ $.fn.transition.settings = {
603
+
604
+ // module info
605
+ name : 'Transition',
606
+
607
+ // debug content outputted to console
608
+ debug : true,
609
+
610
+ // verbose debug output
611
+ verbose : true,
612
+
613
+ // performance data output
614
+ performance : true,
615
+
616
+ // event namespace
617
+ namespace : 'transition',
618
+
619
+ // animation complete event
620
+ complete : function() {},
621
+
622
+ // animation duration (useful only with future js animations)
623
+ animation : 'fade',
624
+ duration : '700ms',
625
+
626
+ // queue up animations
627
+ queue : true,
628
+
629
+ className : {
630
+ transition : 'ui transition',
631
+ animating : 'animating',
632
+ looping : 'looping',
633
+ loading : 'loading',
634
+ disabled : 'disabled',
635
+ hidden : 'hidden',
636
+ visible : 'visible',
637
+ inward : 'in',
638
+ outward : 'out'
639
+ },
640
+
641
+ // possible errors
642
+ error: {
643
+ noAnimation : 'There is no css animation matching the one you specified.',
644
+ method : 'The method you called is not defined'
645
+ }
646
+
647
+ };
648
+
649
+
650
+ })( jQuery, window , document );