File: /www/wwwroot/bs.kntsleep.com/system/extend/ueditor/_src/plugins/fiximgclick.js
///import core
///commands 修复chrome下图片不能点击的问题，出现八个角可改变大小
///commandsName FixImgClick
///commandsTitle 修复chrome下图片不能点击的问题，出现八个角可改变大小
//修复chrome下图片不能点击的问题，出现八个角可改变大小
UE.plugins["fiximgclick"] = (function() {
var elementUpdated = false;
function Scale() {
this.editor = null;
this.resizer = null;
this.cover = null;
this.doc = document;
this.prePos = { x: 0, y: 0 };
this.startPos = { x: 0, y: 0 };
}
(function() {
var rect = [
//[left, top, width, height]
[0, 0, -1, -1],
[0, 0, 0, -1],
[0, 0, 1, -1],
[0, 0, -1, 0],
[0, 0, 1, 0],
[0, 0, -1, 1],
[0, 0, 0, 1],
[0, 0, 1, 1]
];
Scale.prototype = {
init: function(editor) {
var me = this;
me.editor = editor;
me.startPos = this.prePos = { x: 0, y: 0 };
me.dragId = -1;
var hands = [],
cover = (me.cover = document.createElement("div")),
resizer = (me.resizer = document.createElement("div"));
cover.id = me.editor.ui.id + "_imagescale_cover";
cover.style.cssText =
"position:absolute;display:none;z-index:" +
me.editor.options.zIndex +
";filter:alpha(opacity=0); opacity:0;background:#CCC;";
domUtils.on(cover, "mousedown click", function() {
me.hide();
});
for (i = 0; i < 8; i++) {
hands.push(
'<span class="edui-editor-imagescale-hand' + i + '"></span>'
);
}
resizer.id = me.editor.ui.id + "_imagescale";
resizer.className = "edui-editor-imagescale";
resizer.innerHTML = hands.join("");
resizer.style.cssText +=
";display:none;border:1px solid #3b77ff;z-index:" +
me.editor.options.zIndex +
";";
me.editor.ui.getDom().appendChild(cover);
me.editor.ui.getDom().appendChild(resizer);
me.initStyle();
me.initEvents();
},
initStyle: function() {
utils.cssRule(
"imagescale",
".edui-editor-imagescale{display:none;position:absolute;border:1px solid #38B2CE;cursor:hand;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}" +
".edui-editor-imagescale span{position:absolute;width:6px;height:6px;overflow:hidden;font-size:0px;display:block;background-color:#3C9DD0;}" +
".edui-editor-imagescale .edui-editor-imagescale-hand0{cursor:nw-resize;top:0;margin-top:-4px;left:0;margin-left:-4px;}" +
".edui-editor-imagescale .edui-editor-imagescale-hand1{cursor:n-resize;top:0;margin-top:-4px;left:50%;margin-left:-4px;}" +
".edui-editor-imagescale .edui-editor-imagescale-hand2{cursor:ne-resize;top:0;margin-top:-4px;left:100%;margin-left:-3px;}" +
".edui-editor-imagescale .edui-editor-imagescale-hand3{cursor:w-resize;top:50%;margin-top:-4px;left:0;margin-left:-4px;}" +
".edui-editor-imagescale .edui-editor-imagescale-hand4{cursor:e-resize;top:50%;margin-top:-4px;left:100%;margin-left:-3px;}" +
".edui-editor-imagescale .edui-editor-imagescale-hand5{cursor:sw-resize;top:100%;margin-top:-3px;left:0;margin-left:-4px;}" +
".edui-editor-imagescale .edui-editor-imagescale-hand6{cursor:s-resize;top:100%;margin-top:-3px;left:50%;margin-left:-4px;}" +
".edui-editor-imagescale .edui-editor-imagescale-hand7{cursor:se-resize;top:100%;margin-top:-3px;left:100%;margin-left:-3px;}"
);
},
initEvents: function() {
var me = this;
me.startPos.x = me.startPos.y = 0;
me.isDraging = false;
},
_eventHandler: function(e) {
var me = this;
switch (e.type) {
case "mousedown":
var hand = e.target || e.srcElement,
hand;
if (
hand.className.indexOf("edui-editor-imagescale-hand") != -1 &&
me.dragId == -1
) {
me.dragId = hand.className.slice(-1);
me.startPos.x = me.prePos.x = e.clientX;
me.startPos.y = me.prePos.y = e.clientY;
domUtils.on(me.doc, "mousemove", me.proxy(me._eventHandler, me));
}
break;
case "mousemove":
if (me.dragId != -1) {
me.updateContainerStyle(me.dragId, {
x: e.clientX - me.prePos.x,
y: e.clientY - me.prePos.y
});
me.prePos.x = e.clientX;
me.prePos.y = e.clientY;
elementUpdated = true;
me.updateTargetElement();
}
break;
case "mouseup":
if (me.dragId != -1) {
me.updateContainerStyle(me.dragId, {
x: e.clientX - me.prePos.x,
y: e.clientY - me.prePos.y
});
me.updateTargetElement();
if (me.target.parentNode) me.attachTo(me.target);
me.dragId = -1;
}
domUtils.un(me.doc, "mousemove", me.proxy(me._eventHandler, me));
//修复只是点击挪动点，但没有改变大小，不应该触发contentchange
if (elementUpdated) {
elementUpdated = false;
me.editor.fireEvent("contentchange");
}
break;
default:
break;
}
},
updateTargetElement: function() {
var me = this;
domUtils.setStyles(me.target, {
width: me.resizer.style.width,
height: me.resizer.style.height
});
me.target.width = parseInt(me.resizer.style.width);
me.target.height = parseInt(me.resizer.style.height);
me.attachTo(me.target);
},
updateContainerStyle: function(dir, offset) {
var me = this,
dom = me.resizer,
tmp;
if (rect[dir][0] != 0) {
tmp = parseInt(dom.style.left) + offset.x;
dom.style.left = me._validScaledProp("left", tmp) + "px";
}
if (rect[dir][1] != 0) {
tmp = parseInt(dom.style.top) + offset.y;
dom.style.top = me._validScaledProp("top", tmp) + "px";
}
if (rect[dir][2] != 0) {
tmp = dom.clientWidth + rect[dir][2] * offset.x;
dom.style.width = me._validScaledProp("width", tmp) + "px";
}
if (rect[dir][3] != 0) {
tmp = dom.clientHeight + rect[dir][3] * offset.y;
dom.style.height = me._validScaledProp("height", tmp) + "px";
}
},
_validScaledProp: function(prop, value) {
var ele = this.resizer,
wrap = document;
value = isNaN(value) ? 0 : value;
switch (prop) {
case "left":
return value < 0
? 0
: value + ele.clientWidth > wrap.clientWidth
? wrap.clientWidth - ele.clientWidth
: value;
case "top":
return value < 0
? 0
: value + ele.clientHeight > wrap.clientHeight
? wrap.clientHeight - ele.clientHeight
: value;
case "width":
return value <= 0
? 1
: value + ele.offsetLeft > wrap.clientWidth
? wrap.clientWidth - ele.offsetLeft
: value;
case "height":
return value <= 0
? 1
: value + ele.offsetTop > wrap.clientHeight
? wrap.clientHeight - ele.offsetTop
: value;
}
},
hideCover: function() {
this.cover.style.display = "none";
},
showCover: function() {
var me = this,
editorPos = domUtils.getXY(me.editor.ui.getDom()),
iframePos = domUtils.getXY(me.editor.iframe);
domUtils.setStyles(me.cover, {
width: me.editor.iframe.offsetWidth + "px",
height: me.editor.iframe.offsetHeight + "px",
top: iframePos.y - editorPos.y + "px",
left: iframePos.x - editorPos.x + "px",
position: "absolute",
display: ""
});
},
show: function(targetObj) {
var me = this;
me.resizer.style.display = "block";
if (targetObj) me.attachTo(targetObj);
domUtils.on(this.resizer, "mousedown", me.proxy(me._eventHandler, me));
domUtils.on(me.doc, "mouseup", me.proxy(me._eventHandler, me));
me.showCover();
me.editor.fireEvent("afterscaleshow", me);
me.editor.fireEvent("saveScene");
},
hide: function() {
var me = this;
me.hideCover();
me.resizer.style.display = "none";
domUtils.un(me.resizer, "mousedown", me.proxy(me._eventHandler, me));
domUtils.un(me.doc, "mouseup", me.proxy(me._eventHandler, me));
me.editor.fireEvent("afterscalehide", me);
},
proxy: function(fn, context) {
return function(e) {
return fn.apply(context || this, arguments);
};
},
attachTo: function(targetObj) {
var me = this,
target = (me.target = targetObj),
resizer = this.resizer,
imgPos = domUtils.getXY(target),
iframePos = domUtils.getXY(me.editor.iframe),
editorPos = domUtils.getXY(resizer.parentNode);
domUtils.setStyles(resizer, {
width: target.width + "px",
height: target.height + "px",
left:
iframePos.x +
imgPos.x -
me.editor.document.body.scrollLeft -
editorPos.x -
parseInt(resizer.style.borderLeftWidth) +
"px",
top:
iframePos.y +
imgPos.y -
me.editor.window.scrollY -
editorPos.y -
parseInt(resizer.style.borderTopWidth) +
"px"
});
}
};
})();
return function() {
var me = this,
imageScale;
me.setOpt("imageScaleEnabled", true);
if (!browser.ie && me.options.imageScaleEnabled) {
me.addListener("click", function(type, e) {
var range = me.selection.getRange(),
img = range.getClosedNode();
if (img && img.tagName == "IMG" && me.body.contentEditable != "false") {
if (
img.className.indexOf("edui-faked-music") != -1 ||
img.getAttribute("anchorname") ||
domUtils.hasClass(img, "loadingclass") ||
domUtils.hasClass(img, "loaderrorclass")
) {
return;
}
if (!imageScale) {
imageScale = new Scale();
imageScale.init(me);
me.ui.getDom().appendChild(imageScale.resizer);
var _keyDownHandler = function(e) {
imageScale.hide();
if (imageScale.target)
me.selection.getRange().selectNode(imageScale.target).select();
},
_mouseDownHandler = function(e) {
var ele = e.target || e.srcElement;
if (
ele &&
(ele.className === undefined ||
ele.className.indexOf("edui-editor-imagescale") == -1)
) {
_keyDownHandler(e);
}
},
timer;
me.addListener("afterscaleshow", function(e) {
me.addListener("beforekeydown", _keyDownHandler);
me.addListener("beforemousedown", _mouseDownHandler);
domUtils.on(document, "keydown", _keyDownHandler);
domUtils.on(document, "mousedown", _mouseDownHandler);
me.selection.getNative().removeAllRanges();
});
me.addListener("afterscalehide", function(e) {
me.removeListener("beforekeydown", _keyDownHandler);
me.removeListener("beforemousedown", _mouseDownHandler);
domUtils.un(document, "keydown", _keyDownHandler);
domUtils.un(document, "mousedown", _mouseDownHandler);
var target = imageScale.target;
if (target.parentNode) {
me.selection.getRange().selectNode(target).select();
}
});
//TODO 有iframe的情况，mousedown不能往下传。。
domUtils.on(imageScale.resizer, "mousedown", function(e) {
me.selection.getNative().removeAllRanges();
var ele = e.target || e.srcElement;
if (
ele &&
ele.className.indexOf("edui-editor-imagescale-hand") == -1
) {
timer = setTimeout(function() {
imageScale.hide();
if (imageScale.target)
me.selection.getRange().selectNode(ele).select();
}, 200);
}
});
domUtils.on(imageScale.resizer, "mouseup", function(e) {
var ele = e.target || e.srcElement;
if (
ele &&
ele.className.indexOf("edui-editor-imagescale-hand") == -1
) {
clearTimeout(timer);
}
});
}
imageScale.show(img);
} else {
if (imageScale && imageScale.resizer.style.display != "none")
imageScale.hide();
}
});
}
if (browser.webkit) {
me.addListener("click", function(type, e) {
if (e.target.tagName == "IMG" && me.body.contentEditable != "false") {
var range = new dom.Range(me.document);
range.selectNode(e.target).select();
}
});
}
};
})();