mirror of
https://gitee.com/ShopeX/OMS
synced 2026-04-05 22:55:32 +08:00
294 lines
9.4 KiB
HTML
294 lines
9.4 KiB
HTML
<!--
|
||
Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
|
||
See LICENSE file for license details.
|
||
-->
|
||
|
||
<div class="image-broswer">
|
||
<{area inject=".mainHead"}>
|
||
<div class="tabs-wrap image-broswer-handle" id="image-broswer-handle">
|
||
<ul>
|
||
<li class="tab current" tf="local"><span><{t}>从本地选择图片<{/t}></span></li>
|
||
<li class="tab" tf="img_lib"><span><{t}>从图库选择图片<{/t}></span></li>
|
||
<li class="tab" tf="www"><span><{t}>互联网上的图片<{/t}></span></li>
|
||
</ul>
|
||
</div>
|
||
<{/area}>
|
||
|
||
<div class="image-broswer-panel">
|
||
<div class="tableform">
|
||
<form action="index.php?app=image&ctl=admin_manage&act=image_upload" enctype="multipart/form-data" method="post">
|
||
<div class="division">
|
||
<h5><{t}>从本地计算机浏览图片<{/t}> </h5>
|
||
<input type="hidden" name="callbackfunc" value="imageBroswerUploadCallBack"/>
|
||
<input type="hidden" name="type" value="<{$type}>"/>
|
||
<input type="file" name="upload_item"/>
|
||
</div>
|
||
<div class="division">
|
||
<h5><{t}>为图片打上标签(多个标签用空格分隔):<{/t}></h5>
|
||
<input size="50" type="text" name="tag[name]" class="x-tag-input"></input>
|
||
<dl class="x-tag-wrapper clearfix">
|
||
<dt class="x-tag-info"><{t}>常用标签：<{/t}></dt>
|
||
<dd class="x-tag-list x-tag-container">
|
||
<{foreach from=$tags item=tag}>
|
||
<span class="x-tag" tag_id="<{$tag.tag_id}>"><{$tag.tag_name}></span>
|
||
<{/foreach}>
|
||
</dd>
|
||
</dl>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="tableform">
|
||
<{if $tags}>
|
||
<div class="division">
|
||
<dl id="tag-filter" class="x-tag-wrapper clearfix">
|
||
<dt class="x-tag-info"><{t}>标签:<{/t}></dt>
|
||
<dd class="x-tag-list">
|
||
<li class="x-tag c-blue" tag_id="0">全部</li>
|
||
<{foreach from=$tags item=tag}>
|
||
<li class="x-tag" tag_id="<{$tag.tag_id}>"><{$tag.tag_name}></li>
|
||
<{/foreach}>
|
||
</dd>
|
||
</dl>
|
||
</div>
|
||
<{/if}>
|
||
<div class="division image_list">
|
||
<h5><{t}>图库<{/t}></h5>
|
||
<div class="can" id="image_lib">
|
||
<div class='note'><{t}>正在载入图库...<{/t}></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tableform">
|
||
<form action="index.php?app=image&ctl=admin_manage&act=image_www_uploader" enctype="multipart/form-data" method="post">
|
||
<div class="division">
|
||
<h5><{t}>网络图片链接<{/t}></h5>
|
||
<input type="hidden" name="callbackfunc" value="imageBroswerUploadCallBack"/>
|
||
<input type="hidden" name="type" value="<{$type}>"/>
|
||
<input type="text" name="upload_item" class="inputstyle"/>
|
||
</div>
|
||
<div class="division">
|
||
<h5><{t}>为图片打上标签(多个标签用空格分隔):<{/t}></h5>
|
||
<input size="50" type="text" name="tag[name]" class="x-tag-input"></input>
|
||
<dl class="x-tag-wrapper clearfix">
|
||
<dt class="x-tag-info"><{t}>常用标签：<{/t}></dt>
|
||
<dd class="x-tag-list x-tag-container">
|
||
<{foreach from=$tags item=tag}>
|
||
<span class="x-tag" tag_id="<{$tag.tag_id}>"><{$tag.tag_name}></span>
|
||
<{/foreach}>
|
||
</dd>
|
||
</dl>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<{area inject='.mainFoot'}>
|
||
<div class="table-action">
|
||
|
||
<{button type="button" label=$___a="确认"|t:'image' id="image-broswer-submit"}>
|
||
|
||
|
||
<{button type="button" label=$___a="取消"|t:'image' onClick="window.close();" class="btn-secondary" closedialog=true}>
|
||
|
||
</div>
|
||
<{/area}>
|
||
|
||
<script>
|
||
|
||
|
||
void function(){
|
||
|
||
var dialogCallBack =window.modedialogInstance?window.modedialogInstance.imgcallback.bind(window.modedialogInstance):$empty;
|
||
/*upload callback */
|
||
imageBroswerUploadCallBack = function(ident,src){
|
||
|
||
dialogCallBack(ident,src);
|
||
};
|
||
|
||
|
||
new Acc($$('#image-broswer-handle .tab'), $$('.image-broswer .tableform'),{onActive:function(t,i){
|
||
|
||
t.addClass('current');
|
||
|
||
var item = t.retrieve('linkitem',i).setStyle('display','block');
|
||
|
||
if(t.get('tf')=='img_lib'){
|
||
if($('image_lib').get('container'))return;
|
||
$('image_lib').set('container',true);
|
||
W.page("index.php?app=image&ctl=admin_manage&act=image_lib",{update:'image_lib',clearUpdateMap:false});
|
||
}
|
||
}});
|
||
|
||
|
||
|
||
|
||
$('image-broswer-submit').addEvent('click',function(){
|
||
|
||
var curHandle = $E('#image-broswer-handle .current');
|
||
var curLinkItem = curHandle.retrieve('linkitem');
|
||
|
||
|
||
switch(curHandle.get('tf')){
|
||
case 'local':
|
||
curLinkItem.getElement('form').fireEvent('submit',{stop:$empty});
|
||
break;
|
||
case 'img_lib':
|
||
var img_cur=$('image_lib').retrieve('image-selected');
|
||
if(!img_cur)break;
|
||
var ident=img_cur.get('gid'),
|
||
src=img_cur.get('src');
|
||
<{if $env.get.type=='big'}>
|
||
src = img_cur.get('lsrc');
|
||
<{/if}>
|
||
dialogCallBack(ident,src);
|
||
break;
|
||
case 'www':
|
||
curLinkItem.getElement('form').fireEvent('submit',{stop:$empty});
|
||
break;
|
||
}
|
||
|
||
|
||
|
||
|
||
});
|
||
|
||
|
||
$E('.image_list').addEvent('click',function(e){
|
||
var target=$(e.target);
|
||
if(target.match('img')&&target.get('gid')){
|
||
$('image_lib').retrieve('image-selected',target).getParent('.item').removeClass('current');
|
||
target.getParent('.item').addClass('current');
|
||
$('image_lib').store('image-selected',target);
|
||
}
|
||
});
|
||
|
||
|
||
$ES('#tag-filter .x-tag').addEvent('click',function(e){
|
||
var _this=this,box=$('image_lib');
|
||
if(_this.retrieve('cache_fn'))return _this.retrieve('cache_fn')();
|
||
var url='index.php?app=image&ctl=admin_manage&act=image_lib&p[0]='+this.get('tag_id');
|
||
W.page(url,{update:box,onRequest:function(){
|
||
box.innerHTML='Loading......';
|
||
},onComplete:function(rs){
|
||
_this.retrieve('cache_fn',function(){
|
||
box.eliminate('image-selecte').innerHTML=rs;
|
||
var tagBox=_this.getParent('#tag-filter');
|
||
tagBox.retrieve('tag-selected',_this).removeClass('x-tag-selected');
|
||
_this.addClass('x-tag-selected');
|
||
tagBox.store('tag-selected',_this);
|
||
})();
|
||
}});
|
||
});
|
||
|
||
|
||
var SimpleTagEditor = new Class({
|
||
|
||
Implements: [Options],
|
||
|
||
options:{
|
||
interval: 400
|
||
},
|
||
|
||
initialize: function(el, container, options){
|
||
this.el = $(el);
|
||
this.container = $(container);
|
||
if(!this.el || !this.container) return;
|
||
this.setOptions(options);
|
||
|
||
this.tagCache = [];
|
||
this.altTags = this.container.getElements('.x-tag');
|
||
this.addTags();
|
||
|
||
this.el.addEvents({
|
||
'focus': this.start.bind(this),
|
||
'blur': this.stop.bind(this)
|
||
});
|
||
this.container.addEvent('click', this.toggleTag.bindWithEvent(this));
|
||
},
|
||
|
||
addTags: function(){
|
||
var values = [];
|
||
this.altTags.each(function(tag){
|
||
var value = tag.get('text');
|
||
this.tagCache.push(value);
|
||
if(tag.hasClass('x-tag-selected')) values.push(value);
|
||
},this);
|
||
this.value = values.join(' ');
|
||
return this;
|
||
},
|
||
|
||
getValue: function(){
|
||
return this.el.get('value');
|
||
},
|
||
|
||
setValue: function(){
|
||
this.el.set('value', this.value);
|
||
return this;
|
||
},
|
||
|
||
checkTag: function(){
|
||
if(!this.focus) return;
|
||
var value = this.getValue();
|
||
if(this.value === value) return;
|
||
var values = value.split(' ');
|
||
this.altTags.removeClass('x-tag-selected');
|
||
values.each(function(item){
|
||
this.tagCache.each(function(tag, index){
|
||
if(tag == item) this.altTags[index].addClass('x-tag-selected');
|
||
},this);
|
||
},this);
|
||
this.value = value;
|
||
this.setValue();
|
||
},
|
||
|
||
toggleTag: function(e){
|
||
e.stop();
|
||
var tgt = e.target;
|
||
if(!tgt.hasClass('x-tag')) return;
|
||
var value = tgt.get('text'),
|
||
values = this.value.clean().split(' ');
|
||
if(!tgt.hasClass('x-tag-selected')){
|
||
values.include(value);
|
||
tgt.addClass('x-tag-selected');
|
||
}else{
|
||
values.erase(value);
|
||
tgt.removeClass('x-tag-selected');
|
||
}
|
||
this.value = values.join(' ').trim();
|
||
this.setValue();
|
||
return this;
|
||
},
|
||
|
||
start: function(){
|
||
if(this.focus) return;
|
||
this.focus = true;
|
||
this.timer = this.checkTag.periodical(this.options.interval, this);
|
||
},
|
||
|
||
stop: function(){
|
||
if(!this.focus) return;
|
||
this.timer = $clear(this.timer);
|
||
this.focus = false;
|
||
}
|
||
|
||
});
|
||
|
||
|
||
$$('.x-tag-input').each(function(input){
|
||
var container = input.getParent().getElement('.x-tag-container');
|
||
if(!container) return;
|
||
new SimpleTagEditor(input, container);
|
||
},this);
|
||
|
||
|
||
}();
|
||
|
||
|
||
|
||
|
||
</script>
|
||
|
||
|
||
|