Font – official webfonts plugin of Fonts For Web. NO CODING! Just click & change font size, color and font face visually! - Version 7.3.0

Version Description

-Fixed sustainging values when changing preset -Refreshed design to be more flat -Minor tweaks here and there -added current font preview

=

Download this release

Release Info

Developer killerdeveloper
Plugin Icon wp plugin Font – official webfonts plugin of Fonts For Web. NO CODING! Just click & change font size, color and font face visually!
Version 7.3.0
Comparing to
See all releases

Code changes from version 7.2.0 to 7.3.0

Files changed (16) hide show
  1. Font.php +2 -2
  2. css/fontsforwebstyle.css +341 -291
  3. images/add.png +0 -0
  4. images/delete.png +0 -0
  5. images/edit.png +0 -0
  6. images/effects.png +0 -0
  7. images/font_settings.png +0 -0
  8. images/font_ver.png +0 -0
  9. images/pro.png +0 -0
  10. images/pro_settings.png +0 -0
  11. images/save.png +0 -0
  12. images/snc_settings.png +0 -0
  13. js/colorpicker.js +1 -487
  14. js/jquery.fontPlugin.js +481 -528
  15. js/pluginscripts.js +113 -110
  16. readme.txt +11 -2
Font.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Font
4
  Plugin URI: http://fontsforweb.com
5
  Description: Now go to your home page. And click on "Font settings" in admin bar and choose some exciting font out of 1000+ availabile! And that's just the beginning!
6
- Version: 7.2.0
7
  Author: Paweł Misiurski
8
  Author URI: http://fontsforweb.com
9
  License: Copyright (C) 2012 Pawel Misiurski
@@ -23,7 +23,7 @@
23
  class FontPlugin {
24
  public $pluginName = 'Font';
25
  public $baseUrl = 'http://fontsforweb.com';
26
- public $version = '7.2.0';
27
  //url parts for requesting css for elements
28
  private $titleUrlPart;
29
  private $headerUrlPart;
3
  Plugin Name: Font
4
  Plugin URI: http://fontsforweb.com
5
  Description: Now go to your home page. And click on "Font settings" in admin bar and choose some exciting font out of 1000+ availabile! And that's just the beginning!
6
+ Version: 7.3.0
7
  Author: Paweł Misiurski
8
  Author URI: http://fontsforweb.com
9
  License: Copyright (C) 2012 Pawel Misiurski
23
  class FontPlugin {
24
  public $pluginName = 'Font';
25
  public $baseUrl = 'http://fontsforweb.com';
26
+ public $version = '7.3.0';
27
  //url parts for requesting css for elements
28
  private $titleUrlPart;
29
  private $headerUrlPart;
css/fontsforwebstyle.css CHANGED
@@ -1,9 +1,9 @@
1
  .draggableModal * {
2
  -moz-box-sizing: content-box !important;
3
- box-sizing: content-box !important;
4
  border: medium none;
5
  color: #333333;
6
- font-family: Tahoma,Geneva,sans-serif;
7
  font-size: 14px;
8
  letter-spacing: 0;
9
  line-height: 1em;
@@ -18,15 +18,15 @@
18
  .draggableModal select
19
  {
20
  -moz-box-sizing: content-box !important;
21
- box-sizing: content-box !important;
22
  height: auto;
23
  width: auto;
24
- background:#fff;
25
- margin:0;
26
- padding:0;
27
  }
28
  .draggableModal a {
29
- background: transparent;
30
  }
31
  .draggableModal h2 {
32
  margin-bottom: 1em;
@@ -44,6 +44,11 @@
44
  font-weight: regular;
45
  margin-bottom: 0.4em;
46
  }
 
 
 
 
 
47
  .draggableModal fieldset .resetField {
48
  color: orange;
49
  font-size: 9px;
@@ -55,7 +60,7 @@
55
  margin-right: 10px;
56
  padding: 3px;
57
  width: 50px;
58
- display:inline-block;
59
  }
60
  #text-shadowFieldset .ui-slider {
61
  float: left;
@@ -72,7 +77,7 @@
72
  }
73
  .draggableModal fieldset.slider-extended input[type="text"] {
74
  width: 25px;
75
- padding-left: 5px;
76
  }
77
  .draggableModal fieldset.slider-extended .ui-slider-horizontal.ui-slider {
78
  display: block;
@@ -80,46 +85,50 @@
80
  position: relative;
81
  top: 3px;
82
  width: 247px;
83
- height: 1px;
84
- /*background: #666666;*/
85
- background: #ccc;
86
- border: none;
87
  }
88
  .draggableModal fieldset.slider-extended .ui-slider-vertical.ui-slider {
89
- width: 1px;
90
- background: #ccc;
91
- border: none;
92
- left: 3px;
93
  }
94
  .draggableModal fieldset.slider-extended .ui-slider-range {
95
- background: #666;
96
- /*background: #fff;*/
97
  }
98
 
99
  .draggableModal fieldset .ui-slider-horizontal .ui-slider-handle {
100
  width: 8px;
101
- height: 14px;
102
- border: none;
103
- background: #000;
104
- margin-top: -2px;
105
  }
106
  .draggableModal fieldset .ui-slider-vertical .ui-slider-handle {
107
- height: 8px;
108
- width: 14px;
109
- border: none;
110
- background: #000;
111
- margin-left: -2px;
112
  }
113
  .draggableModal fieldset.slider-extended .ui-slider-vertical.ui-slider {
114
  }
115
 
116
  /*
117
  *
118
- * Appearance panel
119
  *
120
  */
121
  #appearancePanel {
122
- background: #2b2b2b;
 
 
 
 
123
  }
124
  #appearancePanel fieldset {
125
  }
@@ -143,25 +152,25 @@
143
  }
144
 
145
  #appearanceStandardFields fieldset {
146
- padding-bottom: 2px;
147
  }
148
  #font-sizeFieldset label {
149
- width: 130px;
150
- display: inline-block;
151
  }
152
  #font-sizeFieldset .ui-slider {
153
- width: 115px;
154
- display: inline-block;
155
  }
156
  #appearancePanel fieldset.slider-extended .ui-slider-horizontal.ui-slider {
157
  background: #999;
158
  }
159
  #appearancePanel fieldset.slider-extended .ui-slider-range {
160
- background: #ddd;
161
  }
162
 
163
  #appearancePanel fieldset .ui-slider-horizontal .ui-slider-handle {
164
- background: #fff;
165
  }
166
 
167
 
@@ -172,63 +181,63 @@
172
  *
173
  */
174
  #effectsPanel {
175
-
176
  }
177
  #effectsPanel fieldset .ui-slider-horizontal .ui-slider-handle {
178
  }
179
  #effectsPanel fieldset.slider-extended .ui-slider-horizontal.ui-slider {
180
- width: 169px;
181
  }
182
  #effectsPanel fieldset.slider-extended .ui-slider-range {
183
  }
184
  #effectsPanel > select {
185
- font-size: 12px;
186
- margin-left: 4px;
187
- margin-right: 3px;
188
- margin-top: 3px;
189
- margin-bottom: 3px;
190
- background: #f5f3f3;
191
- padding-top: 3px;
192
- padding-bottom: 3px;
193
- width: 181px;
194
  }
195
  #effectsPanel div.label {
196
-
197
- }
198
- #effectsPanel div.label > a {
199
- font-size: 12px;
200
- }
201
- #effectsPanel div.label a.effectName {
202
- width: 140px;
203
- display: inline-block;
204
- cursor: n-resize;
205
- }
206
- #effectsPanel div.label a.removeEffect {
207
- font-size: 14px;
208
- }
209
- #effectsPanel a.effectArrow {
210
- background: url("../images/arrow.png") no-repeat scroll left center transparent;
211
- padding-left: 12px;
212
- display: inline-block;
213
- width: 12px;
214
- height: 12px;
215
- padding: 0;
216
- margin: 0;
217
- }
218
  #effectsPanel input[name=enabled] {
219
- margin-right: 3px;
220
  }
221
  #effectsPanel .effectsList {
222
- margin-bottom: 5px;
223
- }
224
- #effectsPanel .effectsList > div {
225
- padding-left: 5px;
226
- padding-right: 5px;
227
- padding-top: 5px;
228
- }
229
- #effectsPanel .effectsList fieldset {
230
- float: none;
231
- }
232
 
233
 
234
 
@@ -237,6 +246,7 @@
237
  }
238
  .draggableModal {
239
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
 
240
  border-radius: 4px;
241
  box-shadow: 0 0 7px rgba(0,0,0,0.1);
242
  margin: 0;
@@ -244,8 +254,8 @@
244
  position: fixed;
245
  }
246
  .draggableModal input[type="button"], .draggableModal button, .draggableModal input[type="submit"] {
247
- border: 1px solid #333333;
248
- border-radius: 3px 3px 3px 3px;
249
  cursor: pointer;
250
  padding: 5px;
251
  }
@@ -253,20 +263,20 @@
253
  border: none;
254
  font-size: 12px;
255
  padding: 3px 5px;
256
- border-radius: 2px;
257
- height: 20px;
258
  }
259
  h1.draggableModalBar {
260
- color: #212121;
261
- cursor: move;
262
- font-size: 12px;
263
- font-weight: normal;
264
- line-height: 1.35em;
265
- margin: 0;
266
- padding: 3px 0;
267
- text-indent: 7px;
268
- width: 100%;
269
- text-align: left;
270
  }
271
  h1.draggableModalBar #font_ver {
272
  background: url("../images/font_ver.png") repeat scroll 0 0 transparent;
@@ -290,13 +300,13 @@ h1.draggableModalBar small {
290
  .draggableModalBar .closeModal {
291
  color: #000;
292
  font-size: 12px;
293
- font-weight: bold;
294
  height: 13px;
295
  padding: 2px;
296
  text-align: center;
297
  text-decoration: none;
298
  width: 15px;
299
- margin: 0;
300
  }
301
  .draggableModalBar a {
302
  float: right;
@@ -311,13 +321,13 @@ h1.draggableModalBar small {
311
  }
312
  .fontLoading {
313
  background: url("../loadinfo.net.gif") no-repeat scroll center center #fff;
314
- border-radius: 10px;
315
  height: 48px;
316
  width: 48px;
317
- position: fixed;
318
- top:50px;
319
- left: 30px;
320
- padding:20px;
321
  }
322
  #media-buttons a#FFW_chooseFontButton {
323
  height: 13px;
@@ -331,12 +341,12 @@ h1.draggableModalBar small {
331
  color: #464646;
332
  height: 80%;
333
  right: 0;
334
- top: 70px;
335
  width: 300px;
336
  z-index: 10000;
337
- position:fixed;
338
- background:#fff;
339
- display:none;
340
  }
341
  #fontplugin ul {
342
  margin: 0;
@@ -471,7 +481,7 @@ h1.draggableModalBar small {
471
  }
472
  #fontplugin li.categoriesList ul li {
473
  margin: 0;
474
- list-style-type:none;
475
  }
476
  #fontplugin li.categoriesList a {
477
  background: none repeat scroll 0 0 #FFFFFF;
@@ -514,7 +524,7 @@ h1.draggableModalBar small {
514
  border-bottom: 1px solid #EEEEEE;
515
  font-size: 14px;
516
  margin: 0;
517
- list-style-type:none;
518
  }
519
  #fontplugin li#fontList ul li:hover {
520
  position: relative;
@@ -565,102 +575,102 @@ h1.draggableModalBar small {
565
  }
566
 
567
  #presetsPanel {
568
- z-index: 10000;
569
- background: rgba(255,255,255,0.88);
570
  }
571
  #presetsPanel #presetsDropdownFieldset {
572
  display: block;
573
- float: left;
574
- width: 105px;
575
- height: auto;
576
- padding: 0;
577
- margin-bottom: 0;
578
- position: relative;
579
  }
580
  #presetsPanel #presetsDropdownFieldset:hover {
581
  }
582
  #presetsDropdownFieldset:hover button#deletePreset, #presetsDropdownFieldset:hover button#renamePreset {
583
- display: block !important;
584
  }
585
 
586
 
587
 
588
  #presetsPanel #selectorFieldset {
589
- margin-top: 0;
590
- padding: 0;
591
- float: left;
592
- margin-left:3px;
593
  }
594
  #actionsFieldset {
595
- float: right;
596
- text-align: right;
597
- padding: 0;
598
- position: relative;
599
- top: 4px;
600
- right: 3px;
601
- width: 630px;
602
- }
603
- #actionsFieldset .closeModal {
604
- float: right;
605
- padding: 3px 5px;
606
- font-weight: bold;
607
- border: none;
608
- border-radius: 2px;
609
- margin-left: 10px;
610
- color: #fff;
611
- text-decoration: none;
612
- margin-top: 2px;
613
- font-size: 16px;
614
- margin-right: 5px;
615
- }
616
  #presetsPanel #presetsDropdownFieldset label, #presetsPanel #selectorFieldset label {
617
  font-size: 12px;
618
- font-weight: regular;
619
- width: 105px;
620
- padding-left:3px;
621
- text-indent: 3px;
622
- line-height: 1.5em;
623
  }
624
  #presetsPanel #presetsDropdownFieldset select {
625
  border: 1px solid #f5f3f3;
626
- background: #f5f3f3;
627
- color: #212121;
628
- font-size: 11px;
629
- font-weight: normal;
630
- height: 19px;
631
- padding: 0;
632
- width: 91px;
633
- float: none;
634
- margin-top: 3px;
635
- margin-left: 0;
636
- display: block;
637
  }
638
 
639
  #presetsPanel #presetsDropdownFieldset button {
640
- border: none;
641
- height: 15px;
642
- margin: 0;
643
- font-size: 11px;
644
- padding: 0;
645
- background-size: 100% 100% !important;
646
  }
647
  #presetsPanel #presetsDropdownFieldset button#deletePreset {
648
  position: absolute;
649
- left: 98%;
650
- top: 9px;
651
- display: none;
652
- background: none;
653
- color: #f10c0c;
654
- font-weight: bold;
655
  }
656
  #presetsPanel #presetsDropdownFieldset button#renamePreset {
657
  float: none;
658
- position: absolute;
659
- left: 98%; /* can't be over 100 because hover will disappear'*/
660
- top: 22px;
661
- display: none;
662
- background: none;
663
- color: #212121;
664
  }
665
  #presetsPanel #selectorFieldset input[name="selector"] {
666
  border: 1px solid #999999;
@@ -679,42 +689,44 @@ h1.draggableModalBar small {
679
  font-size: 0;
680
 
681
  margin-left: 3px;
682
- margin-bottom: 5px;
683
- margin-top: 3px;
684
  padding: 0;
685
  text-indent: -10000px;
686
  width: 99px;
687
- height: 36px;
688
  }
689
  #presetsPanel #selectorFieldset .pickAddElement {
690
- width: 99px;
691
- height: 36px;
692
- /*opacity:0.7;*/
693
- background-size: 100% 100%;
694
  }
695
  div.colorpicker {
696
  z-index: 150000;
697
  }
698
  #presetsPanel #selectorFieldset .pickElement.pickAddElement {
699
  background: url("../images/pick_add.png") repeat scroll 0 0 transparent;
700
- border: medium none;
701
- margin-bottom: 5px;
702
- text-indent: -10000px;
703
- border: medium none;
704
  font-size: 0;
705
- padding: 0;
706
  }
707
 
708
  button#fontfaceSettings {
709
  background: url("../images/font_settings.png") repeat scroll 0 0 transparent;
710
- border: medium none;
711
- float: left;
712
- font-size: 0;
713
- height: 27px;
714
- margin: 0 5px 0 0;
715
- padding: 0;
716
- text-indent: -10000px;
717
- width: 63px;
 
 
718
  }
719
  button#colorsizeSettings {
720
  background: url("../images/snc_settings.png") repeat scroll 0 0 transparent;
@@ -728,125 +740,163 @@ text-indent: -10000px;
728
  width: 63px;
729
  }
730
  button#add3dSettings {
731
- margin-right: 5px;
732
- float:left;
733
  height:16px;
734
  }
735
  a#upgradeToProButton {
736
- background: url("../images/pro_settings.png") repeat scroll 0 0 transparent;
737
- font-size: 0;
738
- width: 135px;
739
- height: 51px;
740
  margin: 0;
741
  padding: 0;
742
- text-indent: -10000px;
743
- margin-bottom: -20px;
744
- margin-right: 3px;
745
- margin-left: 3px;
746
- float: left;
 
 
 
 
 
 
 
 
747
  }
748
  #fontSaveSettings {
749
  background: url("../images/save.png") repeat scroll 0 0 transparent;
750
- border: medium none;
751
- font-size: 0;
752
- height: 40px;
753
- padding: 0;
754
- text-indent: -10000px;
755
- width: 96px;
756
- margin-bottom: -2px;
 
 
 
 
757
  }
758
  button#extrafieldsSettings {
759
- background: url("../images/pro.png") repeat scroll 0 0 transparent;
760
- text-indent: -10000px;
761
- width: 137px;
762
- height: 34px;
763
- padding: 0;
764
- border: none;
765
- margin: -3px 3px 0;
 
 
 
 
 
 
 
 
 
 
766
  }
767
  #effectsButton {
768
- background: url("../images/effects.png") repeat scroll 0 0 transparent;
769
- text-indent: -10000px;
770
- width: 113px;
771
- height: 34px;
772
- padding: 0;
773
- border: none;
774
- margin: -3px 5px 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
775
  }
776
  button#shadowSettings {
777
  background: lightgray;
778
- margin-top: 0;
779
- margin-right: 6px;
780
- float: left;
781
- text-shadow: 2px 2px 3px #000;
782
- font-weight: bold;
783
  }
784
 
785
  .XYSliderHolder {
786
- width: 10px;
787
- height:10px;
788
- position:absolute;
789
- top:20px;
790
- left:50%;
791
- padding:0;
792
- margin:0;
793
  }
794
  .XYSlider {
795
- position:absolute;
796
- width: 36px !important;
797
- height:32px;
798
-
799
- background: url("../images/3d-XYSlider.png") repeat scroll 0 0 transparent;
800
- text-indent: -10000px;
801
-
802
- border: none;
803
-
804
- font-size:12px !important;
805
- letter-spacing: normal !important;
806
- color: black;
807
- font-family:Arial, Helvetica, sans-serif !important;
808
- padding:0 !important;
809
- margin:0 !important;
810
- text-shadow:none !important;
811
- text-align:center;
812
- font-weight:normal !important;
813
- line-height:2em !important;
814
  }
815
  .extrudeHandleHolder {
816
- width: 10px;
817
- height:10px;
818
- position:absolute;
819
- top:20px;
820
- left:50%;
821
- padding:0;
822
- margin:0;
823
  }
824
  .extrudeHandle {
825
- position:absolute;
826
- width: 55px !important;
827
- height:25px;
828
- background:rgba(255, 255, 0, 0.8);
829
- border:1px solid rgba(0, 0, 0, 0.8);
830
- border-radius: 10px;
831
- font-size:12px !important;
832
-
833
- letter-spacing: normal !important;
834
- color: black;
835
- font-family:Arial, Helvetica, sans-serif !important;
836
- padding:2px !important;
837
- text-shadow:none !important;
838
- text-align:center;
839
- font-weight:normal !important;
840
- line-height:2em !important;
841
  }
842
  .cancelSelecting {
843
- background: none repeat scroll 0 0 red;
844
- border-radius: 0 0 20px 0;
845
- color: #FFFFFF;
846
- font-size: 16px;
847
- left: 0;
848
- padding: 17px 15px 9px 8px;
849
- position: fixed;
850
- top: 20px;
851
- z-index: 10000;
 
 
 
852
  }
1
  .draggableModal * {
2
  -moz-box-sizing: content-box !important;
3
+ box-sizing: content-box !important;
4
  border: medium none;
5
  color: #333333;
6
+ font-family: Arial,Helvetica,sans-serif;
7
  font-size: 14px;
8
  letter-spacing: 0;
9
  line-height: 1em;
18
  .draggableModal select
19
  {
20
  -moz-box-sizing: content-box !important;
21
+ box-sizing: content-box !important;
22
  height: auto;
23
  width: auto;
24
+ background:#fff;
25
+ margin:0;
26
+ padding:0;
27
  }
28
  .draggableModal a {
29
+ background: transparent;
30
  }
31
  .draggableModal h2 {
32
  margin-bottom: 1em;
44
  font-weight: regular;
45
  margin-bottom: 0.4em;
46
  }
47
+ .draggableModal fieldset select {
48
+ margin-left: 10px;
49
+ padding: 3px;
50
+ border: 1px solid #999;
51
+ }
52
  .draggableModal fieldset .resetField {
53
  color: orange;
54
  font-size: 9px;
60
  margin-right: 10px;
61
  padding: 3px;
62
  width: 50px;
63
+ display:inline-block;
64
  }
65
  #text-shadowFieldset .ui-slider {
66
  float: left;
77
  }
78
  .draggableModal fieldset.slider-extended input[type="text"] {
79
  width: 25px;
80
+ padding-left: 5px;
81
  }
82
  .draggableModal fieldset.slider-extended .ui-slider-horizontal.ui-slider {
83
  display: block;
85
  position: relative;
86
  top: 3px;
87
  width: 247px;
88
+ height: 1px;
89
+ /*background: #666666;*/
90
+ background: #ccc;
91
+ border: none;
92
  }
93
  .draggableModal fieldset.slider-extended .ui-slider-vertical.ui-slider {
94
+ width: 1px;
95
+ background: #ccc;
96
+ border: none;
97
+ left: 3px;
98
  }
99
  .draggableModal fieldset.slider-extended .ui-slider-range {
100
+ background: #666;
101
+ /*background: #fff;*/
102
  }
103
 
104
  .draggableModal fieldset .ui-slider-horizontal .ui-slider-handle {
105
  width: 8px;
106
+ height: 14px;
107
+ border: none;
108
+ background: #000;
109
+ margin-top: -2px;
110
  }
