Post Grid - Version 1.2

Version Description

  • 05/03/2015 remove- removed some options.
    • 05/03/2015 add- grid layout builder.
Download this release

Release Info

Developer paratheme
Plugin Icon 128x128 Post Grid
Version 1.2
Comparing to
See all releases

Code changes from version 1.1 to 1.2

Files changed (35) hide show
  1. ParaAdmin/ParaAdminClass.php +245 -0
  2. ParaAdmin/css/ParaAdmin.css +71 -75
  3. ParaAdmin/css/icons/dark/browser-firefox.png +0 -0
  4. ParaAdmin/css/icons/dark/device-monitor.png +0 -0
  5. ParaAdmin/css/icons/dark/globe.png +0 -0
  6. ParaAdmin/css/icons/dark/keywords.png +0 -0
  7. ParaAdmin/css/icons/dark/map-pin.png +0 -0
  8. ParaAdmin/css/icons/dark/os-apple.png +0 -0
  9. ParaAdmin/css/icons/dark/os-windows.png +0 -0
  10. ParaAdmin/css/icons/dark/page.png +0 -0
  11. ParaAdmin/css/icons/dark/share-hub.png +0 -0
  12. ParaAdmin/css/icons/dark/user-crowd.png +0 -0
  13. ParaAdmin/css/icons/dark/user-group.png +0 -0
  14. admin/css/style.css +181 -0
  15. admin/js/color-picker.js +10 -0
  16. admin/js/hs.png +0 -0
  17. admin/js/hv.png +0 -0
  18. admin/js/jscolor.js +997 -0
  19. {js → admin/js}/scripts.js +37 -33
  20. css/icons/facebook.png +0 -0
  21. css/icons/gplus.png +0 -0
  22. css/icons/link.png +0 -0
  23. css/icons/twitter.png +0 -0
  24. css/icons/zoom.png +0 -0
  25. css/style.css +66 -172
  26. includes/PostGridClass.php +195 -0
  27. includes/post-grid-functions.php +2 -103
  28. includes/post-grid-meta.php +128 -95
  29. post-grid-help.php +1 -1
  30. post-grid.php +52 -14
  31. readme.txt +18 -5
  32. themes/flat/index.php +350 -102
  33. themes/flat/style.css +50 -4
  34. themes/rounded/index.php +348 -101
  35. themes/rounded/style.css +2 -2
