jhtmlarea 0.0.9 → 0.0.10

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,190 +1,190 @@
1
- /*
2
- * jHtmlAreaColorPickerMenu 0.7.0 - A Color Picker Extension to jHtmlArea
3
- * Part of the jHtmlArea Project
4
- * Copyright (c) 2009 Chris Pietschmann
5
- * http://jhtmlarea.codeplex.com
6
- * Licensed under the Microsoft Reciprocal License (Ms-RL)
7
- * http://jhtmlarea.codeplex.com/license
8
- */
9
- (function($) {
10
- if (jHtmlArea) {
11
- var oldForecolor = jHtmlArea.fn.forecolor;
12
- jHtmlArea.fn.forecolor = function(c) {
13
- if (c) {
14
- // If color is specified, then use the "default" method functionality
15
- oldForecolor.call(this, c);
16
- } else {
17
- // If no color is specified, then display color picker ui
18
- var that = this;
19
- var rng = this.getRange();
20
- jHtmlAreaColorPickerMenu($(".forecolor", this.toolbar), {
21
- colorChosen: function(color) {
22
- // if ($.browser.msie) {
23
- // rng.execCommand("ForeColor", false, color);
24
- // } else {
25
- // that.forecolor(color);
26
- // }
27
- that.forecolor(color);
28
- }
29
- });
30
- }
31
- };
32
- }
33
- var menu = window.jHtmlAreaColorPickerMenu = function(ownerElement, options) {
34
- return new jHtmlAreaColorPickerMenu.fn.init(ownerElement, options);
35
- };
36
- menu.fn = menu.prototype = {
37
- jhtmlareacolorpickermenu: "0.7.0",
38
-
39
- init: function(ownerElement, options) {
40
- var opts = $.extend({}, menu.defaultOptions, options);
41
- var that = this;
42
- var owner = this.owner = $(ownerElement);
43
- var position = owner.position();
44
-
45
- if (menu.instance) {
46
- menu.instance.hide();
47
- }
48
- jHtmlAreaColorPickerMenu.instance = this;
49
-
50
- var picker = this.picker = $("<div/>").css({
51
- position: "absolute",
52
- left: position.left + opts.offsetLeft,
53
- top: position.top + owner.height() + opts.offsetTop,
54
- "z-index": opts["z-index"]
55
- }).addClass("jHtmlAreaColorPickerMenu");
56
-
57
- for (var i = 0; i < opts.colors.length; i++) {
58
- var c = opts.colors[i];
59
- $("<div/>").css("background-color", c).appendTo(picker).click(
60
- (function(color) {
61
- return function() {
62
- if (opts.colorChosen) {
63
- opts.colorChosen.call(this, color);
64
- }
65
- that.hide();
66
- };
67
- })(c)
68
- );
69
- }
70
-
71
- $("<div/>").html("<div></div>Automatic").addClass("automatic").appendTo(picker).click(
72
- function() {
73
- if (opts.colorChosen) {
74
- opts.colorChosen.call(this, null);
75
- }
76
- that.hide();
77
- }
78
- );
79
-
80
-
81
- var autoHide = false;
82
- picker.appendTo(owner.parent()).
83
- show().
84
- mouseout(function() {
85
- autoHide = true;
86
- that.currentTimeout = window.setTimeout(function() { if (autoHide === true) { that.hide(); } }, 1000);
87
- }).
88
- mouseover(function() {
89
- if (that.currentTimeout) {
90
- window.clearTimeout(that.currentTimeout);
91
- that.currentTimeout = null;
92
- }
93
- autoHide = false;
94
- });
95
- },
96
- hide: function() {
97
- this.picker.hide();
98
- this.picker.remove();
99
- }
100
- };
101
- menu.fn.init.prototype = menu.fn;
102
-
103
- menu.defaultOptions = {
104
- "z-index": 0,
105
- offsetTop: 0,
106
- offsetLeft: 0,
107
- colors: [
108
- "#ffffff",
109
- "#cccccc",
110
- "#c0c0c0",
111
- "#999999",
112
- "#666666",
113
- "#333333",
114
- "#000000",
115
-
116
- "#ffcccc",
117
- "#ff6666",
118
- "#ff0000",
119
- "#cc0000",
120
- "#990000",
121
- "#660000",
122
- "#330000",
123
-
124
- "#ffcc99",
125
- "#ff9966",
126
- "#ff9900",
127
- "#ff6600",
128
- "#cc6600",
129
- "#993300",
130
- "#663300",
131
-
132
- "#ffff99",
133
- "#ffff66",
134
- "#ffcc66",
135
- "#ffcc33",
136
- "#cc9933",
137
- "#996633",
138
- "#663333",
139
-
140
- "#ffffcc",
141
- "#ffff33",
142
- "#ffff00",
143
- "#ffcc00",
144
- "#999900",
145
- "#666600",
146
- "#333300",
147
-
148
- "#99ff99",
149
- "#66ff99",
150
- "#33ff33",
151
- "#33cc00",
152
- "#009900",
153
- "#006600",
154
- "#003300",
155
-
156
- "#99FFFF",
157
- "#33FFFF",
158
- "#66CCCC",
159
- "#00CCCC",
160
- "#339999",
161
- "#336666",
162
- "#003333",
163
-
164
- "#CCFFFF",
165
- "#66FFFF",
166
- "#33CCFF",
167
- "#3366FF",
168
- "#3333FF",
169
- "#000099",
170
- "#000066",
171
-
172
- "#CCCCFF",
173
- "#9999FF",
174
- "#6666CC",
175
- "#6633FF",
176
- "#6600CC",
177
- "#333399",
178
- "#330099",
179
-
180
- "#FFCCFF",
181
- "#FF99FF",
182
- "#CC66CC",
183
- "#CC33CC",
184
- "#993399",
185
- "#663366",
186
- "#330033"
187
- ],
188
- colorChosen: null
189
- };
190
- })(jQuery);
1
+ /*
2
+ * jHtmlAreaColorPickerMenu 0.8.0 - A Color Picker Extension to jHtmlArea
3
+ * Part of the jHtmlArea Project
4
+ * Copyright (c) 2013 Chris Pietschmann
5
+ * http://jhtmlarea.codeplex.com
6
+ * Licensed under the Microsoft Reciprocal License (Ms-RL)
7
+ * http://jhtmlarea.codeplex.com/license
8
+ */
9
+ (function($) {
10
+ if (jHtmlArea) {
11
+ var oldForecolor = jHtmlArea.fn.forecolor;
12
+ jHtmlArea.fn.forecolor = function(c) {
13
+ if (c) {
14
+ // If color is specified, then use the "default" method functionality
15
+ oldForecolor.call(this, c);
16
+ } else {
17
+ // If no color is specified, then display color picker ui
18
+ var that = this;
19
+ var rng = this.getRange();
20
+ jHtmlAreaColorPickerMenu($(".forecolor", this.toolbar), {
21
+ colorChosen: function (color) {
22
+ if ($jhtmlarea.browser.msie === true && $jhtmlarea.browser.version < 11) {
23
+ rng.execCommand("ForeColor", false, color);
24
+ } else {
25
+ that.forecolor(color);
26
+ }
27
+ }
28
+ });
29
+ }
30
+ };
31
+ }
32
+ var menu = window.jHtmlAreaColorPickerMenu = function(ownerElement, options) {
33
+ return new jHtmlAreaColorPickerMenu.fn.init(ownerElement, options);
34
+ };
35
+ menu.fn = menu.prototype = {
36
+ jhtmlareacolorpickermenu: "0.8",
37
+
38
+ init: function(ownerElement, options) {
39
+ var opts = $.extend({}, menu.defaultOptions, options);
40
+ var that = this;
41
+ var owner = this.owner = $(ownerElement);
42
+ var position = owner.position();
43
+
44
+ if (menu.instance) {
45
+ menu.instance.hide();
46
+ }
47
+ jHtmlAreaColorPickerMenu.instance = this;
48
+
49
+ var picker = this.picker = $("<div/>").css({
50
+ position: "absolute",
51
+ left: position.left + opts.offsetLeft,
52
+ top: position.top + owner.height() + opts.offsetTop,
53
+ "z-index": opts["z-index"]
54
+ }).addClass("jHtmlAreaColorPickerMenu");
55
+
56
+ for (var i = 0; i < opts.colors.length; i++) {
57
+ var c = opts.colors[i];
58
+ $("<div/>").css("background-color", c).appendTo(picker).click(
59
+ (function(color) {
60
+ return function() {
61
+ if (opts.colorChosen) {
62
+ opts.colorChosen.call(this, color);
63
+ }
64
+ that.hide();
65
+ };
66
+ })(c)
67
+ );
68
+ }
69
+
70
+ $("<div/>").html("<div></div>Automatic").addClass("automatic").appendTo(picker).click(
71
+ function() {
72
+ if (opts.colorChosen) {
73
+ opts.colorChosen.call(this, null);
74
+ }
75
+ that.hide();
76
+ }
77
+ );
78
+
79
+
80
+ var autoHide = false;
81
+ picker.appendTo(owner.parent()).
82
+ show().
83
+ mouseout(function() {
84
+ autoHide = true;
85
+ that.currentTimeout = window.setTimeout(function() { if (autoHide === true) { that.hide(); } }, 1000);
86
+ }).
87
+ mouseover(function() {
88
+ if (that.currentTimeout) {
89
+ window.clearTimeout(that.currentTimeout);
90
+ that.currentTimeout = null;
91
+ }
92
+ autoHide = false;
93
+ });
94
+ },
95
+ hide: function() {
96
+ this.picker.hide();
97
+ this.picker.remove();
98
+ }
99
+ };
100
+ menu.fn.init.prototype = menu.fn;
101
+
102
+ menu.defaultOptions = {
103
+ "z-index": 0,
104
+ offsetTop: 0,
105
+ offsetLeft: 0,
106
+ colors: [
107
+ "#ffffff",
108
+ "#cccccc",
109
+ "#c0c0c0",
110
+ "#999999",
111
+ "#666666",
112
+ "#333333",
113
+ "#000000",
114
+
115
+ "#ffcccc",
116
+ "#ff6666",
117
+ "#ff0000",
118
+ "#cc0000",
119
+ "#990000",
120
+ "#660000",
121
+ "#330000",
122
+
123
+ "#ffcc99",
124
+ "#ff9966",
125
+ "#ff9900",
126
+ "#ff6600",
127
+ "#cc6600",
128
+ "#993300",
129
+ "#663300",
130
+
131
+ "#ffff99",
132
+ "#ffff66",
133
+ "#ffcc66",
134
+ "#ffcc33",
135
+ "#cc9933",
136
+ "#996633",
137
+ "#663333",
138
+
139
+ "#ffffcc",
140
+ "#ffff33",
141
+ "#ffff00",
142
+ "#ffcc00",
143
+ "#999900",
144
+ "#666600",
145
+ "#333300",
146
+
147
+ "#99ff99",
148
+ "#66ff99",
149
+ "#33ff33",
150
+ "#33cc00",
151
+ "#009900",
152
+ "#006600",
153
+ "#003300",
154
+
155
+ "#99FFFF",
156
+ "#33FFFF",
157
+ "#66CCCC",
158
+ "#00CCCC",
159
+ "#339999",
160
+ "#336666",
161
+ "#003333",
162
+
163
+ "#CCFFFF",
164
+ "#66FFFF",
165
+ "#33CCFF",
166
+ "#3366FF",
167
+ "#3333FF",
168
+ "#000099",
169
+ "#000066",
170
+
171
+ "#CCCCFF",
172
+ "#9999FF",
173
+ "#6666CC",
174
+ "#6633FF",
175
+ "#6600CC",
176
+ "#333399",
177
+ "#330099",
178
+
179
+ "#FFCCFF",
180
+ "#FF99FF",
181
+ "#CC66CC",
182
+ "#CC33CC",
183
+ "#993399",
184
+ "#663366",
185
+ "#330033"
186
+ ],
187
+ colorChosen: null
188
+ };
189
+ })(jQuery);
190
+
@@ -1,7 +1,7 @@
1
1
  div.jHtmlAreaColorPickerMenu {
2
- border: solid 1px #bbb; background-color: #ddd; width: 112px;
3
- div {float: left; margin: 2px; width: 12px; height: 14px;}
4
- div:hover {margin: 0px; border: dotted 2px black;}
2
+ border: solid 1px #bbb; background-color: #ddd; width: 116px;
3
+ div {float: left; margin: 2px; width: 12px; height: 14px; border: solid 1px transparent;}
4
+ div:hover { border: dotted 2px black;}
5
5
  div.automatic { width: 104px; height: auto; padding: 2px;}
6
6
  div.automatic div { margin: 2px; width: 12px; height: 14px; border: solid 1px black;}
7
7
  }
