trumbowyg_rails 1.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +41 -0
  3. data/VERSION +1 -0
  4. data/lib/trumbowyg_rails.rb +4 -0
  5. data/trumbowyg_rails.gemspec +19 -0
  6. data/vendor/assets/images/trumbowyg/images/icons-2x.png +0 -0
  7. data/vendor/assets/images/trumbowyg/images/icons.png +0 -0
  8. data/vendor/assets/javascripts/trumbowyg/langs/ca.js +58 -0
  9. data/vendor/assets/javascripts/trumbowyg/langs/de.js +56 -0
  10. data/vendor/assets/javascripts/trumbowyg/langs/en.js +14 -0
  11. data/vendor/assets/javascripts/trumbowyg/langs/es.js +56 -0
  12. data/vendor/assets/javascripts/trumbowyg/langs/es_ar.js +56 -0
  13. data/vendor/assets/javascripts/trumbowyg/langs/fa.js +57 -0
  14. data/vendor/assets/javascripts/trumbowyg/langs/fi.js +56 -0
  15. data/vendor/assets/javascripts/trumbowyg/langs/fr.js +57 -0
  16. data/vendor/assets/javascripts/trumbowyg/langs/id.js +58 -0
  17. data/vendor/assets/javascripts/trumbowyg/langs/it.js +55 -0
  18. data/vendor/assets/javascripts/trumbowyg/langs/ko.js +57 -0
  19. data/vendor/assets/javascripts/trumbowyg/langs/pl.js +56 -0
  20. data/vendor/assets/javascripts/trumbowyg/langs/pt.js +58 -0
  21. data/vendor/assets/javascripts/trumbowyg/langs/ro.js +60 -0
  22. data/vendor/assets/javascripts/trumbowyg/langs/ru.js +55 -0
  23. data/vendor/assets/javascripts/trumbowyg/langs/tr.js +57 -0
  24. data/vendor/assets/javascripts/trumbowyg/langs/zh_cn.js +57 -0
  25. data/vendor/assets/javascripts/trumbowyg/trumbowyg.js +1096 -0
  26. data/vendor/assets/stylesheets/trumbowyg/_sprite-2x.scss +28 -0
  27. data/vendor/assets/stylesheets/trumbowyg/_sprite.scss +28 -0
  28. data/vendor/assets/stylesheets/trumbowyg/trumbowyg.scss +566 -0
  29. metadata +113 -0