ParaAdmin/ParaAdminClass.php ADDED
@@ -0,0 +1,245 @@
1
+ <?php
2
+
3
+ // ParaAdmin Class
4
+
5
+ class paraAdmin
6
+ {
7
+ var $options = array();
8
+
9
+
10
+ function option_output($options_all, $options_tabs)
11
+ {
12
+ $html = '';
13
+ $html .= '<div class="para-settings">';
14
+
15
+ $html .= '<ul class="tab-nav">';
16
+
17
+ $i=1;
18
+ foreach($options_tabs as $id => $tabs)
19
+ {
20
+ if($i==1)
21
+ {
22
+ $active = 'active';
23
+ }
24
+ else
25
+ {
26
+ $active = '';
27
+ }
28
+
29
+ $html.= '<li nav="'.$i.'" class="tab'.$i.' '.$active.' ">'.$tabs.'</li>';
30
+
31
+ $i++;
32
+ }
33
+ $html .= '</ul>';
34
+
35
+
36
+
37
+ $html .= '<ul class="box">';
38
+
39
+ $j = 1;
40
+ foreach($options_tabs as $id => $tabs)
41
+ {
42
+ if($j==1)
43
+ {
44
+ $active = 'active';
45
+ $display = 'block';
46
+ }
47
+ else
48
+ {
49
+ $active = '';
50
+ $display = 'none';
51
+ }
52
+ $html.= '<li style="display: '.$display.';" class="box'.$j.' tab-box '.$active.'">';
53
+ foreach($options_all[$id] as $id => $options)
54
+ {
55
+ foreach($options as $option)
56
+
57
+ $css_class = $options['css_class'];
58
+ $title = $options['title'];
59
+ $option_details = $options['option_details'];
60
+ $input_type = $options['input_type'];
61
+ $input_values = $options['input_values'];
62
+
63
+ $html.= '<div class="option-box">';
64
+
65
+ $html.= '<p class="option-title">'.$title.'</p>';
66
+ $html.= '<p class="option-info">'.$option_details.'</p>';
67
+
68
+ $html.= $this->input_type($input_type, $input_values, $id, $css_class);
69
+
70
+ $html.= '</div>';
71
+
72
+ }
73
+ $html.= '</li>';
74
+
75
+ $j++;
76
+ }
77
+ $html .= '</ul>';
78
+
79
+
80
+
81
+
82
+
83
+
84
+
85
+
86
+ $html .= '</div>';
87
+
88
+
89
+ return $html;
90
+
91
+ }
92
+
93
+
94
+ function input_type($input_type, $input_values, $id, $css_class)
95
+ {
96
+
97
+
98
+
99
+ $html ='';
100
+ if($input_type == 'text')
101
+ {
102
+
103
+ $option_id_value = get_option( $id );
104
+ if(empty($option_id_value))
105
+ {
106
+ $option_id_value = '';
107
+ }
108
+
109
+
110
+
111
+ $html.= '<input name="'.$id.'" type="text" value="'.$option_id_value.'" id="'.$id.'" class="'.$css_class.'" />';
112
+ }
113
+
114
+ elseif($input_type == 'textarea')
115
+ {
116
+
117
+ $option_id_value = get_option( $id );
118
+
119
+ if(!empty($option_id_value))
120
+ {
121
+ $value = $option_id_value;
122
+ }
123
+ else
124
+ {
125
+ $value = $input_values;
126
+ }
127
+
128
+
129
+
130
+ $html.= '<textarea name="'.$id.'" type="text" id="'.$id.'" class="'.$css_class.'" >'.$value.'</textarea>';
131
+ }
132
+
133
+
134
+
135
+
136
+
137
+ elseif($input_type == 'checkbox')
138
+ {
139
+
140
+ foreach($input_values as $key => $value)
141
+ {
142
+
143
+
144
+
145
+ $option_key_value = get_option( $key );
146
+ if(empty($option_key_value))
147
+ {
148
+ $option_key_value = '';
149
+ $checked = '';
150
+ }
151
+ else
152
+ {
153
+ $checked = 'checked';
154
+ }
155
+
156
+
157
+
158
+ $html.= '<label>';
159
+
160
+ $html.= '<input name="'.$key.'" type="checkbox" '.$checked.' value="1" id="'.$key.'" class="'.$css_class.'" /> '.$value;
161
+ $html.= '</label><br />';
162
+ }
163
+
164
+
165
+ }
166
+
167
+ elseif($input_type == 'select')
168
+ {
169
+
170
+
171
+ $html.= '<select name="'.$id.'" id="'.$id.'" class="'.$css_class.'">';
172
+ foreach($input_values as $key => $value)
173
+ {
174
+
175
+
176
+ $option_id_value = get_option( $id );
177
+ if($option_id_value == $key )
178
+ {
179
+ $selected = 'selected';
180
+
181
+ }
182
+ else
183
+ {
184
+ $selected = '';
185
+ }
186
+
187
+
188
+
189
+ $html.= '<option '.$selected.' value="'.$key.'" >'.$value.'</option>';
190
+ }
191
+ $html.= '</select>';
192
+
193
+ }
194
+
195
+
196
+ elseif($input_type == 'radio')
197
+ {
198
+
199
+ foreach($input_values as $key => $value)
200
+ {
201
+ $html.= '<label>';
202
+
203
+ $option_id_value = get_option( $id );
204
+ if($option_id_value == $key )
205
+ {
206
+ $checked = 'checked';
207
+
208
+ }
209
+ else
210
+ {
211
+ $checked = '';
212
+ }
213
+
214
+
215
+
216
+
217
+ $html.= '<input '.$checked.' class="'.$css_class.'" id="'.$key.'" type="radio" name="'.$id.'" value="'.$key.'" >'.$value.'</option> ';
218
+ $html.= '</label><br />';
219
+ }
220
+
221
+
222
+ }
223
+
224
+
225
+
226
+
227
+
228
+
229
+
230
+ return $html;
231
+ }
232
+
233
+
234
+
235
+
236
+
237
+
238
+
239
+
240
+
241
+
242
+
243
+ }
244
+
245
+
ParaAdmin/css/ParaAdmin.css CHANGED
@@ -77,19 +77,6 @@
77
78
79
80
- .para-settings ul.voting-bg-img-list{}
81
-
82
- .para-settings ul.voting-bg-img-list li {
83
- display: inline-block;
84
- margin: 5px;
85
- }
86
- .para-settings ul.voting-bg-img-list li.bg-selected {}
87
-
88
- .para-settings ul.voting-bg-img-list li img{border: 2px solid #ffffff;}
89
-
90
- .para-settings ul.voting-bg-img-list li.bg-selected img{
91
- border: 2px solid #ff5a11;
92
- }
93
94
95
.para-settings h2 {
@@ -98,47 +85,6 @@
98
margin: 25px 0;
99
}
100
101
- .para-settings .pricing-table{
102
-
103
- }
104
-
105
- .para-settings .pricing-table .column {
106
- border-bottom: 1px solid #ff9601;
107
- border-left: 1px solid #ff9601;
108
- border-top: 1px solid #ff9601;
109
- display: inline-block;
110
- float: left;
111
- text-align: center;
112
- vertical-align: top;
113
- width: 48%;
114
- }
115
-
116
- .para-settings .pricing-table .column:last-child {
117
- border-right: 1px solid #ff9601;
118
- }
119
-
120
- .para-settings .paln {
121
-
122
- border-bottom: 1px solid rgb(255, 150, 1);
123
- display: block;
124
- font-size: 20px;
125
- font-weight: bold;
126
- line-height: 30px;
127
- padding: 10px 0;
128
- }
129
- .para-settings .cell {
130
- border-bottom: 1px solid rgb(255, 150, 1);
131
- display: block;
132
- line-height: 20px;
133
- padding: 7px 0;
134
- }
135
-
136
- .para-settings .hidden-mob {
137
-
138
- display: none;
139
-
140
- }
141
-
142
143
144
.para-settings .green {
@@ -157,27 +103,6 @@
157
158
}
159
160
- .para-settings .price {
161
- font-size: 18px;
162
- font-weight: bold;
163
- padding: 25px 0;
164
- border-bottom: 1px solid rgb(255, 150, 1);
165
- }
166
-
167
-
168
- .para-settings .buy-now {
169
- background: none repeat scroll 0 0 rgb(221, 221, 221);
170
- border-bottom: 2px solid rgb(157, 157, 157);
171
- border-radius: 12px;
172
- padding: 2px 12px;
173
- text-decoration: none;
174
- }
175
-
176
- .para-settings .buy-now:hover {
177
-
178
- border-bottom: 2px solid #706f6f;
179
-
180
- }
181
182
183
@@ -242,6 +167,77 @@
242
}
243
244
245
246
/*para-dashboard*/
247
77
78
79
80
81
82
.para-settings h2 {
85
margin: 25px 0;
86
}
87
88
89
90
.para-settings .green {
103
104
}
105
106
107
108
167
}
168
169
170
+ input.switch:empty
171
+ {
172
+ margin-left: -999px;
173
+ }
174
+ input.switch:empty ~ label
175
+ {
176
+ position: relative;
177
+ float: left;
178
+ line-height: 1.6em;
179
+ text-indent: 4em;
180
+ margin: 0.2em 0;
181
+ cursor: pointer;
182
+ -webkit-user-select: none;
183
+ -moz-user-select: none;
184
+ -ms-user-select: none;
185
+ user-select: none;
186
+ }
187
+
188
+ input.switch:empty ~ label:before,
189
+ input.switch:empty ~ label:after
190
+ {
191
+ position: absolute;
192
+ display: block;
193
+ top: 0;
194
+ bottom: 0;
195
+ left: 0;
196
+ content: ' ';
197
+ width: 3.6em;
198
+ background-color: #e4e4e4;
199
+ border-radius: 0.3em;
200
+ box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
201
+ -webkit-transition: all 100ms ease-in;
202
+ transition: all 100ms ease-in;
203
+ }
204
+
205
+ input.switch:empty ~ label:after
206
+ {
207
+ width: 1.4em;
208
+ top: 0.1em;
209
+ bottom: 0.1em;
210
+ margin-left: 0.1em;
211
+ background-color: #fff;
212
+ border-radius: 0.15em;
213
+ box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
214
+ }
215
+
216
+
217
+ input.switch:checked ~ label:before
218
+ {
219
+ background-color: #69c8ff;
220
+ }
221
+
222
+ input.switch:checked ~ label:after
223
+ {
224
+ margin-left: 2em;
225
+ }
226
+
227
+
228
+
229
+
230
+
231
+
232
+
233
+
234
+
235
+
236
+
237
+
238
+
239
+
240
+
241
242
/*para-dashboard*/
243
ParaAdmin/css/icons/dark/browser-firefox.png ADDED
Binary file
ParaAdmin/css/icons/dark/device-monitor.png ADDED
Binary file
ParaAdmin/css/icons/dark/globe.png ADDED
Binary file
ParaAdmin/css/icons/dark/keywords.png ADDED
Binary file
ParaAdmin/css/icons/dark/map-pin.png ADDED
Binary file
ParaAdmin/css/icons/dark/os-apple.png ADDED
Binary file
ParaAdmin/css/icons/dark/os-windows.png ADDED
Binary file
ParaAdmin/css/icons/dark/page.png ADDED
Binary file
ParaAdmin/css/icons/dark/share-hub.png ADDED
Binary file
ParaAdmin/css/icons/dark/user-crowd.png ADDED
Binary file
ParaAdmin/css/icons/dark/user-group.png ADDED
Binary file
admin/css/style.css ADDED
@@ -0,0 +1,181 @@
1
+ /*
2
+ Admin css
3
+ */
4
+
5
+
6
+ .post-grid-settings{}
7
+
8
+
9
+ .post-grid-settings ul.post_grid_bg_img_list{}
10
+
11
+ .post-grid-settings ul.post_grid_bg_img_list li {
12
+ display: inline-block;
13
+ margin: 5px;
14
+ }
15
+ .post-grid-settings ul.post_grid_bg_img_list li.bg-selected {}
16
+
17
+ .post-grid-settings ul.post_grid_bg_img_list li img{border: 2px solid #ffffff;}
18
+
19
+ .post-grid-settings ul.post_grid_bg_img_list li.bg-selected img{
20
+ border: 2px solid #ff5a11;
21
+ }
22
+
23
+
24
+ .post-grid-settings .post_grid_loading_taxonomy_category {
25
+ background:url("../../css/loading.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);
26
+ height: 11px;
27
+ width: 30px;
28
+ }
29
+
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+ .post-grid-settings .post-grid-builder {
41
+ margin-bottom: 20px;
42
+ }
43
+ .post-grid-settings .post-grid-builder .items {
44
+ background: none repeat scroll 0 0 rgb(230, 230, 230);
45
+ border: 1px solid rgb(153, 153, 153);
46
+ min-height: 50px;
47
+ padding: 5px;
48
+ }
49
+
50
+ .post-grid-settings .post-grid-builder .item {
51
+ background: none repeat scroll 0 0 rgb(255, 255, 255);
52
+ border-bottom: 1px solid rgb(153, 153, 153);
53
+ cursor: move;
54
+ display: inline-block;
55
+ margin: 2px;
56
+ padding: 5px 10px;
57
+ }
58
+ .post-grid-settings .post-grid-builder .item.active{
59
+ background: none repeat scroll 0 0 rgb(221, 240, 255);
60
+ }
61
+ .post-grid-settings .post-grid-builder .item.active .options {
62
+ display:block;
63
+ }
64
+
65
+ .post-grid-settings .post-grid-builder .item.ui-draggable-dragging {
66
+ border:1px dashed #999;
67
+ }
68
+
69
+
70
+ .post-grid-settings .post-grid-builder .item .options {
71
+ display:none;
72
+ }
73
+
74
+
75
+
76
+
77
+ .post-grid-settings .post-grid-builder .canvas {
78
+ background: none repeat scroll 0 0 rgb(230, 230, 230);
79
+ border: 1px solid rgb(153, 153, 153);
80
+ margin: 20px 0;
81
+ min-height: 100px;
82
+ padding: 10px 10px 50px;
83
+ }
84
+
85
+ .post-grid-settings .post-grid-builder .canvas .saved-item {
86
+ background: none repeat scroll 0 0 rgb(255, 255, 255);
87
+ border-bottom: 1px solid rgb(153, 153, 153);
88
+ display: block;
89
+ margin: 2px;
90
+ padding: 5px 10px;
91
+ position: relative;
92
+ }
93
+
94
+
95
+ .post-grid-settings .post-grid-builder .canvas .ui-sortable-helper{
96
+ border:1px dashed #999;
97
+
98
+ }
99
+
100
+
101
+ .post-grid-settings .post-grid-builder .canvas .saved-item.active {
102
+
103
+ padding: 0;
104
+ }
105
+
106
+ .post-grid-settings .post-grid-builder .canvas .saved-item.active .header {
107
+ border-bottom: 1px solid rgb(153, 153, 153);
108
+ margin-bottom: 15px;
109
+ padding: 7px 10px;
110
+ }
111
+ .post-grid-settings .post-grid-builder .canvas .saved-item .options {
112
+ display:none;
113
+
114
+ }
115
+ .post-grid-settings .post-grid-builder .canvas .saved-item.active .options {
116
+ display:block;
117
+ padding: 7px 10px;
118
+ }
119
+
120
+ .post-grid-settings .post-grid-builder .canvas .saved-item .remove {
121
+ background: none repeat scroll 0 0 rgb(255, 137, 65);
122
+ cursor: pointer;
123
+ display: inline-block;
124
+ float: right;
125
+ padding: 0 5px;
126
+ position: relative;
127
+ }
128
+
129
+ .post-grid-settings #post-grid-builder {
130
+ width: 100%;
131
+ }
132
+
133
+
134
+ .post-grid-settings #post-grid-builder tr {
135
+ background: none repeat scroll 0 0 rgb(255, 255, 255);
136
+ border-bottom: 1px solid rgb(153, 153, 153);
137
+ padding: 0;
138
+ }
139
+
140
+ .post-grid-settings #post-grid-builder td {
141
+
142
+ }
143
+
144
+ .post-grid-settings #post-grid-builder td.dragHandle {
145
+ text-align: center;
146
+ width: 25px;
147
+ }
148
+
149
+
150
+
151
+ .post-grid-settings #post-grid-builder .header {
152
+ border-bottom: 1px solid rgb(153, 153, 153);
153
+ padding: 5px 10px;
154
+ }
155
+
156
+ .post-grid-settings #post-grid-builder .options {
157
+ display: none;
158
+ }
159
+ .post-grid-settings #post-grid-builder tr.active{
160
+ background: none repeat scroll 0 0 rgb(221, 240, 255);
161
+ }
162
+
163
+ .post-grid-settings #post-grid-builder tr.active .header {
164
+ background: none repeat scroll 0 0 rgb(172, 218, 253);
165
+ }
166
+ .post-grid-settings #post-grid-builder tr.active .options {
167
+ display: block;
168
+ padding: 5px 10px;
169
+ }
170
+
171
+ .post-grid-settings .input-switch {
172
+ display: inline-block;
173
+ float: right;
174
+ margin-left: 10px;
175
+ margin-right: 43px;
176
+ position: absolute;
177
+ right: 23px;
178
+ top: 0;
179
+ vertical-align: top;
180
+ width: 14px;
181
+ }
admin/js/color-picker.js ADDED
@@ -0,0 +1,10 @@
1
+ jQuery(document).ready(function($)
2
+ {
3
+
4
+
5
+ //$('').wpColorPicker();
6
+
7
+
8
+
9
+
10
+ });
admin/js/hs.png ADDED
Binary file
admin/js/hv.png ADDED
Binary file
admin/js/jscolor.js ADDED
@@ -0,0 +1,997 @@
1
+ /**
2
+ * jscolor, JavaScript Color Picker
3
+ *
4
+ * @version 1.4.3
5
+ * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
6
+ * @author Jan Odvarko, http://odvarko.cz
7
+ * @created 2008-06-15
8
+ * @updated 2014-07-16
9
+ * @link http://jscolor.com
10
+ */
11
+
12
+
13
+ var jscolor = {
14
+
15
+
16
+ dir : '', // location of jscolor directory (leave empty to autodetect)
17
+ bindClass : 'color', // class name
18
+ binding : true, // automatic binding via <input class="...">
19
+ preloading : true, // use image preloading?
20
+
21
+
22
+ install : function() {
23
+ jscolor.addEvent(window, 'load', jscolor.init);
24
+ },
25
+
26
+
27
+ init : function() {
28
+ if(jscolor.binding) {
29
+ jscolor.bind();
30
+ }
31
+ if(jscolor.preloading) {
32
+ jscolor.preload();
33
+ }
34
+ },
35
+
36
+
37
+ getDir : function() {
38
+ if(!jscolor.dir) {
39
+ var detected = jscolor.detectDir();
40
+ jscolor.dir = detected!==false ? detected : 'jscolor/';
41
+ }
42
+ return jscolor.dir;
43
+ },
44
+
45
+
46
+ detectDir : function() {
47
+ var base = location.href;
48
+
49
+ var e = document.getElementsByTagName('base');
50
+ for(var i=0; i<e.length; i+=1) {
51
+ if(e[i].href) { base = e[i].href; }
52
+ }
53
+
54
+ var e = document.getElementsByTagName('script');
55
+ for(var i=0; i<e.length; i+=1) {
56
+ if(e[i].src && /(^|\/)jscolor\.js([?#].*)?#x2F;i.test(e[i].src)) {
57
+ var src = new jscolor.URI(e[i].src);
58
+ var srcAbs = src.toAbsolute(base);
59
+ srcAbs.path = srcAbs.path.replace(/[^\/]+#x2F;, ''); // remove filename
60
+ srcAbs.query = null;
61
+ srcAbs.fragment = null;
62
+ return srcAbs.toString();
63
+ }
64
+ }
65
+ return false;
66
+ },
67
+
68
+
69
+ bind : function() {
70
+ var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
71
+ var e = document.getElementsByTagName('input');
72
+ for(var i=0; i<e.length; i+=1) {
73
+ var m;
74
+ if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
75
+ var prop = {};
76
+ if(m[4]) {
77
+ try {
78
+ prop = (new Function ('return (' + m[4] + ')'))();
79
+ } catch(eInvalidProp) {}
80
+ }
81
+ e[i].color = new jscolor.color(e[i], prop);
82
+ }
83
+ }
84
+ },
85
+
86
+
87
+ preload : function() {
88
+ for(var fn in jscolor.imgRequire) {
89
+ if(jscolor.imgRequire.hasOwnProperty(fn)) {
90
+ jscolor.loadImage(fn);
91
+ }
92
+ }
93
+ },
94
+
95
+
96
+ images : {
97
+ pad : [ 181, 101 ],
98
+ sld : [ 16, 101 ],
99
+ cross : [ 15, 15 ],
100
+ arrow : [ 7, 11 ]
101
+ },
102
+
103
+
104
+ imgRequire : {},
105
+ imgLoaded : {},
106
+
107
+
108
+ requireImage : function(filename) {
109
+ jscolor.imgRequire[filename] = true;
110
+ },
111
+
112
+
113
+ loadImage : function(filename) {
114
+ if(!jscolor.imgLoaded[filename]) {
115
+ jscolor.imgLoaded[filename] = new Image();
116
+ jscolor.imgLoaded[filename].src = jscolor.getDir()+filename;
117
+ }
118
+ },
119
+
120
+
121
+ fetchElement : function(mixed) {
122
+ return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
123
+ },
124
+
125
+
126
+ addEvent : function(el, evnt, func) {
127
+ if(el.addEventListener) {
128
+ el.addEventListener(evnt, func, false);
129
+ } else if(el.attachEvent) {
130
+ el.attachEvent('on'+evnt, func);
131
+ }
132
+ },
133
+
134
+
135
+ fireEvent : function(el, evnt) {
136
+ if(!el) {
137
+ return;
138
+ }
139
+ if(document.createEvent) {
140
+ var ev = document.createEvent('HTMLEvents');
141
+ ev.initEvent(evnt, true, true);
142
+ el.dispatchEvent(ev);
143
+ } else if(document.createEventObject) {
144
+ var ev = document.createEventObject();
145
+ el.fireEvent('on'+evnt, ev);
146
+ } else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
147
+ el['on'+evnt]();
148
+ }
149
+ },
150
+
151
+
152
+ getElementPos : function(e) {
153
+ var e1=e, e2=e;
154
+ var x=0, y=0;
155
+ if(e1.offsetParent) {
156
+ do {
157
+ x += e1.offsetLeft;
158
+ y += e1.offsetTop;
159
+ } while(e1 = e1.offsetParent);
160
+ }
161
+ while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
162
+ x -= e2.scrollLeft;
163
+ y -= e2.scrollTop;
164
+ }
165
+ return [x, y];
166
+ },
167
+
168
+
169
+ getElementSize : function(e) {
170
+ return [e.offsetWidth, e.offsetHeight];
171
+ },
172
+
173
+
174
+ getRelMousePos : function(e) {
175
+ var x = 0, y = 0;
176
+ if (!e) { e = window.event; }
177
+ if (typeof e.offsetX === 'number') {
178
+ x = e.offsetX;
179
+ y = e.offsetY;
180
+ } else if (typeof e.layerX === 'number') {
181
+ x = e.layerX;
182
+ y = e.layerY;
183
+ }
184
+ return { x: x, y: y };
185
+ },
186
+
187
+
188
+ getViewPos : function() {
189
+ if(typeof window.pageYOffset === 'number') {
190
+ return [window.pageXOffset, window.pageYOffset];
191
+ } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
192
+ return [document.body.scrollLeft, document.body.scrollTop];
193
+ } else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
194
+ return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
195
+ } else {
196
+ return [0, 0];
197
+ }
198
+ },
199
+
200
+
201
+ getViewSize : function() {
202
+ if(typeof window.innerWidth === 'number') {
203
+ return [window.innerWidth, window.innerHeight];
204
+ } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
205
+ return [document.body.clientWidth, document.body.clientHeight];
206
+ } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
207
+ return [document.documentElement.clientWidth, document.documentElement.clientHeight];
208
+ } else {
209
+ return [0, 0];
210
+ }
211
+ },
212
+
213
+
214
+ URI : function(uri) { // See RFC3986
215
+
216
+ this.scheme = null;
217
+ this.authority = null;
218
+ this.path = '';
219
+ this.query = null;
220
+ this.fragment = null;
221
+
222
+ this.parse = function(uri) {
223
+ var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/);
224
+ this.scheme = m[3] ? m[2] : null;
225
+ this.authority = m[5] ? m[6] : null;
226
+ this.path = m[7];
227
+ this.query = m[9] ? m[10] : null;
228
+ this.fragment = m[12] ? m[13] : null;
229
+ return this;
230
+ };
231
+
232
+ this.toString = function() {
233
+ var result = '';
234
+ if(this.scheme !== null) { result = result + this.scheme + ':'; }
235
+ if(this.authority !== null) { result = result + '//' + this.authority; }
236
+ if(this.path !== null) { result = result + this.path; }
237
+ if(this.query !== null) { result = result + '?' + this.query; }
238
+ if(this.fragment !== null) { result = result + '#' + this.fragment; }
239
+ return result;
240
+ };
241
+
242
+ this.toAbsolute = function(base) {
243
+ var base = new jscolor.URI(base);
244
+ var r = this;
245
+ var t = new jscolor.URI;
246
+
247
+ if(base.scheme === null) { return false; }
248
+
249
+ if(r.scheme !== null && r.scheme.toLowerCase() === base.scheme.toLowerCase()) {
250
+ r.scheme = null;
251
+ }
252
+
253
+ if(r.scheme !== null) {
254
+ t.scheme = r.scheme;
255
+ t.authority = r.authority;
256
+ t.path = removeDotSegments(r.path);
257
+ t.query = r.query;
258
+ } else {
259
+ if(r.authority !== null) {
260
+ t.authority = r.authority;
261
+ t.path = removeDotSegments(r.path);
262
+ t.query = r.query;
263
+ } else {
264
+ if(r.path === '') {
265
+ t.path = base.path;
266
+ if(r.query !== null) {
267
+ t.query = r.query;
268
+ } else {
269
+ t.query = base.query;
270
+ }
271
+ } else {
272
+ if(r.path.substr(0,1) === '/') {
273
+ t.path = removeDotSegments(r.path);
274
+ } else {
275
+ if(base.authority !== null && base.path === '') {
276
+ t.path = '/'+r.path;
277
+ } else {
278
+ t.path = base.path.replace(/[^\/]+#x2F;,'')+r.path;
279
+ }
280
+ t.path = removeDotSegments(t.path);
281
+ }
282
+ t.query = r.query;
283
+ }
284
+ t.authority = base.authority;
285
+ }
286
+ t.scheme = base.scheme;
287
+ }
288
+ t.fragment = r.fragment;
289
+
290
+ return t;
291
+ };
292
+
293
+ function removeDotSegments(path) {
294
+ var out = '';
295
+ while(path) {
296
+ if(path.substr(0,3)==='../' || path.substr(0,2)==='./') {
297
+ path = path.replace(/^\.+/,'').substr(1);
298
+ } else if(path.substr(0,3)==='/./' || path==='/.') {
299
+ path = '/'+path.substr(3);
300
+ } else if(path.substr(0,4)==='/../' || path==='/..') {
301
+ path = '/'+path.substr(4);
302
+ out = out.replace(/\/?[^\/]*#x2F;, '');
303
+ } else if(path==='.' || path==='..') {
304
+ path = '';
305
+ } else {
306
+ var rm = path.match(/^\/?[^\/]*/)[0];
307
+ path = path.substr(rm.length);
308
+ out = out + rm;
309
+ }
310
+ }
311
+ return out;
312
+ }
313
+
314
+ if(uri) {
315
+ this.parse(uri);
316
+ }
317
+
318
+ },
319
+
320
+
321
+ //
322
+ // Usage example:
323
+ // var myColor = new jscolor.color(myInputElement)
324
+ //
325
+
326
+ color : function(target, prop) {
327
+
328
+
329
+ this.required = true; // refuse empty values?
330
+ this.adjust = true; // adjust value to uniform notation?
331
+ this.hash = false; // prefix color with # symbol?
332
+ this.caps = true; // uppercase?
333
+ this.slider = true; // show the value/saturation slider?
334
+ this.valueElement = target; // value holder
335
+ this.styleElement = target; // where to reflect current color
336
+ this.onImmediateChange = null; // onchange callback (can be either string or function)
337
+ this.hsv = [0, 0, 1]; // read-only 0-6, 0-1, 0-1
338
+ this.rgb = [1, 1, 1]; // read-only 0-1, 0-1, 0-1
339
+ this.minH = 0; // read-only 0-6
340
+ this.maxH = 6; // read-only 0-6
341
+ this.minS = 0; // read-only 0-1
342
+ this.maxS = 1; // read-only 0-1
343
+ this.minV = 0; // read-only 0-1
344
+ this.maxV = 1; // read-only 0-1
345
+
346
+ this.pickerOnfocus = true; // display picker on focus?
347
+ this.pickerMode = 'HSV'; // HSV | HVS
348
+ this.pickerPosition = 'bottom'; // left | right | top | bottom
349
+ this.pickerSmartPosition = true; // automatically adjust picker position when necessary
350
+ this.pickerButtonHeight = 20; // px
351
+ this.pickerClosable = false;
352
+ this.pickerCloseText = 'Close';
353
+ this.pickerButtonColor = 'ButtonText'; // px
354
+ this.pickerFace = 10; // px
355
+ this.pickerFaceColor = 'ThreeDFace'; // CSS color
356
+ this.pickerBorder = 1; // px
357
+ this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight'; // CSS color
358
+ this.pickerInset = 1; // px
359
+ this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow'; // CSS color
360
+ this.pickerZIndex = 10000;
361
+
362
+
363
+ for(var p in prop) {
364
+ if(prop.hasOwnProperty(p)) {
365
+ this[p] = prop[p];
366
+ }
367
+ }
368
+
369
+
370
+ this.hidePicker = function() {
371
+ if(isPickerOwner()) {
372
+ removePicker();
373
+ }
374
+ };
375
+
376
+
377
+ this.showPicker = function() {
378
+ if(!isPickerOwner()) {
379
+ var tp = jscolor.getElementPos(target); // target pos
380
+ var ts = jscolor.getElementSize(target); // target size
381
+ var vp = jscolor.getViewPos(); // view pos
382
+ var vs = jscolor.getViewSize(); // view size
383
+ var ps = getPickerDims(this); // picker size
384
+ var a, b, c;
385
+ switch(this.pickerPosition.toLowerCase()) {
386
+ case 'left': a=1; b=0; c=-1; break;
387
+ case 'right':a=1; b=0; c=1; break;
388
+ case 'top': a=0; b=1; c=-1; break;
389
+ default: a=0; b=1; c=1; break;
390
+ }
391
+ var l = (ts[b]+ps[b])/2;
392
+
393
+ // picker pos
394
+ if (!this.pickerSmartPosition) {
395
+ var pp = [
396
+ tp[a],
397
+ tp[b]+ts[b]-l+l*c
398
+ ];
399
+ } else {
400
+ var pp = [
401
+ -vp[a]+tp[a]+ps[a] > vs[a] ?
402
+ (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
403
+ tp[a],
404
+ -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
405
+ (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
406
+ (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
407
+ ];
408
+ }
409
+ drawPicker(pp[a], pp[b]);
410
+ }
411
+ };
412
+
413
+
414
+ this.importColor = function() {
415
+ if(!valueElement) {
416
+ this.exportColor();
417
+ } else {
418
+ if(!this.adjust) {
419
+ if(!this.fromString(valueElement.value, leaveValue)) {
420
+ styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
421
+ styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
422
+ styleElement.style.color = styleElement.jscStyle.color;
423
+ this.exportColor(leaveValue | leaveStyle);
424
+ }
425
+ } else if(!this.required && /^\s*#x2F;.test(valueElement.value)) {
426
+ valueElement.value = '';
427
+ styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
428
+ styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
429
+ styleElement.style.color = styleElement.jscStyle.color;
430
+ this.exportColor(leaveValue | leaveStyle);
431
+
432
+ } else if(this.fromString(valueElement.value)) {
433
+ // OK
434
+ } else {
435
+ this.exportColor();
436
+ }
437
+ }
438
+ };
439
+
440
+
441
+ this.exportColor = function(flags) {
442
+ if(!(flags & leaveValue) && valueElement) {
443
+ var value = this.toString();
444
+ if(this.caps) { value = value.toUpperCase(); }
445
+ if(this.hash) { value = '#'+value; }
446
+ valueElement.value = value;
447
+ }
448
+ if(!(flags & leaveStyle) && styleElement) {
449
+ styleElement.style.backgroundImage = "none";
450
+ styleElement.style.backgroundColor =
451
+ '#'+this.toString();
452
+ styleElement.style.color =
453
+ 0.213 * this.rgb[0] +
454
+ 0.715 * this.rgb[1] +
455
+ 0.072 * this.rgb[2]
456
+ < 0.5 ? '#FFF' : '#000';
457
+ }
458
+ if(!(flags & leavePad) && isPickerOwner()) {
459
+ redrawPad();
460
+ }
461
+ if(!(flags & leaveSld) && isPickerOwner()) {
462
+ redrawSld();
463
+ }
464
+ };
465
+
466
+
467
+ this.fromHSV = function(h, s, v, flags) { // null = don't change
468
+ if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
469
+ if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
470
+ if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
471
+
472
+ this.rgb = HSV_RGB(
473
+ h===null ? this.hsv[0] : (this.hsv[0]=h),
474
+ s===null ? this.hsv[1] : (this.hsv[1]=s),
475
+ v===null ? this.hsv[2] : (this.hsv[2]=v)
476
+ );
477
+
478
+ this.exportColor(flags);
479
+ };
480
+
481
+
482
+ this.fromRGB = function(r, g, b, flags) { // null = don't change
483
+ if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
484
+ if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
485
+ if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
486
+
487
+ var hsv = RGB_HSV(
488
+ r===null ? this.rgb[0] : r,
489
+ g===null ? this.rgb[1] : g,
490
+ b===null ? this.rgb[2] : b
491
+ );
492
+ if(hsv[0] !== null) {
493
+ this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
494
+ }
495
+ if(hsv[2] !== 0) {
496
+ this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
497
+ }
498
+ this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
499
+
500
+ // update RGB according to final HSV, as some values might be trimmed
501
+ var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
502
+ this.rgb[0] = rgb[0];
503
+ this.rgb[1] = rgb[1];
504
+ this.rgb[2] = rgb[2];
505
+
506
+ this.exportColor(flags);
507
+ };
508
+
509
+
510
+ this.fromString = function(hex, flags) {
511
+ var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*#x2F;i);
512
+ if(!m) {
513
+ return false;
514
+ } else {
515
+ if(m[1].length === 6) { // 6-char notation
516
+ this.fromRGB(
517
+ parseInt(m[1].substr(0,2),16) / 255,
518
+ parseInt(m[1].substr(2,2),16) / 255,
519
+ parseInt(m[1].substr(4,2),16) / 255,
520
+ flags
521
+ );
522
+ } else { // 3-char notation
523
+ this.fromRGB(
524
+ parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
525
+ parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
526
+ parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
527
+ flags
528
+ );
529
+ }
530
+ return true;
531
+ }
532
+ };
533
+
534
+
535
+ this.toString = function() {
536
+ return (
537
+ (0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
538
+ (0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
539
+ (0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
540
+ );
541
+ };
542
+
543
+
544
+ function RGB_HSV(r, g, b) {
545
+ var n = Math.min(Math.min(r,g),b);
546
+ var v = Math.max(Math.max(r,g),b);
547
+ var m = v - n;
548
+ if(m === 0) { return [ null, 0, v ]; }
549
+ var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
550
+ return [ h===6?0:h, m/v, v ];
551
+ }
552
+
553
+
554
+ function HSV_RGB(h, s, v) {
555
+ if(h === null) { return [ v, v, v ]; }
556
+ var i = Math.floor(h);
557
+ var f = i%2 ? h-i : 1-(h-i);
558
+ var m = v * (1 - s);
559
+ var n = v * (1 - s*f);
560
+ switch(i) {
561
+ case 6:
562
+ case 0: return [v,n,m];
563
+ case 1: return [n,v,m];
564
+ case 2: return [m,v,n];
565
+ case 3: return [m,n,v];
566
+ case 4: return [n,m,v];
567
+ case 5: return [v,m,n];
568
+ }
569
+ }
570
+
571
+
572
+ function removePicker() {
573
+ delete jscolor.picker.owner;
574
+ document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
575
+ }
576
+
577
+
578
+ function drawPicker(x, y) {
579
+ if(!jscolor.picker) {
580
+ jscolor.picker = {
581
+ box : document.createElement('div'),
582
+ boxB : document.createElement('div'),
583
+ pad : document.createElement('div'),
584
+ padB : document.createElement('div'),
585
+ padM : document.createElement('div'),
586
+ sld : document.createElement('div'),
587
+ sldB : document.createElement('div'),
588
+ sldM : document.createElement('div'),
589
+ btn : document.createElement('div'),
590
+ btnS : document.createElement('span'),
591
+ btnT : document.createTextNode(THIS.pickerCloseText)
592
+ };
593
+ for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
594
+ var seg = document.createElement('div');
595
+ seg.style.height = segSize+'px';
596
+ seg.style.fontSize = '1px';
597
+ seg.style.lineHeight = '0';
598
+ jscolor.picker.sld.appendChild(seg);
599
+ }
600
+ jscolor.picker.sldB.appendChild(jscolor.picker.sld);
601
+ jscolor.picker.box.appendChild(jscolor.picker.sldB);
602
+ jscolor.picker.box.appendChild(jscolor.picker.sldM);
603
+ jscolor.picker.padB.appendChild(jscolor.picker.pad);
604
+ jscolor.picker.box.appendChild(jscolor.picker.padB);
605
+ jscolor.picker.box.appendChild(jscolor.picker.padM);
606
+ jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
607
+ jscolor.picker.btn.appendChild(jscolor.picker.btnS);
608
+ jscolor.picker.box.appendChild(jscolor.picker.btn);
609
+ jscolor.picker.boxB.appendChild(jscolor.picker.box);
610
+ }
611
+
612
+ var p = jscolor.picker;
613
+
614
+ // controls interaction
615
+ p.box.onmouseup =
616
+ p.box.onmouseout = function() { target.focus(); };
617
+ p.box.onmousedown = function() { abortBlur=true; };
618
+ p.box.onmousemove = function(e) {
619
+ if (holdPad || holdSld) {
620
+ holdPad && setPad(e);
621
+ holdSld && setSld(e);
622
+ if (document.selection) {
623
+ document.selection.empty();
624
+ } else if (window.getSelection) {
625
+ window.getSelection().removeAllRanges();
626
+ }
627
+ dispatchImmediateChange();
628
+ }
629
+ };
630
+ if('ontouchstart' in window) { // if touch device
631
+ var handle_touchmove = function(e) {
632
+ var event={
633
+ 'offsetX': e.touches[0].pageX-touchOffset.X,
634
+ 'offsetY': e.touches[0].pageY-touchOffset.Y
635
+ };
636
+ if (holdPad || holdSld) {
637
+ holdPad && setPad(event);
638
+ holdSld && setSld(event);
639
+ dispatchImmediateChange();
640
+ }
641
+ e.stopPropagation(); // prevent move "view" on broswer
642
+ e.preventDefault(); // prevent Default - Android Fix (else android generated only 1-2 touchmove events)
643
+ };
644
+ p.box.removeEventListener('touchmove', handle_touchmove, false)
645
+ p.box.addEventListener('touchmove', handle_touchmove, false)
646
+ }
647
+ p.padM.onmouseup =
648
+ p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change'); } };
649
+ p.padM.onmousedown = function(e) {
650
+ // if the slider is at the bottom, move it up
651
+ switch(modeID) {
652
+ case 0: if (THIS.hsv[2] === 0) { THIS.fromHSV(null, null, 1.0); }; break;
653
+ case 1: if (THIS.hsv[1] === 0) { THIS.fromHSV(null, 1.0, null); }; break;
654
+ }
655
+ holdSld=false;
656
+ holdPad=true;
657
+ setPad(e);
658
+ dispatchImmediateChange();
659
+ };
660
+ if('ontouchstart' in window) {
661
+ p.padM.addEventListener('touchstart', function(e) {
662
+ touchOffset={
663
+ 'X': e.target.offsetParent.offsetLeft,
664
+ 'Y': e.target.offsetParent.offsetTop
665
+ };
666
+ this.onmousedown({
667
+ 'offsetX':e.touches[0].pageX-touchOffset.X,
668
+ 'offsetY':e.touches[0].pageY-touchOffset.Y
669
+ });
670
+ });
671
+ }
672
+ p.sldM.onmouseup =
673
+ p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change'); } };
674
+ p.sldM.onmousedown = function(e) {
675
+ holdPad=false;
676
+ holdSld=true;
677
+ setSld(e);
678
+ dispatchImmediateChange();
679
+ };
680
+ if('ontouchstart' in window) {
681
+ p.sldM.addEventListener('touchstart', function(e) {
682
+ touchOffset={
683
+ 'X': e.target.offsetParent.offsetLeft,
684
+ 'Y': e.target.offsetParent.offsetTop
685
+ };
686
+ this.onmousedown({
687
+ 'offsetX':e.touches[0].pageX-touchOffset.X,
688
+ 'offsetY':e.touches[0].pageY-touchOffset.Y
689
+ });
690
+ });
691
+ }
692
+
693
+ // picker
694
+ var dims = getPickerDims(THIS);
695
+ p.box.style.width = dims[0] + 'px';
696
+ p.box.style.height = dims[1] + 'px';
697
+
698
+ // picker border
699
+ p.boxB.style.position = 'absolute';
700
+ p.boxB.style.clear = 'both';
701
+ p.boxB.style.left = x+'px';
702
+ p.boxB.style.top = y+'px';
703
+ p.boxB.style.zIndex = THIS.pickerZIndex;
704
+ p.boxB.style.border = THIS.pickerBorder+'px solid';
705
+ p.boxB.style.borderColor = THIS.pickerBorderColor;
706
+ p.boxB.style.background = THIS.pickerFaceColor;
707
+
708
+ // pad image
709
+ p.pad.style.width = jscolor.images.pad[0]+'px';
710
+ p.pad.style.height = jscolor.images.pad[1]+'px';
711
+
712
+ // pad border
713
+ p.padB.style.position = 'absolute';
714
+ p.padB.style.left = THIS.pickerFace+'px';
715
+ p.padB.style.top = THIS.pickerFace+'px';
716
+ p.padB.style.border = THIS.pickerInset+'px solid';
717
+ p.padB.style.borderColor = THIS.pickerInsetColor;
718
+
719
+ // pad mouse area
720
+ p.padM.style.position = 'absolute';
721
+ p.padM.style.left = '0';
722
+ p.padM.style.top = '0';
723
+ p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
724
+ p.padM.style.height = p.box.style.height;
725
+ p.padM.style.cursor = 'crosshair';
726
+
727
+ // slider image
728
+ p.sld.style.overflow = 'hidden';
729
+ p.sld.style.width = jscolor.images.sld[0]+'px';
730
+ p.sld.style.height = jscolor.images.sld[1]+'px';
731
+
732
+ // slider border
733
+ p.sldB.style.display = THIS.slider ? 'block' : 'none';
734
+ p.sldB.style.position = 'absolute';
735
+ p.sldB.style.right = THIS.pickerFace+'px';
736
+ p.sldB.style.top = THIS.pickerFace+'px';
737
+ p.sldB.style.border = THIS.pickerInset+'px solid';
738
+ p.sldB.style.borderColor = THIS.pickerInsetColor;
739
+
740
+ // slider mouse area
741
+ p.sldM.style.display = THIS.slider ? 'block' : 'none';
742
+ p.sldM.style.position = 'absolute';
743
+ p.sldM.style.right = '0';
744
+ p.sldM.style.top = '0';
745
+ p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
746
+ p.sldM.style.height = p.box.style.height;
747
+ try {
748
+ p.sldM.style.cursor = 'pointer';
749
+ } catch(eOldIE) {
750
+ p.sldM.style.cursor = 'hand';
751
+ }
752
+
753
+ // "close" button
754
+ function setBtnBorder() {
755
+ var insetColors = THIS.pickerInsetColor.split(/\s+/);
756
+ var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
757
+ p.btn.style.borderColor = pickerOutsetColor;
758
+ }
759
+ p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
760
+ p.btn.style.position = 'absolute';
761
+ p.btn.style.left = THIS.pickerFace + 'px';
762
+ p.btn.style.bottom = THIS.pickerFace + 'px';
763
+ p.btn.style.padding = '0 15px';
764
+ p.btn.style.height = '18px';
765
+ p.btn.style.border = THIS.pickerInset + 'px solid';
766
+ setBtnBorder();
767
+ p.btn.style.color = THIS.pickerButtonColor;
768
+ p.btn.style.font = '12px sans-serif';
769
+ p.btn.style.textAlign = 'center';
770
+ try {
771
+ p.btn.style.cursor = 'pointer';
772
+ } catch(eOldIE) {
773
+ p.btn.style.cursor = 'hand';
774
+ }
775
+ p.btn.onmousedown = function () {
776
+ THIS.hidePicker();
777
+ };
778
+ p.btnS.style.lineHeight = p.btn.style.height;
779
+
780
+ // load images in optimal order
781
+ switch(modeID) {
782
+ case 0: var padImg = 'hs.png'; break;
783
+ case 1: var padImg = 'hv.png'; break;
784
+ }
785
+ p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
786
+ p.padM.style.backgroundRepeat = "no-repeat";
787
+ p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
788
+ p.sldM.style.backgroundRepeat = "no-repeat";
789
+ p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
790
+ p.pad.style.backgroundRepeat = "no-repeat";
791
+ p.pad.style.backgroundPosition = "0 0";
792
+
793
+ // place pointers
794
+ redrawPad();
795
+ redrawSld();
796
+
797
+ jscolor.picker.owner = THIS;
798
+ document.getElementsByTagName('body')[0].appendChild(p.boxB);
799
+ }
800
+
801
+
802
+ function getPickerDims(o) {
803
+ var dims = [
804
+ 2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
805
+ (o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
806
+ o.pickerClosable ?
807
+ 4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
808
+ 2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
809
+ ];
810
+ return dims;
811
+ }
812
+
813
+
814
+ function redrawPad() {
815
+ // redraw the pad pointer
816
+ switch(modeID) {
817
+ case 0: var yComponent = 1; break;
818
+ case 1: var yComponent = 2; break;
819
+ }
820
+ var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
821
+ var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
822
+ jscolor.picker.padM.style.backgroundPosition =
823
+ (THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
824
+ (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';
825
+
826
+ // redraw the slider image
827
+ var seg = jscolor.picker.sld.childNodes;
828
+
829
+ switch(modeID) {
830
+ case 0:
831
+ var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
832
+ for(var i=0; i<seg.length; i+=1) {
833
+ seg[i].style.backgroundColor = 'rgb('+
834
+ (rgb[0]*(1-i/seg.length)*100)+'%,'+
835
+ (rgb[1]*(1-i/seg.length)*100)+'%,'+
836
+ (rgb[2]*(1-i/seg.length)*100)+'%)';
837
+ }
838
+ break;
839
+ case 1:
840
+ var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
841
+ var i = Math.floor(THIS.hsv[0]);
842
+ var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
843
+ switch(i) {
844
+ case 6:
845
+ case 0: rgb=[0,1,2]; break;
846
+ case 1: rgb=[1,0,2]; break;
847
+ case 2: rgb=[2,0,1]; break;
848
+ case 3: rgb=[2,1,0]; break;
849
+ case 4: rgb=[1,2,0]; break;
850
+ case 5: rgb=[0,2,1]; break;
851
+ }
852
+ for(var i=0; i<seg.length; i+=1) {
853
+ s = 1 - 1/(seg.length-1)*i;
854
+ c[1] = c[0] * (1 - s*f);
855
+ c[2] = c[0] * (1 - s);
856
+ seg[i].style.backgroundColor = 'rgb('+
857
+ (c[rgb[0]]*100)+'%,'+
858
+ (c[rgb[1]]*100)+'%,'+
859
+ (c[rgb[2]]*100)+'%)';
860
+ }
861
+ break;
862
+ }
863
+ }
864
+
865
+
866
+ function redrawSld() {
867
+ // redraw the slider pointer
868
+ switch(modeID) {
869
+ case 0: var yComponent = 2; break;
870
+ case 1: var yComponent = 1; break;
871
+ }
872
+ var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1));
873
+ jscolor.picker.sldM.style.backgroundPosition =
874
+ '0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px';
875
+ }
876
+
877
+
878
+ function isPickerOwner() {
879
+ return jscolor.picker && jscolor.picker.owner === THIS;
880
+ }
881
+
882
+
883
+ function blurTarget() {
884
+ if(valueElement === target) {
885
+ THIS.importColor();
886
+ }
887
+ if(THIS.pickerOnfocus) {
888
+ THIS.hidePicker();
889
+ }
890
+ }
891
+
892
+
893
+ function blurValue() {
894
+ if(valueElement !== target) {
895
+ THIS.importColor();
896
+ }
897
+ }
898
+
899
+
900
+ function setPad(e) {
901
+ var mpos = jscolor.getRelMousePos(e);
902
+ var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
903
+ var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
904
+ switch(modeID) {
905
+ case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break;
906
+ case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break;
907
+ }
908
+ }
909
+
910
+
911
+ function setSld(e) {
912
+ var mpos = jscolor.getRelMousePos(e);
913
+ var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
914
+ switch(modeID) {
915
+ case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break;
916
+ case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break;
917
+ }
918
+ }
919
+
920
+
921
+ function dispatchImmediateChange() {
922
+ if (THIS.onImmediateChange) {
923
+ var callback;
924
+ if (typeof THIS.onImmediateChange === 'string') {
925
+ callback = new Function (THIS.onImmediateChange);
926
+ } else {
927
+ callback = THIS.onImmediateChange;
928
+ }
929
+ callback.call(THIS);
930
+ }
931
+ }
932
+
933
+
934
+ var THIS = this;
935
+ var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
936
+ var abortBlur = false;
937
+ var
938
+ valueElement = jscolor.fetchElement(this.valueElement),
939
+ styleElement = jscolor.fetchElement(this.styleElement);
940
+ var
941
+ holdPad = false,
942
+ holdSld = false,
943
+ touchOffset = {};
944
+ var
945
+ leaveValue = 1<<0,
946
+ leaveStyle = 1<<1,
947
+ leavePad = 1<<2,
948
+ leaveSld = 1<<3;
949
+
950
+ // target
951
+ jscolor.addEvent(target, 'focus', function() {
952
+ if(THIS.pickerOnfocus) { THIS.showPicker(); }
953
+ });
954
+ jscolor.addEvent(target, 'blur', function() {
955
+ if(!abortBlur) {
956
+ window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
957
+ } else {
958
+ abortBlur = false;
959
+ }
960
+ });
961
+
962
+ // valueElement
963
+ if(valueElement) {
964
+ var updateField = function() {
965
+ THIS.fromString(valueElement.value, leaveValue);
966
+ dispatchImmediateChange();
967
+ };
968
+ jscolor.addEvent(valueElement, 'keyup', updateField);
969
+ jscolor.addEvent(valueElement, 'input', updateField);
970
+ jscolor.addEvent(valueElement, 'blur', blurValue);
971
+ valueElement.setAttribute('autocomplete', 'off');
972
+ }
973
+
974
+ // styleElement
975
+ if(styleElement) {
976
+ styleElement.jscStyle = {
977
+ backgroundImage : styleElement.style.backgroundImage,
978
+ backgroundColor : styleElement.style.backgroundColor,
979
+ color : styleElement.style.color
980
+ };
981
+ }
982
+
983
+ // require images
984
+ switch(modeID) {
985
+ case 0: jscolor.requireImage('hs.png'); break;
986
+ case 1: jscolor.requireImage('hv.png'); break;
987
+ }
988
+ jscolor.requireImage('cross.gif');
989
+ jscolor.requireImage('arrow.gif');
990
+
991
+ this.importColor();
992
+ }
993
+
994
+ };
995
+
996
+
997
+ jscolor.install();
{js → admin/js}/scripts.js RENAMED
@@ -1,41 +1,16 @@
1
-
2
jQuery(document).ready(function($)
3
{
4
-
5
-
6
-
7
- $(document).on('click', '.load-more .load', function()
8
- {
9
- $(this).html('loading...');
10
- var postid = parseInt($(this).attr('postid'));
11
- var per_page = parseInt($(this).attr('per_page'));
12
- var offset = parseInt($(this).attr('offset'));
13
-
14
- $.ajax(
15
- {
16
- type: 'POST',
17
- url:timeline_um_ajax.timeline_um_ajaxurl,
18
- data: {"action": "timeline_um_comments_by_postid", "postid":postid,"per_page":per_page,"offset":offset},
19
- success: function(data)
20
- {
21
-
22
- $('.post-grid-container-'+postid).append(data);
23
- $('.comment-load-more-'+postid).attr('offset',(offset+per_page));
24
25
26
-
27
- }
28
- });
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
})
39
40
41
@@ -82,6 +57,35 @@ jQuery(document).ready(function($)
82
83
84
85
86
});
87
1
jQuery(document).ready(function($)
2
{
3
4
5
+
6
+ $(document).on('click', '.post-grid-reset-taxonomy', function()
7
+ {
8
+ $('.post_grid_taxonomy_category').prop('checked', false);
9
+ $('.post_grid_taxonomy').prop('checked', false);
10
+
11
+
12
})
13
+
14
15
16
57
58
59
60
+
61
+
62
+ $(document).on('click', '.post-grid-builder .canvas .remove', function()
63
+ {
64
+ $(this).parent().parent().remove();
65
+
66
+ })
67
+
68
+
69
+
70
+
71
+
72
+
73
+ $(document).on('click', '.post-grid-builder .canvas .header', function()
74
+ {
75
+
76
+ if($(this).parent().hasClass('active'))
77
+ {
78
+ $(this).parent().removeClass('active');
79
+ }
80
+ else
81
+ {
82
+ $(this).parent().addClass('active');
83
+ }
84
+
85
+ })
86
+
87
+
88
+
89
90
});
91
css/icons/facebook.png CHANGED
Binary file
css/icons/gplus.png CHANGED
Binary file
css/icons/link.png ADDED
Binary file
css/icons/twitter.png CHANGED
Binary file
css/icons/zoom.png ADDED
Binary file
css/style.css CHANGED
@@ -3,29 +3,6 @@
3
4
5
6
- ul.post_grid_bg_img_list{}
7
-
8
- ul.post_grid_bg_img_list li {
9
- display: inline-block;
10
- margin: 5px;
11
- }
12
- ul.post_grid_bg_img_list li.bg-selected {}
13
-
14
- ul.post_grid_bg_img_list li img{border: 2px solid #ffffff;}
15
-
16
- ul.post_grid_bg_img_list li.bg-selected img{
17
- border: 2px solid #ff5a11;
18
- }
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
30
.post-grid-container-main {
31
padding: 50px 20px;
@@ -35,73 +12,18 @@ ul.post_grid_bg_img_list li.bg-selected img{
35
/**************/
36
.post-grid-container .social-icon {
37
color: rgb(255, 0, 0);
38
- position: absolute;
39
transition: all 0.3s ease 0s;
40
}
41
42
43
- .post-grid-container .social-icon.LeftTop {
44
- top: 10px;
45
- left: -100px;
46
- }
47
- .post-grid-container .thumb:hover .social-icon.LeftTop {
48
- left: 10px;
49
- }
50
-
51
-
52
-
53
- .post-grid-container .social-icon.LeftBottom {
54
- bottom: 10px;
55
- left: -100px;
56
- }
57
- .post-grid-container .thumb:hover .social-icon.LeftBottom {
58
- left: 10px;
59
- }
60
- .post-grid-container .social-icon.RightTop {
61
- top: 10px;
62
- right: -100px;
63
- }
64
- .post-grid-container .thumb:hover .social-icon.RightTop {
65
- right: 10px;
66
- }
67
- .post-grid-container .social-icon.RightBottom {
68
- bottom: 10px;
69
- right: -100px;
70
- }
71
-
72
- .post-grid-container .thumb:hover .social-icon.RightBottom {
73
- right: 10px;
74
- }
75
-
76
-
77
- .post-grid-container .social-icon.TopMiddle {
78
- text-align: center;
79
- top: -100px;
80
- width: 100%;
81
- }
82
-
83
- .post-grid-container .thumb:hover .social-icon.TopMiddle {
84
- top: 15%;
85
- }
86
-
87
-
88
- .post-grid-container .social-icon.BottomMiddle {
89
- text-align: center;
90
- bottom: -100px;
91
- width: 100%;
92
- }
93
-
94
- .post-grid-container .thumb:hover .social-icon.BottomMiddle {
95
- bottom: 15%;
96
- }
97
-
98
-
99
-
100
101
102
103
104
.post-grid-container .social-icon span {
105
display: inline-block;
106
height: 24px;
107
width: 24px;
@@ -171,97 +93,6 @@ ul.post_grid_bg_img_list li.bg-selected img{
171
172
173
174
- /* ############################################## */
175
-
176
-
177
-
178
-
179
- .post-grid-container .link {
180
- position: absolute;
181
- text-align: center;
182
- width: 100%;
183
- transition: all 0.5s ease 0s;
184
- }
185
-
186
-
187
- .post-grid-container .link.TopMiddle {
188
- top: -100%;
189
-
190
- }
191
-
192
- .post-grid-container .thumb:hover .link.TopMiddle {
193
- top: 30%;
194
-
195
- }
196
- .post-grid-container .link.BottomMiddle {
197
- bottom: -100%;
198
- }
199
-
200
- .post-grid-container .thumb:hover .link.BottomMiddle {
201
- bottom: 50%;
202
-
203
- }
204
- .post-grid-container .link.LeftMiddle {
205
- left: -100%;
206
- top: 30%;
207
-
208
- }
209
-
210
- .post-grid-container .thumb:hover .link.LeftMiddle {
211
- left: 0;
212
-
213
- }
214
-
215
-
216
- .post-grid-container .link.RightMiddle {
217
- right: -100%;
218
- top: 30%;
219
- }
220
-
221
- .post-grid-container .thumb:hover .link.RightMiddle {
222
- right: 0;
223
-
224
- }
225
-
226
-
227
-
228
- .post-grid-container .link a {
229
- background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
230
- border: 1px solid rgb(226, 226, 226);
231
- border-radius: 3px;
232
- color: rgb(255, 255, 255) !important;
233
- font-size: 12px;
234
- padding: 5px 15px;
235
- text-decoration: none;
236
- }
237
-
238
- /* ############################################## */
239
-
240
- .post-grid-container .link.zoomIn {
241
- transform: scale(0);
242
- }
243
-
244
- .post-grid-container .thumb:hover .link.zoomIn {
245
- transform: scale(1.2);
246
-
247
- }
248
-
249
- .post-grid-container .link.fadeIn {
250
- opacity: 0;
251
- }
252
-
253
- .post-grid-container .thumb:hover .link.fadeIn {
254
- opacity: 1;
255
- }
256
-
257
- .post-grid-container .link.rotate {
258
- transform: rotate(0deg);
259
- }
260
-
261
- .post-grid-container .thumb:hover .link.rotate {
262
- transform: rotate(360deg);
263
- }
264
-
265
266
267
@@ -311,6 +142,69 @@ ul.post_grid_bg_img_list li.bg-selected img{
311
312
313
314
315
316
3
4
5
6
7
.post-grid-container-main {
8
padding: 50px 20px;
12
/**************/
13
.post-grid-container .social-icon {
14
color: rgb(255, 0, 0);
15
+ padding: 10px;
16
+ text-align: left;
17
transition: all 0.3s ease 0s;
18
}
19
20
21
22
23
24
25
.post-grid-container .social-icon span {
26
+ background-size: 100% auto !important;
27
display: inline-block;
28
height: 24px;
29
width: 24px;
93
94
95
96
97
98
142