📄 正在查看：twcms/plugin/editor_um/umeditor/dialogs/image/image.js
1(function () {
2
3 var utils = UM.utils,
4 browser = UM.browser,
5 Base = {
6 checkURL: function (url) {
7 if(!url) return false;
8 url = utils.trim(url);
9 if (url.length <= 0) {
10 return false;
11 }
12 if (url.search(/http:\/\/|https:\/\//) !== 0) {
13 url += 'http://';
14 }
15
16 url=url.replace(/\?[\s\S]*$/,"");
17
18 if (!/(.gif|.jpg|.jpeg|.png)$/i.test(url)) {
19 return false;
20 }
21 return url;
22 },
23 getAllPic: function (sel, $w, editor) {
24 var me = this,
25 arr = [],
26 $imgs = $(sel, $w);
27
28 $.each($imgs, function (index, node) {
29 $(node).removeAttr("width").removeAttr("height");
30
31 if (node.width > editor.options.initialFrameWidth) {
32 me.scale(node, editor.options.initialFrameWidth -
33 parseInt($(editor.body).css("padding-left")) -
34 parseInt($(editor.body).css("padding-right")));
35 }
36
37 return arr.push({
38 width: node.width,
39 height: node.height,
40 // _src: node.src,
41 src: node.src
42 });
43 });
44
45 return arr;
46 },
47 scale: function (img, max, oWidth, oHeight) {
48 var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
49 if (ow > max || oh > max) {
50 if (ow >= oh) {
51 if (width = ow - max) {
52 percent = (width / ow).toFixed(2);
53 img.height = oh - oh * percent;
54 img.width = max;
55 }
56 } else {
57 if (height = oh - max) {
58 percent = (height / oh).toFixed(2);
59 img.width = ow - ow * percent;
60 img.height = max;
61 }
62 }
63 }
64
65 return this;
66 },
67 close: function ($img) {
68
69 $img.css({
70 top: ($img.parent().height() - $img.height()) / 2,
71 left: ($img.parent().width()-$img.width())/2
72 }).prev().on("click",function () {
73
74 if ( $(this).parent().remove().hasClass("edui-image-upload-item") ) {
75 //显示图片计数-1
76 Upload.showCount--;
77 Upload.updateView();
78 }
79
80 });
81
82 return this;
83 },
84 createImgBase64: function (img, file, $w) {
85 if (browser.webkit) {
86 //Chrome8+
87 img.src = window.webkitURL.createObjectURL(file);
88 } else if (browser.gecko) {
89 //FF4+
90 img.src = window.URL.createObjectURL(file);
91 } else {
92 //实例化file reader对象
93 var reader = new FileReader();
94 reader.onload = function (e) {
95 img.src = this.result;
96 $w.append(img);
97 };
98 reader.readAsDataURL(file);
99 }
100 },
101 callback: function (editor, $w, url, state) {
102
103 if (state == "SUCCESS") {
104 //显示图片计数+1
105 Upload.showCount++;
106 var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
107 $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);
108
109 if ($("#edui-image-Jupload2", $w).length < 1) {
110 $("#edui-image-Jcontent", $w).append($item);
111
112 Upload.render("#edui-image-Jcontent", 2)
113 .config("#edui-image-Jupload2");
114 } else {
115 $("#edui-image-Jupload2", $w).before($item).show();
116 }
117
118 $img.on("load", function () {
119 Base.scale(this, 120);
120 Base.close($(this));
121 });
122
123 } else {
124 currentDialog.showTip( state );
125 window.setTimeout( function () {
126
127 currentDialog.hideTip();
128
129 }, 3000 );
130 }
131
132 Upload.toggleMask();
133
134 }
135 };
136
137 /*
138 * 本地上传
139 * */
140 var Upload = {
141 showCount: 0,
142 uploadTpl: '<div class="edui-image-upload%%" id="edui-image-Jupload%%">' +
143 '<span class="edui-image-icon"></span>' +
144 '<form class="edui-image-form" method="post" enctype="multipart/form-data" target="up">' +
145 '<input style=\"filter: alpha(opacity=0);\" class="edui-image-file" type="file" hidefocus name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>' +
146 '</form>' +
147 '<iframe name="up" style="display: none"></iframe>' +
148 '</div>',
149 init: function (editor, $w) {
150 var me = this;
151
152 me.editor = editor;
153 me.dialog = $w;
154
155 me.render("#edui-image-Jlocal", 1);
156 me.config("#edui-image-Jupload1");
157 me.submit();
158 me.drag();
159
160 $("#edui-image-Jupload1").hover(function () {
161 $(".edui-image-icon", this).toggleClass("hover");
162 });
163
164 if (!(UM.browser.ie && UM.browser.version <= 9)) {
165 $("#edui-image-JdragTip", me.dialog).css("display", "block");
166 }
167
168
169 return me;
170 },
171 render: function (sel, t) {
172 var me = this;
173
174 $(sel, me.dialog).append($(me.uploadTpl.replace(/%%/g, t)));
175
176 return me;
177 },
178 config: function (sel) {
179 var me = this,
180 url=me.editor.options.imageUrl;
181
182 url=url + (url.indexOf("?") == -1 ? "?" : "&") + "editorid="+me.editor.id;//初始form提交地址;
183
184 $("form", $(sel, me.dialog)).attr("action", url);
185
186 return me;
187 },
188 submit: function (callback) {
189
190 var me = this,
191 input = $( '<input style="filter: alpha(opacity=0);" class="edui-image-file" type="file" hidefocus="" name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp">'),
192 input = input[0];
193
194 $(me.dialog).delegate( ".edui-image-file", "change", function ( e ) {
195
196 if ( !this.parentNode ) {
197 return;
198 }
199
200 $(this).parent()[0].submit();
201 Upload.updateInput( input );
202 me.toggleMask("Loading....");
203 callback && callback();
204
205 });
206
207 return me;
208 },
209 //更新input
210 updateInput: function ( inputField ) {
211
212 $( ".edui-image-file", this.dialog ).each( function ( index, ele ) {
213
214 ele.parentNode.replaceChild( inputField.cloneNode( true ), ele );
215
216 } );
217
218 },
219 //更新上传框
220 updateView: function () {
221
222 if ( Upload.showCount !== 0 ) {
223 return;
224 }
225
226 $(".edui-image-upload2", this.dialog).hide();
227 $(".edui-image-dragTip", this.dialog).show();
228 $(".edui-image-upload1", this.dialog).show();
229
230 },
231 drag: function () {
232 var me = this;
233 //做拽上传的支持
234 if (!UM.browser.ie9below) {
235 me.dialog.find('#edui-image-Jcontent').on('drop',function (e) {
236 e.stopPropagation();
237 e.preventDefault();
238
239 var isImg = function(type) {
240 switch (type) {
241 case 'image/jpg':
242 case 'image/jpeg':
243 case 'image/gif':
244 case 'image/png':
245 return true;
246 default:
247 return false;
248 }
249 }
250
251 //获取文件列表
252 var files = e.originalEvent.dataTransfer.files;
253 var img = document.createElement('img');
254
255 var eachUp = function(i) {
256 if(typeof files[i] == 'object') {
257 var f = files[i];
258
259 if(!isImg(f.type)) {
260 eachUp(i+1);
261 return;
262 }
263
264 //创建图片的base64
265 Base.createImgBase64(img, f, me.dialog);
266
267 var xhr = new XMLHttpRequest();
268 xhr.open("post", me.editor.getOpt('imageUrl') + "&type=ajax", true);
269 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
270
271 //模拟数据
272 var fd = new FormData();
273 fd.append(me.editor.getOpt('imageFieldName'), f);
274 xhr.send(fd);
275
276 xhr.addEventListener('load', function (e) {
277 try{
278 var data = eval("("+e.target.response+")");
279 if(data.kp_error) {
280 alert(data.kp_error);
281 }else{
282 Base.callback(me.editor, me.dialog, data.path, data.state);
283 setTimeout(function(){ eachUp(i+1); }, 50);
284
285 if (i == files.length - 1) {
286 $(img).remove()
287 }
288 }
289 }catch(e2){
290 alert("message: "+e2.message+"\n json: " + e.target.response);
291 }
292 });
293 }
294 }
295 eachUp(0);
296
297 me.toggleMask("Loading....");
298 }).on('dragover', function (e) {
299 e.preventDefault();
300 });
301 }
302 },
303 toggleMask: function (html) {
304 var me = this;
305
306 var $mask = $("#edui-image-Jmask", me.dialog);
307 if (html) {
308 if (!(UM.browser.ie && UM.browser.version <= 9)) {
309 $("#edui-image-JdragTip", me.dialog).css( "display", "none" );
310 }
311 $("#edui-image-Jupload1", me.dialog).css( "display", "none" );
312 $mask.addClass("active").html(html);
313 } else {
314
315 $mask.removeClass("active").html();
316
317 if ( Upload.showCount > 0 ) {
318 return me;
319 }
320
321 if (!(UM.browser.ie && UM.browser.version <= 9) ){
322 $("#edui-image-JdragTip", me.dialog).css("display", "block");
323 }
324 $("#edui-image-Jupload1", me.dialog).css( "display", "block" );
325 }
326
327 return me;
328 }
329 };
330
331 /*
332 * 网络图片
333 * */
334 var NetWork = {
335 init: function (editor, $w) {
336 var me = this;
337
338 me.editor = editor;
339 me.dialog = $w;
340
341 me.initEvt();
342 },
343 initEvt: function () {
344 var me = this,
345 url,
346 $ele = $("#edui-image-JsearchTxt", me.dialog);
347
348 $("#edui-image-JsearchAdd", me.dialog).on("click", function () {
349 url = Base.checkURL($ele.val());
350
351 if (url) {
352
353 $("<img src='" + url + "' class='edui-image-pic' />").on("load", function () {
354
355
356
357 var $item = $("<div class='edui-image-item'><div class='edui-image-close'></div></div>").append(this);
358
359 $("#edui-image-JsearchRes", me.dialog).append($item);
360
361 Base.scale(this, 120);
362
363 $item.width($(this).width());
364
365 Base.close($(this));
366
367 $ele.val("");
368 });
369 }
370 })
371 .hover(function () {
372 $(this).toggleClass("hover");
373 });
374 }
375 };
376
377 var $tab = null,
378 currentDialog = null;
379
380 UM.registerWidget('image', {
381 tpl: "<link rel=\"stylesheet\" type=\"text/css\" href=\"<%=image_url%>image.css\">" +
382 "<div id=\"edui-image-Jwrapper\" class=\"edui-image-wrapper\">" +
383 "<ul class=\"edui-tab-nav\">" +
384 "<li class=\"edui-tab-item active\"><a href=\"#edui-image-Jlocal\" class=\"edui-tab-text\"><%=lang_tab_local%></a></li>" +
385 "<li class=\"edui-tab-item\"><a href=\"#edui-image-JimgSearch\" class=\"edui-tab-text\"><%=lang_tab_imgSearch%></a></li>" +
386 "</ul>" +
387 "<div class=\"edui-tab-content\">" +
388 "<div id=\"edui-image-Jlocal\" class=\"edui-tab-pane active\">" +
389 "<div class=\"edui-image-content\" id=\"edui-image-Jcontent\"></div>" +
390 "<div class=\"edui-image-mask\" id=\"edui-image-Jmask\"></div>" +
391 "<div id=\"edui-image-JdragTip\" class=\"edui-image-dragTip\"><%=lang_input_dragTip%></div>" +
392 "</div>" +
393 "<div id=\"edui-image-JimgSearch\" class=\"edui-tab-pane\">" +
394 "<div class=\"edui-image-searchBar\">" +
395 "<table><tr><td><input class=\"edui-image-searchTxt\" id=\"edui-image-JsearchTxt\" type=\"text\"></td>" +
396 "<td><div class=\"edui-image-searchAdd\" id=\"edui-image-JsearchAdd\"><%=lang_btn_add%></div></td></tr></table>" +
397 "</div>" +
398 "<div class=\"edui-image-searchRes\" id=\"edui-image-JsearchRes\"></div>" +
399 "</div>" +
400 "</div>" +
401 "</div>",
402 initContent: function (editor, $dialog) {
403 var lang = editor.getLang('image')["static"],
404 opt = $.extend({}, lang, {
405 image_url: UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/image/'
406 });
407
408 Upload.showCount = 0;
409
410 if (lang) {
411 var html = $.parseTmpl(this.tpl, opt);
412 }
413
414 currentDialog = $dialog.edui();
415
416 this.root().html(html);
417
418 },
419 initEvent: function (editor, $w) {
420 $tab = $.eduitab({selector: "#edui-image-Jwrapper"})
421 .edui().on("beforeshow", function (e) {
422 e.stopPropagation();
423 });
424
425 Upload.init(editor, $w);
426
427 NetWork.init(editor, $w);
428 },
429 buttons: {
430 'ok': {
431 exec: function (editor, $w) {
432 var sel = "",
433 index = $tab.activate();
434
435 if (index == 0) {
436 sel = "#edui-image-Jcontent .edui-image-pic";
437 } else if (index == 1) {
438 sel = "#edui-image-JsearchRes .edui-image-pic";
439 }
440
441 var list = Base.getAllPic(sel, $w, editor);
442
443 if (index != -1) {
444 editor.execCommand('insertimage', list);
445 }
446 }
447 },
448 'cancel': {}
449 },
450 width: 700,
451 height: 408
452 }, function (editor, $w, url, state) {
453 Base.callback(editor, $w, url, state)
454 })
455})();
456
457