@@ -0,0 +1,28 @@
1
+ $attachement-2x: 0px -50px;
2
+ $barre-2x: 0px -550px;
3
+ $bold-2x: 0px -100px;
4
+ $center-align-2x: 0px -150px;
5
+ $close-2x: 0px -200px;
6
+ $formatting-2x: 0px -250px;
7
+ $fullscreen-exit-2x: 0px -300px;
8
+ $fullscreen-2x: 0px -350px;
9
+ $gras-2x: 0px -400px;
10
+ $horizontal-rule-2x: 0px -450px;
11
+ $image-2x: 0px -500px;
12
+ $italic-2x: 0px 0px;
13
+ $justify-align-2x: 0px -600px;
14
+ $left-align-2x: 0px -650px;
15
+ $link-2x: 0px -700px;
16
+ $ordered-list-2x: 0px -750px;
17
+ $right-align-2x: 0px -800px;
18
+ $souligne-2x: 0px -850px;
19
+ $strikethrough-2x: 0px -900px;
20
+ $underline-2x: 0px -950px;
21
+ $unordered-list-2x: 0px -1000px;
22
+ $video-2x: 0px -1050px;
23
+ $view-html-2x: 0px -1100px;
24
+
25
+
26
+ $sprite-height-2x: 1150px;
27
+ $sprite-width-2x: 50px;
28
+ $icons-2x: "./images/icons-2x.png";
@@ -0,0 +1,28 @@
1
+ $attachement: 0px -25px;
2
+ $barre: 0px -275px;
3
+ $bold: 0px -50px;
4
+ $center-align: 0px -75px;
5
+ $close: 0px -100px;
6
+ $formatting: 0px -125px;
7
+ $fullscreen-exit: 0px -150px;
8
+ $fullscreen: 0px -175px;
9
+ $gras: 0px -200px;
10
+ $horizontal-rule: 0px -225px;
11
+ $image: 0px -250px;
12
+ $italic: 0px 0px;
13
+ $justify-align: 0px -300px;
14
+ $left-align: 0px -325px;
15
+ $link: 0px -350px;
16
+ $ordered-list: 0px -375px;
17
+ $right-align: 0px -400px;
18
+ $souligne: 0px -425px;
19
+ $strikethrough: 0px -450px;
20
+ $underline: 0px -475px;
21
+ $unordered-list: 0px -500px;
22
+ $video: 0px -525px;
23
+ $view-html: 0px -550px;
24
+
25
+
26
+ $sprite-height: 575px;
27
+ $sprite-width: 25px;
28
+ $icons: "./images/icons.png";
@@ -0,0 +1,566 @@
1
+ @import "sprite";
2
+ @import "sprite-2x";
3
+
4
+ $light-color: #ecf0f1;
5
+
6
+ @mixin sprite-pos($_item, $retina: false){
7
+ @if($retina == false){
8
+ background-position: nth($_item, 1)+5 nth($_item, 2)+5;
9
+ } @else {
10
+ background-position: round(nth($_item, 1)/ 2)+5 round(nth($_item, 2)/ 2)+5;
11
+ }
12
+ }
13
+
14
+
15
+ .trumbowyg-box,
16
+ .trumbowyg-editor {
17
+ display: block;
18
+ position: relative;
19
+ border: 1px solid #DDD;
20
+ width: 96%;
21
+ min-height: 300px;
22
+ margin: 17px auto;
23
+ }
24
+ .trumbowyg-box .trumbowyg-editor {
25
+ margin: 0 auto;
26
+ }
27
+ .trumbowyg-box.trumbowyg-fullscreen {
28
+ background: #FEFEFE;
29
+ }
30
+ .trumbowyg-editor,
31
+ .trumbowyg-textarea {
32
+ position: relative;
33
+ box-sizing: border-box;
34
+ padding: 1% 2%;
35
+ min-height: 300px;
36
+ width: 100%;
37
+ border-style: none;
38
+ resize: none;
39
+ outline: none;
40
+ }
41
+ .trumbowyg-box-blur .trumbowyg-editor {
42
+ * {
43
+ color: transparent !important;
44
+ text-shadow: 0 0 7px #333;
45
+ }
46
+ img {
47
+ opacity: .2;
48
+ }
49
+ }
50
+ .trumbowyg-textarea {
51
+ position: relative;
52
+ display: block;
53
+ overflow: auto;
54
+ border: none;
55
+ white-space: normal;
56
+ }
57
+
58
+ .trumbowyg-button-pane {
59
+ position: relative;
60
+ width: 100%;
61
+ background: $light-color;
62
+ border-bottom: 1px solid darken($light-color, 7%);
63
+ margin: 0;
64
+ padding: 0;
65
+ list-style-type: none;
66
+ line-height: 10px;
67
+ backface-visibility: hidden;
68
+
69
+ li {
70
+ display: inline-block;
71
+ text-align: center;
72
+ overflow: hidden;
73
+
74
+ &.trumbowyg-separator {
75
+ width: 1px;
76
+ background: darken($light-color, 7%);
77
+ margin: 0 5px;
78
+ height: 35px;
79
+ }
80
+ }
81
+
82
+ &.trumbowyg-disable {
83
+ li:not(.trumbowyg-not-disable) button:not(.trumbowyg-active) {
84
+ opacity: .2;
85
+ cursor: default;
86
+ }
87
+ li.trumbowyg-separator {
88
+ background: darken($light-color, 3%);
89
+ }
90
+ }
91
+
92
+ li button {
93
+ // At bottom of this stylesheet
94
+ }
95
+
96
+ &:not(.trumbowyg-disable) li button:hover,
97
+ &:not(.trumbowyg-disable) li button:focus,
98
+ li button.trumbowyg-active,
99
+ li.trumbowyg-not-disable button:hover,
100
+ li.trumbowyg-not-disable button:focus {
101
+ background-color: #FFF;
102
+ outline: none;
103
+ }
104
+
105
+ li .trumbowyg-open-dropdown:after {
106
+ display: block;
107
+ content: " ";
108
+ position: absolute;
109
+ top: 25px;
110
+ right: 3px;
111
+ height: 0;
112
+ width: 0;
113
+ border: 3px solid transparent;
114
+ border-top-color: #555;
115
+ }
116
+
117
+ .trumbowyg-buttons-right {
118
+ float: right;
119
+ width: auto;
120
+
121
+ button {
122
+ float: left;
123
+ }
124
+ }
125
+ }
126
+
127
+ .trumbowyg-dropdown {
128
+ width: 200px;
129
+ border: 1px solid $light-color;
130
+ padding: 5px 0;
131
+ border-top: none;
132
+ background: #FFF;
133
+ margin-left: -1px;
134
+ box-shadow: rgba(0, 0, 0, .1) 0 2px 3px;
135
+
136
+ button {
137
+ display: block;
138
+ width: 100%;
139
+ height: 35px;
140
+ line-height: 35px;
141
+ text-decoration: none;
142
+ background: #FFF;
143
+ padding: 0 14px;
144
+ color: #333;
145
+ border: none;
146
+ cursor: pointer;
147
+ text-align: left;
148
+ font-size: 15px;
149
+ transition: all .15s;
150
+
151
+ &:hover,
152
+ &:focus {
153
+ background: $light-color;
154
+ }
155
+ }
156
+ }
157
+
158
+
159
+ /* Modal box */
160
+ .trumbowyg-modal {
161
+ position: absolute;
162
+ top: 0;
163
+ left: 50%;
164
+ margin-left: -260px;
165
+ width: 520px;
166
+ height: 290px;
167
+ overflow: hidden;
168
+ }
169
+ .trumbowyg-modal-box {
170
+ position: absolute;
171
+ top: 0;
172
+ left: 50%;
173
+ margin-left: -250px;
174
+ width: 500px;
175
+ height: 275px;
176
+ z-index: 1;
177
+ background-color: #FFF;
178
+ text-align: center;
179
+ box-shadow: rgba(0, 0, 0, .2) 0 2px 3px;
180
+ backface-visibility: hidden;
181
+
182
+ .trumbowyg-modal-title {
183
+ font-size: 24px;
184
+ font-weight: bold;
185
+ margin: 0 0 20px;
186
+ padding: 15px 0 13px;
187
+ display: block;
188
+ border-bottom: 1px solid #EEE;
189
+ color: #333;
190
+ background: lighten($light-color, 5%);
191
+ }
192
+
193
+ .trumbowyg-progress {
194
+ width: 100%;
195
+ background: #F00;
196
+ height: 3px;
197
+ position: absolute;
198
+ top: 58px;
199
+
200
+ .trumbowyg-progress-bar {
201
+ background: #2BC06A;
202
+ height: 100%;
203
+ transition: width .15s linear;
204
+ }
205
+ }
206
+
207
+ label {
208
+ display: block;
209
+ position: relative;
210
+ margin: 15px 12px;
211
+ height: 27px;
212
+ line-height: 27px;
213
+ overflow: hidden;
214
+
215
+ .trumbowyg-input-infos {
216
+ display: block;
217
+ text-align: left;
218
+ height: 25px;
219
+ line-height: 25px;
220
+ transition: all .15;
221
+
222
+ span {
223
+ display: block;
224
+ color: darken($light-color, 35%);
225
+ background-color: lighten($light-color, 5%);
226
+ border: 1px solid #DEDEDE;
227
+ padding: 0 2%;
228
+ width: 19.5%;
229
+ }
230
+ span.trumbowyg-msg-error {
231
+ color: #e74c3c;
232
+ }
233
+ }
234
+
235
+ &.trumbowyg-input-error {
236
+ input,
237
+ textarea {
238
+ border: 1px solid #e74c3c;
239
+ }
240
+
241
+ .trumbowyg-input-infos {
242
+ margin-top: -27px;
243
+ }
244
+ }
245
+
246
+ input {
247
+ position: absolute;
248
+ top: 0;
249
+ right: 0;
250
+ height: 25px;
251
+ line-height: 25px;
252
+ border: 1px solid #DEDEDE;
253
+ background: transparent;
254
+ width: 72%;
255
+ padding: 0 2%;
256
+ margin: 0 0 0 23%;
257
+ transition: all .15s;
258
+
259
+ &:hover,
260
+ &:focus {
261
+ outline: none;
262
+ border: 1px solid #95a5a6;
263
+ }
264
+ &:focus {
265
+ background: rgba(230, 230, 255, .1);
266
+ }
267
+ }
268
+ }
269
+
270
+ .error {
271
+ margin-top: 25px;
272
+ display: block;
273
+ color: red;
274
+ }
275
+
276
+ .trumbowyg-modal-button {
277
+ position: absolute;
278
+ bottom: 10px;
279
+ right: 0;
280
+ text-decoration: none;
281
+ color: #FFF;
282
+ display: block;
283
+ width: 100px;
284
+ height: 35px;
285
+ line-height: 33px;
286
+ margin: 0 10px;
287
+ background-color: #333;
288
+ border: none;
289
+ border-top: none;
290
+ cursor: pointer;
291
+ font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;
292
+ font-size: 16px;
293
+ transition: all .15s;
294
+
295
+ $modal-submit-color : #2ecc71;
296
+ &.trumbowyg-modal-submit {
297
+ right: 110px;
298
+ background: darken($modal-submit-color, 3%);
299
+
300
+ &:hover,
301
+ &:focus {
302
+ background: lighten($modal-submit-color, 5%);
303
+ outline: none;
304
+ }
305
+ &:active {
306
+ background: darken($modal-submit-color, 10%);
307
+ }
308
+ }
309
+
310
+ $modal-reset-color : #EEE;
311
+ &.trumbowyg-modal-reset {
312
+ color: #555;
313
+ background: darken($modal-reset-color, 3%);
314
+
315
+ &:hover,
316
+ &:focus {
317
+ background: lighten($modal-reset-color, 5%);
318
+ outline: none;
319
+ }
320
+ &:active {
321
+ background: darken($modal-reset-color, 10%);
322
+ }
323
+ }
324
+ }
325
+ }
326
+ .trumbowyg-overlay {
327
+ position: absolute;
328
+ background-color: rgba(255, 255, 255, .5);
329
+ width: 100%;
330
+ left: 0;
331
+ display: none;
332
+ }
333
+
334
+
335
+ /**
336
+ * Fullscreen
337
+ */
338
+ .trumbowyg-fullscreen {
339
+ position: fixed;
340
+ top: 0;
341
+ left: 0;
342
+ width: 100%;
343
+ height: 100%;
344
+ margin: 0;
345
+ padding: 0;
346
+ z-index: 99999;
347
+
348
+ &.trumbowyg-box,
349
+ .trumbowyg-editor {
350
+ border: none;
351
+ }
352
+ .trumbowyg-overlay {
353
+ height: 100% !important;
354
+ }
355
+ }
356
+
357
+
358
+
359
+ /*
360
+ * Reset for resetCss option
361
+ */
362
+ .trumbowyg-editor {
363
+ object,
364
+ embed,
365
+ video,
366
+ img {
367
+ width: auto;
368
+ max-width: 100%;
369
+ }
370
+ video,
371
+ img {
372
+ height: auto;
373
+ }
374
+ img { cursor: move; }
375
+
376
+ &.trumbowyg-reset-css {
377
+ background: #FEFEFE !important;
378
+ font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
379
+ font-size: 14px !important;
380
+ line-height: 1.45em !important;
381
+ white-space: normal !important;
382
+ color: #333;
383
+
384
+ a {
385
+ color: #15c !important;
386
+ text-decoration: underline !important;
387
+ }
388
+
389
+ div,
390
+ p,
391
+ ul,
392
+ ol,
393
+ blockquote {
394
+ box-shadow: none !important;
395
+ background: none !important;
396
+ margin: 0 !important;
397
+ margin-bottom: 15px !important;
398
+ line-height: 1.4em !important;
399
+ font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
400
+ font-size: 14px !important;
401
+ border: none;
402
+ }
403
+ iframe,
404
+ object,
405
+ hr {
406
+ margin-bottom: 15px !important;
407
+ }
408
+ blockquote {
409
+ margin-left: 32px !important;
410
+ font-style: italic !important;
411
+ color: #555;
412
+ }
413
+ ul,
414
+ ol {
415
+ padding-left: 20px !important;
416
+ }
417
+ ul ul,
418
+ ol ol,
419
+ ul ol,
420
+ ol ul {
421
+ border: none;
422
+ margin: 2px !important;
423
+ padding: 0 !important;
424
+ padding-left: 24px !important;
425
+ }
426
+ hr {
427
+ display: block;
428
+ height: 1px;
429
+ border: none;
430
+ border-top: 1px solid #CCC;
431
+ }
432
+
433
+ h1,
434
+ h2,
435
+ h3,
436
+ h4 {
437
+ color: #111;
438
+ background: none;
439
+ margin: 0 !important;
440
+ padding: 0 !important;
441
+ font-weight: bold;
442
+ }
443
+
444
+ h1 {
445
+ font-size: 32px !important;
446
+ line-height: 38px !important;
447
+ margin-bottom: 20px !important;
448
+ }
449
+ h2 {
450
+ font-size: 26px !important;
451
+ line-height: 34px !important;
452
+ margin-bottom: 15px !important;
453
+ }
454
+ h3 {
455
+ font-size: 22px !important;
456
+ line-height: 28px !important;
457
+ margin-bottom: 7px !important;
458
+ }
459
+ h4 {
460
+ font-size: 16px !important;
461
+ line-height: 22px !important;
462
+ margin-bottom: 7px !important;
463
+ }
464
+ }
465
+ }
466
+
467
+
468
+
469
+ /*
470
+ * Buttons icons
471
+ */
472
+ .trumbowyg-button-pane li button {
473
+ display: block;
474
+ position: relative;
475
+ text-indent: -9999px;
476
+ width: 35px;
477
+ height: 35px;
478
+ overflow: hidden;
479
+ background: transparent url($icons) no-repeat;
480
+ border: none;
481
+ cursor: pointer;
482
+ transition: background-color .15s, background-image .15s, opacity .15s;
483
+
484
+ &.trumbowyg-viewHTML-button { @include sprite-pos($view-html); }
485
+ &.trumbowyg-formatting-button { @include sprite-pos($formatting); }
486
+
487
+ /* English and others */
488
+ &.trumbowyg-bold-button, &.trumbowyg-strong-button { @include sprite-pos($bold); }
489
+ &.trumbowyg-italic-button, &.trumbowyg-em-button { @include sprite-pos($italic); }
490
+ &.trumbowyg-underline-button { @include sprite-pos($underline); }
491
+ &.trumbowyg-strikethrough-button, &.trumbowyg-del-button { @include sprite-pos($strikethrough); }
492
+
493
+ &.trumbowyg-link-button { @include sprite-pos($link); }
494
+
495
+ &.trumbowyg-insertImage-button { @include sprite-pos($image); }
496
+
497
+ &.trumbowyg-justifyLeft-button { @include sprite-pos($left-align); }
498
+ &.trumbowyg-justifyCenter-button { @include sprite-pos($center-align); }
499
+ &.trumbowyg-justifyRight-button { @include sprite-pos($right-align); }
500
+ &.trumbowyg-justifyFull-button { @include sprite-pos($justify-align); }
501
+
502
+ &.trumbowyg-unorderedList-button { @include sprite-pos($unordered-list); }
503
+ &.trumbowyg-orderedList-button { @include sprite-pos($ordered-list); }
504
+
505
+ &.trumbowyg-horizontalRule-button { @include sprite-pos($horizontal-rule); }
506
+
507
+ &.trumbowyg-fullscreen-button { @include sprite-pos($fullscreen); }
508
+ &.trumbowyg-close-button { @include sprite-pos($close); }
509
+ }
510
+ .trumbowyg-fullscreen .trumbowyg-button-pane li button.trumbowyg-fullscreen-button { @include sprite-pos($fullscreen-exit); }
511
+ .trumbowyg-button-pane li {
512
+ &:first-child button { margin-left: 6px; }
513
+ &:last-child button { margin-right: 6px; }
514
+ }
515
+
516
+ /* French */
517
+ .trumbowyg-fr .trumbowyg-button-pane li button {
518
+ &.trumbowyg-bold-button, &.trumbowyg-strong-button { @include sprite-pos($gras); }
519
+ &.trumbowyg-underline-button { @include sprite-pos($souligne); }
520
+ &.trumbowyg-strikethrough-button, &.trumbowyg-del-button { @include sprite-pos($barre); }
521
+ }
522
+
523
+
524
+
525
+
526
+
527
+ @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){
528
+ .trumbowyg-button-pane li button {
529
+ background-size: round($sprite-width-2x / 2) round($sprite-height-2x / 2) !important;
530
+ background-image: url($icons-2x) !important;
531
+
532
+ &.trumbowyg-viewHTML-button { @include sprite-pos($view-html-2x, true); }
533
+ &.trumbowyg-formatting-button { @include sprite-pos($formatting-2x, true); }
534
+
535
+ /* English and others */
536
+ &.trumbowyg-bold-button, &.trumbowyg-strong-button { @include sprite-pos($bold-2x, true); }
537
+ &.trumbowyg-italic-button, &.trumbowyg-em-button { @include sprite-pos($italic-2x, true); }
538
+ &.trumbowyg-underline-button { @include sprite-pos($underline-2x, true); }
539
+ &.trumbowyg-strikethrough-button, &.trumbowyg-del-button { @include sprite-pos($strikethrough-2x, true); }
540
+
541
+ &.trumbowyg-link-button { @include sprite-pos($link-2x, true); }
542
+
543
+ &.trumbowyg-insertImage-button { @include sprite-pos($image-2x, true); }
544
+
545
+ &.trumbowyg-justifyLeft-button { @include sprite-pos($left-align-2x, true); }
546
+ &.trumbowyg-justifyCenter-button { @include sprite-pos($center-align-2x, true); }
547
+ &.trumbowyg-justifyRight-button { @include sprite-pos($right-align-2x, true); }
548
+ &.trumbowyg-justifyFull-button { @include sprite-pos($justify-align-2x, true); }
549
+
550
+ &.trumbowyg-unorderedList-button { @include sprite-pos($unordered-list-2x, true); }
551
+ &.trumbowyg-orderedList-button { @include sprite-pos($ordered-list-2x, true); }
552
+
553
+ &.trumbowyg-horizontalRule-button { @include sprite-pos($horizontal-rule-2x, true); }
554
+
555
+ &.trumbowyg-fullscreen-button { @include sprite-pos($fullscreen-2x, true); }
556
+ &.trumbowyg-close-button { @include sprite-pos($close-2x, true); }
557
+ }
558
+ .trumbowyg-fullscreen .trumbowyg-button-pane li a.trumbowyg-fullscreen-button { @include sprite-pos($fullscreen-exit-2x, true); }
559
+
560
+ /* French */
561
+ .trumbowyg-fr .trumbowyg-button-pane li button {
562
+ &.trumbowyg-bold-button, &.trumbowyg-strong-button { @include sprite-pos($gras-2x, true); }
563
+ &.trumbowyg-underline-button { @include sprite-pos($souligne-2x, true); }
564
+ &.trumbowyg-strikethrough-button, &.trumbowyg-del-button { @include sprite-pos($barre-2x, true); }
565
+ }
566
+ }