tiny_mce_curblyadvimage 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.1.0
1
+ 0.2.0
@@ -0,0 +1,84 @@
1
+ #src_list, #over_list, #out_list {width:280px;}
2
+ .mceActionPanel {margin-top:7px;}
3
+ .alignPreview {border:1px solid #000; width:140px; height:140px; overflow:hidden; padding:5px;}
4
+ .checkbox {border:0;}
5
+ .panel_wrapper div.current {height:245px;}
6
+ #prev {margin:0; border:1px solid #000; width:99%; height:150px; overflow:auto;}
7
+ #align, #classlist {width:150px;}
8
+ #width, #height {vertical-align:middle; width:50px; text-align:center;}
9
+ #vspace, #hspace, #border {vertical-align:middle; width:30px; text-align:center;}
10
+ #class_list {width:180px;}
11
+ input {width: 280px;}
12
+ input.submit {
13
+ width: auto;
14
+ margin: 0;
15
+ }
16
+ #constrain, #onmousemovecheck {width:auto;}
17
+ #id, #dir, #lang, #usemap, #longdesc {width:200px;}
18
+
19
+ ul.curblyadvimage_list {
20
+ list-style: none;
21
+ margin:0;
22
+ padding:0;
23
+ }
24
+ ul.curblyadvimage_list li {
25
+ display:block;
26
+ width: 75px;
27
+ float: left;
28
+ margin-right: 8px;
29
+ margin-bottom:5px;
30
+ }
31
+ ul.curblyadvimage_list li img {
32
+ width: 75px;
33
+ }
34
+ ul.curblyadvimage_list li a {
35
+ outline:none;
36
+ }
37
+ ul.curblyadvimage_list li.selected a img {
38
+ border: 2px solid red;
39
+ }
40
+ ul.curblyadvimage_list li .thumbs {
41
+ display:none;
42
+ background: #efefef;
43
+ position: absolute;
44
+ width:65px;
45
+ margin: 45px 5px 5px 25px;
46
+ border-right: 2px solid #666;
47
+ border-bottom: 2px solid #333;
48
+ border-top: 2px solid #efefef;
49
+ border-left: 2px solid #efefef;
50
+ }
51
+ ul.curblyadvimage_list li .thumbs a {
52
+ margin-bottom: 5px;
53
+ line-height: 1.5em;
54
+ text-decoration: none;
55
+ }
56
+ ul.curblyadvimage_list li .thumbs a {
57
+ text-decoration: underline;
58
+ }
59
+ ul.curblyadvimage_list li.selected .thumbs {
60
+ display:block;
61
+ }
62
+
63
+ .right {
64
+ float:right;
65
+ }
66
+ .left {
67
+ float:left;
68
+ }
69
+ .clear {
70
+ clear:both;
71
+ }
72
+ .pagination a {
73
+ border: 1px solid #7DA807;
74
+ color: #7DA807;
75
+ margin-right: .3em;
76
+ padding: .3em; }
77
+ .pagination a:hover {
78
+ background: #7DA807;
79
+ border: 1px solid #7DA807;
80
+ color: #ffffff; }
81
+ .pagination a.active {
82
+ background: #1EA2C1;
83
+ border: none;
84
+ color: #ffffff; }
@@ -0,0 +1,52 @@
1
+ /**
2
+ * $Id: editor_plugin_src.js 520 2008-01-07 16:30:32Z spocke $
3
+ *
4
+ * @author Moxiecode
5
+ * @copyright Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved.
6
+ */
7
+
8
+ (function() {
9
+ // Load plugin specific language pack
10
+ tinymce.PluginManager.requireLangPack('curblyadvimage');
11
+
12
+ tinymce.create('tinymce.plugins.CurblyAdvancedImagePlugin', {
13
+ init : function(ed, url) {
14
+ // Register commands
15
+ ed.addCommand('mceCurblyAdvImage', function() {
16
+ var e = ed.selection.getNode();
17
+
18
+ // Internal image object like a flash placeholder
19
+ if (ed.dom.getAttrib(e, 'class').indexOf('mceItem') != -1)
20
+ return;
21
+
22
+ ed.windowManager.open({
23
+ file : url + '/image.htm',
24
+ width : 480 + parseInt(ed.getLang('curblyadvimage.delta_width', 0)),
25
+ height : 385 + parseInt(ed.getLang('curblyadvimage.delta_height', 0)),
26
+ inline : 1
27
+ }, {
28
+ plugin_url : url
29
+ });
30
+ });
31
+
32
+ // Register buttons
33
+ ed.addButton('image', {
34
+ title : 'curblyadvimage.image_desc',
35
+ cmd : 'mceCurblyAdvImage'
36
+ });
37
+ },
38
+
39
+ getInfo : function() {
40
+ return {
41
+ longname : 'Curbly Advanced image',
42
+ author : 'Moxiecode Systems AB',
43
+ authorurl : 'http://tinymce.moxiecode.com',
44
+ infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage',
45
+ version : tinymce.majorVersion + "." + tinymce.minorVersion
46
+ };
47
+ }
48
+ });
49
+
50
+ // Register plugin
51
+ tinymce.PluginManager.add('curblyadvimage', tinymce.plugins.CurblyAdvancedImagePlugin);
52
+ })();
@@ -0,0 +1,52 @@
1
+ /**
2
+ * $Id: editor_plugin_src.js 520 2008-01-07 16:30:32Z spocke $
3
+ *
4
+ * @author Moxiecode
5
+ * @copyright Copyright � 2004-2008, Moxiecode Systems AB, All rights reserved.
6
+ */
7
+
8
+ (function() {
9
+ // Load plugin specific language pack
10
+ tinymce.PluginManager.requireLangPack('curblyadvimage');
11
+
12
+ tinymce.create('tinymce.plugins.CurblyAdvancedImagePlugin', {
13
+ init : function(ed, url) {
14
+ // Register commands
15
+ ed.addCommand('mceCurblyAdvImage', function() {
16
+ var e = ed.selection.getNode();
17
+
18
+ // Internal image object like a flash placeholder
19
+ if (ed.dom.getAttrib(e, 'class').indexOf('mceItem') != -1)
20
+ return;
21
+
22
+ ed.windowManager.open({
23
+ file : url + '/image.htm',
24
+ width : 480 + parseInt(ed.getLang('curblyadvimage.delta_width', 0)),
25
+ height : 385 + parseInt(ed.getLang('curblyadvimage.delta_height', 0)),
26
+ inline : 1
27
+ }, {
28
+ plugin_url : url
29
+ });
30
+ });
31
+
32
+ // Register buttons
33
+ ed.addButton('image', {
34
+ title : 'curblyadvimage.image_desc',
35
+ cmd : 'mceCurblyAdvImage'
36
+ });
37
+ },
38
+
39
+ getInfo : function() {
40
+ return {
41
+ longname : 'Curbly Advanced image',
42
+ author : 'Moxiecode Systems AB',
43
+ authorurl : 'http://tinymce.moxiecode.com',
44
+ infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage',
45
+ version : tinymce.majorVersion + "." + tinymce.minorVersion
46
+ };
47
+ }
48
+ });
49
+
50
+ // Register plugin
51
+ tinymce.PluginManager.add('curblyadvimage', tinymce.plugins.CurblyAdvancedImagePlugin);
52
+ })();
@@ -0,0 +1,270 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <title>{#advimage_dlg.dialog_title}</title>
5
+ <script language="javascript" type="text/javascript" src="../../../prototype.js"></script>
6
+ <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
7
+ <script type="text/javascript" src="../../utils/mctabs.js"></script>
8
+ <script type="text/javascript" src="../../utils/form_utils.js"></script>
9
+ <script type="text/javascript" src="../../utils/validate.js"></script>
10
+ <script type="text/javascript" src="js/functions.js"></script>
11
+ <link href="css/advimage.css" rel="stylesheet" type="text/css" />
12
+ <base target="_self" />
13
+ </head>
14
+ <body id="advimage" style="display: none">
15
+
16
+ <div id="image-upload">
17
+ <fieldset>
18
+ <legend>Upload New Image</legend>
19
+ <form id='image_upload_form' enctype="multipart/form-data" method="post" onsubmit="ts_onload(); return true;" target="html_editor_image_upload_frame">
20
+ <input class="input-file" id="image_uploaded_data" name="photo[uploaded_data]" size="30" type="file"/>
21
+ <input class="submit" name="commit" type="submit" value="Upload"/>
22
+ </form>
23
+ </fieldset>
24
+ </div>
25
+
26
+ <br />
27
+
28
+ <form onsubmit="ImageDialog.insert();return false;" action="#">
29
+ <div class="tabs">
30
+ <ul>
31
+
32
+ <li id="dynamic_select_tab" class="current"><span><a href="javascript:mcTabs.displayTab('dynamic_select_tab','dynamic_select_panel');" onmousedown="return false;">Uploaded Images</a></span></li>
33
+ <li id="general_tab"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#advimage_dlg.tab_general}</a></span></li>
34
+ <li id="appearance_tab"><span><a href="javascript:mcTabs.displayTab('appearance_tab','appearance_panel');" onmousedown="return false;">{#advimage_dlg.tab_appearance}</a></span></li>
35
+ <!-- <li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">{#advimage_dlg.tab_advanced}</a></span></li> -->
36
+ </ul>
37
+ </div>
38
+
39
+ <div class="panel_wrapper">
40
+
41
+ <div id="dynamic_select_panel" class="panel current" style='overflow:auto'>
42
+ <fieldset>
43
+ <legend>Available Images</legend>
44
+ <script type="text/javascript">//<![CDATA[
45
+ new Ajax.Request("/manage_photos",
46
+ {asynchronous:true, evalScripts:true, method:'get'});
47
+ //]]></script>
48
+
49
+ <div id='dynamic_images_list'>
50
+ Loading Images...<br />
51
+ <img src='/plugin_assets/community_engine/images/spinner.gif'>
52
+ </div>
53
+ </fieldset>
54
+ </div>
55
+ <div id="general_panel" class="panel">
56
+ <fieldset>
57
+ <legend>{#advimage_dlg.general}</legend>
58
+
59
+ <table class="properties">
60
+ <tr>
61
+ <td class="column1"><label id="srclabel" for="src">{#advimage_dlg.src}</label></td>
62
+ <td colspan="2"><table border="0" cellspacing="0" cellpadding="0">
63
+ <tr>
64
+ <td><input name="src" type="text" id="src" value="" onchange="ImageDialog.showPreviewImage(this.value);" /></td>
65
+ <td id="srcbrowsercontainer">&nbsp;</td>
66
+ </tr>
67
+ </table></td>
68
+ </tr>
69
+ <tr>
70
+ <td><label for="src_list">{#advimage_dlg.image_list}</label></td>
71
+ <td><select id="src_list" name="src_list" onchange="document.getElementById('src').value=this.options[this.selectedIndex].value;document.getElementById('alt').value=this.options[this.selectedIndex].text;document.getElementById('title').value=this.options[this.selectedIndex].text;ImageDialog.showPreviewImage(this.options[this.selectedIndex].value);"></select></td>
72
+ </tr>
73
+ <tr>
74
+ <td class="column1"><label id="altlabel" for="alt">{#advimage_dlg.alt}</label></td>
75
+ <td colspan="2"><input id="alt" name="alt" type="text" value="" /></td>
76
+ </tr>
77
+ <tr>
78
+ <td class="column1"><label id="titlelabel" for="title">{#advimage_dlg.title}</label></td>
79
+ <td colspan="2"><input id="title" name="title" type="text" value="" /></td>
80
+ </tr>
81
+ </table>
82
+ </fieldset>
83
+
84
+ <fieldset>
85
+ <legend>{#advimage_dlg.preview}</legend>
86
+ <div id="prev"></div>
87
+ </fieldset>
88
+ </div>
89
+
90
+ <div id="appearance_panel" class="panel">
91
+ <fieldset>
92
+ <legend>{#advimage_dlg.tab_appearance}</legend>
93
+
94
+ <table border="0" cellpadding="4" cellspacing="0">
95
+ <tr>
96
+ <td class="column1"><label id="alignlabel" for="align">{#advimage_dlg.align}</label></td>
97
+ <td><select id="align" name="align" onchange="ImageDialog.updateStyle('align');ImageDialog.changeAppearance();">
98
+ <option value="">{#not_set}</option>
99
+ <option value="baseline">{#advimage_dlg.align_baseline}</option>
100
+ <option value="top">{#advimage_dlg.align_top}</option>
101
+ <option value="middle">{#advimage_dlg.align_middle}</option>
102
+ <option value="bottom">{#advimage_dlg.align_bottom}</option>
103
+ <option value="text-top">{#advimage_dlg.align_texttop}</option>
104
+ <option value="text-bottom">{#advimage_dlg.align_textbottom}</option>
105
+ <option value="left">{#advimage_dlg.align_left}</option>
106
+ <option value="right">{#advimage_dlg.align_right}</option>
107
+ </select>
108
+ </td>
109
+ <td rowspan="6" valign="top">
110
+ <div class="alignPreview">
111
+ <img id="alignSampleImg" src="img/sample.gif" alt="{#advimage_dlg.example_img}" />
112
+ Lorem ipsum, Dolor sit amet, consectetuer adipiscing loreum ipsum edipiscing elit, sed diam
113
+ nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Loreum ipsum
114
+ edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
115
+ erat volutpat.
116
+ </div>
117
+ </td>
118
+ </tr>
119
+
120
+ <tr>
121
+ <td class="column1"><label id="widthlabel" for="width">{#advimage_dlg.dimensions}</label></td>
122
+ <td nowrap="nowrap">
123
+ <input name="width" type="text" id="width" value="" size="5" maxlength="5" class="size" onchange="ImageDialog.changeHeight();" /> x
124
+ <input name="height" type="text" id="height" value="" size="5" maxlength="5" class="size" onchange="ImageDialog.changeWidth();" /> px
125
+ </td>
126
+ </tr>
127
+
128
+ <tr>
129
+ <td>&nbsp;</td>
130
+ <td><table border="0" cellpadding="0" cellspacing="0">
131
+ <tr>
132
+ <td><input id="constrain" type="checkbox" name="constrain" class="checkbox" /></td>
133
+ <td><label id="constrainlabel" for="constrain">{#advimage_dlg.constrain_proportions}</label></td>
134
+ </tr>
135
+ </table></td>
136
+ </tr>
137
+
138
+ <tr>
139
+ <td class="column1"><label id="vspacelabel" for="vspace">{#advimage_dlg.vspace}</label></td>
140
+ <td><input name="vspace" type="text" id="vspace" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('vspace');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('vspace');ImageDialog.changeAppearance();" />
141
+ </td>
142
+ </tr>
143
+
144
+ <tr>
145
+ <td class="column1"><label id="hspacelabel" for="hspace">{#advimage_dlg.hspace}</label></td>
146
+ <td><input name="hspace" type="text" id="hspace" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('hspace');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('hspace');ImageDialog.changeAppearance();" /></td>
147
+ </tr>
148
+
149
+ <tr>
150
+ <td class="column1"><label id="borderlabel" for="border">{#advimage_dlg.border}</label></td>
151
+ <td><input id="border" name="border" type="text" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('border');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('border');ImageDialog.changeAppearance();" /></td>
152
+ </tr>
153
+
154
+ <tr>
155
+ <td><label for="class_list">{#class_name}</label></td>
156
+ <td><select id="class_list" name="class_list"></select></td>
157
+ </tr>
158
+
159
+ <tr>
160
+ <td class="column1"><label id="stylelabel" for="style">{#advimage_dlg.style}</label></td>
161
+ <td colspan="2"><input id="style" name="style" type="text" value="" onchange="ImageDialog.changeAppearance();" /></td>
162
+ </tr>
163
+
164
+ <!-- <tr>
165
+ <td class="column1"><label id="classeslabel" for="classes">{#advimage_dlg.classes}</label></td>
166
+ <td colspan="2"><input id="classes" name="classes" type="text" value="" onchange="selectByValue(this.form,'classlist',this.value,true);" /></td>
167
+ </tr> -->
168
+ </table>
169
+ </fieldset>
170
+ </div>
171
+
172
+ <!--
173
+ <div id="advanced_panel" class="panel">
174
+ <fieldset>
175
+ <legend>{#advimage_dlg.swap_image}</legend>
176
+
177
+ <input type="checkbox" id="onmousemovecheck" name="onmousemovecheck" class="checkbox" onclick="ImageDialog.setSwapImage(this.checked);" />
178
+ <label id="onmousemovechecklabel" for="onmousemovecheck">{#advimage_dlg.alt_image}</label>
179
+
180
+ <table border="0" cellpadding="4" cellspacing="0" width="100%">
181
+ <tr>
182
+ <td class="column1"><label id="onmouseoversrclabel" for="onmouseoversrc">{#advimage_dlg.mouseover}</label></td>
183
+ <td><table border="0" cellspacing="0" cellpadding="0">
184
+ <tr>
185
+ <td><input id="onmouseoversrc" name="onmouseoversrc" type="text" value="" /></td>
186
+ <td id="onmouseoversrccontainer">&nbsp;</td>
187
+ </tr>
188
+ </table></td>
189
+ </tr>
190
+ <tr>
191
+ <td><label for="over_list">{#advimage_dlg.image_list}</label></td>
192
+ <td><select id="over_list" name="over_list" onchange="document.getElementById('onmouseoversrc').value=this.options[this.selectedIndex].value;"></select></td>
193
+ </tr>
194
+ <tr>
195
+ <td class="column1"><label id="onmouseoutsrclabel" for="onmouseoutsrc">{#advimage_dlg.mouseout}</label></td>
196
+ <td class="column2"><table border="0" cellspacing="0" cellpadding="0">
197
+ <tr>
198
+ <td><input id="onmouseoutsrc" name="onmouseoutsrc" type="text" value="" /></td>
199
+ <td id="onmouseoutsrccontainer">&nbsp;</td>
200
+ </tr>
201
+ </table></td>
202
+ </tr>
203
+ <tr>
204
+ <td><label for="out_list">{#advimage_dlg.image_list}</label></td>
205
+ <td><select id="out_list" name="out_list" onchange="document.getElementById('onmouseoutsrc').value=this.options[this.selectedIndex].value;"></select></td>
206
+ </tr>
207
+ </table>
208
+ </fieldset>
209
+
210
+ <fieldset>
211
+ <legend>{#advimage_dlg.misc}</legend>
212
+
213
+ <table border="0" cellpadding="4" cellspacing="0">
214
+ <tr>
215
+ <td class="column1"><label id="idlabel" for="id">{#advimage_dlg.id}</label></td>
216
+ <td><input id="id" name="id" type="text" value="" /></td>
217
+ </tr>
218
+
219
+ <tr>
220
+ <td class="column1"><label id="dirlabel" for="dir">{#advimage_dlg.langdir}</label></td>
221
+ <td>
222
+ <select id="dir" name="dir" onchange="ImageDialog.changeAppearance();">
223
+ <option value="">{#not_set}</option>
224
+ <option value="ltr">{#advimage_dlg.ltr}</option>
225
+ <option value="rtl">{#advimage_dlg.rtl}</option>
226
+ </select>
227
+ </td>
228
+ </tr>
229
+
230
+ <tr>
231
+ <td class="column1"><label id="langlabel" for="lang">{#advimage_dlg.langcode}</label></td>
232
+ <td>
233
+ <input id="lang" name="lang" type="text" value="" />
234
+ </td>
235
+ </tr>
236
+
237
+ <tr>
238
+ <td class="column1"><label id="usemaplabel" for="usemap">{#advimage_dlg.map}</label></td>
239
+ <td>
240
+ <input id="usemap" name="usemap" type="text" value="" />
241
+ </td>
242
+ </tr>
243
+
244
+ <tr>
245
+ <td class="column1"><label id="longdesclabel" for="longdesc">{#advimage_dlg.long_desc}</label></td>
246
+ <td><table border="0" cellspacing="0" cellpadding="0">
247
+ <tr>
248
+ <td><input id="longdesc" name="longdesc" type="text" value="" /></td>
249
+ <td id="longdesccontainer">&nbsp;</td>
250
+ </tr>
251
+ </table></td>
252
+ </tr>
253
+ </table>
254
+ </fieldset>
255
+ </div>
256
+ -->
257
+ </div>
258
+
259
+ <div class="mceActionPanel">
260
+ <div style="float: left">
261
+ <input type="button" id="insert" name="insert" value="{#insert}" onclick="ImageDialog.insert();" />
262
+ </div>
263
+
264
+ <div style="float: right">
265
+ <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
266
+ </div>
267
+ </div>
268
+ </form>
269
+ </body>
270
+ </html>
@@ -0,0 +1,498 @@
1
+ function select_image(element){
2
+ element = $(element);
3
+ element.up('ul').select('li').invoke("removeClassName", "selected");
4
+ element.up('li').addClassName('selected');
5
+ }
6
+ function select_thumb(event) {
7
+ element = Event.element(event);
8
+ src = element.getAttribute('href');
9
+ curbly_insert_image(src, element.getAttribute('alt') );
10
+ Event.stop(event);
11
+ return false;
12
+ }
13
+
14
+ function upload_image_callback(url, alt_text, photo_id){
15
+ $('image_uploaded_data').clear();
16
+ new Ajax.Request("/manage_photos?photo_id="+photo_id, {asynchronous:true, evalScripts:true, method:'get'});
17
+ }
18
+
19
+ function curbly_insert_image(url, alt_text){
20
+ var formObj = formElement();
21
+ formObj.src.value = url;
22
+ formObj.alt.value = alt_text;
23
+ mcTabs.displayTab('general_tab','general_panel');
24
+ ImageDialog.showPreviewImage(url);
25
+ }
26
+ function formElement() {
27
+ return document.forms[1];
28
+ }
29
+ function ts_onload(){
30
+ $('dynamic_images_list').update("Uploading...<br /><img src='/plugin_assets/community_engine/images/spinner.gif'>");
31
+ mcTabs.displayTab('dynamic_select_tab','dynamic_select_panel');
32
+
33
+ var iframe1=ts_ce('iframe','html_editor_image_upload_frame');
34
+ iframe1.setAttribute('src','about:blank');
35
+ iframe1.style.border="0px none";
36
+ iframe1.style.position="absolute";
37
+ iframe1.style.width="1px";
38
+ iframe1.style.height="1px";
39
+ iframe1.style.visibility="hidden";
40
+ iframe1.setAttribute('id','html_editor_image_upload_frame');
41
+ $('image-upload').appendChild(iframe1);
42
+ $('image_upload_form').setAttribute("action", ts_upload_image_path());
43
+ }
44
+ function ts_upload_image_path() {
45
+ // path_prefix = window.parent.location.pathname.split("/")[1];
46
+ // to_path = "/" + path_prefix + "/photos.js";
47
+ // to_path = "/manage_photos.js";
48
+ return '/create_photo.js';
49
+ }
50
+ function ts_ce(tag,name){
51
+ if (name && window.ActiveXObject){
52
+ element = document.createElement('<'+tag+' name="'+name+'">');
53
+ }else{
54
+ element = document.createElement(tag);
55
+ element.setAttribute('name',name);
56
+ }
57
+ return element;
58
+ }
59
+
60
+
61
+ var ImageDialog = {
62
+ preInit : function() {
63
+ var url;
64
+
65
+ tinyMCEPopup.requireLangPack();
66
+
67
+ if (url = tinyMCEPopup.getParam("external_image_list_url"))
68
+ document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
69
+ },
70
+
71
+ init : function(ed) {
72
+ var f = formElement(), nl = f.elements, ed = tinyMCEPopup.editor, dom = ed.dom, n = ed.selection.getNode();
73
+
74
+ tinyMCEPopup.resizeToInnerSize();
75
+ this.fillClassList('class_list');
76
+ this.fillFileList('src_list', 'tinyMCEImageList');
77
+ this.fillFileList('over_list', 'tinyMCEImageList');
78
+ this.fillFileList('out_list', 'tinyMCEImageList');
79
+
80
+ if (n.nodeName == 'IMG') {
81
+ nl.src.value = dom.getAttrib(n, 'src');
82
+ nl.width.value = dom.getAttrib(n, 'width');
83
+ nl.height.value = dom.getAttrib(n, 'height');
84
+ nl.alt.value = dom.getAttrib(n, 'alt');
85
+ nl.title.value = dom.getAttrib(n, 'title');
86
+ nl.vspace.value = this.getAttrib(n, 'vspace');
87
+ nl.hspace.value = this.getAttrib(n, 'hspace');
88
+ nl.border.value = this.getAttrib(n, 'border');
89
+ selectByValue(f, 'align', this.getAttrib(n, 'align'));
90
+ selectByValue(f, 'class_list', dom.getAttrib(n, 'class'));
91
+ nl.style.value = dom.getAttrib(n, 'style');
92
+ nl.id.value = dom.getAttrib(n, 'id');
93
+ nl.dir.value = dom.getAttrib(n, 'dir');
94
+ nl.lang.value = dom.getAttrib(n, 'lang');
95
+ nl.usemap.value = dom.getAttrib(n, 'usemap');
96
+ nl.longdesc.value = dom.getAttrib(n, 'longdesc');
97
+ nl.insert.value = ed.getLang('update');
98
+
99
+ if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseover')))
100
+ nl.onmouseoversrc.value = dom.getAttrib(n, 'onmouseover').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
101
+
102
+ if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseout')))
103
+ nl.onmouseoutsrc.value = dom.getAttrib(n, 'onmouseout').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
104
+
105
+ if (ed.settings.inline_styles) {
106
+ // Move attribs to styles
107
+ if (dom.getAttrib(n, 'align'))
108
+ this.updateStyle('align');
109
+
110
+ if (dom.getAttrib(n, 'hspace'))
111
+ this.updateStyle('hspace');
112
+
113
+ if (dom.getAttrib(n, 'border'))
114
+ this.updateStyle('border');
115
+
116
+ if (dom.getAttrib(n, 'vspace'))
117
+ this.updateStyle('vspace');
118
+ }
119
+ }
120
+
121
+ // Setup browse button
122
+ document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image');
123
+ if (isVisible('srcbrowser'))
124
+ document.getElementById('src').style.width = '260px';
125
+
126
+ // Setup browse button
127
+ // document.getElementById('onmouseoversrccontainer').innerHTML = getBrowserHTML('overbrowser','onmouseoversrc','image','theme_advanced_image');
128
+ // if (isVisible('overbrowser'))
129
+ // document.getElementById('onmouseoversrc').style.width = '260px';
130
+ //
131
+ // // Setup browse button
132
+ // document.getElementById('onmouseoutsrccontainer').innerHTML = getBrowserHTML('outbrowser','onmouseoutsrc','image','theme_advanced_image');
133
+ // if (isVisible('outbrowser'))
134
+ // document.getElementById('onmouseoutsrc').style.width = '260px';
135
+
136
+ // If option enabled default contrain proportions to checked
137
+ if (ed.getParam("advimage_constrain_proportions", true))
138
+ f.constrain.checked = true;
139
+
140
+ // Check swap image if valid data
141
+ // if (nl.onmouseoversrc.value || nl.onmouseoutsrc.value)
142
+ // this.setSwapImage(true);
143
+ // else
144
+ // this.setSwapImage(false);
145
+
146
+ this.changeAppearance();
147
+ this.showPreviewImage(nl.src.value, 1);
148
+ },
149
+
150
+ insert : function(file, title) {
151
+ var ed = tinyMCEPopup.editor, t = this, f = formElement();
152
+
153
+ if (f.src.value === '') {
154
+ if (ed.selection.getNode().nodeName == 'IMG') {
155
+ ed.dom.remove(ed.selection.getNode());
156
+ ed.execCommand('mceRepaint');
157
+ }
158
+
159
+ tinyMCEPopup.close();
160
+ return;
161
+ }
162
+
163
+ if (tinyMCEPopup.getParam("accessibility_warnings", 1)) {
164
+ if (!f.alt.value) {
165
+ tinyMCEPopup.editor.windowManager.confirm(tinyMCEPopup.getLang('advimage_dlg.missing_alt'), function(s) {
166
+ if (s)
167
+ t.insertAndClose();
168
+ });
169
+
170
+ return;
171
+ }
172
+ }
173
+
174
+ t.insertAndClose();
175
+ },
176
+
177
+ insertAndClose : function() {
178
+ var ed = tinyMCEPopup.editor, f = formElement(), nl = f.elements, v, args = {}, el;
179
+
180
+ // Fixes crash in Safari
181
+ if (tinymce.isWebKit)
182
+ ed.getWin().focus();
183
+
184
+ if (!ed.settings.inline_styles) {
185
+ args = {
186
+ vspace : nl.vspace.value,
187
+ hspace : nl.hspace.value,
188
+ border : nl.border.value,
189
+ align : getSelectValue(f, 'align')
190
+ };
191
+ } else {
192
+ // Remove deprecated values
193
+ args = {
194
+ vspace : '',
195
+ hspace : '',
196
+ border : '',
197
+ align : ''
198
+ };
199
+ }
200
+
201
+ tinymce.extend(args, {
202
+ src : nl.src.value,
203
+ width : nl.width.value,
204
+ height : nl.height.value,
205
+ alt : nl.alt.value,
206
+ title : nl.title.value,
207
+ 'class' : getSelectValue(f, 'class_list'),
208
+ style : nl.style.value
209
+ // id : nl.id.value,
210
+ // dir : nl.dir.value,
211
+ // lang : nl.lang.value,
212
+ // usemap : nl.usemap.value,
213
+ // longdesc : nl.longdesc.value
214
+ });
215
+
216
+ // args.onmouseover = args.onmouseout = '';
217
+
218
+ // if (f.onmousemovecheck.checked) {
219
+ // if (nl.onmouseoversrc.value)
220
+ // args.onmouseover = "this.src='" + nl.onmouseoversrc.value + "';";
221
+ //
222
+ // if (nl.onmouseoutsrc.value)
223
+ // args.onmouseout = "this.src='" + nl.onmouseoutsrc.value + "';";
224
+ // }
225
+
226
+ el = ed.selection.getNode();
227
+
228
+ if (el && el.nodeName == 'IMG') {
229
+ ed.dom.setAttribs(el, args);
230
+ } else {
231
+ ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" src="javascript:;" />', {skip_undo : 1});
232
+ ed.dom.setAttribs('__mce_tmp', args);
233
+ ed.dom.setAttrib('__mce_tmp', 'id', '');
234
+ ed.undoManager.add();
235
+ }
236
+
237
+ tinyMCEPopup.close();
238
+ },
239
+
240
+ getAttrib : function(e, at) {
241
+ var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2;
242
+
243
+ if (ed.settings.inline_styles) {
244
+ switch (at) {
245
+ case 'align':
246
+ if (v = dom.getStyle(e, 'float'))
247
+ return v;
248
+
249
+ if (v = dom.getStyle(e, 'vertical-align'))
250
+ return v;
251
+
252
+ break;
253
+
254
+ case 'hspace':
255
+ v = dom.getStyle(e, 'margin-left')
256
+ v2 = dom.getStyle(e, 'margin-right');
257
+
258
+ if (v && v == v2)
259
+ return parseInt(v.replace(/[^0-9]/g, ''));
260
+
261
+ break;
262
+
263
+ case 'vspace':
264
+ v = dom.getStyle(e, 'margin-top')
265
+ v2 = dom.getStyle(e, 'margin-bottom');
266
+ if (v && v == v2)
267
+ return parseInt(v.replace(/[^0-9]/g, ''));
268
+
269
+ break;
270
+
271
+ case 'border':
272
+ v = 0;
273
+
274
+ tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) {
275
+ sv = dom.getStyle(e, 'border-' + sv + '-width');
276
+
277
+ // False or not the same as prev
278
+ if (!sv || (sv != v && v !== 0)) {
279
+ v = 0;
280
+ return false;
281
+ }
282
+
283
+ if (sv)
284
+ v = sv;
285
+ });
286
+
287
+ if (v)
288
+ return parseInt(v.replace(/[^0-9]/g, ''));
289
+
290
+ break;
291
+ }
292
+ }
293
+
294
+ if (v = dom.getAttrib(e, at))
295
+ return v;
296
+
297
+ return '';
298
+ },
299
+
300
+ setSwapImage : function(st) {
301
+ var f = formElement();
302
+
303
+ f.onmousemovecheck.checked = st;
304
+ setBrowserDisabled('overbrowser', !st);
305
+ setBrowserDisabled('outbrowser', !st);
306
+
307
+ if (f.over_list)
308
+ f.over_list.disabled = !st;
309
+
310
+ if (f.out_list)
311
+ f.out_list.disabled = !st;
312
+
313
+ f.onmouseoversrc.disabled = !st;
314
+ f.onmouseoutsrc.disabled = !st;
315
+ },
316
+
317
+ fillClassList : function(id) {
318
+ var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
319
+
320
+ if (v = tinyMCEPopup.getParam('theme_advanced_styles')) {
321
+ cl = [];
322
+
323
+ tinymce.each(v.split(';'), function(v) {
324
+ var p = v.split('=');
325
+
326
+ cl.push({'title' : p[0], 'class' : p[1]});
327
+ });
328
+ } else
329
+ cl = tinyMCEPopup.editor.dom.getClasses();
330
+
331
+ if (cl.length > 0) {
332
+ lst.options[lst.options.length] = new Option(tinyMCEPopup.getLang('not_set'), '');
333
+
334
+ tinymce.each(cl, function(o) {
335
+ lst.options[lst.options.length] = new Option(o.title || o['class'], o['class']);
336
+ });
337
+ } else
338
+ dom.remove(dom.getParent(id, 'tr'));
339
+ },
340
+
341
+ fillFileList : function(id, l) {
342
+ var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
343
+
344
+ l = window[l];
345
+
346
+ if (l && l.length > 0) {
347
+ lst.options[lst.options.length] = new Option('', '');
348
+
349
+ tinymce.each(l, function(o) {
350
+ lst.options[lst.options.length] = new Option(o[0], o[1]);
351
+ });
352
+ } else
353
+ dom.remove(dom.getParent(id, 'tr'));
354
+ },
355
+
356
+ resetImageData : function() {
357
+ var f = formElement();
358
+
359
+ f.elements.width.value = f.elements.height.value = '';
360
+ },
361
+
362
+ updateImageData : function(img, st) {
363
+ var f = formElement();
364
+
365
+ if (!st) {
366
+ f.elements.width.value = img.width;
367
+ f.elements.height.value = img.height;
368
+ }
369
+
370
+ this.preloadImg = img;
371
+ },
372
+
373
+ changeAppearance : function() {
374
+ var ed = tinyMCEPopup.editor, f = formElement(), img = document.getElementById('alignSampleImg');
375
+
376
+ if (img) {
377
+ if (ed.getParam('inline_styles')) {
378
+ ed.dom.setAttrib(img, 'style', f.style.value);
379
+ } else {
380
+ img.align = f.align.value;
381
+ img.border = f.border.value;
382
+ img.hspace = f.hspace.value;
383
+ img.vspace = f.vspace.value;
384
+ }
385
+ }
386
+ },
387
+
388
+ changeHeight : function() {
389
+ var f = formElement(), tp, t = this;
390
+
391
+ if (!f.constrain.checked || !t.preloadImg) {
392
+ return;
393
+ }
394
+
395
+ if (f.width.value == "" || f.height.value == "")
396
+ return;
397
+
398
+ tp = (parseInt(f.width.value) / parseInt(t.preloadImg.width)) * t.preloadImg.height;
399
+ f.height.value = tp.toFixed(0);
400
+ },
401
+
402
+ changeWidth : function() {
403
+ var f = formElement(), tp, t = this;
404
+
405
+ if (!f.constrain.checked || !t.preloadImg) {
406
+ return;
407
+ }
408
+
409
+ if (f.width.value == "" || f.height.value == "")
410
+ return;
411
+
412
+ tp = (parseInt(f.height.value) / parseInt(t.preloadImg.height)) * t.preloadImg.width;
413
+ f.width.value = tp.toFixed(0);
414
+ },
415
+
416
+ updateStyle : function(ty) {
417
+ var dom = tinyMCEPopup.dom, st, v, f = formElement(), img = dom.create('img', {style : dom.get('style').value});
418
+
419
+ if (tinyMCEPopup.editor.settings.inline_styles) {
420
+ // Handle align
421
+ if (ty == 'align') {
422
+ dom.setStyle(img, 'float', '');
423
+ dom.setStyle(img, 'vertical-align', '');
424
+
425
+ v = getSelectValue(f, 'align');
426
+ if (v) {
427
+ if (v == 'left' || v == 'right')
428
+ dom.setStyle(img, 'float', v);
429
+ else
430
+ img.style.verticalAlign = v;
431
+ }
432
+ }
433
+
434
+ // Handle border
435
+ if (ty == 'border') {
436
+ dom.setStyle(img, 'border', '');
437
+
438
+ v = f.border.value;
439
+ if (v || v == '0') {
440
+ if (v == '0')
441
+ img.style.border = '';
442
+ else
443
+ img.style.border = v + 'px solid black';
444
+ }
445
+ }
446
+
447
+ // Handle hspace
448
+ if (ty == 'hspace') {
449
+ dom.setStyle(img, 'marginLeft', '');
450
+ dom.setStyle(img, 'marginRight', '');
451
+
452
+ v = f.hspace.value;
453
+ if (v) {
454
+ img.style.marginLeft = v + 'px';
455
+ img.style.marginRight = v + 'px';
456
+ }
457
+ }
458
+
459
+ // Handle vspace
460
+ if (ty == 'vspace') {
461
+ dom.setStyle(img, 'marginTop', '');
462
+ dom.setStyle(img, 'marginBottom', '');
463
+
464
+ v = f.vspace.value;
465
+ if (v) {
466
+ img.style.marginTop = v + 'px';
467
+ img.style.marginBottom = v + 'px';
468
+ }
469
+ }
470
+
471
+ // Merge
472
+ dom.get('style').value = dom.serializeStyle(dom.parseStyle(img.style.cssText));
473
+ }
474
+ },
475
+
476
+ changeMouseMove : function() {
477
+ },
478
+
479
+ showPreviewImage : function(u, st) {
480
+ if (!u) {
481
+ tinyMCEPopup.dom.setHTML('prev', '');
482
+ return;
483
+ }
484
+
485
+ if (!st && tinyMCEPopup.getParam("advimage_update_dimensions_onchange", true))
486
+ this.resetImageData();
487
+
488
+ u = tinyMCEPopup.editor.documentBaseURI.toAbsolute(u);
489
+
490
+ if (!st)
491
+ tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this);" onerror="ImageDialog.resetImageData();" />');
492
+ else
493
+ tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this, 1);" />');
494
+ }
495
+ };
496
+
497
+ ImageDialog.preInit();
498
+ tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog);
@@ -0,0 +1,3 @@
1
+ tinyMCE.addI18n('en.curblyadvimage',{
2
+ image_desc : 'Upload or insert an image'
3
+ });
@@ -0,0 +1,43 @@
1
+ tinyMCE.addI18n('en.advimage_dlg',{
2
+ tab_general:"General",
3
+ tab_appearance:"Appearance",
4
+ tab_advanced:"Advanced",
5
+ general:"General",
6
+ title:"Title",
7
+ preview:"Preview",
8
+ constrain_proportions:"Constrain proportions",
9
+ langdir:"Language direction",
10
+ langcode:"Language code",
11
+ long_desc:"Long description link",
12
+ style:"Style",
13
+ classes:"Classes",
14
+ ltr:"Left to right",
15
+ rtl:"Right to left",
16
+ id:"Id",
17
+ map:"Image map",
18
+ swap_image:"Swap image",
19
+ alt_image:"Alternative image",
20
+ mouseover:"for mouse over",
21
+ mouseout:"for mouse out",
22
+ misc:"Miscellaneous",
23
+ example_img:"Appearance preview image",
24
+ missing_alt:"Are you sure you want to continue without including an Image Description? Without it the image may not be accessible to some users with disabilities, or to those using a text browser, or browsing the Web with images turned off.",
25
+ dialog_title:"Insert/edit image",
26
+ src:"Image URL",
27
+ alt:"Image description",
28
+ list:"Image list",
29
+ border:"Border",
30
+ dimensions:"Dimensions",
31
+ vspace:"Vertical space",
32
+ hspace:"Horizontal space",
33
+ align:"Alignment",
34
+ align_baseline:"Baseline",
35
+ align_top:"Top",
36
+ align_middle:"Middle",
37
+ align_bottom:"Bottom",
38
+ align_texttop:"Text top",
39
+ align_textbottom:"Text bottom",
40
+ align_left:"Left",
41
+ align_right:"Right",
42
+ image_list:"Image list"
43
+ });
@@ -0,0 +1,23 @@
1
+ # Make sure the tiny_mce gem has been loaded before we declare any plugins
2
+ require 'tiny_mce'
3
+
4
+ # We need to make sure that the TinyMCE Editor sources are already in place
5
+ # or any changes we make may be overwritten later
6
+ TinyMCE.install_or_update_tinymce
7
+
8
+ # Create the TinyMCE Paste Plugin. Inherit from TinyMCE::Plugin which sets a
9
+ # default self.install method, which installs all files in self.assets_path
10
+ # into the public/javascripts/tiny_mce directory
11
+ class TinyMCECurblyAdvImage < TinyMCE::Plugin
12
+
13
+ # This lets the TinyMCE::Plugin classes install method know where to find
14
+ # the assets we need to install. If were overwrite the self.install method
15
+ # here, then we don't need to provide this line
16
+ self.assets_path = File.join(File.dirname(__FILE__), 'assets')
17
+
18
+ end
19
+
20
+ # Finally, tell the TinyMCEPaste Plugin to install itself. The install method
21
+ # can be overwritten in the class definition above. TinyMCE::Plugin provide a
22
+ # default one that will work fine in this example
23
+ TinyMCEPaste.install
@@ -5,7 +5,7 @@
5
5
 
6
6
  Gem::Specification.new do |s|
7
7
  s.name = %q{tiny_mce_curblyadvimage}
8
- s.version = "0.1.0"
8
+ s.version = "0.2.0"
9
9
 
10
10
  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
11
11
  s.authors = ["Steve Leung"]
@@ -23,6 +23,14 @@ Gem::Specification.new do |s|
23
23
  "README.rdoc",
24
24
  "Rakefile",
25
25
  "VERSION",
26
+ "lib/assets/plugins/curblyadvimage/css/advimage.css",
27
+ "lib/assets/plugins/curblyadvimage/editor_plugin.js",
28
+ "lib/assets/plugins/curblyadvimage/editor_plugin_src.js",
29
+ "lib/assets/plugins/curblyadvimage/image.htm",
30
+ "lib/assets/plugins/curblyadvimage/img/sample.gif",
31
+ "lib/assets/plugins/curblyadvimage/js/functions.js",
32
+ "lib/assets/plugins/curblyadvimage/langs/en.js",
33
+ "lib/assets/plugins/curblyadvimage/langs/en_dlg.js",
26
34
  "lib/tiny_mce_curblyadvimage.rb",
27
35
  "test/helper.rb",
28
36
  "test/test_tiny_mce_curblyadvimage.rb",
metadata CHANGED
@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
4
4
  prerelease: false
5
5
  segments:
6
6
  - 0
7
- - 1
7
+ - 2
8
8
  - 0
9
- version: 0.1.0
9
+ version: 0.2.0
10
10
  platform: ruby
11
11
  authors:
12
12
  - Steve Leung
@@ -46,6 +46,14 @@ files:
46
46
  - README.rdoc
47
47
  - Rakefile
48
48
  - VERSION
49
+ - lib/assets/plugins/curblyadvimage/css/advimage.css
50
+ - lib/assets/plugins/curblyadvimage/editor_plugin.js
51
+ - lib/assets/plugins/curblyadvimage/editor_plugin_src.js
52
+ - lib/assets/plugins/curblyadvimage/image.htm
53
+ - lib/assets/plugins/curblyadvimage/img/sample.gif
54
+ - lib/assets/plugins/curblyadvimage/js/functions.js
55
+ - lib/assets/plugins/curblyadvimage/langs/en.js
56
+ - lib/assets/plugins/curblyadvimage/langs/en_dlg.js
49
57
  - lib/tiny_mce_curblyadvimage.rb
50
58
  - test/helper.rb
51
59
  - test/test_tiny_mce_curblyadvimage.rb