| 提交 | 用户 | 时间 | ||
| 1ac2bc | 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 | ||
| 9 | (function(){ | |
| 10 | ||
| 11 | var video = {}, | |
| 12 | uploadVideoList = [], | |
| 13 | isModifyUploadVideo = false, | |
| 14 | uploadFile; | |
| 15 | ||
| 16 | window.onload = function(){ | |
| 17 | $focus($G("videoUrl")); | |
| 18 | initTabs(); | |
| 19 | initVideo(); | |
| 20 | initUpload(); | |
| 21 | }; | |
| 22 | ||
| 23 | /* 初始化tab标签 */ | |
| 24 | function initTabs(){ | |
| 25 | var tabs = $G('tabHeads').children; | |
| 26 | for (var i = 0; i < tabs.length; i++) { | |
| 27 | domUtils.on(tabs[i], "click", function (e) { | |
| 28 | var j, bodyId, target = e.target || e.srcElement; | |
| 29 | for (j = 0; j < tabs.length; j++) { | |
| 30 | bodyId = tabs[j].getAttribute('data-content-id'); | |
| 31 | if(tabs[j] == target){ | |
| 32 | domUtils.addClass(tabs[j], 'focus'); | |
| 33 | domUtils.addClass($G(bodyId), 'focus'); | |
| 34 | }else { | |
| 35 | domUtils.removeClasses(tabs[j], 'focus'); | |
| 36 | domUtils.removeClasses($G(bodyId), 'focus'); | |
| 37 | } | |
| 38 | } | |
| 39 | }); | |
| 40 | } | |
| 41 | } | |
| 42 | ||
| 43 | function initVideo(){ | |
| 44 | createAlignButton( ["videoFloat", "upload_alignment"] ); | |
| 45 | addUrlChangeListener($G("videoUrl")); | |
| 46 | addOkListener(); | |
| 47 | ||
| 48 | //编辑视频时初始化相关信息 | |
| 49 | (function(){ | |
| 50 | var img = editor.selection.getRange().getClosedNode(),url; | |
| 51 | if(img && img.className){ | |
| 52 | var hasFakedClass = (img.className == "edui-faked-video"), | |
| 53 | hasUploadClass = img.className.indexOf("edui-upload-video")!=-1; | |
| 54 | if(hasFakedClass || hasUploadClass) { | |
| 55 | $G("videoUrl").value = url = img.getAttribute("_url"); | |
| 56 | $G("videoWidth").value = img.width; | |
| 57 | $G("videoHeight").value = img.height; | |
| 58 | var align = domUtils.getComputedStyle(img,"float"), | |
| 59 | parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align"); | |
| 60 | updateAlignButton(parentAlign==="center"?"center":align); | |
| 61 | } | |
| 62 | if(hasUploadClass) { | |
| 63 | isModifyUploadVideo = true; | |
| 64 | } | |
| 65 | } | |
| 66 | createPreviewVideo(url); | |
| 67 | })(); | |
| 68 | } | |
| 69 | ||
| 70 | /** | |
| 71 | * 监听确认和取消两个按钮事件，用户执行插入或者清空正在播放的视频实例操作 | |
| 72 | */ | |
| 73 | function addOkListener(){ | |
| 74 | dialog.onok = function(){ | |
| 75 | $G("preview").innerHTML = ""; | |
| 76 | var currentTab = findFocus("tabHeads","tabSrc"); | |
| 77 | switch(currentTab){ | |
| 78 | case "video": | |
| 79 | return insertSingle(); | |
| 80 | break; | |
| 81 | case "videoSearch": | |
| 82 | return insertSearch("searchList"); | |
| 83 | break; | |
| 84 | case "upload": | |
| 85 | return insertUpload(); | |
| 86 | break; | |
| 87 | } | |
| 88 | }; | |
| 89 | dialog.oncancel = function(){ | |
| 90 | $G("preview").innerHTML = ""; | |
| 91 | }; | |
| 92 | } | |
| 93 | ||
| 94 | /** | |
| 95 | * 依据传入的align值更新按钮信息 | |
| 96 | * @param align | |
| 97 | */ | |
| 98 | function updateAlignButton( align ) { | |
| 99 | var aligns = $G( "videoFloat" ).children; | |
| 100 | for ( var i = 0, ci; ci = aligns[i++]; ) { | |
| 101 | if ( ci.getAttribute( "name" ) == align ) { | |
| 102 | if ( ci.className !="focus" ) { | |
| 103 | ci.className = "focus"; | |
| 104 | } | |
| 105 | } else { | |
| 106 | if ( ci.className =="focus" ) { | |
| 107 | ci.className = ""; | |
| 108 | } | |
| 109 | } | |
| 110 | } | |
| 111 | } | |
| 112 | ||
| 113 | /** | |
| 114 | * 将单个视频信息插入编辑器中 | |
| 115 | */ | |
| 116 | function insertSingle(){ | |
| 117 | var width = $G("videoWidth"), | |
| 118 | height = $G("videoHeight"), | |
| 119 | url=$G('videoUrl').value, | |
| 120 | align = findFocus("videoFloat","name"); | |
| 121 | if(!url) return false; | |
| 122 | if ( !checkNum( [width, height] ) ) return false; | |
| 123 | editor.execCommand('insertvideo', { | |
| 124 | url: convert_url(url), | |
| 125 | width: width.value, | |
| 126 | height: height.value, | |
| 127 | align: align | |
| 128 | }, isModifyUploadVideo ? 'upload':null); | |
| 129 | } | |
| 130 | ||
| 131 | /** | |
| 132 | * 将元素id下的所有代表视频的图片插入编辑器中 | |
| 133 | * @param id | |
| 134 | */ | |
| 135 | function insertSearch(id){ | |
| 136 | var imgs = domUtils.getElementsByTagName($G(id),"img"), | |
| 137 | videoObjs=[]; | |
| 138 | for(var i=0,img; img=imgs[i++];){ | |
| 139 | if(img.getAttribute("selected")){ | |
| 140 | videoObjs.push({ | |
| 141 | url:img.getAttribute("ue_video_url"), | |
| 142 | width:420, | |
| 143 | height:280, | |
| 144 | align:"none" | |
| 145 | }); | |
| 146 | } | |
| 147 | } | |
| 148 | editor.execCommand('insertvideo',videoObjs); | |
| 149 | } | |
| 150 | ||
| 151 | /** | |
| 152 | * 找到id下具有focus类的节点并返回该节点下的某个属性 | |
| 153 | * @param id | |
| 154 | * @param returnProperty | |
| 155 | */ | |
| 156 | function findFocus( id, returnProperty ) { | |
| 157 | var tabs = $G( id ).children, | |
| 158 | property; | |
| 159 | for ( var i = 0, ci; ci = tabs[i++]; ) { | |
| 160 | if ( ci.className=="focus" ) { | |
| 161 | property = ci.getAttribute( returnProperty ); | |
| 162 | break; | |
| 163 | } | |
| 164 | } | |
| 165 | return property; | |
| 166 | } | |
| 167 | function convert_url(url){ | |
| 168 | if ( !url ) return ''; | |
| 169 | url = utils.trim(url) | |
| 170 | .replace(/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, 'player.youku.com/player.php/sid/$1/v.swf') | |
| 171 | .replace(/(www\.)?youtube\.com\/watch\?v=([\w\-]+)/i, "www.youtube.com/v/$2") | |
| 172 | .replace(/youtu.be\/(\w+)$/i, "www.youtube.com/v/$1") | |
| 173 | .replace(/v\.ku6\.com\/.+\/([\w\.]+)\.html.*$/i, "player.ku6.com/refer/$1/v.swf") | |
| 174 | .replace(/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "player.56.com/v_$1.swf") | |
| 175 | .replace(/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "player.56.com/v_$1.swf") | |
| 176 | .replace(/v\.pps\.tv\/play_([\w]+)\.html.*$/i, "player.pps.tv/player/sid/$1/v.swf") | |
| 177 | .replace(/www\.letv\.com\/ptv\/vplay\/([\d]+)\.html.*$/i, "i7.imgs.letv.com/player/swfPlayer.swf?id=$1&autoplay=0") | |
| 178 | .replace(/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "www.tudou.com/v/$1") | |
| 179 | .replace(/v\.qq\.com\/cover\/[\w]+\/[\w]+\/([\w]+)\.html/i, "static.video.qq.com/TPout.swf?vid=$1") | |
| 180 | .replace(/v\.qq\.com\/.+[\?\&]vid=([^&]+).*$/i, "static.video.qq.com/TPout.swf?vid=$1") | |
| 181 | .replace(/my\.tv\.sohu\.com\/[\w]+\/[\d]+\/([\d]+)\.shtml.*$/i, "share.vrs.sohu.com/my/v.swf&id=$1"); | |
| 182 | ||
| 183 | return url; | |
| 184 | } | |
| 185 | ||
| 186 | /** | |
| 187 | * 检测传入的所有input框中输入的长宽是否是正数 | |
| 188 | * @param nodes input框集合， | |
| 189 | */ | |
| 190 | function checkNum( nodes ) { | |
| 191 | for ( var i = 0, ci; ci = nodes[i++]; ) { | |
| 192 | var value = ci.value; | |
| 193 | if ( !isNumber( value ) && value) { | |
| 194 | alert( lang.numError ); | |
| 195 | ci.value = ""; | |
| 196 | ci.focus(); | |
| 197 | return false; | |
| 198 | } | |
| 199 | } | |
| 200 | return true; | |
| 201 | } | |
| 202 | ||
| 203 | /** | |
| 204 | * 数字判断 | |
| 205 | * @param value | |
| 206 | */ | |
| 207 | function isNumber( value ) { | |
| 208 | return /(0|^[1-9]\d*$)/.test( value ); | |
| 209 | } | |
| 210 | ||
| 211 | /** | |
| 212 | * 创建图片浮动选择按钮 | |
| 213 | * @param ids | |
| 214 | */ | |
| 215 | function createAlignButton( ids ) { | |
| 216 | for ( var i = 0, ci; ci = ids[i++]; ) { | |
| 217 | var floatContainer = $G( ci ), | |
| 218 | nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight, "center":lang.block}; | |
| 219 | for ( var j in nameMaps ) { | |
| 220 | var div = document.createElement( "div" ); | |
| 221 | div.setAttribute( "name", j ); | |
| 222 | if ( j == "none" ) div.className="focus"; | |
| 223 | div.style.cssText = "background:url(images/" + j + "_focus.jpg);"; | |
| 224 | div.setAttribute( "title", nameMaps[j] ); | |
| 225 | floatContainer.appendChild( div ); | |
| 226 | } | |
| 227 | switchSelect( ci ); | |
| 228 | } | |
| 229 | } | |
| 230 | ||
| 231 | /** | |
| 232 | * 选择切换 | |
| 233 | * @param selectParentId | |
| 234 | */ | |
| 235 | function switchSelect( selectParentId ) { | |
| 236 | var selects = $G( selectParentId ).children; | |
| 237 | for ( var i = 0, ci; ci = selects[i++]; ) { | |
| 238 | domUtils.on( ci, "click", function () { | |
| 239 | for ( var j = 0, cj; cj = selects[j++]; ) { | |
| 240 | cj.className = ""; | |
| 241 | cj.removeAttribute && cj.removeAttribute( "class" ); | |
| 242 | } | |
| 243 | this.className = "focus"; | |
| 244 | } ) | |
| 245 | } | |
| 246 | } | |
| 247 | ||
| 248 | /** | |
| 249 | * 监听url改变事件 | |
| 250 | * @param url | |
| 251 | */ | |
| 252 | function addUrlChangeListener(url){ | |
| 253 | if (browser.ie) { | |
| 254 | url.onpropertychange = function () { | |
| 255 | createPreviewVideo( this.value ); | |
| 256 | } | |
| 257 | } else { | |
| 258 | url.addEventListener( "input", function () { | |
| 259 | createPreviewVideo( this.value ); | |
| 260 | }, false ); | |
| 261 | } | |
| 262 | } | |
| 263 | ||
| 264 | /** | |
| 265 | * 根据url生成视频预览 | |
| 266 | * @param url | |
| 267 | */ | |
| 268 | function createPreviewVideo(url){ | |
| 269 | if ( !url )return; | |
| 270 | ||
| 271 | var conUrl = convert_url(url); | |
| 272 | ||
| 273 | conUrl = utils.unhtmlForUrl(conUrl); | |
| 274 | ||
| 275 | $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+ | |
| 276 | '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' + | |
| 277 | ' src="' + conUrl + '"' + | |
| 278 | ' width="' + 420 + '"' + | |
| 279 | ' height="' + 280 + '"' + | |
| 280 | ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' + | |
| 281 | '</embed>'; | |
| 282 | } | |
| 283 | ||
| 284 | ||
| 285 | /* 插入上传视频 */ | |
| 286 | function insertUpload(){ | |
| 287 | var videoObjs=[], | |
| 288 | uploadDir = editor.getOpt('videoUrlPrefix'), | |
| 289 | width = parseInt($G('upload_width').value, 10) || 420, | |
| 290 | height = parseInt($G('upload_height').value, 10) || 280, | |
| 291 | align = findFocus("upload_alignment","name") || 'none'; | |
| 292 | for(var key in uploadVideoList) { | |
| 293 | var file = uploadVideoList[key]; | |
| 294 | videoObjs.push({ | |
| 295 | url: uploadDir + file.url, | |
| 296 | width:width, | |
| 297 | height:height, | |
| 298 | align:align | |
| 299 | }); | |
| 300 | } | |
| 301 | ||
| 302 | var count = uploadFile.getQueueCount(); | |
| 303 | if (count) { | |
| 304 | $('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>'); | |
| 305 | return false; | |
| 306 | } else { | |
| 307 | editor.execCommand('insertvideo', videoObjs, 'upload'); | |
| 308 | } | |
| 309 | } | |
| 310 | ||
| 311 | /*初始化上传标签*/ | |
| 312 | function initUpload(){ | |
| 313 | uploadFile = new UploadFile('queueList'); | |
| 314 | } | |
| 315 | ||
| 316 | ||
| 317 | /* 上传附件 */ | |
| 318 | function UploadFile(target) { | |
| 319 | this.$wrap = target.constructor == String ? $('#' + target) : $(target); | |
| 320 | this.init(); | |
| 321 | } | |
| 322 | UploadFile.prototype = { | |
| 323 | init: function () { | |
| 324 | this.fileList = []; | |
| 325 | this.initContainer(); | |
| 326 | this.initUploader(); | |
| 327 | }, | |
| 328 | initContainer: function () { | |
| 329 | this.$queue = this.$wrap.find('.filelist'); | |
| 330 | }, | |
| 331 | /* 初始化容器 */ | |
| 332 | initUploader: function () { | |
| 333 | var _this = this, | |
| 334 | $ = jQuery, // just in case. Make sure it's not an other libaray. | |
| 335 | $wrap = _this.$wrap, | |
| 336 | // 图片容器 | |
| 337 | $queue = $wrap.find('.filelist'), | |
| 338 | // 状态栏，包括进度和控制按钮 | |
| 339 | $statusBar = $wrap.find('.statusBar'), | |
| 340 | // 文件总体选择信息。 | |
| 341 | $info = $statusBar.find('.info'), | |
| 342 | // 上传按钮 | |
| 343 | $upload = $wrap.find('.uploadBtn'), | |
| 344 | // 上传按钮 | |
| 345 | $filePickerBtn = $wrap.find('.filePickerBtn'), | |
| 346 | // 上传按钮 | |
| 347 | $filePickerBlock = $wrap.find('.filePickerBlock'), | |
| 348 | // 没选择文件之前的内容。 | |
| 349 | $placeHolder = $wrap.find('.placeholder'), | |
| 350 | // 总体进度条 | |
| 351 | $progress = $statusBar.find('.progress').hide(), | |
| 352 | // 添加的文件数量 | |
| 353 | fileCount = 0, | |
| 354 | // 添加的文件总大小 | |
| 355 | fileSize = 0, | |
| 356 | // 优化retina, 在retina下这个值是2 | |
| 357 | ratio = window.devicePixelRatio || 1, | |
| 358 | // 缩略图大小 | |
| 359 | thumbnailWidth = 113 * ratio, | |
| 360 | thumbnailHeight = 113 * ratio, | |
| 361 | // 可能有pedding, ready, uploading, confirm, done. | |
| 362 | state = '', | |
| 363 | // 所有文件的进度信息，key为file id | |
| 364 | percentages = {}, | |
| 365 | supportTransition = (function () { | |
| 366 | var s = document.createElement('p').style, | |
| 367 | r = 'transition' in s || | |
| 368 | 'WebkitTransition' in s || | |
| 369 | 'MozTransition' in s || | |
| 370 | 'msTransition' in s || | |
| 371 | 'OTransition' in s; | |
| 372 | s = null; | |
| 373 | return r; | |
| 374 | })(), | |
| 375 | // WebUploader实例 | |
| 376 | uploader, | |
| 377 | actionUrl = editor.getActionUrl(editor.getOpt('videoActionName')), | |
| 378 | fileMaxSize = editor.getOpt('videoMaxSize'), | |
| 379 | acceptExtensions = (editor.getOpt('videoAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');; | |
| 380 | ||
| 381 | if (!WebUploader.Uploader.support()) { | |
| 382 | $('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide(); | |
| 383 | return; | |
| 384 | } else if (!editor.getOpt('videoActionName')) { | |
| 385 | $('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide(); | |
| 386 | return; | |
| 387 | } | |
| 388 | ||
| 389 | uploader = _this.uploader = WebUploader.create({ | |
| 390 | pick: { | |
| 391 | id: '#filePickerReady', | |
| 392 | label: lang.uploadSelectFile | |
| 393 | }, | |
| 394 | swf: '../../third-party/webuploader/Uploader.swf', | |
| 395 | server: actionUrl, | |
| 396 | fileVal: editor.getOpt('videoFieldName'), | |
| 397 | duplicate: true, | |
| 398 | fileSingleSizeLimit: fileMaxSize, | |
| 399 | compress: false | |
| 400 | }); | |
| 401 | uploader.addButton({ | |
| 402 | id: '#filePickerBlock' | |
| 403 | }); | |
| 404 | uploader.addButton({ | |
| 405 | id: '#filePickerBtn', | |
| 406 | label: lang.uploadAddFile | |
| 407 | }); | |
| 408 | ||
| 409 | setState('pedding'); | |
| 410 | ||
| 411 | // 当有文件添加进来时执行，负责view的创建 | |
| 412 | function addFile(file) { | |
| 413 | var $li = $('<li id="' + file.id + '">' + | |
| 414 | '<p class="title">' + file.name + '</p>' + | |
| 415 | '<p class="imgWrap"></p>' + | |
| 416 | '<p class="progress"><span></span></p>' + | |
| 417 | '</li>'), | |
| 418 | ||
| 419 | $btns = $('<div class="file-panel">' + | |
| 420 | '<span class="cancel">' + lang.uploadDelete + '</span>' + | |
| 421 | '<span class="rotateRight">' + lang.uploadTurnRight + '</span>' + | |
| 422 | '<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li), | |
| 423 | $prgress = $li.find('p.progress span'), | |
| 424 | $wrap = $li.find('p.imgWrap'), | |
| 425 | $info = $('<p class="error"></p>').hide().appendTo($li), | |
| 426 | ||
| 427 | showError = function (code) { | |
| 428 | switch (code) { | |
| 429 | case 'exceed_size': | |
| 430 | text = lang.errorExceedSize; | |
| 431 | break; | |
| 432 | case 'interrupt': | |
| 433 | text = lang.errorInterrupt; | |
| 434 | break; | |
| 435 | case 'http': | |
| 436 | text = lang.errorHttp; | |
| 437 | break; | |
| 438 | case 'not_allow_type': | |
| 439 | text = lang.errorFileType; | |
| 440 | break; | |
| 441 | default: | |
| 442 | text = lang.errorUploadRetry; | |
| 443 | break; | |
| 444 | } | |
| 445 | $info.text(text).show(); | |
| 446 | }; | |
| 447 | ||
| 448 | if (file.getStatus() === 'invalid') { | |
| 449 | showError(file.statusText); | |
| 450 | } else { | |
| 451 | $wrap.text(lang.uploadPreview); | |
| 452 | if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|'+file.ext.toLowerCase()+'|') == -1) { | |
| 453 | $wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' + | |
| 454 | '<span class="file-title">' + file.name + '</span>'); | |
| 455 | } else { | |
| 456 | if (browser.ie && browser.version <= 7) { | |
| 457 | $wrap.text(lang.uploadNoPreview); | |
| 458 | } else { | |
| 459 | uploader.makeThumb(file, function (error, src) { | |
| 460 | if (error || !src || (/^data:/.test(src) && browser.ie && browser.version <= 7)) { | |
| 461 | $wrap.text(lang.uploadNoPreview); | |
| 462 | } else { | |
| 463 | var $img = $('<img src="' + src + '">'); | |
| 464 | $wrap.empty().append($img); | |
| 465 | $img.on('error', function () { | |
| 466 | $wrap.text(lang.uploadNoPreview); | |
| 467 | }); | |
| 468 | } | |
| 469 | }, thumbnailWidth, thumbnailHeight); | |
| 470 | } | |
| 471 | } | |
| 472 | percentages[ file.id ] = [ file.size, 0 ]; | |
| 473 | file.rotation = 0; | |
| 474 | ||
| 475 | /* 检查文件格式 */ | |
| 476 | if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) { | |
| 477 | showError('not_allow_type'); | |
| 478 | uploader.removeFile(file); | |
| 479 | } | |
| 480 | } | |
| 481 | ||
| 482 | file.on('statuschange', function (cur, prev) { | |
| 483 | if (prev === 'progress') { | |
| 484 | $prgress.hide().width(0); | |
| 485 | } else if (prev === 'queued') { | |
| 486 | $li.off('mouseenter mouseleave'); | |
| 487 | $btns.remove(); | |
| 488 | } | |
| 489 | // 成功 | |
| 490 | if (cur === 'error' || cur === 'invalid') { | |
| 491 | showError(file.statusText); | |
| 492 | percentages[ file.id ][ 1 ] = 1; | |
| 493 | } else if (cur === 'interrupt') { | |
| 494 | showError('interrupt'); | |
| 495 | } else if (cur === 'queued') { | |
| 496 | percentages[ file.id ][ 1 ] = 0; | |
| 497 | } else if (cur === 'progress') { | |
| 498 | $info.hide(); | |
| 499 | $prgress.css('display', 'block'); | |
| 500 | } else if (cur === 'complete') { | |
| 501 | } | |
| 502 | ||
| 503 | $li.removeClass('state-' + prev).addClass('state-' + cur); | |
| 504 | }); | |
| 505 | ||
| 506 | $li.on('mouseenter', function () { | |
| 507 | $btns.stop().animate({height: 30}); | |
| 508 | }); | |
| 509 | $li.on('mouseleave', function () { | |
| 510 | $btns.stop().animate({height: 0}); | |
| 511 | }); | |
| 512 | ||
| 513 | $btns.on('click', 'span', function () { | |
| 514 | var index = $(this).index(), | |
| 515 | deg; | |
| 516 | ||
| 517 | switch (index) { | |
| 518 | case 0: | |
| 519 | uploader.removeFile(file); | |
| 520 | return; | |
| 521 | case 1: | |
| 522 | file.rotation += 90; | |
| 523 | break; | |
| 524 | case 2: | |
| 525 | file.rotation -= 90; | |
| 526 | break; | |
| 527 | } | |
| 528 | ||
| 529 | if (supportTransition) { | |
| 530 | deg = 'rotate(' + file.rotation + 'deg)'; | |
| 531 | $wrap.css({ | |
| 532 | '-webkit-transform': deg, | |
| 533 | '-mos-transform': deg, | |
| 534 | '-o-transform': deg, | |
| 535 | 'transform': deg | |
| 536 | }); | |
| 537 | } else { | |
| 538 | $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); | |
| 539 | } | |
| 540 | ||
| 541 | }); | |
| 542 | ||
| 543 | $li.insertBefore($filePickerBlock); | |
| 544 | } | |
| 545 | ||
| 546 | // 负责view的销毁 | |
| 547 | function removeFile(file) { | |
| 548 | var $li = $('#' + file.id); | |
| 549 | delete percentages[ file.id ]; | |
| 550 | updateTotalProgress(); | |
| 551 | $li.off().find('.file-panel').off().end().remove(); | |
| 552 | } | |
| 553 | ||
| 554 | function updateTotalProgress() { | |
| 555 | var loaded = 0, | |
| 556 | total = 0, | |
| 557 | spans = $progress.children(), | |
| 558 | percent; | |
| 559 | ||
| 560 | $.each(percentages, function (k, v) { | |
| 561 | total += v[ 0 ]; | |
| 562 | loaded += v[ 0 ] * v[ 1 ]; | |
| 563 | }); | |
| 564 | ||
| 565 | percent = total ? loaded / total : 0; | |
| 566 | ||
| 567 | spans.eq(0).text(Math.round(percent * 100) + '%'); | |
| 568 | spans.eq(1).css('width', Math.round(percent * 100) + '%'); | |
| 569 | updateStatus(); | |
| 570 | } | |
| 571 | ||
| 572 | function setState(val, files) { | |
| 573 | ||
| 574 | if (val != state) { | |
| 575 | ||
| 576 | var stats = uploader.getStats(); | |
| 577 | ||
| 578 | $upload.removeClass('state-' + state); | |
| 579 | $upload.addClass('state-' + val); | |
| 580 | ||
| 581 | switch (val) { | |
| 582 | ||
| 583 | /* 未选择文件 */ | |
| 584 | case 'pedding': | |
| 585 | $queue.addClass('element-invisible'); | |
| 586 | $statusBar.addClass('element-invisible'); | |
| 587 | $placeHolder.removeClass('element-invisible'); | |
| 588 | $progress.hide(); $info.hide(); | |
| 589 | uploader.refresh(); | |
| 590 | break; | |
| 591 | ||
| 592 | /* 可以开始上传 */ | |
| 593 | case 'ready': | |
| 594 | $placeHolder.addClass('element-invisible'); | |
| 595 | $queue.removeClass('element-invisible'); | |
| 596 | $statusBar.removeClass('element-invisible'); | |
| 597 | $progress.hide(); $info.show(); | |
| 598 | $upload.text(lang.uploadStart); | |
| 599 | uploader.refresh(); | |
| 600 | break; | |
| 601 | ||
| 602 | /* 上传中 */ | |
| 603 | case 'uploading': | |
| 604 | $progress.show(); $info.hide(); | |
| 605 | $upload.text(lang.uploadPause); | |
| 606 | break; | |
| 607 | ||
| 608 | /* 暂停上传 */ | |
| 609 | case 'paused': | |
| 610 | $progress.show(); $info.hide(); | |
| 611 | $upload.text(lang.uploadContinue); | |
| 612 | break; | |
| 613 | ||
| 614 | case 'confirm': | |
| 615 | $progress.show(); $info.hide(); | |
| 616 | $upload.text(lang.uploadStart); | |
| 617 | ||
| 618 | stats = uploader.getStats(); | |
| 619 | if (stats.successNum && !stats.uploadFailNum) { | |
| 620 | setState('finish'); | |
| 621 | return; | |
| 622 | } | |
| 623 | break; | |
| 624 | ||
| 625 | case 'finish': | |
| 626 | $progress.hide(); $info.show(); | |
| 627 | if (stats.uploadFailNum) { | |
| 628 | $upload.text(lang.uploadRetry); | |
| 629 | } else { | |
| 630 | $upload.text(lang.uploadStart); | |
| 631 | } | |
| 632 | break; | |
| 633 | } | |
| 634 | ||
| 635 | state = val; | |
| 636 | updateStatus(); | |
| 637 | ||
| 638 | } | |
| 639 | ||
| 640 | if (!_this.getQueueCount()) { | |
| 641 | $upload.addClass('disabled') | |
| 642 | } else { | |
| 643 | $upload.removeClass('disabled') | |
| 644 | } | |
| 645 | ||
| 646 | } | |
| 647 | ||
| 648 | function updateStatus() { | |
| 649 | var text = '', stats; | |
| 650 | ||
| 651 | if (state === 'ready') { | |
| 652 | text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)); | |
| 653 | } else if (state === 'confirm') { | |
| 654 | stats = uploader.getStats(); | |
| 655 | if (stats.uploadFailNum) { | |
| 656 | text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum); | |
| 657 | } | |
| 658 | } else { | |
| 659 | stats = uploader.getStats(); | |
| 660 | text = lang.updateStatusFinish.replace('_', fileCount). | |
| 661 | replace('_KB', WebUploader.formatSize(fileSize)). | |
| 662 | replace('_', stats.successNum); | |
| 663 | ||
| 664 | if (stats.uploadFailNum) { | |
| 665 | text += lang.updateStatusError.replace('_', stats.uploadFailNum); | |
| 666 | } | |
| 667 | } | |
| 668 | ||
| 669 | $info.html(text); | |
| 670 | } | |
| 671 | ||
| 672 | uploader.on('fileQueued', function (file) { | |
| 673 | fileCount++; | |
| 674 | fileSize += file.size; | |
| 675 | ||
| 676 | if (fileCount === 1) { | |
| 677 | $placeHolder.addClass('element-invisible'); | |
| 678 | $statusBar.show(); | |
| 679 | } | |
| 680 | ||
| 681 | addFile(file); | |
| 682 | }); | |
| 683 | ||
| 684 | uploader.on('fileDequeued', function (file) { | |
| 685 | fileCount--; | |
| 686 | fileSize -= file.size; | |
| 687 | ||
| 688 | removeFile(file); | |
| 689 | updateTotalProgress(); | |
| 690 | }); | |
| 691 | ||
| 692 | uploader.on('filesQueued', function (file) { | |
| 693 | if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) { | |
| 694 | setState('ready'); | |
| 695 | } | |
| 696 | updateTotalProgress(); | |
| 697 | }); | |
| 698 | ||
| 699 | uploader.on('all', function (type, files) { | |
| 700 | switch (type) { | |
| 701 | case 'uploadFinished': | |
| 702 | setState('confirm', files); | |
| 703 | break; | |
| 704 | case 'startUpload': | |
| 705 | /* 添加额外的GET参数 */ | |
| 706 | var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '', | |
| 707 | url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params); | |
| 708 | uploader.option('server', url); | |
| 709 | setState('uploading', files); | |
| 710 | break; | |
| 711 | case 'stopUpload': | |
| 712 | setState('paused', files); | |
| 713 | break; | |
| 714 | } | |
| 715 | }); | |
| 716 | ||
| 717 | uploader.on('uploadBeforeSend', function (file, data, header) { | |
| 718 | //这里可以通过data对象添加POST参数 | |
| 719 | header['X_Requested_With'] = 'XMLHttpRequest'; | |
| 720 | }); | |
| 721 | ||
| 722 | uploader.on('uploadProgress', function (file, percentage) { | |
| 723 | var $li = $('#' + file.id), | |
| 724 | $percent = $li.find('.progress span'); | |
| 725 | ||
| 726 | $percent.css('width', percentage * 100 + '%'); | |
| 727 | percentages[ file.id ][ 1 ] = percentage; | |
| 728 | updateTotalProgress(); | |
| 729 | }); | |
| 730 | ||
| 731 | uploader.on('uploadSuccess', function (file, ret) { | |
| 732 | var $file = $('#' + file.id); | |
| 733 | try { | |
| 734 | var responseText = (ret._raw || ret), | |
| 735 | json = utils.str2json(responseText); | |
| 736 | if (json.state == 'SUCCESS') { | |
| 737 | uploadVideoList.push({ | |
| 738 | 'url': json.url, | |
| 739 | 'type': json.type, | |
| 740 | 'original':json.original | |
| 741 | }); | |
| 742 | $file.append('<span class="success"></span>'); | |
| 743 | } else { | |
| 744 | $file.find('.error').text(json.state).show(); | |
| 745 | } | |
| 746 | } catch (e) { | |
| 747 | $file.find('.error').text(lang.errorServerUpload).show(); | |
| 748 | } | |
| 749 | }); | |
| 750 | ||
| 751 | uploader.on('uploadError', function (file, code) { | |
| 752 | }); | |
| 753 | uploader.on('error', function (code, file) { | |
| 754 | if (code == 'Q_TYPE_DENIED' || code == 'F_EXCEED_SIZE') { | |
| 755 | addFile(file); | |
| 756 | } | |
| 757 | }); | |
| 758 | uploader.on('uploadComplete', function (file, ret) { | |
| 759 | }); | |
| 760 | ||
| 761 | $upload.on('click', function () { | |
| 762 | if ($(this).hasClass('disabled')) { | |
| 763 | return false; | |
| 764 | } | |
| 765 | ||
| 766 | if (state === 'ready') { | |
| 767 | uploader.upload(); | |
| 768 | } else if (state === 'paused') { | |
| 769 | uploader.upload(); | |
| 770 | } else if (state === 'uploading') { | |
| 771 | uploader.stop(); | |
| 772 | } | |
| 773 | }); | |
| 774 | ||
| 775 | $upload.addClass('state-' + state); | |
| 776 | updateTotalProgress(); | |
| 777 | }, | |
| 778 | getQueueCount: function () { | |
| 779 | var file, i, status, readyFile = 0, files = this.uploader.getFiles(); | |
| 780 | for (i = 0; file = files[i++]; ) { | |
| 781 | status = file.getStatus(); | |
| 782 | if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++; | |
| 783 | } | |
| 784 | return readyFile; | |
| 785 | }, | |
| 786 | refresh: function(){ | |
| 787 | this.uploader.refresh(); | |
| 788 | } | |
| 789 | }; | |
| 790 | ||
| 791 | })(); | |