111
  .draggableModal fieldset .ui-slider-vertical .ui-slider-handle {
112
+ height: 8px;
113
+ width: 14px;
114
+ border: none;
115
+ background: #000;
116
+ margin-left: -2px;
117
  }
118
  .draggableModal fieldset.slider-extended .ui-slider-vertical.ui-slider {
119
  }
120
 
121
  /*
122
  *
123
+ * Appearance panel
124
  *
125
  */
126
  #appearancePanel {
127
+ background: #2b2b2b;
128
+ border:none;
129
+ border-radius:0;
130
+ height: 40px;
131
+ padding: 0;
132
  }
133
  #appearancePanel fieldset {
134
  }
152
  }
153
 
154
  #appearanceStandardFields fieldset {
155
+ margin-top: 2px;
156
  }
157
  #font-sizeFieldset label {
158
+ width: 130px;
159
+ display: inline-block;
160
  }
161
  #font-sizeFieldset .ui-slider {
162
+ width: 115px;
163
+ display: inline-block;
164
  }
165
  #appearancePanel fieldset.slider-extended .ui-slider-horizontal.ui-slider {
166
  background: #999;
167
  }
168
  #appearancePanel fieldset.slider-extended .ui-slider-range {
169
+ background: #ddd;
170
  }
171
 
172
  #appearancePanel fieldset .ui-slider-horizontal .ui-slider-handle {
173
+ background: #fff;
174
  }
175
 
176
 
181
  *
182
  */
183
  #effectsPanel {
184
+
185
  }
186
  #effectsPanel fieldset .ui-slider-horizontal .ui-slider-handle {
187
  }
188
  #effectsPanel fieldset.slider-extended .ui-slider-horizontal.ui-slider {
189
+ width: 169px;
190
  }
191
  #effectsPanel fieldset.slider-extended .ui-slider-range {
192
  }
193
  #effectsPanel > select {
194
+ font-size: 12px;
195
+ margin-left: 4px;
196
+ margin-right: 3px;
197
+ margin-top: 3px;
198
+ margin-bottom: 3px;
199
+ background: #f5f3f3;
200
+ padding-top: 3px;
201
+ padding-bottom: 3px;
202
+ width: 181px;
203
  }
204
  #effectsPanel div.label {
205
+
206
+ }
207
+ #effectsPanel div.label > a {
208
+ font-size: 12px;
209
+ }
210
+ #effectsPanel div.label a.effectName {
211
+ width: 140px;
212
+ display: inline-block;
213
+ cursor: n-resize;
214
+ }
215
+ #effectsPanel div.label a.removeEffect {
216
+ font-size: 14px;
217
+ }
218
+ #effectsPanel a.effectArrow {
219
+ background: url("../images/arrow.png") no-repeat scroll left center transparent;
220
+ padding-left: 12px;
221
+ display: inline-block;
222
+ width: 12px;
223
+ height: 12px;
224
+ padding: 0;
225
+ margin: 0;
226
+ }
227
  #effectsPanel input[name=enabled] {
228
+ margin-right: 3px;
229
  }
230
  #effectsPanel .effectsList {
231
+ margin-bottom: 5px;
232
+ }
233
+ #effectsPanel .effectsList > div {
234
+ padding-left: 5px;
235
+ padding-right: 5px;
236
+ padding-top: 5px;
237
+ }
238
+ #effectsPanel .effectsList fieldset {
239
+ float: none;
240
+ }
241
 
242
 
243
 
246
  }
247
  .draggableModal {
248
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
249
+ border:1px solid #999;
250
  border-radius: 4px;
251
  box-shadow: 0 0 7px rgba(0,0,0,0.1);
252
  margin: 0;
254
  position: fixed;
255
  }
256
  .draggableModal input[type="button"], .draggableModal button, .draggableModal input[type="submit"] {
257
+ border: none;
258
+ border-radius: 0;
259
  cursor: pointer;
260
  padding: 5px;
261
  }
263
  border: none;
264
  font-size: 12px;
265
  padding: 3px 5px;
266
+ border-radius: 2px;
267
+ height: 20px;
268
  }
269
  h1.draggableModalBar {
270
+ color: #212121;
271
+ cursor: move;
272
+ font-size: 12px;
273
+ font-weight: normal;
274
+ line-height: 1.35em;
275
+ margin: 0;
276
+ padding: 3px 0;
277
+ text-indent: 7px;
278
+ width: 100%;
279
+ text-align: left;
280
  }
281
  h1.draggableModalBar #font_ver {
282
  background: url("../images/font_ver.png") repeat scroll 0 0 transparent;
300
  .draggableModalBar .closeModal {
301
  color: #000;
302
  font-size: 12px;
303
+ font-weight: bold;
304
  height: 13px;
305
  padding: 2px;
306
  text-align: center;
307
  text-decoration: none;
308
  width: 15px;
309
+ margin: 0;
310
  }
311
  .draggableModalBar a {
312
  float: right;
321
  }
322
  .fontLoading {
323
  background: url("../loadinfo.net.gif") no-repeat scroll center center #fff;
324
+ border-radius: 10px;
325
  height: 48px;
326
  width: 48px;
327
+ position: fixed;
328
+ top:50px;
329
+ left: 30px;
330
+ padding:20px;
331
  }
332
  #media-buttons a#FFW_chooseFontButton {
333
  height: 13px;
341
  color: #464646;
342
  height: 80%;
343
  right: 0;
344
+ top: 38px;
345
  width: 300px;
346
  z-index: 10000;
347
+ position:fixed;
348
+ background:#fff;
349
+ display:none;
350
  }
351
  #fontplugin ul {
352
  margin: 0;
481
  }
482
  #fontplugin li.categoriesList ul li {
483
  margin: 0;
484
+ list-style-type:none;
485
  }
486
  #fontplugin li.categoriesList a {
487
  background: none repeat scroll 0 0 #FFFFFF;
524
  border-bottom: 1px solid #EEEEEE;
525
  font-size: 14px;
526
  margin: 0;
527
+ list-style-type:none;
528
  }
529
  #fontplugin li#fontList ul li:hover {
530
  position: relative;
575
  }
576
 
577
  #presetsPanel {
578
+ z-index: 10000;
579
+ background: rgba(255,255,255,0.88);
580
  }
581
  #presetsPanel #presetsDropdownFieldset {
582
  display: block;
583
+ float: left;
584
+ width: 105px;
585
+ height: auto;
586
+ padding: 0;
587
+ margin-bottom: 0;
588
+ position: relative;
589
  }
590
  #presetsPanel #presetsDropdownFieldset:hover {
591
  }
592
  #presetsDropdownFieldset:hover button#deletePreset, #presetsDropdownFieldset:hover button#renamePreset {
593
+ display: block !important;
594
  }
595
 
596
 
597
 
598
  #presetsPanel #selectorFieldset {
599
+ margin-top: 0;
600
+ padding: 0;
601
+ float: left;
602
+ margin-left:3px;
603
  }
604
  #actionsFieldset {
605
+ float: right;
606
+ text-align: right;
607
+ padding: 0;
608
+ position: relative;
609
+ top: inherit;
610
+ right: 3px;
611
+ width: 230px;
612
+ }
613
+ #actionsFieldset .closeModal {
614
+ float: right;
615
+ padding: 3px 5px;
616
+ font-weight: bold;
617
+ border: none;
618
+ border-radius: 2px;
619
+ margin-left: 10px;
620
+ color: #fff;
621
+ text-decoration: none;
622
+ margin-top: 2px;
623
+ font-size: 27px;
624
+ margin-right: 5px;
625
+ }
626
  #presetsPanel #presetsDropdownFieldset label, #presetsPanel #selectorFieldset label {
627
  font-size: 12px;
628
+ font-weight: regular;
629
+ width: 105px;
630
+ padding-left:3px;
631
+ text-indent: 3px;
632
+ line-height: 1.5em;
633
  }
634
  #presetsPanel #presetsDropdownFieldset select {
635
  border: 1px solid #f5f3f3;
636
+ background: #f5f3f3;
637
+ color: #212121;
638
+ font-size: 11px;
639
+ font-weight: normal;
640
+ height: 19px;
641
+ padding: 0;
642
+ width: 91px;
643
+ float: none;
644
+ margin-top: 3px;
645
+ margin-left: 0;
646
+ display: block;
647
  }
648
 
649
  #presetsPanel #presetsDropdownFieldset button {
650
+ border: none;
651
+ height: 15px;
652
+ margin: 0;
653
+ font-size: 11px;
654
+ padding: 0;
655
+ background-size: 100% 100% !important;
656
  }
657
  #presetsPanel #presetsDropdownFieldset button#deletePreset {
658
  position: absolute;
659
+ left: 98%;
660
+ top: 9px;
661
+ display: none;
662
+ background: none;
663
+ color: #f10c0c;
664
+ font-weight: bold;
665
  }
666
  #presetsPanel #presetsDropdownFieldset button#renamePreset {
667
  float: none;
668
+ position: absolute;
669
+ left: 98%; /* can't be over 100 because hover will disappear'*/
670
+ top: 22px;
671
+ display: none;
672
+ background: none;
673
+ color: #212121;
674
  }
675
  #presetsPanel #selectorFieldset input[name="selector"] {
676
  border: 1px solid #999999;
689
  font-size: 0;
690
 
691
  margin-left: 3px;
692
+ margin-bottom: 5px;
693
+ margin-top: 3px;
694
  padding: 0;
695
  text-indent: -10000px;
696
  width: 99px;
697
+ height: 36px;
698
  }
699
  #presetsPanel #selectorFieldset .pickAddElement {
700
+ width: 99px;
701
+ height: 36px;
702
+ /*opacity:0.7;*/
703
+ background-size: 100% 100%;
704
  }
705
  div.colorpicker {
706
  z-index: 150000;
707
  }
708
  #presetsPanel #selectorFieldset .pickElement.pickAddElement {
709
  background: url("../images/pick_add.png") repeat scroll 0 0 transparent;
710
+ border: medium none;
711
+ margin-bottom: 5px;
712
+ text-indent: -10000px;
713
+ border: medium none;
714
  font-size: 0;
715
+ padding: 0;
716
  }
717
 
718
  button#fontfaceSettings {
719
  background: url("../images/font_settings.png") repeat scroll 0 0 transparent;
720
+ background-size: 140% auto;
721
+ background-position: center left;
722
+ border: medium none;
723
+ float: left;
724
+ font-size: 0;
725
+ height: 38px;
726
+ margin: 0 5px 0 0;
727
+ padding: 0;
728
+ text-indent: -10000px;
729
+ width: 220px;
730
  }
731
  button#colorsizeSettings {
732
  background: url("../images/snc_settings.png") repeat scroll 0 0 transparent;
740
  width: 63px;
741
  }
742
  button#add3dSettings {
743
+ margin-right: 5px;
744
+ float:left;
745
  height:16px;
746
  }
747
  a#upgradeToProButton {
748
+ background: #4088e1;
749
+ color: #ffffff;
750
+ width: 135px;
751
+ height: 40PX;
752
  margin: 0;
753
  padding: 0;
754
+ text-indent: inherit;
755
+ margin-right: auto;
756
+ margin-left: 3px;
757
+ float: left;
758
+ font-size: 18px;
759
+ text-align: center;
760
+ vertical-align: middle;
761
+ display: inline-block;
762
+ line-height: 40px;
763
+ }
764
+ a#upgradeToProButton:hover {
765
+ transition: all 100ms ease-in;
766
+ background: #64a8fb;
767
  }
768
  #fontSaveSettings {
769
  background: url("../images/save.png") repeat scroll 0 0 transparent;
770
+ border: medium none;
771
+ font-size: 0;
772
+ height: 40px;
773
+ padding: 0;
774
+ text-indent: -10000px;
775
+
776
+ margin: 0;
777
+ width: 96px;
778
+
779
+ margin-bottom: -2px;
780
+ padding: 0;
781
  }
782
  button#extrafieldsSettings {
783
+ background: #4088e1;
784
+ color: #ffffff;
785
+ width: 135px;
786
+ height: 40PX;
787
+ margin: 0;
788
+ padding: 0;
789
+ margin-left: 3px;
790
+ float: left;
791
+ font-size: 18px;
792
+ text-align: center;
793
+ vertical-align: middle;
794
+ display: inline-block;
795
+ line-height: 40px;
796
+ }
797
+ button#extrafieldsSettings:hover {
798
+ transition: all 100ms ease-in;
799
+ background: #64a8fb;
800
  }
801
  #effectsButton {
802
+ background: #ee4f84;
803
+ color: #ffffff;
804
+ width: 135px;
805
+ height: 40PX;
806
+ margin: 0;
807
+ padding: 0;
808
+ margin-left: 3px;
809
+ float: left;
810
+ font-size: 18px;
811
+ text-align: center;
812
+ vertical-align: middle;
813
+ display: inline-block;
814
+ line-height: 40px;
815
+ text-shadow: rgb(205, 142, 222) 1px 1px 10px, rgb(205, 142, 222) -1px 1px 10px, rgb(205, 142, 222) 1px -1px 10px, rgb(205, 142, 222) -1px -1px 10px, rgb(159, 113, 171) -1.13px -0.41px 0.3px !important;
816
+ /* Standard */
817
+ transition: all 100ms;
818
+ }
819
+ #effectsButton:hover {
820
+ background: #ff7ca7;
821
+ text-shadow: rgb(255, 255, 255) 1px 1px 10px, rgb(255, 255, 255) -1px 1px 10px, rgb(255, 255, 255) 1px -1px 10px, rgb(255, 255, 255) -1px -1px 10px, rgb(255, 255, 255) -1.13px -0.41px 0.3px !important;
822
  }
823
  button#shadowSettings {
824
  background: lightgray;
825
+ margin-top: 0;
826
+ margin-right: 6px;
827
+ float: left;
828
+ text-shadow: 2px 2px 3px #000;
829
+ font-weight: bold;
830
  }
831
 
832
  .XYSliderHolder {
833
+ width: 10px;
834
+ height:10px;
835
+ position:absolute;
836
+ top:20px;
837
+ left:50%;
838
+ padding:0;
839
+ margin:0;
840
  }
841
  .XYSlider {
842
+ position:absolute;
843
+ width: 36px !important;
844
+ height:32px;
845
+
846
+ background: url("../images/3d-XYSlider.png") repeat scroll 0 0 transparent;
847
+ text-indent: -10000px;
848
+
849
+ border: none;
850
+
851
+ font-size:12px !important;
852
+ letter-spacing: normal !important;
853
+ color: black;
854
+ font-family:Arial, Helvetica, sans-serif !important;
855
+ padding:0 !important;
856
+ margin:0 !important;
857
+ text-shadow:none !important;
858
+ text-align:center;
859
+ font-weight:normal !important;
860
+ line-height:2em !important;
861
  }
862
  .extrudeHandleHolder {
863
+ width: 10px;
864
+ height:10px;
865
+ position:absolute;
866
+ top:20px;
867
+ left:50%;
868
+ padding:0;
869
+ margin:0;
870
  }
871
  .extrudeHandle {
872
+ position:absolute;
873
+ width: 55px !important;
874
+ height:25px;
875
+ background:rgba(255, 255, 0, 0.8);
876
+ border:1px solid rgba(0, 0, 0, 0.8);
877
+ border-radius: 10px;
878
+ font-size:12px !important;
879
+
880
+ letter-spacing: normal !important;
881
+ color: black;
882
+ font-family:Arial, Helvetica, sans-serif !important;
883
+ padding:2px !important;
884
+ text-shadow:none !important;
885
+ text-align:center;
886
+ font-weight:normal !important;
887
+ line-height:2em !important;
888
  }
889
  .cancelSelecting {
890
+ background: none repeat scroll 0 0 red;
891
+ border-radius: 0 0 20px 0;
892
+ color: #FFFFFF;
893
+ font-size: 16px;
894
+ left: 0;
895
+ padding: 17px 15px 9px 8px;
896
+ position: fixed;
897
+ top: 20px;
898
+ z-index: 10000;
899
+ }
900
+ .yesno {
901
+ margin-top: 8px;
902
  }
