| 提交 | 用户 | 时间 | ||
| 1ac2bc | 1 | /** |
| 懒 | 2 | * User: Jinqn |
| 3 | * Date: 14-04-08 | |
| 4 | * Time: 下午16:34 | |
| 5 | * 上传图片对话框逻辑代码,包括tab: 远程图片/上传图片/在线图片/搜索图片 | |
| 6 | */ | |
| 7 | ||
| 8 | (function () { | |
| 9 | ||
| 10 | var uploadFile, | |
| 11 | onlineFile; | |
| 12 | ||
| 13 | window.onload = function () { | |
| 14 | initTabs(); | |
| 15 | initButtons(); | |
| 16 | }; | |
| 17 | ||
| 18 | /* 初始化tab标签 */ | |
| 19 | function initTabs() { | |
| 20 | var tabs = $G('tabhead').children; | |
| 21 | for (var i = 0; i < tabs.length; i++) { | |
| 22 | domUtils.on(tabs[i], "click", function (e) { | |
| 23 | var target = e.target || e.srcElement; | |
| 24 | setTabFocus(target.getAttribute('data-content-id')); | |
| 25 | }); | |
| 26 | } | |
| 27 | ||
| 28 | setTabFocus('upload'); | |
| 29 | } | |
| 30 | ||
| 31 | /* 初始化tabbody */ | |
| 32 | function setTabFocus(id) { | |
| 33 | if(!id) return; | |
| 34 | var i, bodyId, tabs = $G('tabhead').children; | |
| 35 | for (i = 0; i < tabs.length; i++) { | |
| 36 | bodyId = tabs[i].getAttribute('data-content-id') | |
| 37 | if (bodyId == id) { | |
| 38 | domUtils.addClass(tabs[i], 'focus'); | |
| 39 | domUtils.addClass($G(bodyId), 'focus'); | |
| 40 | } else { | |
| 41 | domUtils.removeClasses(tabs[i], 'focus'); | |
| 42 | domUtils.removeClasses($G(bodyId), 'focus'); | |
| 43 | } | |
| 44 | } | |
| 45 | switch (id) { | |
| 46 | case 'upload': | |
| 47 | uploadFile = uploadFile || new UploadFile('queueList'); | |
| 48 | break; | |
| 49 | case 'online': | |
| 50 | onlineFile = onlineFile || new OnlineFile('fileList'); | |
| 51 | break; | |
| 52 | } | |
| 53 | } | |
| 54 | ||
| 55 | /* 初始化onok事件 */ | |
| 56 | function initButtons() { | |
| 57 | ||
| 58 | dialog.onok = function () { | |
| 59 | var list = [], id, tabs = $G('tabhead').children; | |
| 60 | for (var i = 0; i < tabs.length; i++) { | |
| 61 | if (domUtils.hasClass(tabs[i], 'focus')) { | |
| 62 | id = tabs[i].getAttribute('data-content-id'); | |
| 63 | break; | |
| 64 | } | |
| 65 | } | |
| 66 | ||
| 67 | switch (id) { | |
| 68 | case 'upload': | |
| 69 | list = uploadFile.getInsertList(); | |
| 70 | var count = uploadFile.getQueueCount(); | |
| 71 | if (count) { | |
| 72 | $('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>'); | |
| 73 | return false; | |
| 74 | } | |
| 75 | break; | |
| 76 | case 'online': | |
| 77 | list = onlineFile.getInsertList(); | |
| 78 | break; | |
| 79 | } | |
| 80 | ||
| 81 | editor.execCommand('insertfile', list); | |
| 82 | }; | |
| 83 | } | |
| 84 | ||
| 85 | ||
| 86 | /* 上传附件 */ | |
| 87 | function UploadFile(target) { | |
| 88 | this.$wrap = target.constructor == String ? $('#' + target) : $(target); | |
| 89 | this.init(); | |
| 90 | } | |
| 91 | UploadFile.prototype = { | |
| 92 | init: function () { | |
| 93 | this.fileList = []; | |
| 94 | this.initContainer(); | |
| 95 | this.initUploader(); | |
| 96 | }, | |
| 97 | initContainer: function () { | |
| 98 | this.$queue = this.$wrap.find('.filelist'); | |
| 99 | }, | |
| 100 | /* 初始化容器 */ | |
| 101 | initUploader: function () { | |
| 102 | var _this = this, | |
| 103 | $ = jQuery, // just in case. Make sure it's not an other libaray. | |
| 104 | $wrap = _this.$wrap, | |
| 105 | // 图片容器 | |
| 106 | $queue = $wrap.find('.filelist'), | |
| 107 | // 状态栏，包括进度和控制按钮 | |
| 108 | $statusBar = $wrap.find('.statusBar'), | |
| 109 | // 文件总体选择信息。 | |
| 110 | $info = $statusBar.find('.info'), | |
| 111 | // 上传按钮 | |
| 112 | $upload = $wrap.find('.uploadBtn'), | |
| 113 | // 上传按钮 | |
| 114 | $filePickerBtn = $wrap.find('.filePickerBtn'), | |
| 115 | // 上传按钮 | |
| 116 | $filePickerBlock = $wrap.find('.filePickerBlock'), | |
| 117 | // 没选择文件之前的内容。 | |
| 118 | $placeHolder = $wrap.find('.placeholder'), | |
| 119 | // 总体进度条 | |
| 120 | $progress = $statusBar.find('.progress').hide(), | |
| 121 | // 添加的文件数量 | |
| 122 | fileCount = 0, | |
| 123 | // 添加的文件总大小 | |
| 124 | fileSize = 0, | |
| 125 | // 优化retina, 在retina下这个值是2 | |
| 126 | ratio = window.devicePixelRatio || 1, | |
| 127 | // 缩略图大小 | |
| 128 | thumbnailWidth = 113 * ratio, | |
| 129 | thumbnailHeight = 113 * ratio, | |
| 130 | // 可能有pedding, ready, uploading, confirm, done. | |
| 131 | state = '', | |
| 132 | // 所有文件的进度信息，key为file id | |
| 133 | percentages = {}, | |
| 134 | supportTransition = (function () { | |
| 135 | var s = document.createElement('p').style, | |
| 136 | r = 'transition' in s || | |
| 137 | 'WebkitTransition' in s || | |
| 138 | 'MozTransition' in s || | |
| 139 | 'msTransition' in s || | |
| 140 | 'OTransition' in s; | |
| 141 | s = null; | |
| 142 | return r; | |
| 143 | })(), | |
| 144 | // WebUploader实例 | |
| 145 | uploader, | |
| 146 | actionUrl = editor.getActionUrl(editor.getOpt('fileActionName')), | |
| 147 | fileMaxSize = editor.getOpt('fileMaxSize'), | |
| 148 | acceptExtensions = (editor.getOpt('fileAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');; | |
| 149 | ||
| 150 | if (!WebUploader.Uploader.support()) { | |
| 151 | $('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide(); | |
| 152 | return; | |
| 153 | } else if (!editor.getOpt('fileActionName')) { | |
| 154 | $('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide(); | |
| 155 | return; | |
| 156 | } | |
| 157 | ||
| 158 | uploader = _this.uploader = WebUploader.create({ | |
| 159 | pick: { | |
| 160 | id: '#filePickerReady', | |
| 161 | label: lang.uploadSelectFile | |
| 162 | }, | |
| 163 | swf: '../../third-party/webuploader/Uploader.swf', | |
| 164 | server: actionUrl, | |
| 165 | fileVal: editor.getOpt('fileFieldName'), | |
| 166 | duplicate: true, | |
| 167 | fileSingleSizeLimit: fileMaxSize, | |
| 168 | compress: false | |
| 169 | }); | |
| 170 | uploader.addButton({ | |
| 171 | id: '#filePickerBlock' | |
| 172 | }); | |
| 173 | uploader.addButton({ | |
| 174 | id: '#filePickerBtn', | |
| 175 | label: lang.uploadAddFile | |
| 176 | }); | |
| 177 | ||
| 178 | setState('pedding'); | |
| 179 | ||
| 180 | // 当有文件添加进来时执行，负责view的创建 | |
| 181 | function addFile(file) { | |
| 182 | var $li = $('<li id="' + file.id + '">' + | |
| 183 | '<p class="title">' + file.name + '</p>' + | |
| 184 | '<p class="imgWrap"></p>' + | |
| 185 | '<p class="progress"><span></span></p>' + | |
| 186 | '</li>'), | |
| 187 | ||
| 188 | $btns = $('<div class="file-panel">' + | |
| 189 | '<span class="cancel">' + lang.uploadDelete + '</span>' + | |
| 190 | '<span class="rotateRight">' + lang.uploadTurnRight + '</span>' + | |
| 191 | '<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li), | |
| 192 | $prgress = $li.find('p.progress span'), | |
| 193 | $wrap = $li.find('p.imgWrap'), | |
| 194 | $info = $('<p class="error"></p>').hide().appendTo($li), | |
| 195 | ||
| 196 | showError = function (code) { | |
| 197 | switch (code) { | |
| 198 | case 'exceed_size': | |
| 199 | text = lang.errorExceedSize; | |
| 200 | break; | |
| 201 | case 'interrupt': | |
| 202 | text = lang.errorInterrupt; | |
| 203 | break; | |
| 204 | case 'http': | |
| 205 | text = lang.errorHttp; | |
| 206 | break; | |
| 207 | case 'not_allow_type': | |
| 208 | text = lang.errorFileType; | |
| 209 | break; | |
| 210 | default: | |
| 211 | text = lang.errorUploadRetry; | |
| 212 | break; | |
| 213 | } | |
| 214 | $info.text(text).show(); | |
| 215 | }; | |
| 216 | ||
| 217 | if (file.getStatus() === 'invalid') { | |
| 218 | showError(file.statusText); | |
| 219 | } else { | |
| 220 | $wrap.text(lang.uploadPreview); | |
| 221 | if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|'+file.ext.toLowerCase()+'|') == -1) { | |
| 222 | $wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' + | |
| 223 | '<span class="file-title" title="' + file.name + '">' + file.name + '</span>'); | |
| 224 | } else { | |
| 225 | if (browser.ie && browser.version <= 7) { | |
| 226 | $wrap.text(lang.uploadNoPreview); | |
| 227 | } else { | |
| 228 | uploader.makeThumb(file, function (error, src) { | |
| 229 | if (error || !src) { | |
| 230 | $wrap.text(lang.uploadNoPreview); | |
| 231 | } else { | |
| 232 | var $img = $('<img src="' + src + '">'); | |
| 233 | $wrap.empty().append($img); | |
| 234 | $img.on('error', function () { | |
| 235 | $wrap.text(lang.uploadNoPreview); | |
| 236 | }); | |
| 237 | } | |
| 238 | }, thumbnailWidth, thumbnailHeight); | |
| 239 | } | |
| 240 | } | |
| 241 | percentages[ file.id ] = [ file.size, 0 ]; | |
| 242 | file.rotation = 0; | |
| 243 | ||
| 244 | /* 检查文件格式 */ | |
| 245 | if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) { | |
| 246 | showError('not_allow_type'); | |
| 247 | uploader.removeFile(file); | |
| 248 | } | |
| 249 | } | |
| 250 | ||
| 251 | file.on('statuschange', function (cur, prev) { | |
| 252 | if (prev === 'progress') { | |
| 253 | $prgress.hide().width(0); | |
| 254 | } else if (prev === 'queued') { | |
| 255 | $li.off('mouseenter mouseleave'); | |
| 256 | $btns.remove(); | |
| 257 | } | |
| 258 | // 成功 | |
| 259 | if (cur === 'error' || cur === 'invalid') { | |
| 260 | showError(file.statusText); | |
| 261 | percentages[ file.id ][ 1 ] = 1; | |
| 262 | } else if (cur === 'interrupt') { | |
| 263 | showError('interrupt'); | |
| 264 | } else if (cur === 'queued') { | |
| 265 | percentages[ file.id ][ 1 ] = 0; | |
| 266 | } else if (cur === 'progress') { | |
| 267 | $info.hide(); | |
| 268 | $prgress.css('display', 'block'); | |
| 269 | } else if (cur === 'complete') { | |
| 270 | } | |
| 271 | ||
| 272 | $li.removeClass('state-' + prev).addClass('state-' + cur); | |
| 273 | }); | |
| 274 | ||
| 275 | $li.on('mouseenter', function () { | |
| 276 | $btns.stop().animate({height: 30}); | |
| 277 | }); | |
| 278 | $li.on('mouseleave', function () { | |
| 279 | $btns.stop().animate({height: 0}); | |
| 280 | }); | |
| 281 | ||
| 282 | $btns.on('click', 'span', function () { | |
| 283 | var index = $(this).index(), | |
| 284 | deg; | |
| 285 | ||
| 286 | switch (index) { | |
| 287 | case 0: | |
| 288 | uploader.removeFile(file); | |
| 289 | return; | |
| 290 | case 1: | |
| 291 | file.rotation += 90; | |
| 292 | break; | |
| 293 | case 2: | |
| 294 | file.rotation -= 90; | |
| 295 | break; | |
| 296 | } | |
| 297 | ||
| 298 | if (supportTransition) { | |
| 299 | deg = 'rotate(' + file.rotation + 'deg)'; | |
| 300 | $wrap.css({ | |
| 301 | '-webkit-transform': deg, | |
| 302 | '-mos-transform': deg, | |
| 303 | '-o-transform': deg, | |
| 304 | 'transform': deg | |
| 305 | }); | |
| 306 | } else { | |
| 307 | $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); | |
| 308 | } | |
| 309 | ||
| 310 | }); | |
| 311 | ||
| 312 | $li.insertBefore($filePickerBlock); | |
| 313 | } | |
| 314 | ||
| 315 | // 负责view的销毁 | |
| 316 | function removeFile(file) { | |
| 317 | var $li = $('#' + file.id); | |
| 318 | delete percentages[ file.id ]; | |
| 319 | updateTotalProgress(); | |
| 320 | $li.off().find('.file-panel').off().end().remove(); | |
| 321 | } | |
| 322 | ||
| 323 | function updateTotalProgress() { | |
| 324 | var loaded = 0, | |
| 325 | total = 0, | |
| 326 | spans = $progress.children(), | |
| 327 | percent; | |
| 328 | ||
| 329 | $.each(percentages, function (k, v) { | |
| 330 | total += v[ 0 ]; | |
| 331 | loaded += v[ 0 ] * v[ 1 ]; | |
| 332 | }); | |
| 333 | ||
| 334 | percent = total ? loaded / total : 0; | |
| 335 | ||
| 336 | spans.eq(0).text(Math.round(percent * 100) + '%'); | |
| 337 | spans.eq(1).css('width', Math.round(percent * 100) + '%'); | |
| 338 | updateStatus(); | |
| 339 | } | |
| 340 | ||
| 341 | function setState(val, files) { | |
| 342 | ||
| 343 | if (val != state) { | |
| 344 | ||
| 345 | var stats = uploader.getStats(); | |
| 346 | ||
| 347 | $upload.removeClass('state-' + state); | |
| 348 | $upload.addClass('state-' + val); | |
| 349 | ||
| 350 | switch (val) { | |
| 351 | ||
| 352 | /* 未选择文件 */ | |
| 353 | case 'pedding': | |
| 354 | $queue.addClass('element-invisible'); | |
| 355 | $statusBar.addClass('element-invisible'); | |
| 356 | $placeHolder.removeClass('element-invisible'); | |
| 357 | $progress.hide(); $info.hide(); | |
| 358 | uploader.refresh(); | |
| 359 | break; | |
| 360 | ||
| 361 | /* 可以开始上传 */ | |
| 362 | case 'ready': | |
| 363 | $placeHolder.addClass('element-invisible'); | |
| 364 | $queue.removeClass('element-invisible'); | |
| 365 | $statusBar.removeClass('element-invisible'); | |
| 366 | $progress.hide(); $info.show(); | |
| 367 | $upload.text(lang.uploadStart); | |
| 368 | uploader.refresh(); | |
| 369 | break; | |
| 370 | ||
| 371 | /* 上传中 */ | |
| 372 | case 'uploading': | |
| 373 | $progress.show(); $info.hide(); | |
| 374 | $upload.text(lang.uploadPause); | |
| 375 | break; | |
| 376 | ||
| 377 | /* 暂停上传 */ | |
| 378 | case 'paused': | |
| 379 | $progress.show(); $info.hide(); | |
| 380 | $upload.text(lang.uploadContinue); | |
| 381 | break; | |
| 382 | ||
| 383 | case 'confirm': | |
| 384 | $progress.show(); $info.hide(); | |
| 385 | $upload.text(lang.uploadStart); | |
| 386 | ||
| 387 | stats = uploader.getStats(); | |
| 388 | if (stats.successNum && !stats.uploadFailNum) { | |
| 389 | setState('finish'); | |
| 390 | return; | |
| 391 | } | |
| 392 | break; | |
| 393 | ||
| 394 | case 'finish': | |
| 395 | $progress.hide(); $info.show(); | |
| 396 | if (stats.uploadFailNum) { | |
| 397 | $upload.text(lang.uploadRetry); | |
| 398 | } else { | |
| 399 | $upload.text(lang.uploadStart); | |
| 400 | } | |
| 401 | break; | |
| 402 | } | |
| 403 | ||
| 404 | state = val; | |
| 405 | updateStatus(); | |
| 406 | ||
| 407 | } | |
| 408 | ||
| 409 | if (!_this.getQueueCount()) { | |
| 410 | $upload.addClass('disabled') | |
| 411 | } else { | |
| 412 | $upload.removeClass('disabled') | |
| 413 | } | |
| 414 | ||
| 415 | } | |
| 416 | ||
| 417 | function updateStatus() { | |
| 418 | var text = '', stats; | |
| 419 | ||
| 420 | if (state === 'ready') { | |
| 421 | text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)); | |
| 422 | } else if (state === 'confirm') { | |
| 423 | stats = uploader.getStats(); | |
| 424 | if (stats.uploadFailNum) { | |
| 425 | text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum); | |
| 426 | } | |
| 427 | } else { | |
| 428 | stats = uploader.getStats(); | |
| 429 | text = lang.updateStatusFinish.replace('_', fileCount). | |
| 430 | replace('_KB', WebUploader.formatSize(fileSize)). | |
| 431 | replace('_', stats.successNum); | |
| 432 | ||
| 433 | if (stats.uploadFailNum) { | |
| 434 | text += lang.updateStatusError.replace('_', stats.uploadFailNum); | |
| 435 | } | |
| 436 | } | |
| 437 | ||
| 438 | $info.html(text); | |
| 439 | } | |
| 440 | ||
| 441 | uploader.on('fileQueued', function (file) { | |
| 442 | fileCount++; | |
| 443 | fileSize += file.size; | |
| 444 | ||
| 445 | if (fileCount === 1) { | |
| 446 | $placeHolder.addClass('element-invisible'); | |
| 447 | $statusBar.show(); | |
| 448 | } | |
| 449 | ||
| 450 | addFile(file); | |
| 451 | }); | |
| 452 | ||
| 453 | uploader.on('fileDequeued', function (file) { | |
| 454 | fileCount--; | |
| 455 | fileSize -= file.size; | |
| 456 | ||
| 457 | removeFile(file); | |
| 458 | updateTotalProgress(); | |
| 459 | }); | |
| 460 | ||
| 461 | uploader.on('filesQueued', function (file) { | |
| 462 | if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) { | |
| 463 | setState('ready'); | |
| 464 | } | |
| 465 | updateTotalProgress(); | |
| 466 | }); | |
| 467 | ||
| 468 | uploader.on('all', function (type, files) { | |
| 469 | switch (type) { | |
| 470 | case 'uploadFinished': | |
| 471 | setState('confirm', files); | |
| 472 | break; | |
| 473 | case 'startUpload': | |
| 474 | /* 添加额外的GET参数 */ | |
| 475 | var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '', | |
| 476 | url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params); | |
| 477 | uploader.option('server', url); | |
| 478 | setState('uploading', files); | |
| 479 | break; | |
| 480 | case 'stopUpload': | |
| 481 | setState('paused', files); | |
| 482 | break; | |
| 483 | } | |
| 484 | }); | |
| 485 | ||
| 486 | uploader.on('uploadBeforeSend', function (file, data, header) { | |
| 487 | //这里可以通过data对象添加POST参数 | |
| 488 | header['X_Requested_With'] = 'XMLHttpRequest'; | |
| 489 | }); | |
| 490 | ||
| 491 | uploader.on('uploadProgress', function (file, percentage) { | |
| 492 | var $li = $('#' + file.id), | |
| 493 | $percent = $li.find('.progress span'); | |
| 494 | ||
| 495 | $percent.css('width', percentage * 100 + '%'); | |
| 496 | percentages[ file.id ][ 1 ] = percentage; | |
| 497 | updateTotalProgress(); | |
| 498 | }); | |
| 499 | ||
| 500 | uploader.on('uploadSuccess', function (file, ret) { | |
| 501 | var $file = $('#' + file.id); | |
| 502 | try { | |
| 503 | var responseText = (ret._raw || ret), | |
| 504 | json = utils.str2json(responseText); | |
| 505 | if (json.state == 'SUCCESS') { | |
| 506 | _this.fileList.push(json); | |
| 507 | $file.append('<span class="success"></span>'); | |
| 508 | } else { | |
| 509 | $file.find('.error').text(json.state).show(); | |
| 510 | } | |
| 511 | } catch (e) { | |
| 512 | $file.find('.error').text(lang.errorServerUpload).show(); | |
| 513 | } | |
| 514 | }); | |
| 515 | ||
| 516 | uploader.on('uploadError', function (file, code) { | |
| 517 | }); | |
| 518 | uploader.on('error', function (code, file) { | |
| 519 | if (code == 'Q_TYPE_DENIED' || code == 'F_EXCEED_SIZE') { | |
| 520 | addFile(file); | |
| 521 | } | |
| 522 | }); | |
| 523 | uploader.on('uploadComplete', function (file, ret) { | |
| 524 | }); | |
| 525 | ||
| 526 | $upload.on('click', function () { | |
| 527 | if ($(this).hasClass('disabled')) { | |
| 528 | return false; | |
| 529 | } | |
| 530 | ||
| 531 | if (state === 'ready') { | |
| 532 | uploader.upload(); | |
| 533 | } else if (state === 'paused') { | |
| 534 | uploader.upload(); | |
| 535 | } else if (state === 'uploading') { | |
| 536 | uploader.stop(); | |
| 537 | } | |
| 538 | }); | |
| 539 | ||
| 540 | $upload.addClass('state-' + state); | |
| 541 | updateTotalProgress(); | |
| 542 | }, | |
| 543 | getQueueCount: function () { | |
| 544 | var file, i, status, readyFile = 0, files = this.uploader.getFiles(); | |
| 545 | for (i = 0; file = files[i++]; ) { | |
| 546 | status = file.getStatus(); | |
| 547 | if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++; | |
| 548 | } | |
| 549 | return readyFile; | |
| 550 | }, | |
| 551 | getInsertList: function () { | |
| 552 | var i, link, data, list = [], | |
| 553 | prefix = editor.getOpt('fileUrlPrefix'); | |
| 554 | for (i = 0; i < this.fileList.length; i++) { | |
| 555 | data = this.fileList[i]; | |
| 556 | link = data.url; | |
| 557 | list.push({ | |
| 558 | title: data.original || link.substr(link.lastIndexOf('/') + 1), | |
| 559 | url: prefix + link | |
| 560 | }); | |
| 561 | } | |
| 562 | return list; | |
| 563 | } | |
| 564 | }; | |
| 565 | ||
| 566 | ||
| 567 | /* 在线附件 */ | |
| 568 | function OnlineFile(target) { | |
| 569 | this.container = utils.isString(target) ? document.getElementById(target) : target; | |
| 570 | this.init(); | |
| 571 | } | |
| 572 | OnlineFile.prototype = { | |
| 573 | init: function () { | |
| 574 | this.initContainer(); | |
| 575 | this.initEvents(); | |
| 576 | this.initData(); | |
| 577 | }, | |
| 578 | /* 初始化容器 */ | |
| 579 | initContainer: function () { | |
| 580 | this.container.innerHTML = ''; | |
| 581 | this.list = document.createElement('ul'); | |
| 582 | this.clearFloat = document.createElement('li'); | |
| 583 | ||
| 584 | domUtils.addClass(this.list, 'list'); | |
| 585 | domUtils.addClass(this.clearFloat, 'clearFloat'); | |
| 586 | ||
| 587 | this.list.appendChild(this.clearFloat); | |
| 588 | this.container.appendChild(this.list); | |
| 589 | }, | |
| 590 | /* 初始化滚动事件,滚动到地步自动拉取数据 */ | |
| 591 | initEvents: function () { | |
| 592 | var _this = this; | |
| 593 | ||
| 594 | /* 滚动拉取图片 */ | |
| 595 | domUtils.on($G('fileList'), 'scroll', function(e){ | |
| 596 | var panel = this; | |
| 597 | if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) { | |
| 598 | _this.getFileData(); | |
| 599 | } | |
| 600 | }); | |
| 601 | /* 选中图片 */ | |
| 602 | domUtils.on(this.list, 'click', function (e) { | |
| 603 | var target = e.target || e.srcElement, | |
| 604 | li = target.parentNode; | |
| 605 | ||
| 606 | if (li.tagName.toLowerCase() == 'li') { | |
| 607 | if (domUtils.hasClass(li, 'selected')) { | |
| 608 | domUtils.removeClasses(li, 'selected'); | |
| 609 | } else { | |
| 610 | domUtils.addClass(li, 'selected'); | |
| 611 | } | |
| 612 | } | |
| 613 | }); | |
| 614 | }, | |
| 615 | /* 初始化第一次的数据 */ | |
| 616 | initData: function () { | |
| 617 | ||
| 618 | /* 拉取数据需要使用的值 */ | |
| 619 | this.state = 0; | |
| 620 | this.listSize = editor.getOpt('fileManagerListSize'); | |
| 621 | this.listIndex = 0; | |
| 622 | this.listEnd = false; | |
| 623 | ||
| 624 | /* 第一次拉取数据 */ | |
| 625 | this.getFileData(); | |
| 626 | }, | |
| 627 | /* 向后台拉取图片列表数据 */ | |
| 628 | getFileData: function () { | |
| 629 | var _this = this; | |
| 630 | ||
| 631 | if(!_this.listEnd && !this.isLoadingData) { | |
| 632 | this.isLoadingData = true; | |
| 633 | ajax.request(editor.getActionUrl(editor.getOpt('fileManagerActionName')), { | |
| 634 | timeout: 100000, | |
| 635 | data: utils.extend({ | |
| 636 | start: this.listIndex, | |
| 637 | size: this.listSize | |
| 638 | }, editor.queryCommandValue('serverparam')), | |
| 639 | method: 'get', | |
| 640 | onsuccess: function (r) { | |
| 641 | try { | |
| 642 | var json = eval('(' + r.responseText + ')'); | |
| 643 | if (json.state == 'SUCCESS') { | |
| 644 | _this.pushData(json.list); | |
| 645 | _this.listIndex = parseInt(json.start) + parseInt(json.list.length); | |
| 646 | if(_this.listIndex >= json.total) { | |
| 647 | _this.listEnd = true; | |
| 648 | } | |
| 649 | _this.isLoadingData = false; | |
| 650 | } | |
| 651 | } catch (e) { | |
| 652 | if(r.responseText.indexOf('ue_separate_ue') != -1) { | |
| 653 | var list = r.responseText.split(r.responseText); | |
| 654 | _this.pushData(list); | |
| 655 | _this.listIndex = parseInt(list.length); | |
| 656 | _this.listEnd = true; | |
| 657 | _this.isLoadingData = false; | |
| 658 | } | |
| 659 | } | |
| 660 | }, | |
| 661 | onerror: function () { | |
| 662 | _this.isLoadingData = false; | |
| 663 | } | |
| 664 | }); | |
| 665 | } | |
| 666 | }, | |
| 667 | /* 添加图片到列表界面上 */ | |
| 668 | pushData: function (list) { | |
| 669 | var i, item, img, filetype, preview, icon, _this = this, | |
| 670 | urlPrefix = editor.getOpt('fileManagerUrlPrefix'); | |
| 671 | for (i = 0; i < list.length; i++) { | |
| 672 | if(list[i] && list[i].url) { | |
| 673 | item = document.createElement('li'); | |
| 674 | icon = document.createElement('span'); | |
| 675 | filetype = list[i].url.substr(list[i].url.lastIndexOf('.') + 1); | |
| 676 | ||
| 677 | if ( "png|jpg|jpeg|gif|bmp".indexOf(filetype) != -1 ) { | |
| 678 | preview = document.createElement('img'); | |
| 679 | domUtils.on(preview, 'load', (function(image){ | |
| 680 | return function(){ | |
| 681 | _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight); | |
| 682 | }; | |
| 683 | })(preview)); | |
| 684 | preview.width = 113; | |
| 685 | preview.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) ); | |
| 686 | } else { | |
| 687 | var ic = document.createElement('i'), | |
| 688 | textSpan = document.createElement('span'); | |
| 689 | textSpan.innerHTML = list[i].url.substr(list[i].url.lastIndexOf('/') + 1); | |
| 690 | preview = document.createElement('div'); | |
| 691 | preview.appendChild(ic); | |
| 692 | preview.appendChild(textSpan); | |
| 693 | domUtils.addClass(preview, 'file-wrapper'); | |
| 694 | domUtils.addClass(textSpan, 'file-title'); | |
| 695 | domUtils.addClass(ic, 'file-type-' + filetype); | |
| 696 | domUtils.addClass(ic, 'file-preview'); | |
| 697 | } | |
| 698 | domUtils.addClass(icon, 'icon'); | |
| 699 | item.setAttribute('data-url', urlPrefix + list[i].url); | |
| 700 | if (list[i].original) { | |
| 701 | item.setAttribute('data-title', list[i].original); | |
| 702 | } | |
| 703 | ||
| 704 | item.appendChild(preview); | |
| 705 | item.appendChild(icon); | |
| 706 | this.list.insertBefore(item, this.clearFloat); | |
| 707 | } | |
| 708 | } | |
| 709 | }, | |
| 710 | /* 改变图片大小 */ | |
| 711 | scale: function (img, w, h, type) { | |
| 712 | var ow = img.width, | |
| 713 | oh = img.height; | |
| 714 | ||
| 715 | if (type == 'justify') { | |
| 716 | if (ow >= oh) { | |
| 717 | img.width = w; | |
| 718 | img.height = h * oh / ow; | |
| 719 | img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px'; | |
| 720 | } else { | |
| 721 | img.width = w * ow / oh; | |
| 722 | img.height = h; | |
| 723 | img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px'; | |
| 724 | } | |
| 725 | } else { | |
| 726 | if (ow >= oh) { | |
| 727 | img.width = w * ow / oh; | |
| 728 | img.height = h; | |
| 729 | img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px'; | |
| 730 | } else { | |
| 731 | img.width = w; | |
| 732 | img.height = h * oh / ow; | |
| 733 | img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px'; | |
| 734 | } | |
| 735 | } | |
| 736 | }, | |
| 737 | getInsertList: function () { | |
| 738 | var i, lis = this.list.children, list = []; | |
| 739 | for (i = 0; i < lis.length; i++) { | |
| 740 | if (domUtils.hasClass(lis[i], 'selected')) { | |
| 741 | var url = lis[i].getAttribute('data-url'); | |
| 742 | var title = lis[i].getAttribute('data-title') || url.substr(url.lastIndexOf('/') + 1); | |
| 743 | list.push({ | |
| 744 | title: title, | |
| 745 | url: url | |
| 746 | }); | |
| 747 | } | |
| 748 | } | |
| 749 | return list; | |
| 750 | } | |
| 751 | }; | |
| 752 | ||
| 753 | ||
| 754 | })(); | |
