' +
- '' +
- '' +
- '' +
- '' +
- '' +
- '' +
- '' +
- '' +
- '',
- defaultOpt: {
- $doc: $(document),
- $wrap: $(document)
- },
- init: function (options) {
- if(options.$doc) this.defaultOpt.$doc = options.$doc;
- if(options.$wrap) this.defaultOpt.$wrap = options.$wrap;
- this.root($($.parseTmpl(this.tpl, options)));
- this.initStyle();
- this.startPos = this.prePos = {x: 0, y: 0};
- this.dragId = -1;
- return this;
- },
- initStyle: function () {
- utils.cssRule('edui-style-scale', '.edui-scale{display:none;position:absolute;border:1px solid #38B2CE;cursor:hand;}' +
- '.edui-scale span{position:absolute;left:0;top:0;width:7px;height:7px;overflow:hidden;font-size:0px;display:block;background-color:#3C9DD0;}'
- + '.edui-scale .edui-scale-hand0{cursor:nw-resize;top:0;margin-top:-4px;left:0;margin-left:-4px;}'
- + '.edui-scale .edui-scale-hand1{cursor:n-resize;top:0;margin-top:-4px;left:50%;margin-left:-4px;}'
- + '.edui-scale .edui-scale-hand2{cursor:ne-resize;top:0;margin-top:-4px;left:100%;margin-left:-3px;}'
- + '.edui-scale .edui-scale-hand3{cursor:w-resize;top:50%;margin-top:-4px;left:0;margin-left:-4px;}'
- + '.edui-scale .edui-scale-hand4{cursor:e-resize;top:50%;margin-top:-4px;left:100%;margin-left:-3px;}'
- + '.edui-scale .edui-scale-hand5{cursor:sw-resize;top:100%;margin-top:-3px;left:0;margin-left:-4px;}'
- + '.edui-scale .edui-scale-hand6{cursor:s-resize;top:100%;margin-top:-3px;left:50%;margin-left:-4px;}'
- + '.edui-scale .edui-scale-hand7{cursor:se-resize;top:100%;margin-top:-3px;left:100%;margin-left:-3px;}');
- },
- _eventHandler: function (e) {
- var me = this,
- $doc = me.defaultOpt.$doc;
- switch (e.type) {
- case 'mousedown':
- var hand = e.target || e.srcElement, hand;
- if (hand.className.indexOf('edui-scale-hand') != -1) {
- me.dragId = hand.className.slice(-1);
- me.startPos.x = me.prePos.x = e.clientX;
- me.startPos.y = me.prePos.y = e.clientY;
- $doc.bind('mousemove', $.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;
- me.updateTargetElement();
- }
- break;
- case 'mouseup':
- if (me.dragId != -1) {
- me.dragId = -1;
- me.updateTargetElement();
- var $target = me.data('$scaleTarget');
- if ($target.parent()) me.attachTo(me.data('$scaleTarget'));
- }
- $doc.unbind('mousemove', $.proxy(me._eventHandler, me));
- break;
- default:
- break;
- }
- },
- updateTargetElement: function () {
- var me = this,
- $root = me.root(),
- $target = me.data('$scaleTarget');
- $target.css({width: $root.width(), height: $root.height()});
- me.attachTo($target);
- },
- updateContainerStyle: function (dir, offset) {
- var me = this,
- $dom = me.root(),
- tmp,
- 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]
- ];
+// UM.ui.define('scale', {
+// tpl: '' +
+// '' +
+// '' +
+// '' +
+// '' +
+// '' +
+// '' +
+// '' +
+// '' +
+// '
',
+// defaultOpt: {
+// $doc: $(document),
+// $wrap: $(document)
+// },
+// init: function (options) {
+// if(options.$doc) this.defaultOpt.$doc = options.$doc;
+// if(options.$wrap) this.defaultOpt.$wrap = options.$wrap;
+// this.root($($.parseTmpl(this.tpl, options)));
+// this.initStyle();
+// this.startPos = this.prePos = {x: 0, y: 0};
+// this.dragId = -1;
+// return this;
+// },
+// initStyle: function () {
+// utils.cssRule('edui-style-scale', '.edui-scale{display:none;position:absolute;border:1px solid #38B2CE;cursor:hand;}' +
+// '.edui-scale span{position:absolute;left:0;top:0;width:7px;height:7px;overflow:hidden;font-size:0px;display:block;background-color:#3C9DD0;}'
+// + '.edui-scale .edui-scale-hand0{cursor:nw-resize;top:0;margin-top:-4px;left:0;margin-left:-4px;}'
+// + '.edui-scale .edui-scale-hand1{cursor:n-resize;top:0;margin-top:-4px;left:50%;margin-left:-4px;}'
+// + '.edui-scale .edui-scale-hand2{cursor:ne-resize;top:0;margin-top:-4px;left:100%;margin-left:-3px;}'
+// + '.edui-scale .edui-scale-hand3{cursor:w-resize;top:50%;margin-top:-4px;left:0;margin-left:-4px;}'
+// + '.edui-scale .edui-scale-hand4{cursor:e-resize;top:50%;margin-top:-4px;left:100%;margin-left:-3px;}'
+// + '.edui-scale .edui-scale-hand5{cursor:sw-resize;top:100%;margin-top:-3px;left:0;margin-left:-4px;}'
+// + '.edui-scale .edui-scale-hand6{cursor:s-resize;top:100%;margin-top:-3px;left:50%;margin-left:-4px;}'
+// + '.edui-scale .edui-scale-hand7{cursor:se-resize;top:100%;margin-top:-3px;left:100%;margin-left:-3px;}');
+// },
+// _eventHandler: function (e) {
+// var me = this,
+// $doc = me.defaultOpt.$doc;
+// switch (e.type) {
+// case 'mousedown':
+// var hand = e.target || e.srcElement, hand;
+// if (hand.className.indexOf('edui-scale-hand') != -1) {
+// me.dragId = hand.className.slice(-1);
+// me.startPos.x = me.prePos.x = e.clientX;
+// me.startPos.y = me.prePos.y = e.clientY;
+// $doc.bind('mousemove', $.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;
+// me.updateTargetElement();
+// }
+// break;
+// case 'mouseup':
+// if (me.dragId != -1) {
+// me.dragId = -1;
+// me.updateTargetElement();
+// var $target = me.data('$scaleTarget');
+// if ($target.parent()) me.attachTo(me.data('$scaleTarget'));
+// }
+// $doc.unbind('mousemove', $.proxy(me._eventHandler, me));
+// break;
+// default:
+// break;
+// }
+// },
+// updateTargetElement: function () {
+// var me = this,
+// $root = me.root(),
+// $target = me.data('$scaleTarget');
+// $target.css({width: $root.width(), height: $root.height()});
+// me.attachTo($target);
+// },
+// updateContainerStyle: function (dir, offset) {
+// var me = this,
+// $dom = me.root(),
+// tmp,
+// 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]
+// ];
- if (rect[dir][0] != 0) {
- tmp = parseInt($dom.offset().left) + offset.x;
- $dom.css('left', me._validScaledProp('left', tmp));
- }
- if (rect[dir][1] != 0) {
- tmp = parseInt($dom.offset().top) + offset.y;
- $dom.css('top', me._validScaledProp('top', tmp));
- }
- if (rect[dir][2] != 0) {
- tmp = $dom.width() + rect[dir][2] * offset.x;
- $dom.css('width', me._validScaledProp('width', tmp));
- }
- if (rect[dir][3] != 0) {
- tmp = $dom.height() + rect[dir][3] * offset.y;
- $dom.css('height', me._validScaledProp('height', tmp));
- }
- },
- _validScaledProp: function (prop, value) {
- var $ele = this.root(),
- $wrap = this.defaultOpt.$doc,
- calc = function(val, a, b){
- return (val + a) > b ? b - a : value;
- };
+// if (rect[dir][0] != 0) {
+// tmp = parseInt($dom.offset().left) + offset.x;
+// $dom.css('left', me._validScaledProp('left', tmp));
+// }
+// if (rect[dir][1] != 0) {
+// tmp = parseInt($dom.offset().top) + offset.y;
+// $dom.css('top', me._validScaledProp('top', tmp));
+// }
+// if (rect[dir][2] != 0) {
+// tmp = $dom.width() + rect[dir][2] * offset.x;
+// $dom.css('width', me._validScaledProp('width', tmp));
+// }
+// if (rect[dir][3] != 0) {
+// tmp = $dom.height() + rect[dir][3] * offset.y;
+// $dom.css('height', me._validScaledProp('height', tmp));
+// }
+// },
+// _validScaledProp: function (prop, value) {
+// var $ele = this.root(),
+// $wrap = this.defaultOpt.$doc,
+// calc = function(val, a, b){
+// return (val + a) > b ? b - a : value;
+// };
- value = isNaN(value) ? 0 : value;
- switch (prop) {
- case 'left':
- return value < 0 ? 0 : calc(value, $ele.width(), $wrap.width());
- case 'top':
- return value < 0 ? 0 : calc(value, $ele.height(),$wrap.height());
- case 'width':
- return value <= 0 ? 1 : calc(value, $ele.offset().left, $wrap.width());
- case 'height':
- return value <= 0 ? 1 : calc(value, $ele.offset().top, $wrap.height());
- }
- },
- show: function ($obj) {
- var me = this;
- if ($obj) me.attachTo($obj);
- me.root().bind('mousedown', $.proxy(me._eventHandler, me));
- me.defaultOpt.$doc.bind('mouseup', $.proxy(me._eventHandler, me));
- me.root().show();
- me.trigger("aftershow");
- },
- hide: function () {
- var me = this;
- me.root().unbind('mousedown', $.proxy(me._eventHandler, me));
- me.defaultOpt.$doc.unbind('mouseup', $.proxy(me._eventHandler, me));
- me.root().hide();
- me.trigger('afterhide')
- },
- attachTo: function ($obj) {
- var me = this,
- imgPos = $obj.offset(),
- $root = me.root(),
- $wrap = me.defaultOpt.$wrap,
- posObj = $wrap.offset();
+// value = isNaN(value) ? 0 : value;
+// switch (prop) {
+// case 'left':
+// return value < 0 ? 0 : calc(value, $ele.width(), $wrap.width());
+// case 'top':
+// return value < 0 ? 0 : calc(value, $ele.height(),$wrap.height());
+// case 'width':
+// return value <= 0 ? 1 : calc(value, $ele.offset().left, $wrap.width());
+// case 'height':
+// return value <= 0 ? 1 : calc(value, $ele.offset().top, $wrap.height());
+// }
+// },
+// show: function ($obj) {
+// var me = this;
+// if ($obj) me.attachTo($obj);
+// me.root().bind('mousedown', $.proxy(me._eventHandler, me));
+// me.defaultOpt.$doc.bind('mouseup', $.proxy(me._eventHandler, me));
+// me.root().show();
+// me.trigger("aftershow");
+// },
+// hide: function () {
+// var me = this;
+// me.root().unbind('mousedown', $.proxy(me._eventHandler, me));
+// me.defaultOpt.$doc.unbind('mouseup', $.proxy(me._eventHandler, me));
+// me.root().hide();
+// me.trigger('afterhide')
+// },
+// attachTo: function ($obj) {
+// var me = this,
+// imgPos = $obj.offset(),
+// $root = me.root(),
+// $wrap = me.defaultOpt.$wrap,
+// posObj = $wrap.offset();
- me.data('$scaleTarget', $obj);
- me.root().css({
- position: 'absolute',
- width: $obj.width(),
- height: $obj.height(),
- left: imgPos.left - posObj.left - parseInt($wrap.css('border-left-width')) - parseInt($root.css('border-left-width')),
- top: imgPos.top - posObj.top - parseInt($wrap.css('border-top-width')) - parseInt($root.css('border-top-width'))
- });
- },
- getScaleTarget: function () {
- return this.data('$scaleTarget')[0];
- }
-});
\ No newline at end of file
+// me.data('$scaleTarget', $obj);
+// me.root().css({
+// position: 'absolute',
+// width: $obj.width(),
+// height: $obj.height(),
+// left: imgPos.left - posObj.left - parseInt($wrap.css('border-left-width')) - parseInt($root.css('border-left-width')),
+// top: imgPos.top - posObj.top - parseInt($wrap.css('border-top-width')) - parseInt($root.css('border-top-width'))
+// });
+// },
+// getScaleTarget: function () {
+// return this.data('$scaleTarget')[0];
+// }
+// });
\ No newline at end of file
diff --git a/dialogs/video/video.js b/dialogs/video/video.js
index 64a47eca..6f049031 100644
--- a/dialogs/video/video.js
+++ b/dialogs/video/video.js
@@ -2,6 +2,7 @@
(function(){
var domUtils = UM.dom.domUtils;
var widgetName = 'video';
+ var _swfUrl;
UM.registerWidget( widgetName,{
@@ -15,19 +16,6 @@
"" +
"
" +
"
" +
- "
" +
- "
" +
- "
" +
- "
" +
"
" +
"" +
"" +
@@ -49,15 +37,24 @@
initEvent:function(){
var me = this,
- url = $("#eduiVideoUrl", me.$widget)[0];
+ url = $("#eduiVideoUrl", me.$widget)[0],
+ timer;
+
+ function createPreview(url) {
+ clearTimeout(timer);
+
+ timer = setTimeout(function() {
+ me.createPreviewVideo(url);
+ }, 200);
+ }
if( 'oninput' in url ) {
url.oninput = function(){
- me.createPreviewVideo( this.value );
+ createPreview(this.value);
};
} else {
url.onpropertychange = function () {
- me.createPreviewVideo( this.value );
+ createPreview( this.value );
}
}
@@ -68,17 +65,11 @@
img = me.editor.selection.getRange().getClosedNode(),
url;
- me.createAlignButton( ["eduiVideoFloat"] );
-
//编辑视频时初始化相关信息
if(img && img.className == "edui-faked-video"){
$("#eduiVideoUrl", me.$widget)[0].value = url = img.getAttribute("_url");
- $("#eduiVideoWidth", me.$widget)[0].value = img.width;
- $("#eduiVideoHeight", me.$widget)[0].value = img.height;
- var align = domUtils.getComputedStyle(img,"float"),
- parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align");
- me.updateAlignButton(parentAlign==="center"?"center":align);
}
+
me.createPreviewVideo(url);
},
@@ -91,18 +82,17 @@
var me = this,
lang = me.lang,
- conUrl = me.convert_url(url);
+ $preview = $("#eduiVideoPreview", me.$widget);
- if(!me.endWith(conUrl,[".swf",".flv",".wmv"])){
- $("#eduiVideoPreview", me.$widget).html( lang.urlError );
- return;
- }
- $("#eduiVideoPreview", me.$widget)[0].innerHTML = '';
+ $preview.html(lang.loading);
+
+ me.convertUrl(url, function(data) {
+ _swfUrl = data.swf_url;
+ $preview[0].innerHTML = '';
+ }, function() {
+ $preview.html(lang.urlError);
+ });
},
/**
* 将单个视频信息插入编辑器中
@@ -110,159 +100,41 @@
insertSingle: function(){
var me = this,
- width = $("#eduiVideoWidth", me.$widget)[0],
- height = $("#eduiVideoHeight", me.$widget)[0],
- url=$('#eduiVideoUrl', me.$widget)[0].value,
- align = this.findFocus("eduiVideoFloat","name");
+ url=$('#eduiVideoUrl', me.$widget)[0].value;
if(!url) return false;
- if ( !me.checkNum( [width, height] ) ) return false;
- this.editor.execCommand('insertvideo', {
- url: me.convert_url(url),
- width: width.value,
- height: height.value,
- align: align
- });
-
- },
- /**
- * URL转换
- */
- convert_url: function(url){
- if ( !url ) return '';
- var matches = url.match(/youtu.be\/(\w+)$/) ||
- url.match(/youtube\.com\/watch\?v=(\w+)/) ||
- url.match(/youtube.com\/v\/(\w+)/),
- youku = url.match(/youku\.com\/v_show\/id_(\w+)/),
- youkuPlay = /player\.youku\.com/ig.test(url);
- if(youkuPlay){
- url = url.replace(/\?f=.*/, "");
- } else if (matches){
- url = "https://www.youtube.com/v/" + matches[1] + "?version=3&feature=player_embedded";
- }else if(youku){
- url = "http://player.youku.com/player.php/sid/"+youku[1]+"/v.swf"
+ if (_swfUrl) {
+ me.editor.execCommand('insertvideo', _swfUrl);
} else {
- url = url.replace(/http:\/\/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "http://www.tudou.com/v/$1")
- .replace(/http:\/\/www\.youtube\.com\/watch\?v=([\w\-]+)/i, "http://www.youtube.com/v/$1")
- .replace(/http:\/\/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, "http://player.youku.com/player.php/sid/$1")
- .replace(/http:\/\/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "http://player.56.com/v_$1.swf")
- .replace(/http:\/\/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "http://player.56.com/v_$1.swf")
- .replace(/http:\/\/v\.ku6\.com\/.+\/([^.]+)\.html/i, "http://player.ku6.com/refer/$1/v.swf")
- .replace(/\?f=.*/, "");
- }
- return url;
- },
- /**
- * 检测传入的所有input框中输入的长宽是否是正数
- */
- checkNum: function checkNum( nodes ) {
-
- var me = this;
-
- for ( var i = 0, ci; ci = nodes[i++]; ) {
- var value = ci.value;
- if ( !me.isNumber( value ) && value) {
- alert( me.lang.numError );
- ci.value = "";
- ci.focus();
- return false;
- }
- }
- return true;
- },
- /**
- * 数字判断
- * @param value
- */
- isNumber: function( value ) {
- return /(0|^[1-9]\d*$)/.test( value );
- },
- updateAlignButton: function( align ) {
- var aligns = $( "#eduiVideoFloat", this.$widget )[0].children;
-
- for ( var i = 0, ci; ci = aligns[i++]; ) {
- if ( ci.getAttribute( "name" ) == align ) {
- if ( ci.className !="edui-video-focus" ) {
- ci.className = "edui-video-focus";
- }
- } else {
- if ( ci.className =="edui-video-focus" ) {
- ci.className = "";
- }
- }
- }
-
- },
- /**
- * 创建图片浮动选择按钮
- * @param ids
- */
- createAlignButton: function( ids ) {
- var lang = this.lang,
- vidoe_home = UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/video/';
-
- for ( var i = 0, ci; ci = ids[i++]; ) {
- var floatContainer = $( "#" + ci, this.$widget ) [0],
- nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight};
- for ( var j in nameMaps ) {
- var div = document.createElement( "div" );
- div.setAttribute( "name", j );
- if ( j == "none" ) div.className="edui-video-focus";
- div.style.cssText = "background:url("+ vidoe_home +"images/" + j + "_focus.jpg);";
- div.setAttribute( "title", nameMaps[j] );
- floatContainer.appendChild( div );
- }
- this.switchSelect( ci );
- }
- },
- /**
- * 选择切换
- */
- switchSelect: function( selectParentId ) {
- var selects = $( "#" + selectParentId, this.$widget )[0].children;
- for ( var i = 0, ci; ci = selects[i++]; ) {
- $(ci).on("click", function () {
- for ( var j = 0, cj; cj = selects[j++]; ) {
- cj.className = "";
- cj.removeAttribute && cj.removeAttribute( "class" );
+ me.convertUrl(url, function(data) {
+ if (data.swf_url) {
+ me.editor.execCommand('insertvideo', data.swf_url);
+ } else {
+ console.error('Insert video error:', url);
}
- this.className = "edui-video-focus";
- } )
+ }, function() {
+ console.error('Insert video error:', url);
+ });
}
},
/**
- * 找到id下具有focus类的节点并返回该节点下的某个属性
- * @param id
- * @param returnProperty
+ * URL转换
*/
- findFocus: function( id, returnProperty ) {
- var tabs = $( "#" + id , this.$widget)[0].children,
- property;
- for ( var i = 0, ci; ci = tabs[i++]; ) {
- if ( ci.className=="edui-video-focus" ) {
- property = ci.getAttribute( returnProperty );
- break;
- }
+ convertUrl: function(url, success, fail) {
+ if (!url) {
+ fail();
+ return;
}
- return property;
- },
- /**
- * 末尾字符检测
- */
- endWith: function(str,endStrArr){
- for(var i=0,len = endStrArr.length;i