images/add.png DELETED
Binary file
images/delete.png DELETED
Binary file
images/edit.png DELETED
Binary file
images/effects.png DELETED
Binary file
images/font_settings.png CHANGED
Binary file
images/font_ver.png DELETED
Binary file
images/pro.png DELETED
Binary file
images/pro_settings.png DELETED
Binary file
images/save.png CHANGED
Binary file
images/snc_settings.png DELETED
Binary file
js/colorpicker.js CHANGED
@@ -1,487 +1 @@
1
- /**
2
- *
3
- * Color picker
4
- * Author: Stefan Petre www.eyecon.ro
5
- *
6
- * Dual licensed under the MIT and GPL licenses
7
- *
8
- */
9
- if(typeof fQuery === 'undefined') {
10
- fQuery = jQuery;
11
- }
12
- (function ($) {
13
- var ColorPicker = function () {
14
- var
15
- ids = {},
16
- inAction,
17
- charMin = 65,
18
- visible,
19
- tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
20
- defaults = {
21
- eventName: 'click',
22
- onShow: function () {},
23
- onBeforeShow: function(){},
24
- onHide: function () {},
25
- onChange: function () {},
26
- onSubmit: function () {},
27
- color: 'ff0000',
28
- livePreview: true,
29
- flat: false
30
- },
31
- fillRGBFields = function (hsb, cal) {
32
- var rgb = HSBToRGB(hsb);
33
- $(cal).data('colorpicker').fields
34
- .eq(1).val(rgb.r).end()
35
- .eq(2).val(rgb.g).end()
36
- .eq(3).val(rgb.b).end();
37
- },
38
- fillHSBFields = function (hsb, cal) {
39
- $(cal).data('colorpicker').fields
40
- .eq(4).val(hsb.h).end()
41
- .eq(5).val(hsb.s).end()
42
- .eq(6).val(hsb.b).end();
43
- },
44
- fillHexFields = function (hsb, cal) {
45
- $(cal).data('colorpicker').fields
46
- .eq(0).val(HSBToHex(hsb)).end();
47
- },
48
- setSelector = function (hsb, cal) {
49
- $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
50
- $(cal).data('colorpicker').selectorIndic.css({
51
- left: parseInt(150 * hsb.s/100, 10),
52
- top: parseInt(150 * (100-hsb.b)/100, 10)
53
- });
54
- },
55
- setHue = function (hsb, cal) {
56
- $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
57
- },
58
- setCurrentColor = function (hsb, cal) {
59
- $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
60
- },
61
- setNewColor = function (hsb, cal) {
62
- $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
63
- },
64
- keyDown = function (ev) {
65
- var pressedKey = ev.charCode || ev.keyCode || -1;
66
- if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
67
- return false;
68
- }
69
- var cal = $(this).parent().parent();
70
- if (cal.data('colorpicker').livePreview === true) {
71
- change.apply(this);
72
- }
73
- },
74
- change = function (ev) {
75
- var cal = $(this).parent().parent(), col;
76
- if (this.parentNode.className.indexOf('_hex') > 0) {
77
- cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
78
- } else if (this.parentNode.className.indexOf('_hsb') > 0) {
79
- cal.data('colorpicker').color = col = fixHSB({
80
- h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
81
- s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
82
- b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
83
- });
84
- } else {
85
- cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
86
- r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
87
- g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
88
- b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
89
- }));
90
- }
91
- if (ev) {
92
- fillRGBFields(col, cal.get(0));
93
- fillHexFields(col, cal.get(0));
94
- fillHSBFields(col, cal.get(0));
95
- }
96
- setSelector(col, cal.get(0));
97
- setHue(col, cal.get(0));
98
- setNewColor(col, cal.get(0));
99
- cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
100
- },
101
- blur = function (ev) {
102
- var cal = $(this).parent().parent();
103
- cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
104
- },
105
- focus = function () {
106
- charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
107
- $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
108
- $(this).parent().addClass('colorpicker_focus');
109
- },
110
- downIncrement = function (ev) {
111
- var field = $(this).parent().find('input').focus();
112
- var current = {
113
- el: $(this).parent().addClass('colorpicker_slider'),
114
- max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
115
- y: ev.pageY,
116
- field: field,
117
- val: parseInt(field.val(), 10),
118
- preview: $(this).parent().parent().data('colorpicker').livePreview
119
- };
120
- $(document).bind('mouseup', current, upIncrement);
121
- $(document).bind('mousemove', current, moveIncrement);
122
- },
123
- moveIncrement = function (ev) {
124
- ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
125
- if (ev.data.preview) {
126
- change.apply(ev.data.field.get(0), [true]);
127
- }
128
- return false;
129
- },
130
- upIncrement = function (ev) {
131
- change.apply(ev.data.field.get(0), [true]);
132
- ev.data.el.removeClass('colorpicker_slider').find('input').focus();
133
- $(document).unbind('mouseup', upIncrement);
134
- $(document).unbind('mousemove', moveIncrement);
135
- return false;
136
- },
137
- downHue = function (ev) {
138
- var current = {
139
- cal: $(this).parent(),
140
- y: $(this).offset().top
141
- };
142
- current.preview = current.cal.data('colorpicker').livePreview;
143
- $(document).bind('mouseup', current, upHue);
144
- $(document).bind('mousemove', current, moveHue);
145
- },
146
- moveHue = function (ev) {
147
- change.apply(
148
- ev.data.cal.data('colorpicker')
149
- .fields
150
- .eq(4)
151
- .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
152
- .get(0),
153
- [ev.data.preview]
154
- );
155
- return false;
156
- },
157
- upHue = function (ev) {
158
- fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
159
- fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
160
- $(document).unbind('mouseup', upHue);
161
- $(document).unbind('mousemove', moveHue);
162
- return false;
163
- },
164
- downSelector = function (ev) {
165
- var current = {
166
- cal: $(this).parent(),
167
- pos: $(this).offset()
168
- };
169
- current.preview = current.cal.data('colorpicker').livePreview;
170
- $(document).bind('mouseup', current, upSelector);
171
- $(document).bind('mousemove', current, moveSelector);
172
- },
173
- moveSelector = function (ev) {
174
- change.apply(
175
- ev.data.cal.data('colorpicker')
176
- .fields
177
- .eq(6)
178
- .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
179
- .end()
180
- .eq(5)
181
- .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
182
- .get(0),
183
- [ev.data.preview]
184
- );
185
- return false;
186
- },
187
- upSelector = function (ev) {
188
- fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
189
- fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
190
- $(document).unbind('mouseup', upSelector);
191
- $(document).unbind('mousemove', moveSelector);
192
- return false;
193
- },
194
- enterSubmit = function (ev) {
195
- $(this).addClass('colorpicker_focus');
196
- },
197
- leaveSubmit = function (ev) {
198
- $(this).removeClass('colorpicker_focus');
199
- },
200
- clickSubmit = function (ev) {
201
- var cal = $(this).parent();
202
- var col = cal.data('colorpicker').color;
203
- cal.data('colorpicker').origColor = col;
204
- setCurrentColor(col, cal.get(0));
205
- cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
206
- },
207
- show = function (ev) {
208
- var cal = $('#' + $(this).data('colorpickerId'));
209
- cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
210
- var pos = $(this).offset();
211
- var viewPort = getViewport();
212
- var top = pos.top + this.offsetHeight;
213
- var left = pos.left;
214
- if (top + 176 > viewPort.t + viewPort.h) {
215
- top -= this.offsetHeight + 176;
216
- }
217
- if (left + 356 > viewPort.l + viewPort.w) {
218
- left -= 356;
219
- }
220
- cal.css({left: left + 'px', top: top + 'px'});
221
- if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
222
- cal.show();
223
- }
224
- $(document).bind('mousedown', {cal: cal}, hide);
225
- return false;
226
- },
227
- hide = function (ev) {
228
- if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
229
- if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
230
- ev.data.cal.hide();
231
- }
232
- $(document).unbind('mousedown', hide);
233
- }
234
- },
235
- isChildOf = function(parentEl, el, container) {
236
- if (parentEl == el) {
237
- return true;
238
- }
239
- if (parentEl.contains) {
240
- return parentEl.contains(el);
241
- }
242
- if ( parentEl.compareDocumentPosition ) {
243
- return !!(parentEl.compareDocumentPosition(el) & 16);
244
- }
245
- var prEl = el.parentNode;
246
- while(prEl && prEl != container) {
247
- if (prEl == parentEl)
248
- return true;
249
- prEl = prEl.parentNode;
250
- }
251
- return false;
252
- },
253
- getViewport = function () {
254
- var m = document.compatMode == 'CSS1Compat';
255
- return {
256
- l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
257
- t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
258
- w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
259
- h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
260
- };
261
- },
262
- fixHSB = function (hsb) {
263
- return {
264
- h: Math.min(360, Math.max(0, hsb.h)),
265
- s: Math.min(100, Math.max(0, hsb.s)),
266
- b: Math.min(100, Math.max(0, hsb.b))
267
- };
268
- },
269
- fixRGB = function (rgb) {
270
- return {
271
- r: Math.min(255, Math.max(0, rgb.r)),
272
- g: Math.min(255, Math.max(0, rgb.g)),
273
- b: Math.min(255, Math.max(0, rgb.b))
274
- };
275
- },
276
- fixHex = function (hex) {
277
- var len = 6 - hex.length;
278
- if (len > 0) {
279
- var o = [];
280
- for (var i=0; i<len; i++) {
281
- o.push('0');
282
- }
283
- o.push(hex);
284
- hex = o.join('');
285
- }
286
- return hex;
287
- },
288
- HexToRGB = function (hex) {
289
- var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
290
- return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
291
- },
292
- HexToHSB = function (hex) {
293
- return RGBToHSB(HexToRGB(hex));
294
- },
295
- RGBToHSB = function (rgb) {
296
- var hsb = {
297
- h: 0,
298
- s: 0,
299
- b: 0
300
- };
301
- var min = Math.min(rgb.r, rgb.g, rgb.b);
302
- var max = Math.max(rgb.r, rgb.g, rgb.b);
303
- var delta = max - min;
304
- hsb.b = max;
305
- if (max != 0) {
306
-
307
- }
308
- hsb.s = max != 0 ? 255 * delta / max : 0;
309
- if (hsb.s != 0) {
310
- if (rgb.r == max) {
311
- hsb.h = (rgb.g - rgb.b) / delta;
312
- } else if (rgb.g == max) {
313
- hsb.h = 2 + (rgb.b - rgb.r) / delta;
314
- } else {
315
- hsb.h = 4 + (rgb.r - rgb.g) / delta;
316
- }
317
- } else {
318
- hsb.h = -1;
319
- }
320
- hsb.h *= 60;
321
- if (hsb.h < 0) {
322
- hsb.h += 360;
323
- }
324
- hsb.s *= 100/255;
325
- hsb.b *= 100/255;
326
- return hsb;
327
- },
328
- HSBToRGB = function (hsb) {
329
- var rgb = {};
330
- var h = Math.round(hsb.h);
331
- var s = Math.round(hsb.s*255/100);
332
- var v = Math.round(hsb.b*255/100);
333
- if(s == 0) {
334
- rgb.r = rgb.g = rgb.b = v;
335
- } else {
336
- var t1 = v;
337
- var t2 = (255-s)*v/255;
338
- var t3 = (t1-t2)*(h%60)/60;
339
- if(h==360) h = 0;
340
- if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
341
- else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
342
- else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
343
- else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
344
- else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
345
- else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
346
- else {rgb.r=0; rgb.g=0; rgb.b=0}
347
- }
348
- return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
349
- },
350
- RGBToHex = function (rgb) {
351
- var hex = [
352
- rgb.r.toString(16),
353
- rgb.g.toString(16),
354
- rgb.b.toString(16)
355
- ];
356
- $.each(hex, function (nr, val) {
357
- if (val.length == 1) {
358
- hex[nr] = '0' + val;
359
- }
360
- });
361
- return hex.join('');
362
- },
363
- HSBToHex = function (hsb) {
364
- return RGBToHex(HSBToRGB(hsb));
365
- },
366
- restoreOriginal = function () {
367
- var cal = $(this).parent();
368
- var col = cal.data('colorpicker').origColor;
369
- cal.data('colorpicker').color = col;
370
- fillRGBFields(col, cal.get(0));
371
- fillHexFields(col, cal.get(0));
372
- fillHSBFields(col, cal.get(0));
373
- setSelector(col, cal.get(0));
374
- setHue(col, cal.get(0));
375
- setNewColor(col, cal.get(0));
376
- };
377
- return {
378
- init: function (opt) {
379
- opt = $.extend({}, defaults, opt||{});
380
- if (typeof opt.color == 'string') {
381
- opt.color = HexToHSB(opt.color);
382
- } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
383
- opt.color = RGBToHSB(opt.color);
384
- } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
385
- opt.color = fixHSB(opt.color);
386
- } else {
387
- return this;
388
- }
389
- return this.each(function () {
390
- if (!$(this).data('colorpickerId')) {
391
- var options = $.extend({}, opt);
392
- options.origColor = opt.color;
393
- var id = 'collorpicker_' + parseInt(Math.random() * 1000);
394
- $(this).data('colorpickerId', id);
395
- var cal = $(tpl).attr('id', id);
396
- if (options.flat) {
397
- cal.appendTo(this).show();
398
- } else {
399
- cal.appendTo(document.body);
400
- }
401
- options.fields = cal
402
- .find('input')
403
- .bind('keyup', keyDown)
404
- .bind('change', change)
405
- .bind('blur', blur)
406
- .bind('focus', focus);
407
- cal
408
- .find('span').bind('mousedown', downIncrement).end()
409
- .find('>div.colorpicker_current_color').bind('click', restoreOriginal);
410
- options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
411
- options.selectorIndic = options.selector.find('div div');
412
- options.el = this;
413
- options.hue = cal.find('div.colorpicker_hue div');
414
- cal.find('div.colorpicker_hue').bind('mousedown', downHue);
415
- options.newColor = cal.find('div.colorpicker_new_color');
416
- options.currentColor = cal.find('div.colorpicker_current_color');
417
- cal.data('colorpicker', options);
418
- cal.find('div.colorpicker_submit')
419
- .bind('mouseenter', enterSubmit)
420
- .bind('mouseleave', leaveSubmit)
421
- .bind('click', clickSubmit);
422
- fillRGBFields(options.color, cal.get(0));
423
- fillHSBFields(options.color, cal.get(0));
424
- fillHexFields(options.color, cal.get(0));
425
- setHue(options.color, cal.get(0));
426
- setSelector(options.color, cal.get(0));
427
- setCurrentColor(options.color, cal.get(0));
428
- setNewColor(options.color, cal.get(0));
429
- if (options.flat) {
430
- cal.css({
431
- position: 'relative',
432
- display: 'block'
433
- });
434
- } else {
435
- $(this).bind(options.eventName, show);
436
- }
437
- }
438
- });
439
- },
440
- showPicker: function() {
441
- return this.each( function () {
442
- if ($(this).data('colorpickerId')) {
443
- show.apply(this);
444
- }
445
- });
446
- },
447
- hidePicker: function() {
448
- return this.each( function () {
449
- if ($(this).data('colorpickerId')) {
450
- $('#' + $(this).data('colorpickerId')).hide();
451
- }
452
- });
453
- },
454
- setColor: function(col) {
455
- if (typeof col == 'string') {
456
- col = HexToHSB(col);
457
- } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
458
- col = RGBToHSB(col);
459
- } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
460
- col = fixHSB(col);
461
- } else {
462
- return this;
463
- }
464
- return this.each(function(){
465
- if ($(this).data('colorpickerId')) {
466
- var cal = $('#' + $(this).data('colorpickerId'));
467
- cal.data('colorpicker').color = col;
468
- cal.data('colorpicker').origColor = col;
469
- fillRGBFields(col, cal.get(0));
470
- fillHSBFields(col, cal.get(0));
471
- fillHexFields(col, cal.get(0));
472
- setHue(col, cal.get(0));
473
- setSelector(col, cal.get(0));
474
- setCurrentColor(col, cal.get(0));
475
- setNewColor(col, cal.get(0));
476
- }
477
- });
478
- }
479
- };
480
- }();
481
- $.fn.extend({
482
- ColorPicker: ColorPicker.init,
483
- ColorPickerHide: ColorPicker.hidePicker,
484
- ColorPickerShow: ColorPicker.showPicker,
485
- ColorPickerSetColor: ColorPicker.setColor
486
- });
487
- })(fQuery)
488
  *
489
  * Color picker
490
  * Author: Stefan Petre www.eyecon.ro
491
  *
492
  * Dual licensed under the MIT and GPL licenses
493
  *
494
  */
495
  if(typeof fQuery === 'undefined') {
496
  fQuery = jQuery;
497
  }
498
  (function ($) {
499
  var ColorPicker = function () {
500
  var
501
  ids = {},
502
  inAction,
503
  charMin = 65,
504
  visible,
505
  tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
506
  defaults = {
507
  eventName: 'click',
508
  onShow: function () {},
509
  onBeforeShow: function(){},
510
  onHide: function () {},
511
  onChange: function () {},
512
  onSubmit: function () {},
513
  color: 'ff0000',
514
  livePreview: true,
515
  flat: false
516
  },
517
  fillRGBFields = function (hsb, cal) {
518
  var rgb = HSBToRGB(hsb);
519
  $(cal).data('colorpicker').fields
520
  .eq(1).val(rgb.r).end()
521
  .eq(2).val(rgb.g).end()
522
  .eq(3).val(rgb.b).end();
523
  },
524
  fillHSBFields = function (hsb, cal) {
525
  $(cal).data('colorpicker').fields
526
  .eq(4).val(hsb.h).end()
527
  .eq(5).val(hsb.s).end()
528
  .eq(6).val(hsb.b).end();
529
  },
530
  fillHexFields = function (hsb, cal) {
531
  $(cal).data('colorpicker').fields
532
  .eq(0).val(HSBToHex(hsb)).end();
533
  },
534
  setSelector = function (hsb, cal) {
535
  $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
536
  $(cal).data('colorpicker').selectorIndic.css({
537
  left: parseInt(150 * hsb.s/100, 10),
538
  top: parseInt(150 * (100-hsb.b)/100, 10)
539
  });
540
  },
541
  setHue = function (hsb, cal) {
542
  $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
543
  },
544
  setCurrentColor = function (hsb, cal) {
545
  $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
546
  },
547
  setNewColor = function (hsb, cal) {
548
  $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
549
  },
550
  keyDown = function (ev) {
551
  var pressedKey = ev.charCode || ev.keyCode || -1;
552
  if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
553
  return false;
554
  }
555
  var cal = $(this).parent().parent();
556
  if (cal.data('colorpicker').livePreview === true) {
557
  change.apply(this);
558
  }
559
  },
560
  change = function (ev) {
561
  var cal = $(this).parent().parent(), col;
562
  if (this.parentNode.className.indexOf('_hex') > 0) {
563
  cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
564
  } else if (this.parentNode.className.indexOf('_hsb') > 0) {
565
  cal.data('colorpicker').color = col = fixHSB({
566
  h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
567
  s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
568
  b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
569
  });
570
  } else {
571
  cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
572
  r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
573
  g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
574
  b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
575
  }));
576
  }
577
  if (ev) {
578
  fillRGBFields(col, cal.get(0));
579
  fillHexFields(col, cal.get(0));
580
  fillHSBFields(col, cal.get(0));
581
  }
582
  setSelector(col, cal.get(0));
583
  setHue(col, cal.get(0));
584
  setNewColor(col, cal.get(0));
585
  cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
586
  },
587
  blur = function (ev) {
588
  var cal = $(this).parent().parent();
589
  cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
590
  },
591
  focus = function () {
592
  charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
593
  $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
594
  $(this).parent().addClass('colorpicker_focus');
595
  },
596
  downIncrement = function (ev) {
597
  var field = $(this).parent().find('input').focus();
598
  var current = {
599
  el: $(this).parent().addClass('colorpicker_slider'),
600
  max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
601
  y: ev.pageY,
602
  field: field,
603
  val: parseInt(field.val(), 10),
604
  preview: $(this).parent().parent().data('colorpicker').livePreview
605
  };
606
  $(document).bind('mouseup', current, upIncrement);
607
  $(document).bind('mousemove', current, moveIncrement);
608
  },
609
  moveIncrement = function (ev) {
610
  ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
611
  if (ev.data.preview) {
612
  change.apply(ev.data.field.get(0), [true]);
613
  }
614
  return false;
615
  },
616
  upIncrement = function (ev) {
617
  change.apply(ev.data.field.get(0), [true]);
618
  ev.data.el.removeClass('colorpicker_slider').find('input').focus();
619
  $(document).unbind('mouseup', upIncrement);
620
  $(document).unbind('mousemove', moveIncrement);
621
  return false;
622
  },
623
  downHue = function (ev) {
624
  var current = {
625
  cal: $(this).parent(),
626
  y: $(this).offset().top
627
  };
628
  current.preview = current.cal.data('colorpicker').livePreview;
629
  $(document).bind('mouseup', current, upHue);
630
  $(document).bind('mousemove', current, moveHue);
631
  },
632
  moveHue = function (ev) {
633
  change.apply(
634
  ev.data.cal.data('colorpicker')
635
  .fields
636
  .eq(4)
637
  .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
638
  .get(0),
639
  [ev.data.preview]
640
  );
641
  return false;
642
  },
643
  upHue = function (ev) {
644
  fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
645
  fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
646
  $(document).unbind('mouseup', upHue);
647
  $(document).unbind('mousemove', moveHue);
648
  return false;
649
  },
650
  downSelector = function (ev) {
651
  var current = {
652
  cal: $(this).parent(),
653
  pos: $(this).offset()
654
  };
655
  current.preview = current.cal.data('colorpicker').livePreview;
656
  $(document).bind('mouseup', current, upSelector);
657
  $(document).bind('mousemove', current, moveSelector);
658
  },
659
  moveSelector = function (ev) {
660
  change.apply(
661
  ev.data.cal.data('colorpicker')
662
  .fields
663
  .eq(6)
664
  .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
665
  .end()
666
  .eq(5)
667
  .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
668
  .get(0),
669
  [ev.data.preview]
670
  );
671
  return false;
672
  },
673
  upSelector = function (ev) {
674
  fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
675
  fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
676
  $(document).unbind('mouseup', upSelector);
677
  $(document).unbind('mousemove', moveSelector);
678
  return false;
679
  },
680
  enterSubmit = function (ev) {
681
  $(this).addClass('colorpicker_focus');
682
  },
683
  leaveSubmit = function (ev) {
684
  $(this).removeClass('colorpicker_focus');
685
  },
686
  clickSubmit = function (ev) {
687
  var cal = $(this).parent();
688
  var col = cal.data('colorpicker').color;
689
  cal.data('colorpicker').origColor = col;
690
  setCurrentColor(col, cal.get(0));
691
  cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
692
  },
693
  show = function (ev) {
694
  var cal = $('#' + $(this).data('colorpickerId'));
695
  cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
696
  var pos = $(this).offset();
697
  var viewPort = getViewport();
698
  var top = pos.top + this.offsetHeight;
699
  var left = pos.left;
700
  if (top + 176 > viewPort.t + viewPort.h) {
701
  top -= this.offsetHeight + 176;
702
  }
703
  if (left + 356 > viewPort.l + viewPort.w) {
704
  left -= 356;
705
  }
706
  cal.css({left: left + 'px', top: top + 'px'});
707
  if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
708
  cal.show();
709
  }
710
  $(document).bind('mousedown', {cal: cal}, hide);
711
  return false;
712
  },
713
  hide = function (ev) {
714
  if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
715
  if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
716
  ev.data.cal.hide();
717
  }
718
  $(document).unbind('mousedown', hide);
719
  }
720
  },
721
  isChildOf = function(parentEl, el, container) {
722
  if (parentEl == el) {
723
  return true;
724
  }
725
  if (parentEl.contains) {
726
  return parentEl.contains(el);
727
  }
728
  if ( parentEl.compareDocumentPosition ) {
729
  return !!(parentEl.compareDocumentPosition(el) & 16);
730
  }
731
  var prEl = el.parentNode;
732
  while(prEl && prEl != container) {
733
  if (prEl == parentEl)
734
  return true;
735
  prEl = prEl.parentNode;
736
  }
737
  return false;
738
  },
739
  getViewport = function () {
740
  var m = document.compatMode == 'CSS1Compat';
741
  return {
742
  l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
743
  t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
744
  w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
745
  h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
746
  };
747
  },
748
  fixHSB = function (hsb) {
749
  return {
750
  h: Math.min(360, Math.max(0, hsb.h)),
751
  s: Math.min(100, Math.max(0, hsb.s)),
752
  b: Math.min(100, Math.max(0, hsb.b))
753
  };
754
  },
755
  fixRGB = function (rgb) {
756
  return {
757
  r: Math.min(255, Math.max(0, rgb.r)),
758
  g: Math.min(255, Math.max(0, rgb.g)),
759
  b: Math.min(255, Math.max(0, rgb.b))
760
  };
761
  },
762
  fixHex = function (hex) {
763
  var len = 6 - hex.length;
764
  if (len > 0) {
765
  var o = [];
766
  for (var i=0; i<len; i++) {
767
  o.push('0');
768
  }
769
  o.push(hex);
770
  hex = o.join('');
771
  }
772
  return hex;
773
  },
774
  HexToRGB = function (hex) {
775
  var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
776
  return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
777
  },
778
  HexToHSB = function (hex) {
779
  return RGBToHSB(HexToRGB(hex));
780
  },
781
  RGBToHSB = function (rgb) {
782
  var hsb = {
783
  h: 0,
784
  s: 0,
785
  b: 0
786
  };
787
  var min = Math.min(rgb.r, rgb.g, rgb.b);
788
  var max = Math.max(rgb.r, rgb.g, rgb.b);
789
  var delta = max - min;
790
  hsb.b = max;
791
  if (max != 0) {
792
 
793
  }
794
  hsb.s = max != 0 ? 255 * delta / max : 0;
795
  if (hsb.s != 0) {
796
  if (rgb.r == max) {
797
  hsb.h = (rgb.g - rgb.b) / delta;
798
  } else if (rgb.g == max) {
799
  hsb.h = 2 + (rgb.b - rgb.r) / delta;
800
  } else {
801
  hsb.h = 4 + (rgb.r - rgb.g) / delta;
802
  }
803
  } else {
804
  hsb.h = -1;
805
  }
806
  hsb.h *= 60;
807
  if (hsb.h < 0) {
808
  hsb.h += 360;
809
  }
810
  hsb.s *= 100/255;
811
  hsb.b *= 100/255;
812
  return hsb;
813
  },
814
  HSBToRGB = function (hsb) {
815
  var rgb = {};
816
  var h = Math.round(hsb.h);
817
  var s = Math.round(hsb.s*255/100);
818
  var v = Math.round(hsb.b*255/100);
819
  if(s == 0) {
820
  rgb.r = rgb.g = rgb.b = v;
821
  } else {
822
  var t1 = v;
823
  var t2 = (255-s)*v/255;
824
  var t3 = (t1-t2)*(h%60)/60;
825
  if(h==360) h = 0;
826
  if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
827
  else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
828
  else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
829
  else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
830
  else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
831
  else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
832
  else {rgb.r=0; rgb.g=0; rgb.b=0}
833
  }
834
  return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
835
  },
836
  RGBToHex = function (rgb) {
837
  var hex = [
838
  rgb.r.toString(16),
839
  rgb.g.toString(16),
840
  rgb.b.toString(16)
841
  ];
842
  $.each(hex, function (nr, val) {
843
  if (val.length == 1) {
844
  hex[nr] = '0' + val;
845
  }
846
  });
847
  return hex.join('');
848
  },
849
  HSBToHex = function (hsb) {
850
  return RGBToHex(HSBToRGB(hsb));
851
  },
