/**
* @imageoverview
* Image 업로드 관련 Source
* Trex.Tool.Image - UI,
* Trex.Attacher.Image,
* Trex.Attachment.Image,
* default configuration를 포함하고 있다.
*/
TrexConfig.addTool(
"image",
{
disabledonmobile: _TRUE,
wysiwygonly: _TRUE,
sync: _FALSE,
status: _FALSE
}
);
TrexMessage.addMsg({
'@image.title': "사진"
});
Trex.Tool.Image = Trex.Class.create({
$const: {
__Identity: 'image'
},
$extend: Trex.Tool,
oninitialized: function() {
var _editor = this.editor;
this.weave.bind(this)(
new Trex.Button(this.buttonCfg),
_NULL,
function() {
_editor.getSidebar().getAttacher("image").execute();
}
);
}
});
TrexConfig.addAttacher(
"image",
{
multiple: _TRUE,
multipleuse: _FALSE,
checksize: _TRUE,
boxonly: _FALSE,
wysiwygonly: _TRUE,
objattr: {},
features: { left:250, top:65, width:450, height:180 },
popPageUrl: "#host#path/pages/trex/image.html"
},
function(root){
var _config = TrexConfig.getAttacher("image", root);
_config.popPageUrl = TrexConfig.getUrl(_config.popPageUrl);
_config.features = TrexConfig.getPopFeatures(_config.features);
}
);
/**
* Trex.Attacher.Image
* @class
* @extends Trex.Attacher
*/
Trex.Attacher.Image = Trex.Class.create({
$const: {
__Identity: 'image'
},
$extend: Trex.Attacher,
name: 'image',
title: TXMSG("@image.title"),
canModified: _FALSE,
canResized: _TRUE,
matchRegexStartTag: /<(\w+)/,// 첨부시에 dispHtml을 기준으로 속성 및 스타일을 적용 할 태그를 찾을 때 사용
oninitialized: function() {
},
getKey: function(data) {
return data.imageurl;
},
getDataForEntry: function(data) {
data.imageurl = this.encodeSpaceInUrl(data.imageurl);
data.originalurl = this.encodeSpaceInUrl(data.originalurl);
data.attachurl = this.encodeSpaceInUrl(data.attachurl);
data.thumburl = data.thumburl || data.imageurl.replace(/\/image\//gm, '/P150x100/');
if(!data.dispElId) {
data.dispElId = Trex.Util.getDispElId();
}
var _seq = ((data.tmpSeq)? this.entryBox.syncSeq(data.tmpSeq): this.entryBox.newSeq());
var _data = Object.extend({
dataSeq: _seq
}, data); //NOTE: Cuz IE
return _data;
},
createEntry: function(data, type) {
return this.createAttachment(data, type);
},
encodeSpaceInUrl: function(url){
if ( !url ) {
return ;
}
return url.replace(/ /g, "%20");
},
execAttach: function(data, type) {
var _entry = this.createEntry(this.getDataForEntry(data), type);
_entry.execRegister();
},
execReload: function(data, content, type) {
var _entry = this.createEntry(this.getDataForEntry(data, content), type);
_entry.execReload();
}
});
/**
* Trex.Attachment.Image
*
* @example
* data = {
* thumburl: "string",
* imageurl: "string",
* filename: "string",
* filesize: number
* }
* @class
* @extends Trex.Attachment
*/
Trex.Attachment.Image = Trex.Class.create({
$const: {
__Identity: 'image'
},
$extend: Trex.Attachment,
getFieldAttr: function(data) {
return {
name: 'tx_attach_image',
value: [data.thumburl, data.imageurl, data.originalurl, data.exifurl, data.filename, data.filesize].join('|')
};
},
getBoxAttr: function(data) {
var _rectangle = data.width ? data.width + "x" + data.height + " / " : "";
return {
name: data.filename + " (" + _rectangle + data.filesize.toByteUnit() + ")",
image: data.thumburl
};
},
getObjectAttr: function(data) {
var _objattr = Object.extend({}, this.actor.config.objattr);
if(data.width) {
if(!_objattr.width || _objattr.width > data.width) {
_objattr.width = data.width;
}
} else {
_objattr.width = _NULL;
}
if(data.height) {
if(!_objattr.height || _objattr.height > data.height) {
_objattr.height = data.height;
}
} else {
_objattr.height = _NULL;
}
return _objattr;
},
/**
* object의 style 값을 가져온다.
* @function
*/
getObjectStyle: function(data) {
var _objstyle = {};
if(this.actor.config.objstyle) {
_objstyle = Object.extend(_objstyle, this.actor.config.objstyle);
}
if(data.imagealign) {
var _objectStyle = {
"L": Trex.Tool.AlignLeft,
"C": Trex.Tool.AlignCenter,
"FL": Trex.Tool.AlignRight,
"FR": Trex.Tool.AlignFull
}[data.imagealign];
if (_objectStyle && _objectStyle.__ImageModeProps && _objectStyle.__ImageModeProps['image']) {
_objstyle = Object.extend(_objstyle, _objectStyle.__ImageModeProps['image']['style']);
}
}
return _objstyle;
},
/**
* object를 감싸고 있는 paragraph tag 의 style 값을 가져온다.
* @function
*/
getParaStyle: function(data) {
var _parastyle = Object.extend({}, this.actor.config.parastyle || this.actor.config.defaultstyle);
if(data.imagealign) {
var _objectStyle = {
"L": Trex.Tool.AlignLeft,
"C": Trex.Tool.AlignCenter,
"FL": Trex.Tool.AlignRight,
"FR": Trex.Tool.AlignFull
}[data.imagealign];
if (_objectStyle && _objectStyle.__ImageModeProps && _objectStyle.__ImageModeProps['paragraph']) {
_parastyle = Object.extend(_parastyle, _objectStyle.__ImageModeProps['paragraph']['style']);
}
}
return _parastyle;
},
getSaveHtml: function(data) {
return "
";
},
getDispHtml: function(data) {
return "
";
},
getDispText: function(data) {
return "
";
},
getRegLoad: function(data) {
return new RegExp("<(?:img|IMG)[^>]*src=\"?" + data.imageurl.getRegExp() + "\"?[^>]*\/?>", "gim");
},
getRegHtml: function(data) {
return new RegExp("<(?:img|IMG)[^>]*src=\"?" + data.imageurl.getRegExp() + "\"?[^>]*\/?>", "gim");
},
getRegText: function(data) {
return new RegExp("<(?:img|IMG)[^>]*src=\"?" + data.imageurl.getRegExp() + "\"?[^>]*\/?>", "gim");
}
});