@@ -1,91 +1,48 @@
1
- div.jHtmlArea {
2
- display: inline block;
3
- div { padding: 0px; margin: 0px; }
4
- .ToolBar {
5
- ul {
6
- border: solid 1px #ccc;
7
- margin: 1px;
8
- padding: 1px;
9
- float: left;
10
- background: #fff image-url('jHtmlArea_Toolbar_Group_BG.png') repeat-x;
11
- li {
12
- list-style-type: none;
13
- float: left;
14
- border: none; padding: 1px; margin: 1px;
15
- }
16
- li:hover {
17
- border: solid 1px #ccc;
18
- background: #ddd image-url('jHtmlArea_Toolbar_Group__Btn_Select_BG.png');
19
- padding: 0;
20
- }
21
- li a {
22
- display: block;
23
- width: 16px;
24
- height: 16px;
25
- background: image-url('jHtmlArea.png') no-repeat -16px -500px;
26
- border: none;
27
- cursor: pointer;
28
- padding: 0px;
29
- }
30
- li a.highlighted {
31
- border: solid 1px #aaa;
32
- background-color: #bbb;
33
- padding: 0;
34
- }
35
- li.separator {
36
- height: 16px;
37
- margin: 0 2px 0 3px;
38
- border-left: 1px solid #ccc;
39
- }
40
- li.separator:hover {
41
- padding: 1px;
42
- background-color: #fff;
43
- border-top:none; border-bottom:none; border-right:none;
44
- }
1
+ div.jHtmlArea { display: inline block; }
2
+ div.jHtmlArea div { padding: 0px; margin: 0px; }
3
+ div.jHtmlArea .ToolBar { }
4
+ div.jHtmlArea .ToolBar ul { border: solid 1px #ccc; margin: 1px; padding: 1px; float: left; background: #fff image-url('jHtmlArea_Toolbar_Group_BG.png') repeat-x;}
5
+ div.jHtmlArea .ToolBar ul li { list-style-type: none; float: left; border: none; padding: 1px; margin: 1px; }
6
+ div.jHtmlArea .ToolBar ul li:hover { border: solid 1px #ccc; background: #ddd image-url('jHtmlArea_Toolbar_Group__Btn_Select_BG.png'); padding: 0; }
7
+ div.jHtmlArea .ToolBar ul li a { display: block; width: 16px; height: 16px; background: image-url('jHtmlArea.png') no-repeat -16px -500px; border: none; cursor: pointer; padding: 0px; }
8
+ div.jHtmlArea .ToolBar ul li a.highlighted { border: solid 1px #aaa; background-color: #bbb; padding: 0; }
9
+ div.jHtmlArea .ToolBar ul li.separator {height: 16px; margin: 0 2px 0 3px; border-left: 1px solid #ccc;}
10
+ div.jHtmlArea .ToolBar ul li.separator:hover { padding: 1px; background-color: #fff; border-top:none; border-bottom:none; border-right:none;}
45
11
 
46
- li a:hover { }
47
- li a.bold { background-position: 0 0; }
48
- li a.italic { background-position: -16px 0; }
49
- li a.underline { background-position: -32px 0; }
50
- li a.strikethrough { background-position: -48px 0; }
51
- li a.link { background-position: -64px 0; }
52
- li a.unlink { background-position: -80px 0; }
53
- li a.orderedlist { background-position: -96px 0; }
54
- li a.unorderedlist { background-position: -112px 0; }
55
- li a.image { background-position: -128px 0; }
56
- li a.cut { background-position: -144px 0; }
57
- li a.copy { background-position: -160px 0; }
58
- li a.paste { background-position: -176px 0; }
12
+ div.jHtmlArea .ToolBar ul li a:hover { }
13
+ div.jHtmlArea .ToolBar ul li a.bold { background-position: 0 0; }
14
+ div.jHtmlArea .ToolBar ul li a.italic { background-position: -16px 0; }
15
+ div.jHtmlArea .ToolBar ul li a.underline { background-position: -32px 0; }
16
+ div.jHtmlArea .ToolBar ul li a.strikethrough { background-position: -48px 0; }
17
+ div.jHtmlArea .ToolBar ul li a.link { background-position: -64px 0; }
18
+ div.jHtmlArea .ToolBar ul li a.unlink { background-position: -80px 0; }
19
+ div.jHtmlArea .ToolBar ul li a.orderedlist { background-position: -96px 0; }
20
+ div.jHtmlArea .ToolBar ul li a.unorderedlist { background-position: -112px 0; }
21
+ div.jHtmlArea .ToolBar ul li a.image { background-position: -128px 0; }
22
+ div.jHtmlArea .ToolBar ul li a.cut { background-position: -144px 0; }
23
+ div.jHtmlArea .ToolBar ul li a.copy { background-position: -160px 0; }
24
+ div.jHtmlArea .ToolBar ul li a.paste { background-position: -176px 0; }
59
25
 
60
- li a.html {
61
- background-position: -192px 0;
62
- opacity:0.6;
63
- filter:alpha(opacity=60);
64
- }
65
- li a.html.highlighted {
66
- opacity:1.0;
67
- filter:alpha(opacity=100);
68
- }
26
+ div.jHtmlArea .ToolBar ul li a.html { background-position: -192px 0; opacity:0.6; filter:alpha(opacity=60);}
27
+ div.jHtmlArea .ToolBar ul li a.html.highlighted { opacity:1.0; filter:alpha(opacity=100);}
69
28
 
70
- li a.h1 { background-position: 0 -16px;}
71
- li a.h2 { background-position: -16px -16px;}
72
- li a.h3 { background-position: -32px -16px;}
73
- li a.h4 { background-position: -48px -16px;}
74
- li a.h5 { background-position: -64px -16px;}
75
- li a.h6 { background-position: -80px -16px;}
76
- li a.subscript { background-position: -96px -16px;}
77
- li a.superscript { background-position: -112px -16px;}
78
- li a.indent { background-position: -128px -16px;}
79
- li a.outdent { background-position: -144px -16px;}
80
- li a.horizontalrule { background-position: -160px -16px;}
81
- li a.p { background-position: -176px -16px;}
29
+ div.jHtmlArea .ToolBar ul li a.h1 { background-position: 0 -16px;}
30
+ div.jHtmlArea .ToolBar ul li a.h2 { background-position: -16px -16px;}
31
+ div.jHtmlArea .ToolBar ul li a.h3 { background-position: -32px -16px;}
32
+ div.jHtmlArea .ToolBar ul li a.h4 { background-position: -48px -16px;}
33
+ div.jHtmlArea .ToolBar ul li a.h5 { background-position: -64px -16px;}
34
+ div.jHtmlArea .ToolBar ul li a.h6 { background-position: -80px -16px;}
35
+ div.jHtmlArea .ToolBar ul li a.subscript { background-position: -96px -16px;}
36
+ div.jHtmlArea .ToolBar ul li a.superscript { background-position: -112px -16px;}
37
+ div.jHtmlArea .ToolBar ul li a.indent { background-position: -128px -16px;}
38
+ div.jHtmlArea .ToolBar ul li a.outdent { background-position: -144px -16px;}
39
+ div.jHtmlArea .ToolBar ul li a.horizontalrule { background-position: -160px -16px;}
40
+ div.jHtmlArea .ToolBar ul li a.p { background-position: -176px -16px;}
82
41
 
83
- li a.justifyleft { background-position: 0 -32px;}
84
- li a.justifycenter { background-position: -16px -32px;}
85
- li a.justifyright { background-position: -32px -32px;}
86
- li a.increasefontsize { background-position: -48px -32px;}
87
- li a.decreasefontsize { background-position: -64px -32px;}
88
- li a.forecolor { background-position: -80px -32px;}
89
- }
90
- }
91
- }
42
+
43
+ div.jHtmlArea .ToolBar ul li a.justifyleft { background-position: 0 -32px;}
44
+ div.jHtmlArea .ToolBar ul li a.justifycenter { background-position: -16px -32px;}
45
+ div.jHtmlArea .ToolBar ul li a.justifyright { background-position: -32px -32px;}
46
+ div.jHtmlArea .ToolBar ul li a.increasefontsize { background-position: -48px -32px;}
47
+ div.jHtmlArea .ToolBar ul li a.decreasefontsize { background-position: -64px -32px;}
48
+ div.jHtmlArea .ToolBar ul li a.forecolor { background-position: -80px -32px;}