852
  restoreOriginal = function () {
853
  var cal = $(this).parent();
854
  var col = cal.data('colorpicker').origColor;
855
  cal.data('colorpicker').color = col;
856
  fillRGBFields(col, cal.get(0));
857
  fillHexFields(col, cal.get(0));
858
  fillHSBFields(col, cal.get(0));
859
  setSelector(col, cal.get(0));
860
  setHue(col, cal.get(0));
861
  setNewColor(col, cal.get(0));
862
  };
863
  return {
864
  init: function (opt) {
865
  opt = $.extend({}, defaults, opt||{});
866
  if (typeof opt.color == 'string') {
867
  opt.color = HexToHSB(opt.color);
868
  } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
869
  opt.color = RGBToHSB(opt.color);
870
  } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
871
  opt.color = fixHSB(opt.color);
872
  } else {
873
  return this;
874
  }
875
  return this.each(function () {
876
  if (!$(this).data('colorpickerId')) {
877
  var options = $.extend({}, opt);
878
  options.origColor = opt.color;
879
  var id = 'collorpicker_' + parseInt(Math.random() * 1000);
880
  $(this).data('colorpickerId', id);
881
  var cal = $(tpl).attr('id', id);
882
  if (options.flat) {
883
  cal.appendTo(this).show();
884
  } else {
885
  cal.appendTo(document.body);
886
  }
887
  options.fields = cal
888
  .find('input')
889
  .bind('keyup', keyDown)
890
  .bind('change', change)
891
  .bind('blur', blur)
892
  .bind('focus', focus);
893
  cal
894
  .find('span').bind('mousedown', downIncrement).end()
895
  .find('>div.colorpicker_current_color').bind('click', restoreOriginal);
896
  options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
897
  options.selectorIndic = options.selector.find('div div');
898
  options.el = this;
899
  options.hue = cal.find('div.colorpicker_hue div');
900
  cal.find('div.colorpicker_hue').bind('mousedown', downHue);
901
  options.newColor = cal.find('div.colorpicker_new_color');
902
  options.currentColor = cal.find('div.colorpicker_current_color');
903
  cal.data('colorpicker', options);
904
  cal.find('div.colorpicker_submit')
905
  .bind('mouseenter', enterSubmit)
906
  .bind('mouseleave', leaveSubmit)
907
  .bind('click', clickSubmit);
908
  fillRGBFields(options.color, cal.get(0));
909
  fillHSBFields(options.color, cal.get(0));
910
  fillHexFields(options.color, cal.get(0));
911
  setHue(options.color, cal.get(0));
912
  setSelector(options.color, cal.get(0));
913
  setCurrentColor(options.color, cal.get(0));
914
  setNewColor(options.color, cal.get(0));
915
  if (options.flat) {
916
  cal.css({
917
  position: 'relative',
918
  display: 'block'
919
  });
920
  } else {
921
  $(this).bind(options.eventName, show);
922
  }
923
  }
924
  });
925
  },
926
  showPicker: function() {
927
  return this.each( function () {
928
  if ($(this).data('colorpickerId')) {
929
  show.apply(this);
930
  }
931
  });
932
  },
933
  hidePicker: function() {
934
  return this.each( function () {
935
  if ($(this).data('colorpickerId')) {
936
  $('#' + $(this).data('colorpickerId')).hide();
937
  }
938
  });
939
  },
940
  setColor: function(col) {
941
  if (typeof col == 'string') {
942
  col = HexToHSB(col);
943
  } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
944
  col = RGBToHSB(col);
945
  } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
946
  col = fixHSB(col);
947
  } else {
948
  return this;
949
  }
950
  return this.each(function(){
951
  if ($(this).data('colorpickerId')) {
952
  var cal = $('#' + $(this).data('colorpickerId'));
953
  cal.data('colorpicker').color = col;
954
  cal.data('colorpicker').origColor = col;
955
  fillRGBFields(col, cal.get(0));
956
  fillHSBFields(col, cal.get(0));
957
  fillHexFields(col, cal.get(0));
958
  setHue(col, cal.get(0));
959
  setSelector(col, cal.get(0));
960
  setCurrentColor(col, cal.get(0));
961
  setNewColor(col, cal.get(0));
962
  }
963
  });
964
  }
965
  };
966
  }();
967
  $.fn.extend({
968
  ColorPicker: ColorPicker.init,
969
  ColorPickerHide: ColorPicker.hidePicker,
970
  ColorPickerShow: ColorPicker.showPicker,
971
  ColorPickerSetColor: ColorPicker.setColor
972
  });
973
  })(fQuery)
1
+ /**
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  *
3
  * Color picker
4
  * Author: Stefan Petre www.eyecon.ro
5
  *
6
  * Dual licensed under the MIT and GPL licenses
7
  *
8
  */
9
  if(typeof fQuery === 'undefined') {
10
  fQuery = jQuery;
11
  }
12
  (function ($) {
13
  var ColorPicker = function () {
14
  var
15
  ids = {},
16
  inAction,
17
  charMin = 65,
18
  visible,
19
  tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
20
  defaults = {
21
  eventName: 'click',
22
  onShow: function () {},
23
  onBeforeShow: function(){},
24
  onHide: function () {},
25
  onChange: function () {},
26
  onSubmit: function () {},
27
  color: 'ff0000',
28
  livePreview: true,
29
  flat: false
30
  },
31
  fillRGBFields = function (hsb, cal) {
32
  var rgb = HSBToRGB(hsb);
33
  $(cal).data('colorpicker').fields
34
  .eq(1).val(rgb.r).end()
35
  .eq(2).val(rgb.g).end()
36
  .eq(3).val(rgb.b).end();
37
  },
38
  fillHSBFields = function (hsb, cal) {
39
  $(cal).data('colorpicker').fields
40
  .eq(4).val(hsb.h).end()
41
  .eq(5).val(hsb.s).end()
42
  .eq(6).val(hsb.b).end();
43
  },
44
  fillHexFields = function (hsb, cal) {
45
  $(cal).data('colorpicker').fields
46
  .eq(0).val(HSBToHex(hsb)).end();
47
  },
48
  setSelector = function (hsb, cal) {
49
  $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
50
  $(cal).data('colorpicker').selectorIndic.css({
51
  left: parseInt(150 * hsb.s/100, 10),
52
  top: parseInt(150 * (100-hsb.b)/100, 10)
53
  });
54
  },
55
  setHue = function (hsb, cal) {
56
  $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
57
  },
58
  setCurrentColor = function (hsb, cal) {
59
  $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
60
  },
61
  setNewColor = function (hsb, cal) {
62
  $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
63
  },
64
  keyDown = function (ev) {
65
  var pressedKey = ev.charCode || ev.keyCode || -1;
66
  if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
67
  return false;
68
  }
69
  var cal = $(this).parent().parent();
70
  if (cal.data('colorpicker').livePreview === true) {
71
  change.apply(this);
72
  }
73
  },
74
  change = function (ev) {
75
  var cal = $(this).parent().parent(), col;
76
  if (this.parentNode.className.indexOf('_hex') > 0) {
77
  cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
78
  } else if (this.parentNode.className.indexOf('_hsb') > 0) {
79
  cal.data('colorpicker').color = col = fixHSB({
80
  h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
81
  s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
82
  b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
83
  });
84
  } else {
85
  cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
86
  r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
87
  g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
88
  b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
89
  }));
90
  }
91
  if (ev) {
92
  fillRGBFields(col, cal.get(0));
93
  fillHexFields(col, cal.get(0));
94
  fillHSBFields(col, cal.get(0));
95
  }
96
  setSelector(col, cal.get(0));
97
  setHue(col, cal.get(0));
98
  setNewColor(col, cal.get(0));
99
  cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
100
  },
101
  blur = function (ev) {
102
  var cal = $(this).parent().parent();
103
  cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
104
  },
105
  focus = function () {
106
  charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
107
  $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
108
  $(this).parent().addClass('colorpicker_focus');
109
  },
110
  downIncrement = function (ev) {
111
  var field = $(this).parent().find('input').focus();
112
  var current = {
113
  el: $(this).parent().addClass('colorpicker_slider'),
114
  max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
115
  y: ev.pageY,
116
  field: field,
117
  val: parseInt(field.val(), 10),
118
  preview: $(this).parent().parent().data('colorpicker').livePreview
119
  };
120
  $(document).bind('mouseup', current, upIncrement);
121
  $(document).bind('mousemove', current, moveIncrement);
122
  },
123
  moveIncrement = function (ev) {
124
  ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
125
  if (ev.data.preview) {
126
  change.apply(ev.data.field.get(0), [true]);
127
  }
128
  return false;
129
  },
130
  upIncrement = function (ev) {
131
  change.apply(ev.data.field.get(0), [true]);
132
  ev.data.el.removeClass('colorpicker_slider').find('input').focus();
133
  $(document).unbind('mouseup', upIncrement);
134
  $(document).unbind('mousemove', moveIncrement);
135
  return false;
136
  },
137
  downHue = function (ev) {
138
  var current = {
139
  cal: $(this).parent(),
140
  y: $(this).offset().top
141
  };
142
  current.preview = current.cal.data('colorpicker').livePreview;
143
  $(document).bind('mouseup', current, upHue);
144
  $(document).bind('mousemove', current, moveHue);
145
  },
146
  moveHue = function (ev) {
147
  change.apply(
148
  ev.data.cal.data('colorpicker')
149
  .fields
150
  .eq(4)
151
  .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
152
  .get(0),
153
  [ev.data.preview]
154
  );
155
  return false;
156
  },
157
  upHue = function (ev) {
158
  fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
159
  fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
160
  $(document).unbind('mouseup', upHue);
161
  $(document).unbind('mousemove', moveHue);
162
  return false;
163
  },
164
  downSelector = function (ev) {
165
  var current = {
166
  cal: $(this).parent(),
167
  pos: $(this).offset()
168
  };
169
  current.preview = current.cal.data('colorpicker').livePreview;
170
  $(document).bind('mouseup', current, upSelector);
171
  $(document).bind('mousemove', current, moveSelector);
172
  },
173
  moveSelector = function (ev) {
174
  change.apply(
175
  ev.data.cal.data('colorpicker')
176
  .fields
177
  .eq(6)
178
  .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
179
  .end()
180
  .eq(5)
181
  .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
182
  .get(0),
183
  [ev.data.preview]
184
  );
185
  return false;
186
  },
187
  upSelector = function (ev) {
188
  fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
189
  fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
190
  $(document).unbind('mouseup', upSelector);
191
  $(document).unbind('mousemove', moveSelector);
192
  return false;
193
  },
194
  enterSubmit = function (ev) {
195
  $(this).addClass('colorpicker_focus');
196
  },
197
  leaveSubmit = function (ev) {
198
  $(this).removeClass('colorpicker_focus');
199
  },
200
  clickSubmit = function (ev) {
201
  var cal = $(this).parent();
202
  var col = cal.data('colorpicker').color;
203
  cal.data('colorpicker').origColor = col;
204
  setCurrentColor(col, cal.get(0));
205
  cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
206
  },
207
  show = function (ev) {
208
  var cal = $('#' + $(this).data('colorpickerId'));
209
  cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
210
  var pos = $(this).offset();
211
  var viewPort = getViewport();
212
  var top = pos.top + this.offsetHeight;
213
  var left = pos.left;
214
  if (top + 176 > viewPort.t + viewPort.h) {
215
  top -= this.offsetHeight + 176;
216
  }
217
  if (left + 356 > viewPort.l + viewPort.w) {
218
  left -= 356;
219
  }
220
  cal.css({left: left + 'px', top: top + 'px'});
221
  if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
222
  cal.show();
223
  }
224
  $(document).bind('mousedown', {cal: cal}, hide);
225
  return false;
226
  },
227
  hide = function (ev) {
228
  if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
229
  if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
230
  ev.data.cal.hide();
231
  }
232
  $(document).unbind('mousedown', hide);
233
  }
234
  },
235
  isChildOf = function(parentEl, el, container) {
236
  if (parentEl == el) {
237
  return true;
238
  }
239
  if (parentEl.contains) {
240
  return parentEl.contains(el);
241
  }
242
  if ( parentEl.compareDocumentPosition ) {
243
  return !!(parentEl.compareDocumentPosition(el) & 16);
244
  }
245
  var prEl = el.parentNode;
246
  while(prEl && prEl != container) {
247
  if (prEl == parentEl)
248
  return true;
249
  prEl = prEl.parentNode;
250
  }
251
  return false;
252
  },
253
  getViewport = function () {
254
  var m = document.compatMode == 'CSS1Compat';
255
  return {
256
  l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
257
  t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
258
  w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
259
  h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
260
  };
261
  },
262
  fixHSB = function (hsb) {
263
  return {
264
  h: Math.min(360, Math.max(0, hsb.h)),
265
  s: Math.min(100, Math.max(0, hsb.s)),
266
  b: Math.min(100, Math.max(0, hsb.b))
267
  };
268
  },
269
  fixRGB = function (rgb) {
270
  return {
271
  r: Math.min(255, Math.max(0, rgb.r)),
272
  g: Math.min(255, Math.max(0, rgb.g)),
273
  b: Math.min(255, Math.max(0, rgb.b))
274
  };
275
  },
276
  fixHex = function (hex) {
277
  var len = 6 - hex.length;
278
  if (len > 0) {
279
  var o = [];
280
  for (var i=0; i<len; i++) {
281
  o.push('0');
282
  }
283
  o.push(hex);
284
  hex = o.join('');
285
  }
286
  return hex;
287
  },
288
  HexToRGB = function (hex) {
289
  var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
290
  return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
291
  },
292
  HexToHSB = function (hex) {
293
  return RGBToHSB(HexToRGB(hex));
294
  },
295
  RGBToHSB = function (rgb) {
296
  var hsb = {
297
  h: 0,
298
  s: 0,
299
  b: 0
300
  };
301
  var min = Math.min(rgb.r, rgb.g, rgb.b);
302
  var max = Math.max(rgb.r, rgb.g, rgb.b);
303
  var delta = max - min;
304
  hsb.b = max;
305
  if (max != 0) {
306
 
307
  }
308
  hsb.s = max != 0 ? 255 * delta / max : 0;
309
  if (hsb.s != 0) {
310
  if (rgb.r == max) {
311
  hsb.h = (rgb.g - rgb.b) / delta;
312
  } else if (rgb.g == max) {
313
  hsb.h = 2 + (rgb.b - rgb.r) / delta;
314
  } else {
315
  hsb.h = 4 + (rgb.r - rgb.g) / delta;
316
  }
317
  } else {
318
  hsb.h = -1;
319
  }
320
  hsb.h *= 60;
321
  if (hsb.h < 0) {
322
  hsb.h += 360;
323
  }
324
  hsb.s *= 100/255;
325
  hsb.b *= 100/255;
326
  return hsb;
327
  },
328
  HSBToRGB = function (hsb) {
329
  var rgb = {};
330
  var h = Math.round(hsb.h);
331
  var s = Math.round(hsb.s*255/100);
332
  var v = Math.round(hsb.b*255/100);
333
  if(s == 0) {
334
  rgb.r = rgb.g = rgb.b = v;
335
  } else {
336
  var t1 = v;
337
  var t2 = (255-s)*v/255;
338
  var t3 = (t1-t2)*(h%60)/60;
339
  if(h==360) h = 0;
340
  if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
341
  else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
342
  else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
343
  else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
344
  else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
345
  else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
346
  else {rgb.r=0; rgb.g=0; rgb.b=0}
347
  }
348
  return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
349
  },
350
  RGBToHex = function (rgb) {
351
  var hex = [
352
  rgb.r.toString(16),
353
  rgb.g.toString(16),
354
  rgb.b.toString(16)
355
  ];
356
  $.each(hex, function (nr, val) {
357
  if (val.length == 1) {
358
  hex[nr] = '0' + val;
359
  }
360
  });
361
  return hex.join('');
362
  },
363
  HSBToHex = function (hsb) {
364
  return RGBToHex(HSBToRGB(hsb));
365
  },
366
  restoreOriginal = function () {
367
  var cal = $(this).parent();
368
  var col = cal.data('colorpicker').origColor;
369
  cal.data('colorpicker').color = col;
370
  fillRGBFields(col, cal.get(0));
371
  fillHexFields(col, cal.get(0));
372
  fillHSBFields(col, cal.get(0));
373
  setSelector(col, cal.get(0));
374
  setHue(col, cal.get(0));
375
  setNewColor(col, cal.get(0));
376
  };
377
  return {
378
  init: function (opt) {
379
  opt = $.extend({}, defaults, opt||{});
380
  if (typeof opt.color == 'string') {
381
  opt.color = HexToHSB(opt.color);
382
  } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
383
  opt.color = RGBToHSB(opt.color);
384
  } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
385
  opt.color = fixHSB(opt.color);
386
  } else {
387
  return this;
388
  }
389
  return this.each(function () {
390
  if (!$(this).data('colorpickerId')) {
391
  var options = $.extend({}, opt);
392
  options.origColor = opt.color;
393
  var id = 'collorpicker_' + parseInt(Math.random() * 1000);
394
  $(this).data('colorpickerId', id);
395
  var cal = $(tpl).attr('id', id);
396
  if (options.flat) {
397
  cal.appendTo(this).show();
398
  } else {
399
  cal.appendTo(document.body);
400
  }
401
  options.fields = cal
402
  .find('input')
403
  .bind('keyup', keyDown)
404
  .bind('change', change)
405
  .bind('blur', blur)
406
  .bind('focus', focus);
407
  cal
408
  .find('span').bind('mousedown', downIncrement).end()
409
  .find('>div.colorpicker_current_color').bind('click', restoreOriginal);
410
  options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
411
  options.selectorIndic = options.selector.find('div div');
412
  options.el = this;
413
  options.hue = cal.find('div.colorpicker_hue div');
414
  cal.find('div.colorpicker_hue').bind('mousedown', downHue);
415
  options.newColor = cal.find('div.colorpicker_new_color');
416
  options.currentColor = cal.find('div.colorpicker_current_color');
417
  cal.data('colorpicker', options);
418
  cal.find('div.colorpicker_submit')
419
  .bind('mouseenter', enterSubmit)
420
  .bind('mouseleave', leaveSubmit)
421
  .bind('click', clickSubmit);
422
  fillRGBFields(options.color, cal.get(0));
423
  fillHSBFields(options.color, cal.get(0));
424
  fillHexFields(options.color, cal.get(0));
425
  setHue(options.color, cal.get(0));
426
  setSelector(options.color, cal.get(0));
427
  setCurrentColor(options.color, cal.get(0));
428
  setNewColor(options.color, cal.get(0));
429
  if (options.flat) {
430
  cal.css({
431
  position: 'relative',
432
  display: 'block'
433
  });
434
  } else {
435
  $(this).bind(options.eventName, show);
436
  }
437
  }
438
  });
439
  },
440
  showPicker: function() {
441
  return this.each( function () {
442
  if ($(this).data('colorpickerId')) {
443
  show.apply(this);
444
  }
445
  });
446
  },
447
  hidePicker: function() {
448
  return this.each( function () {
449
  if ($(this).data('colorpickerId')) {
450
  $('#' + $(this).data('colorpickerId')).hide();
451
  }
452
  });
453
  },
454
  setColor: function(col) {
455
  if (typeof col == 'string') {
456
  col = HexToHSB(col);
457
  } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
458
  col = RGBToHSB(col);
459
  } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
460
  col = fixHSB(col);
461
  } else {
462
  return this;
463
  }
464
  return this.each(function(){
465
  if ($(this).data('colorpickerId')) {
466
  var cal = $('#' + $(this).data('colorpickerId'));
467
  cal.data('colorpicker').color = col;
468
  cal.data('colorpicker').origColor = col;
469
  fillRGBFields(col, cal.get(0));
470
  fillHSBFields(col, cal.get(0));
471
  fillHexFields(col, cal.get(0));
472
  setHue(col, cal.get(0));
473
  setSelector(col, cal.get(0));
474
  setCurrentColor(col, cal.get(0));
475
  setNewColor(col, cal.get(0));
476
  }
477
  });
478
  }
479
  };
480
  }();
481
  $.fn.extend({
482
  ColorPicker: ColorPicker.init,
483
  ColorPickerHide: ColorPicker.hidePicker,
484
  ColorPickerShow: ColorPicker.showPicker,
485
  ColorPickerSetColor: ColorPicker.setColor
486
  });
487
  })(fQuery)
js/jquery.fontPlugin.js CHANGED
@@ -36,20 +36,20 @@ if (typeof fQuery === 'undefined') {
36
  self.settingFields = [];
37
  self.effectSliders = [];
38
  /*
39
- Initialize
40
- */
41
  self.init = function () {
42
- self.detectMode();
43
- self.showLoading();
44
- self.loadSettings();
45
- if (!$.fn.on) {
46
- alert('WARNING: You are using an old Wordpress version. It is not guaranteed that the plugin will work. The oldest tested Wordpress version is 3.1 but at least 3.3.1 is recommended.');
47
- }
48
- // detect CSS text-shadow support in JavaScript
49
- if (document.createElement("detect").style.textShadow !== "") {
50
- alert('Warning: your browser does not support advanced effects and all functions of the plugin. Please upgrade to Chrome, Firefox or Internet Explorer 10');
51
- return;
52
- }
53
  };
54
  /*
55
  *
@@ -67,8 +67,8 @@ Initialize
67
  paramObj,
68
  upgrade;
69
  /*
70
- PRESETS
71
- */
72
  var modalOptions = {
73
  id: 'presetsPanel',
74
  name: 'stdSettings',
@@ -109,26 +109,26 @@ PRESETS
109
  self.renamePreset();
110
  });
111
  };
