mirror of
https://gitee.com/ShopeX/OMS
synced 2026-04-03 22:25:46 +08:00
305 lines
9.8 KiB
HTML
305 lines
9.8 KiB
HTML
<!--
|
|
Copyright 2012-2026 ShopeX (https://www.shopex.cn)
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
|
|
<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>
|
|
|
|
|
|
|