/** * Created by JetBrains PhpStorm. * User: taoqili * Date: 12-2-20 * Time: 上午11:19 * To change this template use File | Settings | File Templates. */ (function(){ var video = {}, uploadVideoList = [], isModifyUploadVideo = false, uploadFile, onlineFile; window.onload = function(){ $focus($G("videoUrl")); initTabs(); initAlign(); initVideo(); initUpload(); }; /* 初始化tab标签 */ function initTabs() { var tabs = $G('tabHeads').children; for (var i = 0; i < tabs.length; i++) { domUtils.on(tabs[i], "click", function (e) { var target = e.target || e.srcElement; setTabFocus(target.getAttribute('data-content-id')); }); } var video = editor.selection.getRange().getClosedNode(); if (video && video.tagName && video.tagName.toLowerCase() == 'video') { setTabFocus('remote'); } else { setTabFocus('upload'); } } /* 初始化tabbody */ function setTabFocus(id) { if(!id) return; var i, bodyId, tabs = $G('tabHeads').children; for (i = 0; i < tabs.length; i++) { bodyId = tabs[i].getAttribute('data-content-id'); if (bodyId == id) { domUtils.addClass(tabs[i], 'focus'); domUtils.addClass($G(bodyId), 'focus'); } else { domUtils.removeClasses(tabs[i], 'focus'); domUtils.removeClasses($G(bodyId), 'focus'); } } document.getElementById('search-container').setAttribute('class', 'none'); switch (id) { case "online": document.getElementById('search-container').setAttribute('class', ''); initOnline(); break; } } /* 初始化搜索点击事件 */ function initAlign(){ domUtils.on($G("search-submit"), 'click', function(e){ initOnline(); }); } /* 获取对齐方式 */ function getAlign(){ return 'none'; } function initVideo(){ createAlignButton( ["videoFloat", "upload_alignment"] ); addUrlChangeListener($G("videoUrl")); addOkListener(); //编辑视频时初始化相关信息 (function(){ var img = editor.selection.getRange().getClosedNode(),url; if(img && img.className){ var hasFakedClass = (img.className.indexOf("edui-faked-video")!=-1), hasUploadClass = img.className.indexOf("edui-upload-video")!=-1; if(hasFakedClass || hasUploadClass) { $G("videoUrl").value = url = img.getAttribute("_url"); $G("videoWidth").value = img.width; $G("videoHeight").value = img.height; var align = domUtils.getComputedStyle(img,"float"), parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align"); updateAlignButton(parentAlign==="center"?"center":align); } if(hasUploadClass) { isModifyUploadVideo = true; } setTabFocus('video'); } createPreviewVideo(url); })(); } /** * 监听确认和取消两个按钮事件,用户执行插入或者清空正在播放的视频实例操作 */ function addOkListener(){ var remote = false, list = []; dialog.onok = function(){ $G("preview").innerHTML = ""; var currentTab = findFocus("tabHeads","tabSrc"); switch(currentTab){ case "video": return insertSingle(); break; case "videoSearch": return insertSearch("searchList"); break; case "upload": return insertUpload(); break; case "online": list = onlineFile.getInsertList(); if(list) { editor.execCommand('insertvideo', list); } break; } }; dialog.oncancel = function(){ $G("preview").innerHTML = ""; }; } /** * 在线视频 */ function initOnline(){ onlineFile = onlineFile || new OnlineFile('videoList'); onlineFile.reset(); } function OnlineFile(target) { this.container = utils.isString(target) ? document.getElementById(target) : target; this.init(); } OnlineFile.prototype = { init: function () { this.reset(); this.initEvents(); }, /* 初始化容器 */ initContainer: function () { this.container.innerHTML = ''; this.list = document.createElement('ul'); this.clearFloat = document.createElement('li'); domUtils.addClass(this.list, 'list'); domUtils.addClass(this.clearFloat, 'clearFloat'); this.list.appendChild(this.clearFloat); this.container.appendChild(this.list); }, /* 初始化滚动事件,滚动到地步自动拉取数据 */ initEvents: function () { var _this = this; /* 滚动拉取视频 */ domUtils.on($G('videoList'), 'scroll', function(e){ var panel = this; if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) { _this.getImageData(); } }); /* 选中视频 */ domUtils.on(this.container, 'click', function (e) { var target = e.target || e.srcElement, li = target.parentNode; if (li.tagName.toLowerCase() == 'li') { if (domUtils.hasClass(li, 'selected')) { domUtils.removeClasses(li, 'selected'); } else { domUtils.addClass(li, 'selected'); } } }); }, /* 初始化第一次的数据 */ initData: function () { /* 拉取数据需要使用的值 */ this.state = 0; this.listSize = editor.getOpt('videoManagerListSize'); this.listIndex = 0; this.listEnd = false; /* 第一次拉取数据 */ this.getImageData(); }, /* 重置界面 */ reset: function() { this.initContainer(); this.initData(); }, /* 向后台拉取视频列表数据 */ getImageData: function () { var _this = this; if(!_this.listEnd && !this.isLoadingData) { this.isLoadingData = true; var url = editor.getActionUrl(editor.getOpt('videoManagerActionName')), isJsonp = utils.isCrossDomainUrl(url); ajax.request(url, { 'timeout': 100000, 'dataType': isJsonp ? 'jsonp':'', 'data': utils.extend({ start: this.listIndex, size: this.listSize, keywords: document.getElementById('search-input').value }, editor.queryCommandValue('serverparam')), 'method': 'get', 'onsuccess': function (r) { try { var json = isJsonp ? r:eval('(' + r.responseText + ')'); if (json.state == 'SUCCESS') { _this.pushData(json.list); _this.listIndex = parseInt(json.start) + parseInt(json.list.length); if(_this.listIndex >= json.total) { _this.listEnd = true; } _this.isLoadingData = false; } } catch (e) { if(r.responseText.indexOf('ue_separate_ue') != -1) { var list = r.responseText.split(r.responseText); _this.pushData(list); _this.listIndex = parseInt(list.length); _this.listEnd = true; _this.isLoadingData = false; } } }, 'onerror': function () { _this.isLoadingData = false; } }); } }, /* 添加视频到列表界面上 */ pushData: function (list) { var i, item, video, icon, _this = this, urlPrefix = editor.getOpt('videoManagerUrlPrefix'); for (i = 0; i < list.length; i++) { if(list[i] && list[i].url) { item = document.createElement('li'); video = document.createElement('video'); icon = document.createElement('span'); video.width = 100; video.height = 100; video.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) ); video.setAttribute('_src', urlPrefix + list[i].url); video.setAttribute('controls', 'controls'); video.setAttribute('preload', 'auto'); domUtils.addClass(icon, 'icon'); item.appendChild(video); item.appendChild(icon); // 原名功能 start var original = document.createElement('p'); original.setAttribute('class', 'attachment-title'); original.innerHTML = list[i].original; item.appendChild(original); // 原名功能 end // 视频添加删除功能 start item.appendChild($("x").click(function() { var del = $(this); try{ window.event.cancelBubble = true; //停止冒泡 window.event.returnValue = false; //阻止事件的默认行为 window.event.preventDefault(); //取消事件的默认行为 window.event.stopPropagation(); //阻止事件的传播 } finally { if(!confirm("确定要删除吗?")) return; $.post(editor.getOpt("serverUrl") + "?action=deletefile", { "id": del.attr("data-id") }, function(response) { if (response.state == 'SUCCESS') del.parent().remove(); else alert(response.state); }); } })[0]); // 视频添加删除功能 end this.list.insertBefore(item, this.clearFloat); } } }, getInsertList: function () { var i, lis = this.list.children, list = [], align = ''; for (i = 0; i < lis.length; i++) { if (domUtils.hasClass(lis[i], 'selected')) { var video = lis[i].firstChild, src = video.getAttribute('_src'); list.push({ src: src, _src: src, alt: src.substr(src.lastIndexOf('/') + 1), floatStyle: align }); } } return list; } }; /** * 依据传入的align值更新按钮信息 * @param align */ function updateAlignButton( align ) { var aligns = $G( "videoFloat" ).children; for ( var i = 0, ci; ci = aligns[i++]; ) { if ( ci.getAttribute( "name" ) == align ) { if ( ci.className !="focus" ) { ci.className = "focus"; } } else { if ( ci.className =="focus" ) { ci.className = ""; } } } } /** * 将单个视频信息插入编辑器中 */ function insertSingle(){ var width = $G("videoWidth"), height = $G("videoHeight"), url=$G('videoUrl').value, align = findFocus("videoFloat","name"); if(!url) return false; if ( !checkNum( [width, height] ) ) return false; editor.execCommand('insertvideo', { src: convert_url(url), width: width.value, height: height.value, align: align }, isModifyUploadVideo ? 'upload':null); } /** * 将元素id下的所有代表视频的图片插入编辑器中 * @param id */ function insertSearch(id){ var imgs = domUtils.getElementsByTagName($G(id),"img"), videoObjs=[]; for(var i=0,img; img=imgs[i++];){ if(img.getAttribute("selected")){ videoObjs.push({ src:img.getAttribute("ue_video_url"), width:420, height:280, align:"none" }); } } editor.execCommand('insertvideo',videoObjs); } /** * 找到id下具有focus类的节点并返回该节点下的某个属性 * @param id * @param returnProperty */ function findFocus( id, returnProperty ) { var tabs = $G( id ).children, property; for ( var i = 0, ci; ci = tabs[i++]; ) { if ( ci.className=="focus" ) { property = ci.getAttribute( returnProperty ); break; } } return property; } function convert_url(url){ if ( !url ) return ''; url = utils.trim(url) .replace(/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, 'player.youku.com/player.php/sid/$1/v.swf') .replace(/(www\.)?youtube\.com\/watch\?v=([\w\-]+)/i, "www.youtube.com/v/$2") .replace(/youtu.be\/(\w+)$/i, "www.youtube.com/v/$1") .replace(/v\.ku6\.com\/.+\/([\w\.]+)\.html.*$/i, "player.ku6.com/refer/$1/v.swf") .replace(/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "player.56.com/v_$1.swf") .replace(/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "player.56.com/v_$1.swf") .replace(/v\.pps\.tv\/play_([\w]+)\.html.*$/i, "player.pps.tv/player/sid/$1/v.swf") .replace(/www\.letv\.com\/ptv\/vplay\/([\d]+)\.html.*$/i, "i7.imgs.letv.com/player/swfPlayer.swf?id=$1&autoplay=0") .replace(/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "www.tudou.com/v/$1") .replace(/v\.qq\.com\/cover\/[\w]+\/[\w]+\/([\w]+)\.html/i, "static.video.qq.com/TPout.swf?vid=$1") .replace(/v\.qq\.com\/.+[\?\&]vid=([^&]+).*$/i, "static.video.qq.com/TPout.swf?vid=$1") .replace(/my\.tv\.sohu\.com\/[\w]+\/[\d]+\/([\d]+)\.shtml.*$/i, "share.vrs.sohu.com/my/v.swf&id=$1"); return url; } /** * 检测传入的所有input框中输入的长宽是否是正数 * @param nodes input框集合, */ function checkNum( nodes ) { for ( var i = 0, ci; ci = nodes[i++]; ) { var value = ci.value; if ( !isNumber( value ) && value) { alert( lang.numError ); ci.value = ""; ci.focus(); return false; } } return true; } /** * 数字判断 * @param value */ function isNumber( value ) { return /(0|^[1-9]\d*$)/.test( value ); } /** * 创建图片浮动选择按钮 * @param ids */ function createAlignButton( ids ) { for ( var i = 0, ci; ci = ids[i++]; ) { var floatContainer = $G( ci ), nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight, "center":lang.block}; for ( var j in nameMaps ) { var div = document.createElement( "div" ); div.setAttribute( "name", j ); if ( j == "none" ) div.className="focus"; div.style.cssText = "background:url(images/" + j + "_focus.jpg);"; div.setAttribute( "title", nameMaps[j] ); floatContainer.appendChild( div ); } switchSelect( ci ); } } /** * 选择切换 * @param selectParentId */ function switchSelect( selectParentId ) { var selects = $G( selectParentId ).children; for ( var i = 0, ci; ci = selects[i++]; ) { domUtils.on( ci, "click", function () { for ( var j = 0, cj; cj = selects[j++]; ) { cj.className = ""; cj.removeAttribute && cj.removeAttribute( "class" ); } this.className = "focus"; } ) } } /** * 监听url改变事件 * @param url */ function addUrlChangeListener(url){ if (browser.ie) { url.onpropertychange = function () { createPreviewVideo( this.value ); } } else { url.addEventListener( "input", function () { createPreviewVideo( this.value ); }, false ); } } /** * 根据url生成视频预览 * @param url */ function createPreviewVideo(url){ if ( !url )return; var conUrl = convert_url(url); conUrl = utils.unhtmlForUrl(conUrl); if(conUrl) { $G("preview").innerHTML = ''; } else { $G("preview").innerHTML = '
' + file.name + '
' + '' + '' + '