112
- /**
113
- Like? Yes or No
114
- **/
115
- self.addLikeYesNo = function () {
116
- //add like not/like
117
- self.$yesno = $('<div class="yesno">Like the plugin?<br><a href="http://fontsforweb.com/purchase/howtosupport?url=' + fontBlogUrl + '&name=' + fontBlogName + '" class="overlay_url yesbutton" data-upgrade="true">Yes!</a> or <a href="http://www.fontsforweb.com/contact/support" class="overlay_url nobutton">No</a></div>');
118
- self.$yesno.insertBefore('#fontfaceSettings');
119
- self.$yesno.css({
120
- 'color': '#fff',
121
- 'font-size': '10px',
122
- 'text-align': 'right',
123
- 'font-weight': 'bold',
124
- 'float': 'left',
125
- 'margin-right': '10px'
126
- });
127
- self.$yesno.find('a').css({
128
- 'font-size': '10px',
129
- 'color': '#fff'
130
- });
131
- };
132
  /*
133
  * Create appearance panel - size and color
134
  *
@@ -143,8 +143,8 @@ PRESETS
143
  saveButton,
144
  upgrade;
145
  /*
146
- SELECTORS
147
- */
148
  //get standard fields in a new window
149
  var modalOptions = {
150
  id: 'appearancePanel',
@@ -171,11 +171,11 @@ SELECTORS
171
  self.$extendedFields = $('<div id="appearanceExtendedFields"></div>').appendTo(modal);
172
  //get extended fields not ready
173
  /*var switcher = $('<a href="#" id="showExtendedFields">Load extended fields from FontsForWeb.com</a>').appendTo(self.$apr);
174
- self.$extendedFields.hide();
175
- switcher.on('click', function () { self.$extendedFields.slideToggle(); self.loadExtendedFields(); return false; });*/
176
  /*
177
- Add all setting fields
178
- */
179
  for (i = 0; i < self.options.settingFields.length; i += 1) {
180
  field = self.options.settingFields[i];
181
  paramObj = {};
@@ -223,12 +223,13 @@ Add all setting fields
223
  var actions = $('<fieldset id="actionsFieldset"></fieldset>');
224
  var closeMod = $('<a class="closeModal" href="#">x</a>');
225
  actions.append(closeMod);
 
226
  closeMod.click(function () {
227
  self.$presets.hide();
228
  self.$apr.hide();
229
  });
230
  //add different fields buttons
231
- var fontfaceSettings = $('<button id="fontfaceSettings">Font</button>').appendTo(actions);
232
  //add actions
233
  fontfaceSettings.on('click', function () {
234
  if (self.mode === 'global') {
@@ -249,16 +250,14 @@ Add all setting fields
249
  }
250
  self.showFontsBrowser();
251
  });
252
- // color and size window
253
- //var colorsizeSettings = $('<button id="colorsizeSettings" class="toggleModal" data-modal-name="stdSettings">Color and Size</button>').appendTo(actions);
254
  // PRO settings window
255
- var proSettings = $('<a href="http://fontsforweb.com/purchase/pluginupgradesubscribe?url=' + fontBlogUrl + '&name=' + fontBlogName + '" class="overlay_url" id="upgradeToProButton" data-upgrade="true">More</a>').appendTo(actions);
256
  // extra fields
257
- var extrafieldsSettings = $('<button id="extrafieldsSettings" class="toggleModal" data-modal-name="extrafields">PRO</button>').appendTo(actions);
258
  // hide extra fields
259
  extrafieldsSettings.hide();
260
  // effects button
261
- var effects = $('<button id="effectsButton" class="toggleModal" data-modal-name="effects">Effects</button>').appendTo(actions);
262
  //add save button
263
  saveButton = $('<button id="fontSaveSettings">Save settings</button>').appendTo(actions);
264
  saveButton.click(function (e) {
@@ -271,9 +270,47 @@ Add all setting fields
271
  });
272
  self.saveSettings();
273
  });
274
- //actions.insertAfter($('#presetsDropdownFieldset'));
275
  self.$apr.append(actions)
276
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
277
  /*
278
  * SETTINGS - SAVE AND LOAD
279
  */
@@ -284,70 +321,70 @@ Add all setting fields
284
  var data = {
285
  action: 'get_font_settings'
286
  };
287
- $.ajax({
288
- type: "POST",
289
- url: ajaxproxy,
290
- data: data,
291
- success: function (response) {
292
- // json is coming parsed so no $.parseJSON(response);
293
- try {
294
- response = $.parseJSON(response);
295
- } catch (e) {
296
- self.tryAnotherAjaxproxy();
297
- return;
298
- }
299
-
300
- //console.log(self.options);
301
- if (response && response.settingFields) {
302
- self.options = $.extend({}, response, self.options);
303
- } else {
304
- self.tryAnotherAjaxproxy();
305
- return;
306
- }
307
-
308
- try {
309
- //console.log(self.options);
310
- self.hideLoading();
311
- // markup
312
- self.createPresetsPanel();
313
- self.createAppearancePanel();
314
- self.createActionButtons();
315
- self.loadPreset(0);
316
- self.bindShowCategoriesAction();
317
- self.bindShowFontsAction();
318
- self.bindLinkOverlay();
319
- self.setFontOnclick();
320
- self.initUploadForm();
321
- self.adaptOptionsToMode();
322
- self.addLikeYesNo();
323
- //check if api key is available
324
- //if(self.options.apikey)
325
- self.checkForApikey();
326
- } catch (e) {
327
- fQuery('#FFW_chooseFontButton, #content_FFWButton, #wp-admin-bar-font_settings > a').unbind();
328
- fQuery('#fontplugin').data('fontPlugin', false);
329
- engageCompatibilityMode (function () {
330
- fQuery('#wp-admin-bar-font_settings > a').trigger('click');
331
- });
332
- }
333
- },
334
- error: function (response) {
335
- self.tryAnotherAjaxproxy();
336
- }
337
- });
338
- };
339
- self.tryAnotherAjaxproxy = function () {
340
- if(ajaxproxy === ajaxproxy3) {
341
- alert('Sorry, but the plugin couldn\'t start. Please contact your server administrator to allow AJAX use. Power users: Use console (F12 in Chrome) to see what else could be the problem.');
342
- return;
343
- }
344
- else if(ajaxproxy === ajaxproxy2) {
345
- ajaxproxy = ajaxproxy3;
346
- } else {
347
- ajaxproxy = ajaxproxy2;
348
- }
349
- self.loadSettings();
350
- };
351
  /*
352
  * Save settings by ajax
353
  *
@@ -397,32 +434,22 @@ Add all setting fields
397
  self.options.presets[self.currentPresetNo].styles[settingName] = value;
398
  };
399
  /*
400
- *
401
- * @param {type} group - which group is it
402
- * @param {type} fieldId - what's the name of id
403
- * @param {type} settingName - setting name
404
- * @param {type} value - setting value
405
- */
406
- //self.updateMultivalParameter = function (group, fieldId, settingName, value) {
407
- // self.options[group][fieldId]
408
- //};
409
- /*
410
- update selected element CSS
411
- global - update element from selector
412
- postPage - update selected text
413
- */
414
  self.updateSelectedElement = function (settingName, value) {
415
  var selection,
416
  selector,
417
  selectorValid,
418
- $selectorContents,
419
  element,
420
  node,
421
  justInsertedClass,
422
  newSpan,
423
  newHTML,
424
  inserted,
425
- $tempDiv;
426
  if (!value || value == 'px') return;
427
  if (self.mode === 'global') {
428
  //VERSION FOR GENERAL SETTINGS PAGE
@@ -468,9 +495,9 @@ postPage - update selected text
468
  } catch (e) {
469
  selectorValid = false;
470
  }
471
- if(selectorValid && $selectorContents.length > 1) {
472
- selectorValid = false;
473
- }
474
  //get node
475
  node = tinyMCE.activeEditor.selection.getNode();
476
  if (selectorValid && ($.trim($(node).html()) === $.trim(selection) || $.trim($(node).html()) === $.trim($(selection).html()))) {
@@ -481,12 +508,12 @@ postPage - update selected text
481
  justInsertedClass = 'inserted' + Math.floor(Math.random() * 10000);
482
  newSpan = $('<span id="' + justInsertedClass + '">' + selection + '</span>');
483
  newSpan.css(settingName, value);
484
- $tempDiv = $('<div>').append(newSpan.clone());
485
- $tempDiv.find('*').each(function () {
486
- //if($(this).inlineStyle && $(this).inlineStyle(settingName)) {
487
- $(this).css(settingName, value);
488
- //}
489
- });
490
  //get span html together with span itself
491
  newHTML = $tempDiv.html();
492
  inserted = tinyMCE.activeEditor.selection.setContent(newHTML);
@@ -510,8 +537,8 @@ postPage - update selected text
510
  var modalOptions = {
511
  name: 'extrafields',
512
  title: 'Pro options',
513
- left: '12px',
514
- top: '212px',
515
  width: '270px'
516
  };
517
  var modal = self.createNewModal(modalOptions);
@@ -523,34 +550,6 @@ postPage - update selected text
523
  self.addSettingsField(paramObj);
524
  }
525
  self.reloadPreset();
526
- // old "add shadow" setting
527
- /*self.xhrPost({
528
- url: self.options.FFW_baseUrl + '/api/getextrafields2',
529
- data: {
530
- apikey: self.options.apikey,
531
- blogurl: fontBlogUrl
532
- }
533
- },
534
- function (data) {
535
- self.$extendedFields.html('');
536
- for (i = 0; i < data.length; i += 1) {
537
- field = data[i];
538
- paramObj = {};
539
- paramObj.field = field;
540
- paramObj.type = 'premium';
541
- self.addSettingsField(paramObj);
542
- //add premium buttons
543
- $('#upgradeToProButton').remove();
544
- $('#shadowSettings').show();
545
- $('#extrafieldsSettings').show();
546
- clearInterval(self.checkForApikeyInterval);
547
- }
548
- self.reloadPreset();
549
- //reposition
550
- //var offset = self.$apr.offset().top - self.$apr.height() / 2 + 30;
551
- //self.$apr.css('bottom', 'auto');
552
- //self.$apr.css('top', offset);
553
- });*/
554
  };
555
  /*
556
  * Add a field to selected place
@@ -558,9 +557,9 @@ self.reloadPreset();
558
  *
559
  * @returns {unresolved}
560
  * .field - field definition - no data or assignations here
561
- * .settings - contain field settings
562
  */
563
- self.addSettingsField = function (paramObj) {
564
  var field = paramObj.field,
565
  thisField,
566
  thisInput,
@@ -569,7 +568,10 @@ self.reloadPreset();
569
  fieldset,
570
  fieldParam,
571
  container,
572
- inputFields = [];;
 
 
 
573
  //add support for multi value field
574
  if (field.settingType == 'cssmultival') {
575
  if (!paramObj.target) {
@@ -628,6 +630,9 @@ self.reloadPreset();
628
  stop = true;
629
  // if xy slider set then add it
630
  XYSliderOptions.label = field.label;
 
 
 
631
  XYSliderOptions.settingName = paramObj.settings.uniqueId;
632
  var Mathra = Math.random();
633
  XYSliderOptions.actions = function (x, y, deg, distance) {
@@ -665,13 +670,12 @@ self.reloadPreset();
665
  var settings = $(this).data('settings'),
666
  fieldInfo = $(this).data('fieldInfo'),
667
  storage = $(this).data('storage'),
668
- val = $(this).val();
 
 
669
  if (stop === undefined) stop = false;
670
  // add arrow up - down support
671
- //37 - left
672
- //38 - up
673
- //39 - right
674
- //40 - down
675
  if (event.which === 38 && !isNaN(val)) {
676
  $(this).val(parseFloat(val) + 1);
677
  $(this).trigger('change');
@@ -683,16 +687,7 @@ self.reloadPreset();
683
  }
684
  // save param setting
685
  settings.params[fieldInfo.settingName] = val;
686
- // when changing value of the input move the handle too
687
- // if this input is linked to a handle
688
- if (XYSlider && !stop && fieldInfo.handle) {
689
- // get "linked to" of a handle and move x or y accordingly
690
- if (fieldInfo.handle.linkTo === 'x') {
691
- XYSlider.setPosition($(this).val(), false);
692
- } else if (fieldInfo.handle.linkTo === 'y') {
693
- XYSlider.setPosition(false, $(this).val());
694
- }
695
- }
696
  //console.log($(this).data('fieldInfo').settingName + ', ' + $(this).val() + ', ' + ($(this).data('fieldInfo').unit || ''))
697
  //get values of all siblings and create one value for the element
698
  var completeValue = '';
@@ -707,7 +702,36 @@ self.reloadPreset();
707
  if ($(this).val() == '') {
708
  $(this).val(fieldInfo['default']);
709
  }
 
 
 
 
 
 
 
710
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
711
  // if this is text-shadow
712
  if (field.settingName === 'text-shadow') {
713
  //var effect = self.getElementsEffect(settings.uniqueId);
@@ -775,6 +799,16 @@ self.reloadPreset();
775
  }
776
  return false;
777
  });
 
 
 
 
 
 
 
 
 
 
778
  //reset field button action
779
  fieldset.find('a.resetField').click(function () {
780
  thisInput.val('');
@@ -810,9 +844,13 @@ self.reloadPreset();
810
  thisInput.val('');
811
  thisInput.trigger('change');
812
  });
813
- thisInput = self.extendField(thisInput, field.extendWith);
 
 
 
 
814
  //general actions - apply settings
815
- if (field.settingType === 'css') {
816
  //bind change to color picker
817
  thisInput.bind('change click keyup', function () {
818
  //console.log($(this).data('fieldInfo').settingName + ', ' + $(this).val() + ', ' + ($(this).data('fieldInfo').unit || ''))
@@ -895,6 +933,32 @@ self.reloadPreset();
895
  });
896
  return input;
897
  }());
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
898
  } else if (extendWith === 'colorPicker') {
899
  var input = (function () {
900
  var input = field;
@@ -982,16 +1046,14 @@ self.reloadPreset();
982
  self.loadEffects = function (data) {
983
  var i,
984
  field,
985
- paramObj;
986
- var dropdown,
987
  option,
988
  field,
989
  effectsList = $('<div class="effectsList">');
990
  // save effects to array
991
  self.effects = data;
992
- /*
993
- Create effects modal
994
- */
995
  var modalOptions = {
996
  id: 'effectsPanel',
997
  name: 'effects', // name conflict was here
@@ -1017,7 +1079,7 @@ Create effects modal
1017
  // change
1018
  dropdown.change(function () {
1019
  if ($(this).val() == 'upgrade') {
1020
- var link = $('<a href="http://fontsforweb.com/purchase/pluginupgradesubscribe?url=' + fontBlogUrl + '&name=' + fontBlogName + '" class="overlay_url" id="upgradeToProButton" data-upgrade="true">More</a>').appendTo('body');
1021
  link.click();
1022
  link.remove();
1023
  return;
@@ -1040,10 +1102,7 @@ Create effects modal
1040
  self.currentPreset.effects = newEffectsOrder;
1041
  // refresh text shadow effects
1042
  self.updateTextShadowEffects(self.currentElement);
1043
- },
1044
- /*sort: function (event) {
1045
- this.stop(stop);
1046
- }*/
1047
  });
1048
  };
1049
  /*
@@ -1061,9 +1120,7 @@ this.stop(stop);
1061
  if (effect.enabled) {
1062
  $effectItem.find('input[name=enabled]').attr("checked", "true");
1063
  }
1064
- /*
1065
- go through all the parameters and set them accordingly
1066
- */
1067
  // clone object beforehand to avoid properties overwriting inside effect
1068
  var params = $.extend({}, effect.params);
1069
  for (var property in params) {
@@ -1083,12 +1140,15 @@ go through all the parameters and set them accordingly
1083
  * @returns {unresolved}
1084
  */
1085
  self.unloadCurrentElementEffects = function () {
1086
- if (!Object.size(self.effectSliders) || self.currentPreset === undefined || self.currentPreset.effects === undefined) return;
1087
- // unload all handles
1088
- for (var i = 0; i < self.currentPreset.effects.length; i++) {
1089
- var effect = self.currentPreset.effects[i];
1090
- if (self.effectSliders[effect.uniqueId]) {
1091
- self.effectSliders[effect.uniqueId].hide();
 
 
 
1092
  }
1093
  }
1094
  if (!self.modals['effects']) return;
@@ -1098,7 +1158,8 @@ go through all the parameters and set them accordingly
1098
  * add effect to effects list
1099
  */
1100
  self.addEffect = function (settingName) {
1101
- var effectSettings = {};
 
1102
  if (!self.currentPreset.effects) {
1103
  self.currentPreset.effects = [];
1104
  effectSettings.effectNo = 0;
@@ -1111,7 +1172,7 @@ go through all the parameters and set them accordingly
1111
  // add effect settings to preset
1112
  self.currentPreset.effects.splice(0, 0, effectSettings);
1113
  // create entry
1114
- return self.createEffectEntry(effectSettings);
1115
  };
1116
  /*
1117
  * add effect to the list
@@ -1119,7 +1180,7 @@ go through all the parameters and set them accordingly
1119
  * @param {type} effectId
1120
  * @returns {effect}
1121
  */
1122
- self.createEffectEntry = function (effectSettings) {
1123
  //if effects modal not created yet don't load effects
1124
  if (!self.modals['effects']) return;
1125
  var effectItem,
@@ -1130,6 +1191,9 @@ go through all the parameters and set them accordingly
1130
  arrow = $('<a href="#" class="effectArrow"></a>'),
1131
  label = $('<a href="#" class="effectName">' + effectDefinition.label + '</a>'),
1132
  closeButton = $('<a href="#" class="removeEffect">x</a>');
 
 
 
1133
  // create item markup
1134
  effectItem = $('<div>');
1135
  effectItem.append('<div class="label">');
@@ -1149,6 +1213,7 @@ go through all the parameters and set them accordingly
1149
  paramObj.settings = effectSettings;
1150
  paramObj.target = effectParams;
1151
  paramObj.type = 'extrafields';
 
1152
  // actions
1153
  label.click(function (e) {
1154
  if (effectParams.is(':visible')) {
@@ -1182,7 +1247,7 @@ go through all the parameters and set them accordingly
1182
  self.disableEffect(effectSettings.uniqueId, effectItem);
1183
  }
1184
  });
1185
- self.addSettingsField(paramObj);
1186
  //add item reference in settings and settings in item
1187
  //effectSettings.el = effectItem; ERROR on stringify
1188
  effectItem.data('settings', effectSettings);
@@ -1251,8 +1316,10 @@ go through all the parameters and set them accordingly
1251
  }
1252
  // delete shadow css
1253
  self.removeShadowEffect(effectId);
1254
- // remove handle
1255
- self.effectSliders[effectId].remove();
 
 
1256
  // delete entry
1257
  $effectItem.remove();
1258
  };
@@ -1272,13 +1339,13 @@ go through all the parameters and set them accordingly
1272
  }
1273
  };
1274
  /*
1275
- draw effects
1276
- options.target;
1277
- options.deg;
1278
- options.distance;
1279
- options.effectId;
1280
- options.effectsList;
1281
- */
1282
  self.drawEffects = function (options) {
1283
  if (!self.shadowSupport) return false;
1284
  var depth = options.distance / 10,
@@ -1404,101 +1471,6 @@ options.effectsList;
1404
  //apply text shadow
1405
  self.updateTextShadowEffects(options.target);
1406
  };
1407
- /*
1408
- * Add text shadow efect for the subject
1409
- */
1410
- /*self.extrude3d = function (subject, angle, distance, effectId) {
1411
- var depth = distance / 10,
1412
- subjectColor = subject.css('color'),
1413
- subjectColorRgb = self.parseRgb(subjectColor),
1414
- //initially take 20% off
1415
- rColor = subjectColorRgb.r / 100 * 80,
1416
- gColor = subjectColorRgb.g / 100 * 80,
1417
- bColor = subjectColorRgb.b / 100 * 80,
1418
- i = 0,
1419
- speed = i,
1420
- xDist = 0,
1421
- yDist = 0,
1422
- color = '',
1423
- //get effect
1424
- effect = self.getElementsEffect(effectId);
1425
- if(effectId === undefined) {
1426
- effectId = 'textExtrudeValue';
1427
- }
1428
- if(angle === undefined) {
1429
- angle = 290;
1430
- }
1431
- // reset current elements calculated effect value
1432
- effect.calculated = '';
1433
- //generate text shadow value
1434
- //loop to depth
1435
- for(i = 0; i < depth; i++) {
1436
- //calculate x and y of next shadow
1437
- speed = 1.2;
1438
- xDist += speed * Math.sin(angle * Math.PI / 180);
1439
- yDist += speed * -Math.cos(angle * Math.PI / 180);
1440
- xDist = xDist;
1441
- yDist = yDist;
1442
- //percentage darkened
1443
- var percentageDone = i / depth;
1444
- //darkening strength - the bigger depth the lower sstrength
1445
- var light = 10 - percentageDone * 10;
1446
- //darken the next shadow a bit take 10%
1447
- rColor = Math.floor(rColor / 100 * 90 + light);
1448
- gColor = Math.floor(gColor / 100 * 90 + light);
1449
- bColor = Math.floor(bColor / 100 * 90 + light);
1450
- color = 'rgb(' + rColor + ', ' + gColor + ', ' + bColor + ')';
1451
- //put together shadow setting
1452
- effect.calculated += xDist.toFixed(2) + 'px ' + yDist.toFixed(2) + 'px ' + 0.3 + 'px ' + color + ', ';
1453
- }
1454
- // filter
1455
- effect.calculated = effect.calculated.replace(/, +$/,'');
1456
- //apply text shadow
1457
- self.updateTextShadowEffects(subject);
1458
- };
1459
- self.addShadow = function (subject, angle, distance, effectId) {
1460
- var depth = distance / 10,
1461
- rColor = 0,
1462
- gColor = 0,
1463
- bColor = 0,
1464
- i = 0,
1465
- speed = i,
1466
- xDist = 0,
1467
- yDist = 0,
1468
- color = '',
1469
- //get effect
1470
- effect = self.getElementsEffect(effectId);
1471
- if(angle === undefined) {
1472
- angle = 290;
1473
- }
1474
- if(effectId === undefined) {
1475
- effectId = 'textShadowValue';
1476
- }
1477
- // reset current elements calculated effect value
1478
- effect.calculated = '';
1479
- //generate text shadow value
1480
- //loop to depth
1481
- for(i = 0; i < depth; i++) {
1482
- if(i> 3 && i%3) continue;
1483
- //calculate x and y of next shadow
1484
- speed = 6;
1485
- xDist += speed * Math.sin(angle * Math.PI / 180);
1486
- yDist += speed * -Math.cos(angle * Math.PI / 180);
1487
- xDist = xDist;
1488
- yDist = yDist;
1489
- //lighten the next shadow a bit take 10%
1490
- rColor = Math.floor(rColor / 90 * 100);
1491
- gColor = Math.floor(gColor / 90 * 100);
1492
- bColor = Math.floor(bColor / 90 * 100);
1493
- color = 'rgba(' + rColor + ', ' + gColor + ', ' + bColor + ', 0.3)';
1494
- //put together shadow setting
1495
- effect.calculated += xDist.toFixed(2) + 'px ' + yDist.toFixed(2) + 'px ' + ((i+1)*2) + 'px ' + color + ', ';
1496
- }
1497
- // filter
1498
- effect.calculated = effect.calculated.replace(/, +$/,'');
1499
- //apply text shadow
1500
- self.updateTextShadowEffects(subject);
1501
- };*/
1502
  /*
1503
  * Remove shadow effect
1504
  *
@@ -1521,13 +1493,6 @@ self.updateTextShadowEffects(subject);
1521
  allShadows += effect.calculated;
1522
  }
1523
  }
1524
- //alert(allShadows);
1525
- /*
1526
- for(var ind in self.currentPreset.shadowEffects) {
1527
- var shadowEffect = self.currentPreset.shadowEffects[ind];
1528
- if(allShadows) allShadows += ', ';
1529
- allShadows += shadowEffect;
1530
- }*/
1531
  if (allShadows === '') {
1532
  allShadows = 'none';
1533
  }
@@ -1637,6 +1602,7 @@ allShadows += shadowEffect;
1637
  var preset = self.options.presets[parseInt(presetNo, 10)],
1638
  property,
1639
  found;
 
1640
  if (!preset) {
1641
  return;
1642
  }
@@ -1671,8 +1637,8 @@ allShadows += shadowEffect;
1671
  //select preset from dropdown
1672
  self.$presetsDropdown.val(presetNo);
1673
  /*
1674
- populate general fields
1675
- */
1676
  for (property in preset) {
1677
  found = $('body').find('input[title=' + property + ']');
1678
  if (found.length) {
@@ -1681,8 +1647,8 @@ populate general fields
1681
  }
1682
  }
1683
  /*
1684
- populate css fields
1685
- */
1686
  for (property in preset.styles) {
1687
  found = $('body').find('input[title=' + property + ']');
1688
  if (found.length) {
@@ -1693,27 +1659,64 @@ populate css fields
1693
  self.highlightCurrent();
1694
  //load effects
1695
  self.loadEffectSettings();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1696
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1697
  /**
1698
  *
1699
  * FONTS BROWSER
1700
  *
1701
  */
1702
  /*
1703
- Create HTML markup
1704
- */
1705
  self.createFontPanel = function () {
1706
  var i;
1707
- var iframe = '<iframe style="width:98%; height:200px; border:none; margin: 10px 1%" frameBorder="0" src="http://fontsforweb.com/user/pluginactivate?apikey=' + self.options.apikey + '&blogurl=' + fontBlogUrl + '"></iframe>';
1708
-
1709
  //create html withing font browser
1710
  self.$el.show();
1711
- self.$el.append($('<h1 class="draggableModalBar">Fonts browser<a class="closeModal" href="#">x</a></h1>'));
1712
- self.$el.append('<div class="tablinks"><a class="tablink" href="fontslist">Fontsforweb.com</a><a class="tablink" href="uploaded">Upload</a><a class="tablink" href="pro">PRO</a></div>');
1713
  self.$el.append('<div class="tab" id="fontslist"></div>');
1714
  self.$el.append('<div class="tab" id="uploaded"><div class="loading"></div></div>');
1715
- self.$el.append('<div class="tab" id="pro">' + iframe + '</div>');
1716
-
1717
  self.$el.find('.tab').hide();
1718
  self.$el.find('.tab').eq(0).show();
1719
  self.$el.find('.tablink').on('click', function (e) {
@@ -1728,7 +1731,7 @@ Create HTML markup
1728
  }
1729
  return false;
1730
  });
1731
- self.$el.css('right', '0')
1732
  .draggable({
1733
  handle: self.$el.find('.draggableModalBar')
1734
  });
@@ -1774,7 +1777,7 @@ Create HTML markup
1774
  data: {
1775
  apikey: self.options.apikey,
1776
  blogurl: fontBlogUrl,
1777
- ver: self.version
1778
  },
1779
  format: 'html'
1780
  },
@@ -1833,17 +1836,6 @@ Create HTML markup
1833
  //move carousel right
1834
  self.$el.find('.fcarousel-next').click();
1835
  });
1836
- /*
1837
- $.get(self.options.FFW_baseUrl + '/fontcategories/wpfontsforwebcategoryfonts/catid/' + categoryId, function (data) {
1838
- //if empty answer display error
1839
- if (!data || data === '') {
1840
- self.$el.html('<h1>An error has occurde</h1><p>Please reload page and try again later</p>');
1841
- }
1842
- //apply content to div
1843
- self.$el.find('#fontList').html(data);
1844
- //move carousel right
1845
- self.$el.find('.fcarousel-next').click();
1846
- });*/
1847
  return false;
1848
  });
1849
  //bind delete function
@@ -1920,6 +1912,7 @@ self.$el.find('.fcarousel-next').click();
1920
  type: 'text/css'
1921
  });
