c48f0588c435c0017db5033243fd7b40f8d89349.svn-base 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. /**
  2. * Created by JetBrains PhpStorm.
  3. * User: taoqili
  4. * Date: 12-2-20
  5. * Time: 上午11:19
  6. * To change this template use File | Settings | File Templates.
  7. */
  8. var video = {};
  9. (function(){
  10. video.init = function(){
  11. // switchTab("videoTab");
  12. createAlignButton( ["videoFloat"] );
  13. addUrlChangeListener($G("videoUrl"));
  14. addOkListener();
  15. //编辑视频时初始化相关信息
  16. (function(){
  17. var img = editor.selection.getRange().getClosedNode(),url;
  18. if(img && img.className == "edui-faked-video"){
  19. $G("videoUrl").value = url = img.getAttribute("_url");
  20. $G("videoWidth").value = img.width;
  21. $G("videoHeight").value = img.height;
  22. var align = domUtils.getComputedStyle(img,"float"),
  23. parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align");
  24. updateAlignButton(parentAlign==="center"?"center":align);
  25. }
  26. createPreviewVideo(url);
  27. })();
  28. };
  29. /**
  30. * 监听确认和取消两个按钮事件,用户执行插入或者清空正在播放的视频实例操作
  31. */
  32. function addOkListener(){
  33. dialog.onok = function(){
  34. $G("preview").innerHTML = "";
  35. var currentTab = findFocus("tabHeads","tabSrc");
  36. switch(currentTab){
  37. case "video":
  38. return insertSingle();
  39. break;
  40. // case "videoSearch":
  41. // return insertSearch("searchList");
  42. // break;
  43. }
  44. };
  45. dialog.oncancel = function(){
  46. $G("preview").innerHTML = "";
  47. };
  48. }
  49. function selectTxt(node){
  50. if(node.select){
  51. node.select();
  52. }else{
  53. var r = node.createTextRange && node.createTextRange();
  54. r.select();
  55. }
  56. }
  57. /**
  58. * 依据传入的align值更新按钮信息
  59. * @param align
  60. */
  61. function updateAlignButton( align ) {
  62. var aligns = $G( "videoFloat" ).children;
  63. for ( var i = 0, ci; ci = aligns[i++]; ) {
  64. if ( ci.getAttribute( "name" ) == align ) {
  65. if ( ci.className !="focus" ) {
  66. ci.className = "focus";
  67. }
  68. } else {
  69. if ( ci.className =="focus" ) {
  70. ci.className = "";
  71. }
  72. }
  73. }
  74. }
  75. /**
  76. * 将单个视频信息插入编辑器中
  77. */
  78. function insertSingle(){
  79. var width = $G("videoWidth"),
  80. height = $G("videoHeight"),
  81. url=$G('videoUrl').value,
  82. align = findFocus("videoFloat","name");
  83. if(!url) return false;
  84. if ( !checkNum( [width, height] ) ) return false;
  85. editor.execCommand('insertvideo', {
  86. url: convert_url(url),
  87. width: width.value,
  88. height: height.value,
  89. align: align
  90. });
  91. }
  92. /**
  93. * 将元素id下的所有代表视频的图片插入编辑器中
  94. * @param id
  95. */
  96. function insertSearch(id){
  97. var imgs = domUtils.getElementsByTagName($G(id),"img"),
  98. videoObjs=[];
  99. for(var i=0,img; img=imgs[i++];){
  100. if(img.getAttribute("selected")){
  101. videoObjs.push({
  102. url:img.getAttribute("ue_video_url"),
  103. width:420,
  104. height:280,
  105. align:"none"
  106. });
  107. }
  108. }
  109. editor.execCommand('insertvideo',videoObjs);
  110. }
  111. /**
  112. * 找到id下具有focus类的节点并返回该节点下的某个属性
  113. * @param id
  114. * @param returnProperty
  115. */
  116. function findFocus( id, returnProperty ) {
  117. var tabs = $G( id ).children,
  118. property;
  119. for ( var i = 0, ci; ci = tabs[i++]; ) {
  120. if ( ci.className=="focus" ) {
  121. property = ci.getAttribute( returnProperty );
  122. break;
  123. }
  124. }
  125. return property;
  126. }
  127. function convert_url(s){
  128. return s.replace(/http:\/\/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i,"http://www.tudou.com/v/$1")
  129. .replace(/http:\/\/www\.youtube\.com\/watch\?v=([\w\-]+)/i,"http://www.youtube.com/v/$1")
  130. .replace(/http:\/\/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i,"http://player.youku.com/player.php/sid/$1")
  131. .replace(/http:\/\/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "http://player.56.com/v_$1.swf")
  132. .replace(/http:\/\/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "http://player.56.com/v_$1.swf")
  133. .replace(/http:\/\/v\.ku6\.com\/.+\/([^.]+)\.html/i, "http://player.ku6.com/refer/$1/v.swf");
  134. }
  135. /**
  136. * 检测传入的所有input框中输入的长宽是否是正数
  137. * @param nodes input框集合,
  138. */
  139. function checkNum( nodes ) {
  140. for ( var i = 0, ci; ci = nodes[i++]; ) {
  141. var value = ci.value;
  142. if ( !isNumber( value ) && value) {
  143. alert( lang.numError );
  144. ci.value = "";
  145. ci.focus();
  146. return false;
  147. }
  148. }
  149. return true;
  150. }
  151. /**
  152. * 数字判断
  153. * @param value
  154. */
  155. function isNumber( value ) {
  156. return /(0|^[1-9]\d*$)/.test( value );
  157. }
  158. /**
  159. * tab切换
  160. * @param tabParentId
  161. * @param keepFocus 当此值为真时,切换按钮上会保留focus的样式
  162. */
  163. function switchTab( tabParentId,keepFocus ) {
  164. var tabElements = $G( tabParentId ).children,
  165. tabHeads = tabElements[0].children,
  166. tabBodys = tabElements[1].children;
  167. for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
  168. var head = tabHeads[i];
  169. domUtils.on( head, "click", function () {
  170. //head样式更改
  171. for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
  172. if(!keepFocus)tabHeads[k].className = "";
  173. }
  174. this.className = "focus";
  175. //body显隐
  176. var tabSrc = this.getAttribute( "tabSrc" );
  177. for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
  178. var body = tabBodys[j],
  179. id = body.getAttribute( "id" );
  180. if ( id == tabSrc ) {
  181. body.style.display = "";
  182. if(id=="videoSearch"){
  183. selectTxt($G("videoSearchTxt"));
  184. }
  185. if(id=="video"){
  186. selectTxt($G("videoUrl"));
  187. }
  188. } else {
  189. body.style.display = "none";
  190. }
  191. }
  192. } );
  193. }
  194. }
  195. /**
  196. * 创建图片浮动选择按钮
  197. * @param ids
  198. */
  199. function createAlignButton( ids ) {
  200. for ( var i = 0, ci; ci = ids[i++]; ) {
  201. var floatContainer = $G( ci ),
  202. nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight, "center":lang.block};
  203. for ( var j in nameMaps ) {
  204. var div = document.createElement( "div" );
  205. div.setAttribute( "name", j );
  206. if ( j == "none" ) div.className="focus";
  207. div.style.cssText = "background:url(images/" + j + "_focus.jpg);";
  208. div.setAttribute( "title", nameMaps[j] );
  209. floatContainer.appendChild( div );
  210. }
  211. switchSelect( ci );
  212. }
  213. }
  214. /**
  215. * 选择切换
  216. * @param selectParentId
  217. */
  218. function switchSelect( selectParentId ) {
  219. var selects = $G( selectParentId ).children;
  220. for ( var i = 0, ci; ci = selects[i++]; ) {
  221. domUtils.on( ci, "click", function () {
  222. for ( var j = 0, cj; cj = selects[j++]; ) {
  223. cj.className = "";
  224. cj.removeAttribute && cj.removeAttribute( "class" );
  225. }
  226. this.className = "focus";
  227. } )
  228. }
  229. }
  230. /**
  231. * 监听url改变事件
  232. * @param url
  233. */
  234. function addUrlChangeListener(url){
  235. if (browser.ie) {
  236. url.onpropertychange = function () {
  237. createPreviewVideo( this.value );
  238. }
  239. } else {
  240. url.addEventListener( "input", function () {
  241. createPreviewVideo( this.value );
  242. }, false );
  243. }
  244. }
  245. /**
  246. * 根据url生成视频预览
  247. * @param url
  248. */
  249. function createPreviewVideo(url){
  250. if ( !url )return;
  251. var matches = url.match(/youtu.be\/(\w+)$/) || url.match(/youtube\.com\/watch\?v=(\w+)/) || url.match(/youtube.com\/v\/(\w+)/),
  252. youku = url.match(/youku\.com\/v_show\/id_(\w+)/),
  253. youkuPlay = /player\.youku\.com/ig.test(url);
  254. if(!youkuPlay){
  255. if (matches){
  256. url = "https://www.youtube.com/v/" + matches[1] + "?version=3&feature=player_embedded";
  257. }else if(youku){
  258. url = "http://player.youku.com/player.php/sid/"+youku[1]+"/v.swf"
  259. }else if(!endWith(url,[".swf",".flv",".wmv"])){
  260. $G("preview").innerHTML = lang.urlError;
  261. return;
  262. }
  263. }else{
  264. url = url.replace(/\?f=.*/,"");
  265. }
  266. $G("preview").innerHTML = '<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
  267. ' src="' + url + '"' +
  268. ' width="' + 420 + '"' +
  269. ' height="' + 280 + '"' +
  270. ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" ></embed>';
  271. }
  272. /**
  273. * 末尾字符检测
  274. * @param str
  275. * @param endStrArr
  276. */
  277. function endWith(str,endStrArr){
  278. for(var i=0,len = endStrArr.length;i<len;i++){
  279. var tmp = endStrArr[i];
  280. if(str.length - tmp.length<0) return false;
  281. if(str.substring(str.length-tmp.length)==tmp){
  282. return true;
  283. }
  284. }
  285. return false;
  286. }
  287. /**
  288. * ajax获取视频信息
  289. */
  290. function getMovie(){
  291. var keywordInput = $G("videoSearchTxt");
  292. if(!keywordInput.getAttribute("hasClick") ||!keywordInput.value){
  293. selectTxt(keywordInput);
  294. return;
  295. }
  296. $G( "searchList" ).innerHTML = lang.loading;
  297. var keyword = keywordInput.value,
  298. type = $G("videoType").value,
  299. str="";
  300. ajax.request(editor.options.getMovieUrl,{
  301. searchKey:keyword,
  302. videoType:type,
  303. onsuccess:function(xhr){
  304. try{
  305. var info = eval("("+xhr.responseText+")");
  306. }catch(e){
  307. return;
  308. }
  309. var videos = info.multiPageResult.results;
  310. var html=["<table width='530'>"];
  311. for(var i=0,ci;ci = videos[i++];){
  312. html.push(
  313. "<tr>" +
  314. "<td><img title='"+lang.clickToSelect+"' ue_video_url='"+ci.outerPlayerUrl+"' alt='"+ci.tags+"' width='106' height='80' src='"+ci.picUrl+"' /> </td>" +
  315. "<td>" +
  316. "<p><a target='_blank' title='"+lang.goToSource+"' href='"+ci.itemUrl+"'>"+ci.title.substr(0,30)+"</a></p>" +
  317. "<p style='height: 62px;line-height: 20px' title='"+ci.description+"'> "+ ci.description.substr(0,95) +" </p>" +
  318. "</td>" +
  319. "</tr>"
  320. );
  321. }
  322. html.push("</table>");
  323. $G("searchList").innerHTML = str = html.length ==2 ?lang.noVideo : html.join("");
  324. var imgs = domUtils.getElementsByTagName($G("searchList"),"img");
  325. if(!imgs)return;
  326. for(var i=0,img;img = imgs[i++];){
  327. domUtils.on(img,"click",function(){
  328. changeSelected(this);
  329. })
  330. }
  331. }
  332. });
  333. }
  334. /**
  335. * 改变对象o的选中状态
  336. * @param o
  337. */
  338. function changeSelected(o){
  339. if ( o.getAttribute( "selected" ) ) {
  340. o.removeAttribute( "selected" );
  341. o.style.cssText = "filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;border: 2px solid #fff";
  342. } else {
  343. o.setAttribute( "selected", "true" );
  344. o.style.cssText = "filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;border:2px solid blue;";
  345. }
  346. }
  347. })();