📄 正在查看：admin/view/default/photo_set.htm
1{inc:header.htm}
2<div class="m">
3 <div class="p">
4 <form id="photo_set" action="index.php?u=photo-{$_GET['action']}-ajax-1" method="post">
5 <input name="id" type="hidden" value="{$data[id]}" />
6 <input name="color" type="hidden" value="{$data[color]}" />
7 <input name="seo_title" type="hidden" value="{$data[seo_title]}" />
8 <div class="cc contadd">
9 <table><tr valign="top">
10 <td><table class="tb tl">
11 <tr>
12 <th class="th"><div style="width:65px"><b>*</b>分类</div></th>
13 <td class="col">
14 {$cidhtml}
15 </td>
16 </tr>
17 <tr>
18 <th class="th"><b>*</b>标题</th>
19 <td class="col"><input name="title" type="text" value="{$data[title]}" class="inp w98" /></td>
20 </tr>
21 <tr>
22 <th class="th"><b>*</b>图集</th>
23 <td class="col">
24 <div id="tw_dropbox" class="cf">
25 {loop:$data[images] $v $k}
26 <div class="d_li">
27 <div class="d_img"><img src="../{$v[thumb]}" height="120" width="120" style="margin-top: -10px;"></div>
28 <div class="d_txt">
29 <input name="images[{$k}][big]" value="{$v[big]}" type="hidden">
30 <input name="images[{$k}][thumb]" value="{$v[thumb]}" type="hidden">
31 <input name="images[{$k}][aid]" value="{$v[aid]}" type="hidden">
32 <textarea name="images[{$k}][content]" placeholder="请输入描述">{php}echo htmlspecialchars($v['content']);{/php}</textarea>
33 </div>
34 <div class="d_del" aid="{$v[aid]}">删除</div>
35 </div>
36 {/loop}
37 <div id="tw_imgup" class="d_li2">
38 <div><a id="tw_img_but" class="but3" href="javascript:;">上传图片</a></div>
39 <div id="tw_img_tips"></div>
40 </div>
41 </div>
42 </td>
43 </tr>
44 <tr>
45 <th class="th">内容</th>
46 <td class="col">
47 <textarea id="content" class="inp w98" name="content" style="height:80px">{$data[content]}</textarea>
48 <div class="addition">
49 <label title="远程抓取图片比较消耗服务器资源，影响发布速度">
50 <input name="isremote" type="checkbox" value="1"> 远程图片本地化
51 </label>
52 </div>
53 </td>
54 </tr>
55 <tr>
56 <th class="th">别名</th>
57 <td class="col"><input name="alias" type="text" value="{$data[alias]}" class="inp w1" /></td>
58 </tr>
59 <tr>
60 <th class="th">标签</th>
61 <td class="col"><input name="tags" type="text" value="{$data[tags]}" class="inp w1" /></td>
62 </tr>
63 <tr>
64 <th class="th">摘要</th>
65 <td class="col">
66 <textarea name="intro" class="inp w98" style="height:60px" titile="如果不填，程序自动生成摘要" maxlength="255">{$data[intro]}</textarea>
67 </td>
68 </tr>
69 <tr>
70 <th class="th"></th>
71 <td class="col"><input type="submit" value="保存" class="but1" style="margin:0" /></td>
72 </tr>
73 </table></td>
74 <td width="398"><table class="tb">
75 <tr>
76 <th class="th"><div style="width:90px">缩略图</div></th>
77 <td class="col">
78 <input id="tw_pic_val" name="pic" type="hidden" value="{$data[pic]}" />
79 <div class="picimg"><img id="tw_pic_img" src="{$data[pic_src]}" /></div>
80 <div class="picbut"><a id="tw_pic_but" class="but3" href="javascript:;">上传缩略图</a></div>
81 </td>
82 </tr>
83 <tr>
84 <th class="th">属性</th>
85 <td class="col">
86 <label><input class="mr3" name="flag[]" type="checkbox" value="1"{if:in_array(1,$data[flags])} checked{/if}>推荐</label>
87 <label><input class="mr3" name="flag[]" type="checkbox" value="2"{if:in_array(2,$data[flags])} checked{/if}>热点</label>
88 <label><input class="mr3" name="flag[]" type="checkbox" value="3"{if:in_array(3,$data[flags])} checked{/if}>头条</label>
89 <label><input class="mr3" name="flag[]" type="checkbox" value="4"{if:in_array(4,$data[flags])} checked{/if}>精选</label>
90 <label><input class="mr3" name="flag[]" type="checkbox" value="5"{if:in_array(5,$data[flags])} checked{/if}>幻灯</label>
91 </td>
92 </tr>
93 <tr>
94 <th class="th">作者</th>
95 <td class="col"><input name="author" type="text" value="{$data[author]}" class="inp w1" /></td>
96 </tr>
97 <tr>
98 <th class="th">来源</th>
99 <td class="col"><input name="source" type="text" value="{$data[source]}" class="inp w1" /></td>
100 </tr>
101 {if:$_GET['action'] == 'edit'}
102 <tr>
103 <th class="th">发布时间</th>
104 <td class="col"><input name="dateline" type="text" value="{$data[dateline]}" class="inp w1" /></td>
105 </tr>
106 {/if}
107 <tr>
108 <th class="th">浏览次数</th>
109 <td class="col"><input name="views" type="text" value="{$data[views]}" class="inp w1" /></td>
110 </tr>
111 <tr>
112 <th class="th">禁止评论</th>
113 <td class="col"><input name="iscomment" type="checkbox" value="1"{if:!empty($data['iscomment'])} checked="checked"{/if}></td>
114 </tr>
115 <tr>
116 <th class="th">SEO关键字</th>
117 <td class="col"><input name="seo_keywords" type="text" value="{$data[seo_keywords]}" class="inp w1" /></td>
118 </tr>
119 <tr>
120 <th class="th">SEO描述</th>
121 <td class="col"><input name="seo_description" type="text" value="{$data[seo_description]}" class="inp w1" /></td>
122 </tr>
123 </table></td>
124 </tr></table>
125 </div>
126 </form>
127 </div>
128</div>
129
130<iframe name="tw_upifr" style="display:none"></iframe>
131<form id="tw_pic_upform" target="tw_upifr" method="post" enctype="multipart/form-data" action="index.php?u=attach-upload_image&type=pic{$edit_cid_id}">
132 <input id="tw_pic_upfile" type="file" name="upfile" accept="image/jpg,image/jpeg,image/png,image/gif" />
133</form>
134<form id="tw_img_upform" target="tw_upifr" method="post" enctype="multipart/form-data" action="index.php?u=attach-upload_image&type=img{$edit_cid_id}">
135 <input id="tw_img_upfile" type="file" name="upfile" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="multiple" />
136</form>
137
138<script type="text/javascript">
139// 编辑器API
140window.editor_api = {
141 // 内容
142 content : {
143 obj : $('#content'),
144 get : function() {
145 return this.obj.val();
146 },
147 set : function(s) {
148 return this.obj.val(s);
149 },
150 focus : function() {
151 return this.obj.focus();
152 }
153 }
154}
155
156// 自动保存
157var action = "{$_GET['action']}";
158window.autoSave = function() {
159 if(action != "add") return;
160 var data = $("#photo_set").serialize();
161 twAjax.post("index.php?u=photo-auto_save-ajax-1", data, function(html) { });
162};
163
164// 编辑时保存图集
165window.editSaveImg = function() {
166 if(action != "edit") return;
167 var data = $("#photo_set").serialize();
168 twAjax.post("index.php?u=photo-save_images-ajax-1", data, function(html) { });
169};
170
171// 传统上传缩略图
172document.getElementById("tw_pic_upfile").onchange = function() {
173 document.getElementById("tw_pic_upform").submit();
174};
175
176//====拖拽图片上传====
177window.isDrop = !!window.FileReader;
178var kpUpload = {
179 init : function() {
180 if(!window.TW_UP) window.TW_UP = true;
181
182 if(isDrop) {
183 $("#tw_img_tips").html("支持拖拽上传");
184
185 //ajax上传图集
186 $("#tw_img_upfile").change(function() {
187 $("#tw_img_upfile").hide();
188 kpUpload.ajaxUpload(this.files);
189 });
190
191 //加载 HTML5 拖拽上传图集
192 kpUpload.ondrag();
193 }else{
194 $("#tw_imgup div").css("padding-top", "10px");
195 $("#tw_img_tips").html("您的浏览器太老，不支持拖拽上传，建议使用IE10以上版本或chrome");
196
197 //传统上传图集
198 document.getElementById("tw_img_upfile").onchange = function() {
199 document.getElementById("tw_img_upform").submit();
200 };
201 }
202 },
203
204 //绑定拖拽事件 提示: ondragover(当元素被拖动至有效拖放目标上方时运行脚本) ondrop(当拖动元素时运行脚本)是必须事件，否则拖拽不正常
205 ondrag : function() {
206 var box = document.getElementById("tw_dropbox");
207 var handleDragover = function(e) {
208 $(box).css("border-color", "#808080");
209 e.stopPropagation();
210 e.preventDefault();
211 }
212 var handlePrevent = function(e) {
213 e.stopPropagation();
214 e.preventDefault();
215 }
216 var handleDragleave = function(e) { //当元素离开有效拖放目标时运行脚本
217 $(box).css("border-color", "#ccc");
218 e.preventDefault();
219 }
220 document.ondragleave = handleDragleave;
221 document.ondragover = handleDragover;
222 document.ondrop = handlePrevent;
223 if(window.parent) {
224 parent.document.ondragover = handleDragover;
225 parent.document.ondrop = handlePrevent;
226 }
227 box.ondragover = handleDragover;
228 box.ondrop = function(e){
229 $(box).css("border-color", "#ccc");
230 $("#tw_img_upfile").hide();
231 e.stopPropagation();
232 e.preventDefault();
233 kpUpload.ajaxUpload(e.dataTransfer.files);
234 };
235 },
236
237 // 缩放图片尺寸
238 scaleImg : function (img, maxW, maxH) {
239 var width = 0, height = 0, percent, ow = img.width, oh = img.height;
240 if(ow > maxW || oh > maxH) {
241 if(ow >= oh) {
242 var width = ow - maxW;
243 if(width >= 0) {
244 percent = (width / ow).toFixed(2);
245 var h = oh - oh * percent;
246 img.height = h;
247 img.width = maxW;
248 img.style.marginTop = (maxH-h)/2+"px";
249 }
250 }else{
251 if(height = oh - maxH) {
252 percent = (height / oh).toFixed(2);
253 img.width = ow - ow * percent;
254 img.height = maxH;
255 }
256 }
257 }
258 },
259
260 //增加图片显示
261 boxAdd : function(file, big, thumb, aid) {
262 var img = document.createElement("img");
263 var div = $('<div class="d_img"></div>').append(img);
264 var inps = '<input name="images['+aid+'][big]" value="'+big+'" type="hidden" />';
265 inps += '<input name="images['+aid+'][thumb]" value="'+thumb+'" type="hidden" />';
266 inps += '<input name="images['+aid+'][aid]" value="'+aid+'" type="hidden" />'; // 用来删除时使用
267 inps += '<textarea name="images['+aid+'][content]" placeholder="请输入描述"></textarea>';
268 var d_li = $('<div class="d_li"><div class="d_txt">'+inps+'</div><div class="d_del" aid="'+aid+'">删除</div></div>').prepend(div);
269 $("#tw_imgup").before(d_li);
270
271 $("#tw_dropbox").kpdragsort(); // 重新绑定拖拽事件
272 setdelImg(); // 重新绑定删除事件
273
274 autoSave(); // 发布时会自动保存上传的图集
275 editSaveImg(); // 在编辑时，保存一下
276
277 if(typeof file == "object") {
278 var reader = new FileReader();
279 reader.readAsDataURL(file);
280 reader.onload = function(e) {
281 img.src = e.target.result;
282 img.onload = function() {
283 kpUpload.scaleImg(this, 120, 100);
284 }
285 };
286 }else if(typeof file == "string") {
287 img.src = file;
288 img.onload = function() {
289 kpUpload.scaleImg(this, 120, 100);
290 }
291 }
292 },
293
294 // 判断是否图片
295 isImg : function(type) {
296 switch (type) {
297 case 'image/jpg':
298 case 'image/jpeg':
299 case 'image/gif':
300 case 'image/png':
301 return true;
302 default:
303 return false;
304 }
305 },
306
307 //按顺序ajax上传
308 ajaxUpload : function(files) {
309 var upload = function(i) {
310 if(typeof files[i] == 'object') {
311 var f = files[i];
312
313 if(!kpUpload.isImg(f.type)) {
314 upload(i+1);
315 return;
316 }
317
318 var xhr = new XMLHttpRequest();
319 xhr.open("post", "index.php?u=attach-upload_image&type=img&ajax=1{$edit_cid_id}", true);
320 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
321
322 //模拟数据
323 var fd = new FormData();
324 fd.append("upfile", f);
325 xhr.send(fd);
326
327 xhr.addEventListener('load', function (e) {
328 var data = toJson(e.target.response);
329
330 if(data.state == "SUCCESS") {
331 kpUpload.boxAdd("../"+data.thumb, data.path, data.thumb, data.aid);
332 setTimeout(function(){ upload(i+1); }, 50);
333
334 if(i == files.length - 1) {
335 setImgBut(); // 图集上传按钮
336 }
337 }else{
338 setImgBut();
339 }
340 });
341 }
342 }
343 upload(0);
344 }
345};
346
347//拖拽插件
348$.fn.kpdragsort = function(options) {
349 var container = this;
350
351 $(container).children(".d_li").off("mousedown").mousedown(function(e) {
352 if(e.which != 1 || $(e.target).is("input, textarea, a") || window.kp_only) return; // 排除非左击和其他元素
353 e.preventDefault(); // 阻止选中文本
354
355 var x = e.pageX;
356 var y = e.pageY;
357 var _this = $(this); // 点击选中块
358 var w = _this.width();
359 var h = _this.height();
360 var w2 = w/2;
361 var h2 = h/2;
362 var p = _this.position();
363 var left = p.left;
364 var top = p.top;
365 var sTop = $(".p:first").scrollTop();
366 window.kp_only = true;
367
368 // 添加虚线框
369 _this.before('<div id="kp_widget_holder"></div>');
370 var wid = $("#kp_widget_holder");
371 wid.css({"border":"1px dashed #ccc", "float":"left", "width":"120px", "height":"120px", "margin":"5px 0 0 5px"});
372
373 // 保持原来的宽高
374 _this.css({"width":w, "height":h, "position":"absolute", opacity: 0.8, "z-index": 999, "left":left, "top":top});
375
376 // 绑定mousemove事件
377 $(document).mousemove(function(e) {
378 e.preventDefault();
379
380 // 移动选中块
381 var l = left + e.pageX - x;
382 var t = top + ($(".p:first").scrollTop() - sTop) + e.pageY - y;
383 _this.css({"left":l, "top":t});
384
385 // 选中块的中心坐标
386 var ml = l+w2;
387 var mt = t+h2;
388
389 // 遍历所有块的坐标
390 $(container).children(".d_li").not(_this).not(wid).each(function(i) {
391 var obj = $(this);
392 var p = obj.position();
393 var a1 = p.left;
394 var a2 = p.left + obj.width();
395 var a3 = p.top;
396 var a4 = p.top + obj.height();
397
398 // 移动虚线框
399 if(a1 < ml && ml < a2 && a3 < mt && mt < a4) {
400 if(!obj.next("#kp_widget_holder").length) {
401 wid.insertAfter(this);
402 }else{
403 wid.insertBefore(this);
404 }
405 return;
406 }
407 });
408 });
409
410 // 绑定mouseup事件
411 var _mouseup = function() {
412 $(document).off('mouseup').off('mousemove');
413
414 // 拖拽回位，并删除虚线框
415 var p = wid.position();
416 _this.animate({"left":p.left, "top":p.top}, 100, function() {
417 _this.removeAttr("style");
418 wid.replaceWith(_this);
419
420 setImgBut(); // 重新定位上传按钮
421 autoSave(); // 在发表时，保存一下
422 editSaveImg(); // 在编辑时，保存一下
423
424 window.kp_only = null;
425 if(parent) parent.document.onmouseup = null;
426 });
427 };
428 $(document).mouseup(_mouseup);
429 if(parent) parent.document.onmouseup = _mouseup;
430 });
431}
432
433// 设置显示缩略图 (iframe使用)
434function setDisplayPic(path, thumb) {
435 $("#tw_pic_val").val(thumb);
436 $("#tw_pic_img").attr("src", "../"+thumb);
437 autoSave();
438}
439
440// 图集中插入新图 (iframe使用)
441function setDisplayImg(path, thumb, aid) {
442 $("#tw_img_upfile").hide();
443 kpUpload.boxAdd("../"+thumb, path, thumb, aid);
444 setImgBut(); // 重新定位上传按钮
445}
446
447// 定位缩略图上传按钮
448function setPicBut() {
449 var obj = $("#tw_pic_but"),
450 p = obj.position(),
451 w = obj.outerWidth(true),
452 h = obj.outerHeight(true),
453 r = $(document).width() - w - p.left;
454 $("#tw_pic_upfile").hover(function(){
455 obj.addClass("but_on");
456 }, function(){
457 obj.removeClass("but_on");
458 }).show().css({"position":"absolute", "top":p.top, "right":r, "width":w, "height":h});
459}
460
461// 定位图集上传按钮
462function setImgBut() {
463 if(!$("#tw_img_but").length) return;
464 var isIE = !!window.ActiveXObject;
465 var obj = $("#tw_img_but");
466 var p = obj.position();
467 var top = isIE ? p.top-10 : p.top;
468 $("#tw_img_upfile").hover(function(){
469 obj.addClass("but_on");
470 }, function(){
471 obj.removeClass("but_on");
472 }).show().css({"position":"absolute", "top":p.top, "left":p.left, "width":obj.outerWidth(true), "height":obj.outerHeight(true)});
473}
474
475// 删除单张图集的图片
476function setdelImg() {
477 $(".d_del").off("mousedown").mousedown(function(e) {
478 e.stopPropagation(); // 清除事件冒泡，以免影响拖拽插件
479 }).off("click").click(function() {
480 var _me = $(this);
481 var aid = _me.attr("aid");
482 twAjax.post("index.php?u=photo-del_attach-ajax-1", {"aid":aid}, function(html) {
483 // var data = toJson(html);
484
485 // 历史遗留问题，以前是没有aid的，会导致删除失败
486 // if(data.err == 0) {
487 _me.parent().remove();
488 // }
489
490 setImgBut(); // 重新定位上传按钮
491 autoSave(); // 在发表时，保存一下
492 editSaveImg(); // 在编辑时，保存一下
493 });
494 });
495}
496
497// 定位按钮和加载图集上传
498setPicBut();
499setImgBut();
500kpUpload.init();
501$("#tw_dropbox").kpdragsort();
502setdelImg();
503
504// 触发自动保存
505$("#photo_set input, #photo_set textarea, #photo_set select").change(autoSave);
506
507// 提交表单
508twAjax.submit("#photo_set", function(data){
509 twAjax.alert(data);
510 if(window.twData.err==0) {
511 setTimeout(function(){
512 var i = P("#box_tab ul li[urlKey='photo-index']").index();
513 if(i != -1) parent.ifrRefresh(i);
514 parent.oneTab("photo-index");
515
516 var j = P("#box_tab ul li[urlKey='"+urlKey+"']").index();
517 parent.rmTab(j);
518 }, 1200);
519 }
520});
521</script>
522
523{hook:admin_content_add_after.htm}
524
525</body>
526</html>
527