1922
  linkElement.appendTo(head);
 
1923
  return false;
1924
  }
1925
  });
@@ -1964,14 +1957,14 @@ self.$el.find('.fcarousel-next').click();
1964
  self.loadPrivateFonts();
1965
  //get info about the upload
1966
  /*$.getJSON(self.options.FFW_baseUrl + '/font/wpaddsummary', function (data) {
1967
- if (data.success === 'true') {
1968
- self.loadPrivateFonts();
1969
- } else {
1970
- alert('Font upload error. Check if file is not blocked against embedding.');
1971
- $('.fontUploadForm').show();
1972
- $('.fontUploading').hide();
1973
- }
1974
- });*/
1975
  });
1976
  }
1977
  };
@@ -1988,101 +1981,101 @@ $('.fontUploading').hide();
1988
  * @returns {unresolved}
1989
  */
1990
  self.bindGetSelector = function (add) {
1991
- //get selector
1992
- var selector = self.currentPreset.selector;
1993
- //add cancel button
1994
- if (!self.$cancelSelecting) {
1995
- self.$cancelSelecting = $('<a href="#" class="cancelSelecting">Stop selecting</a>');
1996
- $('body').append(self.$cancelSelecting);
1997
- self.$cancelSelecting.data('cancelSelecting', true);
1998
- //hide other elements
1999
- self.$presets.hide();
2000
- } else {
2001
- self.$cancelSelecting.show();
2002
- //hide other elements
2003
- self.$presets.hide();
2004
- }
2005
- $('a, button').on('click.selectionMode', function (e) {
2006
- e.preventDefault();
2007
- self.handleSelectionClick($(this), add);
2008
- return false;
2009
- });
2010
- $('body').on('click.selectionMode', '*', function (e) {
2011
- e.preventDefault();
2012
- self.handleSelectionClick($(this), add);
2013
- return false;
2014
- });
2015
- $('body').on('mouseover', '*', function () {
2016
- if ($(this).data('cancelSelecting')) {
2017
- return;
2018
- }
2019
- self.hoverSelector = self.getSelector(this);
2020
- self.hoverHighlightCurrent();
2021
- $(this).css('outline', '3px dashed rgba(50,50,250,0.7)');
2022
- (function () {
2023
- var element = $(this);
2024
- setTimeout(function () {
2025
- element.css('outline', 'none');
2026
- }, 100);
2027
- }());
2028
- return false;
2029
- });
2030
- $('body').on('mouseout', '*', function () {
2031
- $(this).css('outline', 'none');
2032
- return false;
2033
- });
2034
- };
2035
- /*
2036
- * Enter selection mode
2037
- *
2038
- */
2039
- self.handleSelectionClick = function ($el, add) {
2040
- //if this is cancel selecting button
2041
- if ($el.hasClass('cancelSelecting')) {
2042
- self.stopSelectionMode();
2043
- self.reloadPreset();
2044
- return;
2045
- }
2046
- //if the element's preset is already created just pick it up
2047
- if ($el.data('wired')) {
2048
- self.$cancelSelecting.css('outline', 'none');
2049
- self.stopSelectionMode();
2050
- self.loadPreset($el.data('presetNo'));
2051
- return false;
2052
- }
2053
- var sel = self.getSelector($el[0]),
2054
- selectorInput,
2055
- comma;
2056
- //return false;
2057
- //if not add to current preset mode
2058
- if (!add) {
2059
- self.stopSelectionMode();
2060
- var val = prompt('Name the selection i.e. title, header or paragraph. It\'ll be now listed in the upper left corner.');
2061
- //if not ask for new selection name
2062
- if (!val) {
2063
- self.bindGetSelector(add);
2064
- return false;
2065
- } else {
2066
- //create a new preset of given selector
2067
- self.createPreset(val, sel);
2068
- }
2069
- }
2070
- self.outlineAllPresets();
2071
- selectorInput = self.getField('selector');
2072
- if (add) {
2073
- comma = selectorInput.val() ? ', ' : '';
2074
- selectorInput.val(selectorInput.val() + comma + sel);
2075
- } else {
2076
- selectorInput.val(sel);
2077
- }
2078
- selectorInput.trigger('change');
2079
- self.stopSelectionMode();
2080
- self.highlightCurrent();
2081
- //load preset again to apply changes to a new element
2082
- if (add) {
2083
- self.reloadPreset();
2084
- }
2085
- };
2086
  /*
2087
  * Exit element selection mode
2088
  *
@@ -2092,8 +2085,8 @@ $('.fontUploading').hide();
2092
  self.stopSelectionMode = function () {
2093
  $('body').off('mouseover', '*');
2094
  $('body').off('click.selectionMode', '*');
2095
- $('a').off('.selectionMode');
2096
- $('button').off('.selectionMode');
2097
  $(this).css('outline', 'none');
2098
  $('body').off('mouseout', '*');
2099
  self.$cancelSelecting.hide();
@@ -2127,7 +2120,7 @@ $('.fontUploading').hide();
2127
  if (i < 2) {
2128
  //get id
2129
  //if(id = $parent.attr('id')) {
2130
- // parentSelector += '#' + id;
2131
  //}
2132
  //class names
2133
  classNames = $parent.attr("class");
@@ -2279,7 +2272,7 @@ $('.fontUploading').hide();
2279
  * make current element draggable
2280
  */
2281
  self.makeCurrentDraggable = function () {
2282
- var isMozilla = $.browser && $.browser.mozilla;
2283
  self.hightlighted.draggable({
2284
  drag: function (event, ui) {
2285
  var top = ui.position.top,
@@ -2522,20 +2515,20 @@ $('.fontUploading').hide();
2522
  *
2523
  */
2524
  /*
2525
- * set font for post or page in tinymce
2526
  */
2527
  self.setTinyMCEFont = function (fontId, fontName) {
2528
  //get selection
2529
  var selection = tinyMCE.activeEditor.selection.getContent(),
2530
  selectorValid,
2531
- $selectorContents,
2532
  fontClass,
2533
  node,
2534
  newSpan,
2535
  newHTML,
2536
  inserted,
2537
- $tempDiv,
2538
- multipleSelectors;
2539
  //only apply if something is selected
2540
  if (!selection) {
2541
  return;
@@ -2551,25 +2544,25 @@ $('.fontUploading').hide();
2551
  } catch (e) {
2552
  selectorValid = false;
2553
  }
2554
- if(selectorValid && $selectorContents.length > 1) {
2555
- selectorValid = false;
2556
- multipleSelectors = true;
2557
- }
2558
  if (selectorValid && ($.trim($(node).html()) === $.trim(selection) || $.trim($(node).html()) === $.trim($(selection).html()))) {
2559
  //console.log('already isolated');
2560
  tinyMCE.activeEditor.dom.setAttrib(node, 'class', fontClass);
2561
  } else if (multipleSelectors) {
2562
- $selectorContents.each(function () {
2563
- $(this).removePrefixedClasses('fontplugin_fontid_');
2564
- $(this).addClass(fontClass);
2565
-
2566
- $(this).attr('class').split(' ');
2567
- });
2568
- $tempDiv = $('<div>').append($selectorContents);
2569
- newHTML = $tempDiv.html();
2570
-
2571
  inserted = tinyMCE.activeEditor.selection.setContent(newHTML);
2572
- } else {
2573
  newSpan = $("<span class=\"" + fontClass + "\">" + selection + '</span>');
2574
  //get span html together with span itself
2575
  newHTML = $('<div>').append(newSpan.clone()).html();
@@ -2612,20 +2605,20 @@ $('.fontUploading').hide();
2612
  }
2613
  data.action = 'cross_domain_request';
2614
 
2615
- return $.ajax({
2616
- type: "POST",
2617
- url: ajaxproxy,
2618
- data: data,
2619
- success: function (response) {
2620
- if (typeof callback === 'function') {
2621
- callback(response);
2622
- }
2623
- },
2624
- dataType: params.format,
2625
- error: function (xhr, textStatus, errorThrown) {
2626
- alert("An error occurde. This might be a conflict with another plugin. Error message: " + textStatus);
2627
- }
2628
- });
2629
  };
2630
  /*
2631
  * show loading spinner
@@ -2666,46 +2659,6 @@ $('.fontUploading').hide();
2666
  self.shadowSupport = false;
2667
  }
2668
  };
2669
- /*
2670
- * API FUNCTIONS
2671
- */
2672
- /*
2673
- * check if api key is present in the database
2674
- */
2675
- self.checkForApikey = function () {
2676
- self.xhrPost({
2677
- url: self.options.FFW_baseUrl + '/api/getkey',
2678
- data: {
2679
- blogurl: fontBlogUrl,
2680
- apikey: self.options.apikey,
2681
- version: self.version
2682
- }
2683
- }, function (data) {
2684
- if (!data || data.success !== 'true') {
2685
- if (console !== undefined) console.log(data.message);
2686
- //alert(data.message);
2687
- alert('An error has occured and the plugin is not working. If you\'re working on local server, make sure \n\
2688
- that your computer has an internet connection.');
2689
- } else {
2690
- self.loadEffects(data.effects);
2691
- if (data.extended.length) {
2692
- self.loadExtendedFields(data.extended);
2693
- $('#upgradeToProButton').remove();
2694
- $('#extrafieldsSettings').show();
2695
- clearInterval(self.checkForApikeyInterval);
2696
- }
2697
- self.options.apikey = data.apikey;
2698
- }
2699
- });
2700
- };
2701
- //setup api key interval
2702
- self.setupApikeyCheckingInterval = function () {
2703
- if (!self.checkForApikeyInterval) {
2704
- self.checkForApikeyInterval = setInterval(function () {
2705
- self.checkForApikey();
2706
- }, 5000);
2707
- }
2708
- };
2709
  // finally INIT
2710
  self.init();
2711
  };
@@ -2732,7 +2685,6 @@ that your computer has an internet connection.');
2732
  * name - handle name
2733
  * label - visible label
2734
  *
2735
- *
2736
  */
2737
  var XYSlider = function (el, options) {
2738
  var self = this;
@@ -2765,7 +2717,7 @@ that your computer has an internet connection.');
2765
  left = ui.position.left,
2766
  // revert top: more is higher
2767
  y = -top,
2768
- x = left;
2769
  self.commitDrag(x, y, true);
2770
  }
2771
  });
@@ -2779,6 +2731,7 @@ that your computer has an internet connection.');
2779
  */
2780
  self.setPosition = function (x, y) {
2781
  var handle = self.$handle;
 
2782
  if (x !== false) {
2783
  self.x = x;
2784
  } else if (self.x === undefined) {
@@ -2802,7 +2755,7 @@ that your computer has an internet connection.');
2802
  // move x and y - revert top: more is higher
2803
  handle.css({
2804
  'top': -y + 'px',
2805
- 'left': x + 'px'
2806
  });
2807
  // commit drag
2808
  self.commitDrag(x, y, true);
36
  self.settingFields = [];
37
  self.effectSliders = [];
38
  /*
39
+ Initialize
40
+ */
41
  self.init = function () {
42
+ self.detectMode();
43
+ self.showLoading();
44
+ self.loadSettings();
45
+ if (!$.fn.on) {
46
+ alert('WARNING: You are using an old Wordpress version. It is not guaranteed that the plugin will work. The oldest tested Wordpress version is 3.1 but at least 3.3.1 is recommended.');
47
+ }
48
+ // detect CSS text-shadow support in JavaScript
49
+ if (document.createElement("detect").style.textShadow !== "") {
50
+ alert('Warning: your browser does not support advanced effects and all functions of the plugin. Please upgrade to Chrome, Firefox or Internet Explorer 10');
51
+ return;
52
+ }
53
  };
54
  /*
55
  *
67
  paramObj,
68
  upgrade;
69
  /*
70
+ PRESETS
71
+ */
72
  var modalOptions = {
73
  id: 'presetsPanel',
74
  name: 'stdSettings',
109
  self.renamePreset();
110
  });
111
  };
112
+ /**
113
+ Like? Yes or No
114
+ **/
115
+ self.addLikeYesNo = function () {
116
+ //add like not/like
117
+ self.$yesno = $('<div class="yesno">Like the plugin?<br><a href="http://fontsforweb.com/purchase/howtosupport?url=' + fontBlogUrl + '&name=' + fontBlogName + '" class="overlay_url yesbutton" data-upgrade="true">Yes!</a> or <a href="http://www.fontsforweb.com/contact/support" class="overlay_url nobutton">No</a></div>');
118
+ self.$yesno.appendTo(self.$actions);
119
+ self.$yesno.css({
120
+ 'color': '#fff',
121
+ 'font-size': '10px',
122
+ 'text-align': 'right',
123
+ 'font-weight': 'bold',
124
+ 'float': 'left',
125
+ 'margin-right': '10px'
126
+ });
127
+ self.$yesno.find('a').css({
128
+ 'font-size': '10px',
129
+ 'color': '#fff'
130
+ });
131
+ };
132
  /*
133
  * Create appearance panel - size and color
134
  *
143
  saveButton,
144
  upgrade;
145
  /*
146
+ SELECTORS
147
+ */
148
  //get standard fields in a new window
149
  var modalOptions = {
150
  id: 'appearancePanel',
171
  self.$extendedFields = $('<div id="appearanceExtendedFields"></div>').appendTo(modal);
172
  //get extended fields not ready
173
  /*var switcher = $('<a href="#" id="showExtendedFields">Load extended fields from FontsForWeb.com</a>').appendTo(self.$apr);
174
+ self.$extendedFields.hide();
175
+ switcher.on('click', function () { self.$extendedFields.slideToggle(); self.loadExtendedFields(); return false; });*/
176
  /*
177
+ Add all setting fields
178
+ */
179
  for (i = 0; i < self.options.settingFields.length; i += 1) {
180
  field = self.options.settingFields[i];
181
  paramObj = {};
223
  var actions = $('<fieldset id="actionsFieldset"></fieldset>');
224
  var closeMod = $('<a class="closeModal" href="#">x</a>');
225
  actions.append(closeMod);
226
+ self.$actions = actions;
227
  closeMod.click(function () {
228
  self.$presets.hide();
229
  self.$apr.hide();
230
  });
231
  //add different fields buttons
232
+ var fontfaceSettings = $('<button id="fontfaceSettings">Font</button>').prependTo(self.$apr);
233
  //add actions
234
  fontfaceSettings.on('click', function () {
235
  if (self.mode === 'global') {
250
  }
251
  self.showFontsBrowser();
252
  });
 
 
253
  // PRO settings window
254
+ var proSettings = $('<a href="http://fontsforweb.com/purchase/pluginupgradesubscribe?url=' + fontBlogUrl + '&name=' + fontBlogName + '" class="overlay_url" id="upgradeToProButton" data-upgrade="true">Pro settings</a>').appendTo(self.$apr);
255
  // extra fields
256
+ var extrafieldsSettings = $('<button id="extrafieldsSettings" class="toggleModal" data-modal-name="extrafields">PRO</button>').appendTo(self.$apr);
257
  // hide extra fields
258
  extrafieldsSettings.hide();
259
  // effects button
260
+ var effects = $('<button id="effectsButton" class="toggleModal" data-modal-name="effects">Effects</button>').appendTo(self.$apr);
261
  //add save button
262
  saveButton = $('<button id="fontSaveSettings">Save settings</button>').appendTo(actions);
263
  saveButton.click(function (e) {
270
  });
271
  self.saveSettings();
272
  });
 
273
  self.$apr.append(actions)
274
  };
275
+ /*
276
+ * API FUNCTIONS
277
+ */
278
+ /*
279
+ * check if api key is present in the database
280
+ */
281
+ self.checkForApikey = function () {
282
+ self.xhrPost({
283
+ url: self.options.FFW_baseUrl + '/api/getkey',
284
+ data: {
285
+ blogurl: fontBlogUrl,
286
+ apikey: self.options.apikey,
287
+ version: self.version
288
+ }
289
+ }, function (data) {
290
+ if (!data || data.success !== 'true') {
291
+ if (console !== undefined) console.log(data.message);
292
+ alert('An error has occured and the plugin is not working. If you\'re working on local server, make sure \n\
293
+ that your computer has an internet connection.');
294
+ } else {
295
+ self.loadEffects(data.effects);
296
+ if (data.extended.length) {
297
+ self.loadExtendedFields(data.extended);
298
+ $('#upgradeToProButton').remove();
299
+ $('#extrafieldsSettings').show();
300
+ clearInterval(self.checkForApikeyInterval);
301
+ }
302
+ self.options.apikey = data.apikey;
303
+ }
304
+ });
305
+ };
306
+ //setup api key interval
307
+ self.setupApikeyCheckingInterval = function () {
308
+ if (!self.checkForApikeyInterval) {
309
+ self.checkForApikeyInterval = setInterval(function () {
310
+ self.checkForApikey();
311
+ }, 5000);
312
+ }
313
+ };
314
  /*
315
  * SETTINGS - SAVE AND LOAD
316
  */
321
  var data = {
322
  action: 'get_font_settings'
323
  };
324
+ $.ajax({
325
+ type: "POST",
326
+ url: ajaxproxy,
327
+ data: data,
328
+ success: function (response) {
329
+ // json is coming parsed so no $.parseJSON(response);
330
+ try {
331
+ response = $.parseJSON(response);
332
+ } catch (e) {
333
+ self.tryAnotherAjaxproxy();
334
+ return;
335
+ }
336
+ //console.log(self.options);
337
+ if (response && response.settingFields) {
338
+ self.options = $.extend({}, response, self.options);
339
+ } else {
340
+ self.tryAnotherAjaxproxy();
341
+ return;
342
+ }
343
+ // try loading the plugin
344
+ try {
345
+ //console.log(self.options);
346
+ self.hideLoading();
347
+ // markup
348
+ self.createPresetsPanel();
349
+ self.createAppearancePanel();
350
+ self.createActionButtons();
351
+ self.loadPreset(0);
352
+ self.bindShowCategoriesAction();
353
+ self.bindShowFontsAction();
354
+ self.bindLinkOverlay();
355
+ self.setFontOnclick();
356
+ self.initUploadForm();
357
+ self.adaptOptionsToMode();
358
+ self.addLikeYesNo();
359
+ self.checkForApikey();
360
+ if(self.options.presets && self.options.presets[1]) {
361
+ self.loadPreset(1);
362
+ }
363
+ } catch (e) {
364
+ fQuery('#FFW_chooseFontButton, #content_FFWButton, #wp-admin-bar-font_settings > a').unbind();
365
+ fQuery('#fontplugin').data('fontPlugin', false);
366
+ engageCompatibilityMode (function () {
367
+ fQuery('#wp-admin-bar-font_settings > a').trigger('click');
368
+ }, e);
369
+ }
370
+ },
371
+ error: function (response) {
372
+ self.tryAnotherAjaxproxy();
373
+ }
374
+ });
375
+ };
376
+ self.tryAnotherAjaxproxy = function () {
377
+ if(ajaxproxy === ajaxproxy3) {
378
+ alert('Sorry, but the plugin couldn\'t start. Please contact your server administrator to allow AJAX use. Power users: Use console (F12 in Chrome) to see what else could be the problem.');
379
+ return;
380
+ }
381
+ else if(ajaxproxy === ajaxproxy2) {
382
+ ajaxproxy = ajaxproxy3;
383
+ } else {
384
+ ajaxproxy = ajaxproxy2;
385
+ }
386
+ self.loadSettings();
387
+ };
388
  /*
389
  * Save settings by ajax
390
  *
434
  self.options.presets[self.currentPresetNo].styles[settingName] = value;
435
  };
436
  /*
437
+ update selected element CSS
438
+ global - update element from selector
439
+ postPage - update selected text
440
+ */
 
 
 
 
 
 
 
 
 
 
441
  self.updateSelectedElement = function (settingName, value) {
442
  var selection,
443
  selector,
444
  selectorValid,
445
+ $selectorContents,
446
  element,
447
  node,
448
  justInsertedClass,
449
  newSpan,
450
  newHTML,
451
  inserted,
452
+ $tempDiv;
453
  if (!value || value == 'px') return;
454
  if (self.mode === 'global') {
455
  //VERSION FOR GENERAL SETTINGS PAGE
495
  } catch (e) {
496
  selectorValid = false;
497
  }
498
+ if(selectorValid && $selectorContents.length > 1) {
499
+ selectorValid = false;
500
+ }
501
  //get node
502
  node = tinyMCE.activeEditor.selection.getNode();
503
  if (selectorValid && ($.trim($(node).html()) === $.trim(selection) || $.trim($(node).html()) === $.trim($(selection).html()))) {
508
  justInsertedClass = 'inserted' + Math.floor(Math.random() * 10000);
509
  newSpan = $('<span id="' + justInsertedClass + '">' + selection + '</span>');
510
  newSpan.css(settingName, value);
511
+ $tempDiv = $('<div>').append(newSpan.clone());
512
+ $tempDiv.find('*').each(function () {
513
+ //if($(this).inlineStyle && $(this).inlineStyle(settingName)) {
514
+ $(this).css(settingName, value);
515
+ //}
516
+ });
517
  //get span html together with span itself
518
  newHTML = $tempDiv.html();
519
  inserted = tinyMCE.activeEditor.selection.setContent(newHTML);
537
  var modalOptions = {
538
  name: 'extrafields',
539
  title: 'Pro options',
540
+ left: '5px',
541
+ top: '40px',
542
  width: '270px'
543
  };
544
  var modal = self.createNewModal(modalOptions);
550
  self.addSettingsField(paramObj);
551
  }
552
  self.reloadPreset();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
553
  };
554
  /*
555
  * Add a field to selected place
557
  *
558
  * @returns {unresolved}
559
  * .field - field definition - no data or assignations here
560
+ * .settings - contain field settings
561
  */
562
+ self.addSettingsField = function (paramObj, loadDefaults) {
563
  var field = paramObj.field,
564
  thisField,
565
  thisInput,
568
  fieldset,
569
  fieldParam,
570
  container,
571
+ inputFields = [];
572
+ if(loadDefaults === undefined) {
573
+ loadDefaults = false;
574
+ }
575
  //add support for multi value field
576
  if (field.settingType == 'cssmultival') {
577
  if (!paramObj.target) {
630
  stop = true;
631
  // if xy slider set then add it
632
  XYSliderOptions.label = field.label;
633
+ if(field.invertX) {
634
+ XYSliderOptions.invertX = true;
635
+ }
636
  XYSliderOptions.settingName = paramObj.settings.uniqueId;
637
  var Mathra = Math.random();
638
  XYSliderOptions.actions = function (x, y, deg, distance) {
670
  var settings = $(this).data('settings'),
671
  fieldInfo = $(this).data('fieldInfo'),
672
  storage = $(this).data('storage'),
673
+ val = $(this).val(),
674
+ XYSliderX,
675
+ XYSliderY;
676
  if (stop === undefined) stop = false;
677
  // add arrow up - down support
678
+ //37 - left, 38 - up, 39 - right, 40 - down
 
 
 
679
  if (event.which === 38 && !isNaN(val)) {
680
  $(this).val(parseFloat(val) + 1);
681
  $(this).trigger('change');
687
  }
688
  // save param setting
689
  settings.params[fieldInfo.settingName] = val;
690
+
 
 
 
 
 
 
 
 
 
691
  //console.log($(this).data('fieldInfo').settingName + ', ' + $(this).val() + ', ' + ($(this).data('fieldInfo').unit || ''))
692
  //get values of all siblings and create one value for the element
693
  var completeValue = '';
702
  if ($(this).val() == '') {
703
  $(this).val(fieldInfo['default']);
704
  }
705
+ if (XYSlider && !stop && fieldInfo.handle) {
706
+ if (fieldInfo.handle.linkTo === 'x') {
707
+ XYSliderX = $(this).val();
708
+ } else if (fieldInfo.handle.linkTo === 'y') {
709
+ XYSliderY = $(this).val();
710
+ }
711
+ }
712
  });
713
+ // when changing value of the input move the handle too
714
+ // if this input is linked to a handle
715
+ if (XYSlider && !stop && fieldInfo.handle) {
716
+ // get "linked to" of a handle and move x or y accordingly
717
+ if (XYSliderX && XYSliderY) {
718
+ XYSlider.setPosition(XYSliderX, XYSliderY);
719
+ } else if (XYSliderX) {
720
+ XYSlider.setPosition(XYSliderX, false);
721
+ } else if (XYSliderY) {
722
+ XYSlider.setPosition(false, XYSliderY);
723
+ }
724
+ }
725
+ // when changing value of the input move the handle too
726
+ // if this input is linked to a handle
727
+ /*if (XYSlider && !stop && fieldInfo.handle) {
728
+ // get "linked to" of a handle and move x or y accordingly
729
+ if (fieldInfo.handle.linkTo === 'x') {
730
+ XYSlider.setPosition($(this).val(), false);
731
+ } else if (fieldInfo.handle.linkTo === 'y') {
732
+ XYSlider.setPosition(false, $(this).val());
733
+ }
734
+ }*/
735
  // if this is text-shadow
736
  if (field.settingName === 'text-shadow') {
737
  //var effect = self.getElementsEffect(settings.uniqueId);
799
  }
800
  return false;
801
  });
802
+
803
+ // load defaults
804
+ if(loadDefaults) {
805
+ for(var i = 0; i < inputs.length; i++) {
806
+ inputs.eq(i).trigger('change');
807
+ }
808
+ //
809
+ inputs.eq(0).trigger('change');
810
+ }
811
+
812
  //reset field button action
813
  fieldset.find('a.resetField').click(function () {
814
  thisInput.val('');
844
  thisInput.val('');
845
  thisInput.trigger('change');
846
  });
847
+ if(field.settingType === 'dropdown') {
848
+ thisInput = self.extendField(thisInput, 'dropdown');
849
+ } else {
850
+ thisInput = self.extendField(thisInput, field.extendWith);
851
+ }
852
  //general actions - apply settings
853
+ if (field.settingType === 'css' || field.settingType === 'dropdown') {
854
  //bind change to color picker
855
  thisInput.bind('change click keyup', function () {
856
  //console.log($(this).data('fieldInfo').settingName + ', ' + $(this).val() + ', ' + ($(this).data('fieldInfo').unit || ''))
933
  });
934
  return input;
935
  }());
936
+ } else if (extendWith === 'dropdown') {
937
+ var input = (function () {
938
+ var $dropdown = $('<select><option></option></select>'),
939
+ input = field,
940
+ fieldset = input.parents('fieldset'),
941
+ key;
942
+ fieldset.addClass('dropdown-extended');
943
+ fieldset.find('label').append($dropdown);
944
+ for(key in input.data('fieldInfo').dropdown) {
945
+ var val = input.data('fieldInfo').dropdown[key];
946
+ $dropdown.append('<option value="' + key + '">' + val + '</option>');
947
+ }
948
+ $dropdown.bind('change', function () {
949
+ input.val($(this).val());
950
+ input.trigger('change');
951
+ });
952
+ //bind value change to the size slider
953
+ input.bind('change click', function () {
954
+ var val = $(this).val();
955
+ if (val) {
956
+ $dropdown.val(val);
957
+ }
958
+ return false;
959
+ });
960
+ return input;
961
+ }());
962
  } else if (extendWith === 'colorPicker') {
963
  var input = (function () {
964
  var input = field;
1046
  self.loadEffects = function (data) {
1047
  var i,
1048
  field,
1049
+ paramObj,
1050
+ dropdown,
1051
  option,
1052
  field,
1053
  effectsList = $('<div class="effectsList">');
1054
  // save effects to array
1055
  self.effects = data;
1056
+ // Create effects modal
 
 
1057
  var modalOptions = {
1058
  id: 'effectsPanel',
1059
  name: 'effects', // name conflict was here
1079
  // change
1080
  dropdown.change(function () {
1081
  if ($(this).val() == 'upgrade') {
1082
+ var link = $('<a href="http://fontsforweb.com/purchase/pluginupgradesubscribe?url=' + fontBlogUrl + '&name=' + fontBlogName + '" class="overlay_url" id="upgradeToProButton" data-upgrade="true">Pro settings</a>').appendTo('body');
1083
  link.click();
1084
  link.remove();
1085
  return;
1102
  self.currentPreset.effects = newEffectsOrder;
1103
  // refresh text shadow effects
1104
  self.updateTextShadowEffects(self.currentElement);
1105
+ }
 
 
 
1106
  });
1107
  };
1108
  /*
1120
  if (effect.enabled) {
1121
  $effectItem.find('input[name=enabled]').attr("checked", "true");
1122
  }
1123
+ // go through all the parameters and set them accordingly
 
 
1124
  // clone object beforehand to avoid properties overwriting inside effect
1125
  var params = $.extend({}, effect.params);
1126
  for (var property in params) {
1140
  * @returns {unresolved}
1141
  */
1142
  self.unloadCurrentElementEffects = function () {
1143
+ //console.log(self.effectSliders, self.currentPreset, self.currentPreset.effects);
1144
+ if(self.currentPreset === undefined || self.currentPreset.effects === undefined) return;
1145
+ if (self.effectSliders && Object.size(self.effectSliders)) {
1146
+ // unload all handles
1147
+ for (var i = 0; i < self.currentPreset.effects.length; i++) {
1148
+ var effect = self.currentPreset.effects[i];
1149
+ if (self.effectSliders[effect.uniqueId]) {
1150
+ self.effectSliders[effect.uniqueId].hide();
1151
+ }
1152
  }
1153
  }
1154
  if (!self.modals['effects']) return;
1158
  * add effect to effects list
1159
  */
1160
  self.addEffect = function (settingName) {
1161
+ var effectSettings = {},
1162
+ loadDefaults = 1;
1163
  if (!self.currentPreset.effects) {
1164
  self.currentPreset.effects = [];
1165
  effectSettings.effectNo = 0;
1172
  // add effect settings to preset
1173
  self.currentPreset.effects.splice(0, 0, effectSettings);
1174
  // create entry
1175
+ return self.createEffectEntry(effectSettings, loadDefaults);
1176
  };
1177
  /*
1178
  * add effect to the list
1180
  * @param {type} effectId
1181
  * @returns {effect}
1182
  */
1183
+ self.createEffectEntry = function (effectSettings, loadDefaults) {
1184
  //if effects modal not created yet don't load effects
1185
  if (!self.modals['effects']) return;
1186
  var effectItem,
1191
  arrow = $('<a href="#" class="effectArrow"></a>'),
1192
  label = $('<a href="#" class="effectName">' + effectDefinition.label + '</a>'),
1193
  closeButton = $('<a href="#" class="removeEffect">x</a>');
1194
+ if(loadDefaults === undefined) {
1195
+ loadDefaults = 0;
1196
+ }
1197
  // create item markup
1198
  effectItem = $('<div>');
1199
  effectItem.append('<div class="label">');
1213
  paramObj.settings = effectSettings;
1214
  paramObj.target = effectParams;
1215
  paramObj.type = 'extrafields';
1216
+
1217
  // actions
1218
  label.click(function (e) {
1219
  if (effectParams.is(':visible')) {
1247
  self.disableEffect(effectSettings.uniqueId, effectItem);
1248
  }
1249
  });
1250
+ self.addSettingsField(paramObj, loadDefaults);
1251
  //add item reference in settings and settings in item
1252
  //effectSettings.el = effectItem; ERROR on stringify
1253
  effectItem.data('settings', effectSettings);
1316
  }
1317
  // delete shadow css
1318
  self.removeShadowEffect(effectId);
1319
+ if(self.effectSliders[effectId]) {
1320
+ // remove handle
1321
+ self.effectSliders[effectId].remove();
1322
+ }
1323
  // delete entry
1324
  $effectItem.remove();
1325
  };
1339
  }
1340
  };
1341
  /*
1342
+ draw effects
1343
+ options.target;
1344
+ options.deg;
1345
+ options.distance;
1346
+ options.effectId;
1347
+ options.effectsList;
1348
+ */
1349
  self.drawEffects = function (options) {
1350
  if (!self.shadowSupport) return false;
1351
  var depth = options.distance / 10,
1471
  //apply text shadow
1472
  self.updateTextShadowEffects(options.target);
1473
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1474
  /*
1475
  * Remove shadow effect
1476
  *
1493
  allShadows += effect.calculated;
1494
  }
1495
  }
 
 
 
 
 
 
 
1496
  if (allShadows === '') {
1497
  allShadows = 'none';
1498
  }
1602
  var preset = self.options.presets[parseInt(presetNo, 10)],
1603
  property,
1604
  found;
1605
+ self.unloadPreset();
1606
  if (!preset) {
1607
  return;
1608
  }
1637
  //select preset from dropdown
1638
  self.$presetsDropdown.val(presetNo);
1639
  /*
1640
+ populate general fields
1641
+ */
1642
  for (property in preset) {
1643
  found = $('body').find('input[title=' + property + ']');
1644
  if (found.length) {
1647
  }
1648
  }
1649
  /*
1650
+ populate css fields
1651
+ */
1652
  for (property in preset.styles) {
1653
  found = $('body').find('input[title=' + property + ']');
1654
  if (found.length) {
1659
  self.highlightCurrent();
1660
  //load effects
1661
  self.loadEffectSettings();
1662
+ self.loadFontPreview();
1663
+ };
1664
+ self.unloadPreset = function () {
1665
+ var $field,
1666
+ $input,
1667
+ $dropdown,
1668
+ key;
1669
+
1670
+ console.log(self.settingFields);
1671
+ // go through all fields
1672
+ for (key in self.settingFields) {
1673
+ $dropdown = [];
1674
+ $field = self.settingFields[key];
1675
+ $input = $field.find('input');
1676
+ $input.val('');
1677
+ //$input.trigger('change');
1678
+ $dropdown = $field.find('select');
1679
+ if($dropdown.length) {
1680
+ $dropdown.val('');
1681
+ $input.hide();
1682
+ }
1683
+ }
1684
+
1685
  };
1686
+ self.loadFontPreview = function () {
1687
+ var preset = self.currentPreset,
1688
+ imageUrl = '',
1689
+ originalBg = $('#fontfaceSettings').data('originalBackground');
1690
+ if(preset['fontid'] && preset['fontName']) {
1691
+ if(!originalBg) {
1692
+ $('#fontfaceSettings').data('originalBackground', $('#fontfaceSettings').css('backgroundImage'));
1693
+ }
1694
+ imageUrl = self.options.FFW_baseUrl + '/public/fonts/' + preset['fontid'] + '/' + preset['fontName'] + '.png';
1695
+ $('#fontfaceSettings').css({'backgroundImage': 'url(' + imageUrl + ')'});
1696
+ } else if(originalBg) {
1697
+ $('#fontfaceSettings').css({'backgroundImage': $('#fontfaceSettings').data('originalBackground')});
1698
+ }
1699
+ }
1700
  /**
1701
  *
1702
  * FONTS BROWSER
1703
  *
1704
  */
1705
  /*
1706
+ Create HTML markup
1707
+ */
1708
  self.createFontPanel = function () {
1709
  var i;
1710
+ var iframe = '<iframe style="width:98%; height:200px; border:none; margin: 10px 1%" frameBorder="0" src="http://fontsforweb.com/user/pluginactivate?apikey=' + self.options.apikey + '&blogurl=' + fontBlogUrl + '"></iframe>';
1711
+
1712
  //create html withing font browser
1713
  self.$el.show();
1714
+ self.$el.append($('<h1 class="draggableModalBar"><a class="closeModal" href="#">x</a></h1>'));
1715
+ self.$el.append('<div class="tablinks"><a class="tablink" href="fontslist">Fontsforweb.com</a><a class="tablink" href="uploaded">Upload</a><a class="tablink" href="pro">PRO settings</a></div>');
1716
  self.$el.append('<div class="tab" id="fontslist"></div>');
1717
  self.$el.append('<div class="tab" id="uploaded"><div class="loading"></div></div>');
1718
+ self.$el.append('<div class="tab" id="pro">' + iframe + '</div>');
1719
+
1720
  self.$el.find('.tab').hide();
1721
  self.$el.find('.tab').eq(0).show();
1722
  self.$el.find('.tablink').on('click', function (e) {
1731
  }
1732
  return false;
1733
  });
1734
+ self.$el.css('left', '0')
1735
  .draggable({
1736
  handle: self.$el.find('.draggableModalBar')
1737
  });
1777
  data: {
1778
  apikey: self.options.apikey,
1779
  blogurl: fontBlogUrl,
1780
+ ver: self.version
1781
  },
1782
  format: 'html'
1783
  },
1836
  //move carousel right
1837
  self.$el.find('.fcarousel-next').click();
1838
  });
 
 
 
 
 
 
 
 
 
 
 
1839
  return false;
1840
  });
1841
  //bind delete function
1912
  type: 'text/css'
1913
  });
1914
  linkElement.appendTo(head);
1915
+ self.loadFontPreview();
1916
  return false;
1917
  }
1918
  });
1957
  self.loadPrivateFonts();
1958
  //get info about the upload
1959
  /*$.getJSON(self.options.FFW_baseUrl + '/font/wpaddsummary', function (data) {
1960
+ if (data.success === 'true') {
1961
+ self.loadPrivateFonts();
1962
+ } else {
1963
+ alert('Font upload error. Check if file is not blocked against embedding.');
1964
+ $('.fontUploadForm').show();
1965
+ $('.fontUploading').hide();
1966
+ }
1967
+ });*/
1968
  });
1969
  }
1970
  };
1981
  * @returns {unresolved}
1982
  */
1983
  self.bindGetSelector = function (add) {
1984
+ //get selector
1985
+ var selector = self.currentPreset.selector;
1986
+ //add cancel button
1987
+ if (!self.$cancelSelecting) {
1988
+ self.$cancelSelecting = $('<a href="#" class="cancelSelecting">Stop selecting</a>');
1989
+ $('body').append(self.$cancelSelecting);
1990
+ self.$cancelSelecting.data('cancelSelecting', true);
1991
+ //hide other elements
1992
+ self.$presets.hide();
1993
+ } else {
1994
+ self.$cancelSelecting.show();
1995
+ //hide other elements
1996
+ self.$presets.hide();
1997
+ }
1998
+ $('a, button').on('click.selectionMode', function (e) {
1999
+ e.preventDefault();
2000
+ self.handleSelectionClick($(this), add);
2001
+ return false;
2002
+ });
2003
+ $('body').on('click.selectionMode', '*', function (e) {
2004
+ e.preventDefault();
2005
+ self.handleSelectionClick($(this), add);
2006
+ return false;
2007
+ });
2008
+ $('body').on('mouseover', '*', function () {
2009
+ if ($(this).data('cancelSelecting')) {
2010
+ return;
2011
+ }
2012
+ self.hoverSelector = self.getSelector(this);
2013
+ self.hoverHighlightCurrent();
2014
+ $(this).css('outline', '3px dashed rgba(50,50,250,0.7)');
2015
+ (function () {
2016
+ var element = $(this);
2017
+ setTimeout(function () {
2018
+ element.css('outline', 'none');
2019
+ }, 100);
2020
+ }());
2021
+ return false;
2022
+ });
2023
+ $('body').on('mouseout', '*', function () {
2024
+ $(this).css('outline', 'none');
2025
+ return false;
2026
+ });
2027
+ };
2028
+ /*
2029
+ * Enter selection mode
2030
+ *
2031
+ */
2032
+ self.handleSelectionClick = function ($el, add) {
2033
+ //if this is cancel selecting button
2034
+ if ($el.hasClass('cancelSelecting')) {
2035
+ self.stopSelectionMode();
2036
+ self.reloadPreset();
2037
+ return;
2038
+ }
2039
+ //if the element's preset is already created just pick it up
2040
+ if ($el.data('wired')) {
2041
+ self.$cancelSelecting.css('outline', 'none');
2042
+ self.stopSelectionMode();
2043
+ self.loadPreset($el.data('presetNo'));
2044
+ return false;
2045
+ }
2046
+ var sel = self.getSelector($el[0]),
2047
+ selectorInput,
2048
+ comma;
2049
+ //return false;
2050
+ //if not add to current preset mode
2051
+ if (!add) {
2052
+ self.stopSelectionMode();
2053
+ var val = prompt('Name the selection i.e. title, header or paragraph. It\'ll be now listed in the upper left corner.');
2054
+ //if not ask for new selection name
2055
+ if (!val) {
2056
+ self.bindGetSelector(add);
2057
+ return false;
2058
+ } else {
2059
+ //create a new preset of given selector
2060
+ self.createPreset(val, sel);
2061
+ }
2062
+ }
2063
+ self.outlineAllPresets();
2064
+ selectorInput = self.getField('selector');
2065
+ if (add) {
2066
+ comma = selectorInput.val() ? ', ' : '';
2067
+ selectorInput.val(selectorInput.val() + comma + sel);
2068
+ } else {
2069
+ selectorInput.val(sel);
2070
+ }
2071
+ selectorInput.trigger('change');
2072
+ self.stopSelectionMode();
2073
+ self.highlightCurrent();
2074
+ //load preset again to apply changes to a new element
2075
+ if (add) {
2076
+ self.reloadPreset();
2077
+ }
2078
+ };
2079
  /*
2080
  * Exit element selection mode
2081
  *
2085
  self.stopSelectionMode = function () {
2086
  $('body').off('mouseover', '*');
2087
  $('body').off('click.selectionMode', '*');
2088
+ $('a').off('.selectionMode');
2089
+ $('button').off('.selectionMode');
2090
  $(this).css('outline', 'none');
2091
  $('body').off('mouseout', '*');
2092
  self.$cancelSelecting.hide();
2120
  if (i < 2) {
2121
  //get id
2122
  //if(id = $parent.attr('id')) {
2123
+ // parentSelector += '#' + id;
2124
  //}
2125
  //class names
2126
  classNames = $parent.attr("class");
2272
  * make current element draggable
2273
  */
2274
  self.makeCurrentDraggable = function () {
2275
+ var isMozilla = $.browser && $.browser.mozilla;
2276
  self.hightlighted.draggable({
2277
  drag: function (event, ui) {
2278
  var top = ui.position.top,
2515
  *
2516
  */
2517
  /*
2518
+ * set font for post or page in tinymce
2519
  */
2520
  self.setTinyMCEFont = function (fontId, fontName) {
2521
  //get selection
2522
  var selection = tinyMCE.activeEditor.selection.getContent(),
2523
  selectorValid,
2524
+ $selectorContents,
2525
  fontClass,
2526
  node,
2527
  newSpan,
2528
  newHTML,
2529
  inserted,
2530
+ $tempDiv,
2531
+ multipleSelectors;
2532
  //only apply if something is selected
2533
  if (!selection) {
2534
  return;
2544
  } catch (e) {
2545
  selectorValid = false;
2546
  }
2547
+ if(selectorValid && $selectorContents.length > 1) {
2548
+ selectorValid = false;
2549
+ multipleSelectors = true;
2550
+ }
2551
  if (selectorValid && ($.trim($(node).html()) === $.trim(selection) || $.trim($(node).html()) === $.trim($(selection).html()))) {
2552
  //console.log('already isolated');
2553
  tinyMCE.activeEditor.dom.setAttrib(node, 'class', fontClass);
2554
  } else if (multipleSelectors) {
2555
+ $selectorContents.each(function () {
2556
+ $(this).removePrefixedClasses('fontplugin_fontid_');
2557
+ $(this).addClass(fontClass);
2558
+
2559
+ $(this).attr('class').split(' ');
2560
+ });
2561
+ $tempDiv = $('<div>').append($selectorContents);
2562
+ newHTML = $tempDiv.html();
2563
+
2564
  inserted = tinyMCE.activeEditor.selection.setContent(newHTML);
2565
+ } else {
2566
  newSpan = $("<span class=\"" + fontClass + "\">" + selection + '</span>');
2567
  //get span html together with span itself
2568
  newHTML = $('<div>').append(newSpan.clone()).html();
2605
  }
2606
  data.action = 'cross_domain_request';
2607
 
2608
+ return $.ajax({
2609
+ type: "POST",
2610
+ url: ajaxproxy,
2611
+ data: data,
2612
+ success: function (response) {
2613
+ if (typeof callback === 'function') {
2614
+ callback(response);
2615
+ }
2616
+ },
2617
+ dataType: params.format,
2618
+ error: function (xhr, textStatus, errorThrown) {
2619
+ alert("An error occurde. This might be a conflict with another plugin. Error message: " + textStatus);
2620
+ }
2621
+ });
2622
  };
2623
  /*
2624
  * show loading spinner
2659
  self.shadowSupport = false;
2660
  }
2661
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2662
  // finally INIT
2663
  self.init();
2664
  };
2685
  * name - handle name
2686
  * label - visible label
2687
  *
 
2688
  */
2689
  var XYSlider = function (el, options) {
2690
  var self = this;
2717
  left = ui.position.left,
2718
  // revert top: more is higher
2719
  y = -top,
2720
+ x = options.invertX ? -left : left;
2721
  self.commitDrag(x, y, true);
2722
  }
2723
  });
2731
  */
2732
  self.setPosition = function (x, y) {
2733
  var handle = self.$handle;
2734
+
2735
  if (x !== false) {
2736
  self.x = x;
2737
  } else if (self.x === undefined) {
2755
  // move x and y - revert top: more is higher
2756
  handle.css({
2757
  'top': -y + 'px',
2758
+ 'left': (options.invertX ? -x : x) + 'px'
2759
  });
2760
  // commit drag
2761
  self.commitDrag(x, y, true);
js/pluginscripts.js CHANGED
@@ -1,67 +1,70 @@
1
  // JavaScript Document
2
  jQuery(document).ready(function () {
3
- clearInterval(documentLoaded);
4
- // if there's no "draggable" then something's wrong so load provided jquery ui
5
- if(!jQuery.fn.fontPlugin || !jQuery.ui || !jQuery.ui.draggable || !jQuery.fn.on) {
6
- engageCompatibilityMode();
7
- } else {
8
- fQuery = jQuery;
9
- initializeFontPlugin();
10
- }
11
  });
12
  // this won't run unless jquery is completely overwritten by some plugin
13
  var documentLoaded = setInterval(function () {
14
- if(document.readyState === "complete") {
15
- engageCompatibilityMode();
16
- // stop checking if the document is laoded
17
- clearInterval(documentLoaded);
18
- }
19
  }, 100);
20
 
21
- function engageCompatibilityMode (callback) {
22
- jQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/jquery-1.10.2.min.js', function () {
23
- fQuery = jQuery.noConflict(true);
24
- fQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/jquery-ui-1.9.2.custom.min.js', function () {
25
- fQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/colorpicker.js');
26
- fQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/jquery.fcarousel.min.js');
27
- fQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/jquery.fontPlugin.js', function () {
28
- initializeFontPlugin(true);
29
- if(callback !== undefined) {
30
- callback();
31
- }
32
- });
33
- });
34
- });
 
 
 
35
  }
36
 
37
  function initializeFontPlugin (compatibilityMode) {
38
- if(compatibilityMode === undefined) {
39
- compatibilityMode = false;
40
- }
41
- /*
42
  show font plugin browser BUTTON
43
  */
44
  'use strict';
45
  fQuery('#FFW_chooseFontButton, #content_FFWButton, #wp-admin-bar-font_settings > a').bind('click', function (e) {
46
- e.preventDefault();
47
-
48
  //if initialized already just toggle
49
  if (fQuery('#fontplugin')[0] && fQuery('#fontplugin').data('fontPlugin') && fQuery('#fontplugin').data('fontPlugin').$presets) {
50
  fQuery('#fontplugin').data('fontPlugin').$presets.fadeToggle(500);
51
  } else {
52
- if(compatibilityMode) {
53
- alert('WARNING: Font plugin is running in safe mode. \n\n It may not work correctly! \n\nWhy?\n\nThis is usually caused by a conflict with a poorly written plugin.\n\n Try disabling all other plugins and then see if Font plugin starts without this message. If that works, enable other plguins one by one to find the one, which is causing the conflict.');
54
- }
55
- window.onbeforeunload = function () {
56
- return 'Have you saved the changes?';
57
- };
58
-
59
  //open jquery plugin
60
  var fontPluginWrapper = fQuery('<div id="fontplugin" class="draggableModal"></div>'),
61
  settings;
62
  fontPluginWrapper.appendTo('body');
63
  settings = {
64
- "compatibilityMode" : compatibilityMode,
65
  "settingFields": [
66
  {
67
  "type": "text",
@@ -89,29 +92,29 @@ function initializeFontPlugin (compatibilityMode) {
89
  "extendWith": "colorPicker"
90
  }]
91
  };
92
- if(!fQuery.fontPlugin) {
93
- fQuery.fn.fontPlugin = fontPlugin;
94
- }
95
 
96
- try {
97
- fontPluginWrapper.fontPlugin(settings);
98
- } catch (e) {
99
- alert('The plugin cannot start because of an error. This is usually caused by a conflict with a poorly written plugin. Try disabling all other plugins and then see if the "Font" plugin works. If that works, enable them one by one to find the one, which is causing the conflict.');
100
- }
101
  }
102
  return false;
103
  });
104
-
105
- // extend with object size
106
- if(!Object.size) {
107
- Object.size = function(obj) {
108
- var size = 0, key;
109
- for (key in obj) {
110
- if (obj.hasOwnProperty(key)) size++;
111
- }
112
- return size;
113
- };
114
- }
115
  //make image colorpickable
116
  /*function makeImagesColorpickable() {
117
  var image = fQuery("#header1preview").contents().find('img');
@@ -159,7 +162,7 @@ function initializeFontPlugin (compatibilityMode) {
159
  };
160
  // The style function
161
  fQuery.fn.style = function (styleName, value, priority) {
162
- //console.log(styleName + ' - ' + value + ' - ' + priority);
163
  var node,
164
  style;
165
  // For those who need them (< IE 9), add support for CSS functions
@@ -214,54 +217,54 @@ function initializeFontPlugin (compatibilityMode) {
214
  return style;
215
  }
216
  };
217
- if(!fQuery.fn.inlineStyle) {
218
- fQuery.fn.inlineStyle = function (prop) {
219
- return this.prop("style")[fQuery.camelCase(prop)];
220
- };
221
- }
222
- (function ($) {
223
- $.fn.removePrefixedClasses = function (prefix) {
224
- if(!$(this).attr('class')) return;
225
- var classNames = $(this).attr('class').split(' '),
226
- className,
227
- newClassNames = [],
228
- i;
229
- //loop class names
230
- for(i = 0; i < classNames.length; i++) {
231
- className = classNames[i];
232
- // if prefix not found at the beggining of class name
233
- if(className.indexOf(prefix) !== 0) {
234
- newClassNames.push(className);
235
- continue;
236
- }
237
- }
238
- // write new list excluding filtered classNames
239
- $(this).attr('class', newClassNames.join(' '));
240
- };
241
- }(fQuery));
242
-
243
- if(!fQuery.fn.animateRotate) {
244
- fQuery.fn.animateRotate = function(angle, duration, easing, complete) {
245
- return this.each(function() {
246
- var $elem = fQuery(this);
247
- var currentRotationAngle = $elem.data('rotation');
248
- if(currentRotationAngle === undefined) {
249
- currentRotationAngle = 0;
250
- }
251
- $elem.data('rotation', angle);
252
 
253
- fQuery({deg: currentRotationAngle}).animate({deg: angle}, {
254
- duration: duration,
255
- easing: easing,
256
- step: function(now) {
257
-
258
- $elem.css({
259
- transform: 'rotate(' + now + 'deg)'
260
- });
261
- },
262
- complete: complete || fQuery.noop
263
- });
264
- });
265
- };
266
- }
267
  }
1
  // JavaScript Document
2
  jQuery(document).ready(function () {
3
+ clearInterval(documentLoaded);
4
+ // if there's no "draggable" then something's wrong so load provided jquery ui
5
+ if(!jQuery.fn.fontPlugin || !jQuery.ui || !jQuery.ui.draggable || !jQuery.fn.on) {
6
+ engageCompatibilityMode();
7
+ } else {
8
+ fQuery = jQuery;
9
+ initializeFontPlugin();
10
+ }
11
  });
12
  // this won't run unless jquery is completely overwritten by some plugin
13
  var documentLoaded = setInterval(function () {
14
+ if(document.readyState === "complete") {
15
+ engageCompatibilityMode();
16
+ // stop checking if the document is laoded
17
+ clearInterval(documentLoaded);
18
+ }
19
  }, 100);
20
 
21
+ function engageCompatibilityMode (callback, e) {
22
+ if(e !== undefined) {
23
+ alert(e.message);
24
+ }
25
+ jQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/jquery-1.10.2.min.js', function () {
26
+ fQuery = jQuery.noConflict(true);
27
+ fQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/jquery-ui-1.9.2.custom.min.js', function () {
28
+ fQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/colorpicker.js');
29
+ fQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/jquery.fcarousel.min.js');
30
+ fQuery.getScript(fontBlogUrl + '/wp-content/plugins/font/js/jquery.fontPlugin.js', function () {
31
+ initializeFontPlugin(true);
32
+ if(callback !== undefined) {
33
+ callback();
34
+ }
35
+ });
36
+ });
37
+ });
38
  }
39
 
40
  function initializeFontPlugin (compatibilityMode) {
41
+ if(compatibilityMode === undefined) {
42
+ compatibilityMode = false;
43
+ }
44
+ /*
45
  show font plugin browser BUTTON
46
  */
47
  'use strict';
48
  fQuery('#FFW_chooseFontButton, #content_FFWButton, #wp-admin-bar-font_settings > a').bind('click', function (e) {
49
+ e.preventDefault();
50
+
51
  //if initialized already just toggle
52
  if (fQuery('#fontplugin')[0] && fQuery('#fontplugin').data('fontPlugin') && fQuery('#fontplugin').data('fontPlugin').$presets) {
53
  fQuery('#fontplugin').data('fontPlugin').$presets.fadeToggle(500);
54
  } else {
55
+ if(compatibilityMode) {
56
+ alert('WARNING: Font plugin is running in safe mode. \n\n It may not work correctly! \n\nWhy?\n\nThis is usually caused by a conflict with a poorly written plugin.\n\n Try disabling all other plugins and then see if Font plugin starts without this message. If that works, enable other plguins one by one to find the one, which is causing the conflict.');
57
+ }
58
+ window.onbeforeunload = function () {
59
+ return 'Have you saved the changes?';
60
+ };
61
+
62
  //open jquery plugin
63
  var fontPluginWrapper = fQuery('<div id="fontplugin" class="draggableModal"></div>'),
64
  settings;
65
  fontPluginWrapper.appendTo('body');
66
  settings = {
67
+ "compatibilityMode" : compatibilityMode,
68
  "settingFields": [
69
  {
70
  "type": "text",
92
  "extendWith": "colorPicker"
93
  }]
94
  };
95
+ if(!fQuery.fontPlugin) {
96
+ fQuery.fn.fontPlugin = fontPlugin;
97
+ }
98
 
99
+ try {
100
+ fontPluginWrapper.fontPlugin(settings);
101
+ } catch (e) {
102
+ alert('The plugin cannot start because of an error. This is usually caused by a conflict with a poorly written plugin. Try disabling all other plugins and then see if the "Font" plugin works. If that works, enable them one by one to find the one, which is causing the conflict.');
103
+ }
104
  }
105
  return false;
106
  });
107
+
108
+ // extend with object size
109
+ if(!Object.size) {
110
+ Object.size = function(obj) {
111
+ var size = 0, key;
112
+ for (key in obj) {
113
+ if (obj.hasOwnProperty(key)) size++;
114
+ }
115
+ return size;
116
+ };
117
+ }
118
  //make image colorpickable
119
  /*function makeImagesColorpickable() {
120
  var image = fQuery("#header1preview").contents().find('img');
162
  };
163
  // The style function
164
  fQuery.fn.style = function (styleName, value, priority) {
165
+ //console.log(styleName + ' - ' + value + ' - ' + priority);
166
  var node,
167
  style;
168
  // For those who need them (< IE 9), add support for CSS functions
217
  return style;
218
  }
219
  };
220
+ if(!fQuery.fn.inlineStyle) {
221
+ fQuery.fn.inlineStyle = function (prop) {
222
+ return this.prop("style")[fQuery.camelCase(prop)];
223
+ };
224
+ }
225
+ (function ($) {
226
+ $.fn.removePrefixedClasses = function (prefix) {
227
+ if(!$(this).attr('class')) return;
228
+ var classNames = $(this).attr('class').split(' '),
229
+ className,
230
+ newClassNames = [],
231
+ i;
232
+ //loop class names
233
+ for(i = 0; i < classNames.length; i++) {
234
+ className = classNames[i];
235
+ // if prefix not found at the beggining of class name
236
+ if(className.indexOf(prefix) !== 0) {
237
+ newClassNames.push(className);
238
+ continue;
239
+ }
240
+ }
241
+ // write new list excluding filtered classNames
242
+ $(this).attr('class', newClassNames.join(' '));
243
+ };
244
+ }(fQuery));
245
+
246
+ if(!fQuery.fn.animateRotate) {
247
+ fQuery.fn.animateRotate = function(angle, duration, easing, complete) {
248
+ return this.each(function() {
249
+ var $elem = fQuery(this);
250
+ var currentRotationAngle = $elem.data('rotation');
251
+ if(currentRotationAngle === undefined) {
252
+ currentRotationAngle = 0;
253
+ }
254
+ $elem.data('rotation', angle);
255
 
256
+ fQuery({deg: currentRotationAngle}).animate({deg: angle}, {
257
+ duration: duration,
258
+ easing: easing,
259
+ step: function(now) {
260
+
261
+ $elem.css({
262
+ transform: 'rotate(' + now + 'deg)'
263
+ });
264
+ },
265
+ complete: complete || fQuery.noop
266
+ });
267
+ });
268
+ };
269
+ }
270
  }
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: http://fontsforweb.com/
4
  Tags: fonts, web fonts, font, fonts plugin, typekit, google webfont, TinyMCE plugin, ajax, webfonts
5
  Requires at least: 2.8.0
6
  Tested up to: 3.8.1
7
- Stable tag: 7.2.0
8
  Finally official* web fonts plugin for wordpress. CLICK ON ANYTHING TO CHANGE IT(see screenshots)! Then change color, size and font face using sliders and color picker!
9
  == Description ==
10
  Finally official web fonts plugin for wordpress. No need for any coding at all! How? This plugin has an unique method of recognizing of what you click at!
@@ -169,6 +169,11 @@ Minor bug fixes
169
  = 7.2.0 =
170
  -Fixed conflicted function name
171
  -Added activation tab
 
 
 
 
 
172
 
173
  == Upgrade Notice ==
174
  = 5.00 =
@@ -290,7 +295,11 @@ Fixed:
290
  = 7.2.0 =
291
  -Fixed conflicted function name
292
  -Added activation tab
293
-
 
 
 
 
294
 
295
  == Arbitrary section ==
296
  == Source ==
4
  Tags: fonts, web fonts, font, fonts plugin, typekit, google webfont, TinyMCE plugin, ajax, webfonts
5
  Requires at least: 2.8.0
6
  Tested up to: 3.8.1
7
+ Stable tag: 7.3.0
8
  Finally official* web fonts plugin for wordpress. CLICK ON ANYTHING TO CHANGE IT(see screenshots)! Then change color, size and font face using sliders and color picker!
9
  == Description ==
10
  Finally official web fonts plugin for wordpress. No need for any coding at all! How? This plugin has an unique method of recognizing of what you click at!
169
  = 7.2.0 =
170
  -Fixed conflicted function name
171
  -Added activation tab
172
+ = 7.3.0 =
173
+ -Fixed sustainging values when changing preset
174
+ -Refreshed design to be more flat
175
+ -Minor tweaks here and there
176
+ -added current font preview
177
 
178
  == Upgrade Notice ==
179
  = 5.00 =
295
  = 7.2.0 =
296
  -Fixed conflicted function name
297
  -Added activation tab
298
+ = 7.3.0 =
299
+ -Fixed sustainging values when changing preset
300
+ -Refreshed design to be more flat
301
+ -Minor tweaks here and there
302
+ -added current font preview
303
 
304
  == Arbitrary section ==
305
  == Source ==