test: 1
BIN
public/UEditorPlus/dialogs/video/images/bg.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
public/UEditorPlus/dialogs/video/images/center_focus.jpg
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
public/UEditorPlus/dialogs/video/images/file-icons.gif
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
public/UEditorPlus/dialogs/video/images/file-icons.png
Normal file
After Width: | Height: | Size: 43 KiB |
BIN
public/UEditorPlus/dialogs/video/images/icons.gif
Normal file
After Width: | Height: | Size: 453 B |
BIN
public/UEditorPlus/dialogs/video/images/icons.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
public/UEditorPlus/dialogs/video/images/image.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
public/UEditorPlus/dialogs/video/images/left_focus.jpg
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
public/UEditorPlus/dialogs/video/images/none_focus.jpg
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
public/UEditorPlus/dialogs/video/images/progress.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
public/UEditorPlus/dialogs/video/images/right_focus.jpg
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
public/UEditorPlus/dialogs/video/images/success.gif
Normal file
After Width: | Height: | Size: 445 B |
BIN
public/UEditorPlus/dialogs/video/images/success.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
818
public/UEditorPlus/dialogs/video/video.css
Normal file
@ -0,0 +1,818 @@
|
||||
@charset "utf-8";
|
||||
.wrapper {
|
||||
width: 570px;
|
||||
_width: 575px;
|
||||
margin: 10px auto;
|
||||
zoom: 1;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.tabbody {
|
||||
height: 355px;
|
||||
}
|
||||
|
||||
.tabbody .panel {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabbody .panel.focus {
|
||||
width: 100%;
|
||||
height: 355px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabbody .panel table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#videoUrl {
|
||||
width: 380px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
margin: 8px 5px;
|
||||
background: #FFF;
|
||||
border: 1px solid #d7d7d7;
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#videoSelect {
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
border: 1px solid #EEE;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#videoSearchTxt {
|
||||
margin-left: 15px;
|
||||
background: #FFF;
|
||||
width: 200px;
|
||||
height: 21px;
|
||||
line-height: 21px;
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
|
||||
#searchList {
|
||||
width: 570px;
|
||||
overflow: auto;
|
||||
zoom: 1;
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
#searchList div {
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 135px;
|
||||
margin: 5px 15px;
|
||||
}
|
||||
|
||||
#searchList img {
|
||||
margin: 2px 8px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #fff
|
||||
}
|
||||
|
||||
/*不用缩略图*/
|
||||
#searchList p {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#videoType {
|
||||
width: 65px;
|
||||
height: 23px;
|
||||
line-height: 22px;
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
|
||||
#videoSearchBtn, #videoSearchReset {
|
||||
/*width: 80px;*/
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
background: #eee;
|
||||
border: 1px solid #d7d7d7;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
|
||||
#preview {
|
||||
position: relative;
|
||||
width: 420px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
margin-left: 10px;
|
||||
_margin-left: 5px;
|
||||
height: 280px;
|
||||
background-color: #ddd;
|
||||
float: left
|
||||
}
|
||||
|
||||
#preview .previewMsg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 280px;
|
||||
width: 100%;
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
#preview .previewMsg span {
|
||||
display: block;
|
||||
margin: 125px auto 0 auto;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#preview .previewVideo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 280px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edui-video-wrapper fieldset {
|
||||
border: 1px solid #ddd;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 5px;
|
||||
width: 115px;
|
||||
}
|
||||
|
||||
#videoInfo {
|
||||
width: 120px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
_margin-left: 7px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ddd;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 5px;
|
||||
width: 115px;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
fieldset p {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
fieldset input.txt {
|
||||
width: 65px;
|
||||
height: 21px;
|
||||
line-height: 21px;
|
||||
margin: 8px 5px;
|
||||
background: #FFF;
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
|
||||
label.url {
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#videoFloat div {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
margin: 9px;
|
||||
_margin: 5px;
|
||||
width: 38px;
|
||||
height: 36px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#videoFloat .focus {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100)
|
||||
}
|
||||
|
||||
span.view {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
color: blue
|
||||
}
|
||||
|
||||
|
||||
/* upload video */
|
||||
.tabbody #upload.panel {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
background: #fff;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabbody #upload.panel.focus {
|
||||
width: 100%;
|
||||
height: 335px;
|
||||
display: block;
|
||||
clip: auto;
|
||||
}
|
||||
|
||||
#upload_alignment div {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
margin: 9px;
|
||||
_margin: 5px;
|
||||
width: 38px;
|
||||
height: 36px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#upload_alignment .focus {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100)
|
||||
}
|
||||
|
||||
#upload_left {
|
||||
width: 427px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#upload_left .controller {
|
||||
height: 30px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#uploadVideoInfo {
|
||||
margin-top: 10px;
|
||||
float: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
#upload .queueList {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#upload p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.element-invisible {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
#upload .placeholder {
|
||||
margin: 10px;
|
||||
margin-right: 0;
|
||||
border: 2px dashed #e6e6e6;
|
||||
*border: 0px dashed #e6e6e6;
|
||||
height: 161px;
|
||||
padding-top: 150px;
|
||||
text-align: center;
|
||||
width: 97%;
|
||||
float: left;
|
||||
background: url(./images/image.png) center 70px no-repeat;
|
||||
color: #cccccc;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
*margin-left: 0;
|
||||
*left: 10px;
|
||||
}
|
||||
|
||||
#upload .placeholder .webuploader-pick {
|
||||
font-size: 18px;
|
||||
background: #00b7ee;
|
||||
border-radius: 3px;
|
||||
line-height: 44px;
|
||||
padding: 0 30px;
|
||||
*width: 120px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
margin: 0 auto 20px auto;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#upload .placeholder .webuploader-pick-hover {
|
||||
background: #00a2d4;
|
||||
}
|
||||
|
||||
|
||||
#filePickerContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#upload .placeholder .flashTip {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
#upload .placeholder .flashTip a {
|
||||
color: #0785d1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#upload .placeholder .flashTip a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#upload .placeholder.webuploader-dnd-over {
|
||||
border-color: #999999;
|
||||
}
|
||||
|
||||
#upload .filelist {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
height: 285px;
|
||||
}
|
||||
|
||||
#upload .filelist:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#upload .filelist li {
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
background: url(./images/bg.png);
|
||||
text-align: center;
|
||||
margin: 15px 0 0 20px;
|
||||
*margin: 15px 0 0 15px;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#upload .filelist li p.log {
|
||||
position: relative;
|
||||
top: -45px;
|
||||
}
|
||||
|
||||
#upload .filelist li p.title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
top: 5px;
|
||||
text-indent: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#upload .filelist li p.progress {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
z-index: 50;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
-webkit-box-shadow: 0 0 0;
|
||||
}
|
||||
|
||||
#upload .filelist li p.progress span {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: #1483d8 url(./images/progress.png) repeat-x;
|
||||
|
||||
-webit-transition: width 200ms linear;
|
||||
-moz-transition: width 200ms linear;
|
||||
-o-transition: width 200ms linear;
|
||||
-ms-transition: width 200ms linear;
|
||||
transition: width 200ms linear;
|
||||
|
||||
-webkit-animation: progressmove 2s linear infinite;
|
||||
-moz-animation: progressmove 2s linear infinite;
|
||||
-o-animation: progressmove 2s linear infinite;
|
||||
-ms-animation: progressmove 2s linear infinite;
|
||||
animation: progressmove 2s linear infinite;
|
||||
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
@-webkit-keyframes progressmove {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 17px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes progressmove {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 17px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progressmove {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 17px 0;
|
||||
}
|
||||
}
|
||||
|
||||
#upload .filelist li p.imgWrap {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
line-height: 113px;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
-webit-transition: 200ms ease-out;
|
||||
-moz-transition: 200ms ease-out;
|
||||
-o-transition: 200ms ease-out;
|
||||
-ms-transition: 200ms ease-out;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
#upload .filelist li p.imgWrap.notimage {
|
||||
margin-top: 0;
|
||||
width: 111px;
|
||||
height: 111px;
|
||||
border: 1px #eeeeee solid;
|
||||
}
|
||||
|
||||
#upload .filelist li p.imgWrap.notimage i.file-preview {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#upload .filelist li img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#upload .filelist li p.error {
|
||||
background: #f43838;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#upload .filelist li .success {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
z-index: 200;
|
||||
background: url(./images/success.png) no-repeat right bottom;
|
||||
background-image: url(./images/success.gif) \9;
|
||||
}
|
||||
|
||||
#upload .filelist li.filePickerBlock {
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
background: url(./images/image.png) no-repeat center 12px;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#upload .filelist li.filePickerBlock div.webuploader-pick {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
background: none;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#upload .filelist div.file-panel {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
#upload .filelist div.file-panel span {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline;
|
||||
float: right;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
background: url(./images/icons.png) no-repeat;
|
||||
background: url(./images/icons.gif) no-repeat \9;
|
||||
margin: 5px 1px 1px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#upload .filelist div.file-panel span.rotateLeft {
|
||||
display: none;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
#upload .filelist div.file-panel span.rotateLeft:hover {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#upload .filelist div.file-panel span.rotateRight {
|
||||
display: none;
|
||||
background-position: -24px -24px;
|
||||
}
|
||||
|
||||
#upload .filelist div.file-panel span.rotateRight:hover {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
|
||||
#upload .filelist div.file-panel span.cancel {
|
||||
background-position: -48px -24px;
|
||||
}
|
||||
|
||||
#upload .filelist div.file-panel span.cancel:hover {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
|
||||
#upload .statusBar {
|
||||
height: 45px;
|
||||
border-bottom: 1px solid #dadada;
|
||||
margin: 0 10px;
|
||||
padding: 0;
|
||||
line-height: 45px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#upload .statusBar .progress {
|
||||
border: 1px solid #1483d8;
|
||||
width: 198px;
|
||||
background: #fff;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
color: #6dbfff;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
#upload .statusBar .progress span.percentage {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #1483d8;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#upload .statusBar .progress span.text {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#upload .statusBar .info {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
#upload .statusBar .btns {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#filePickerBtn {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#upload .statusBar .btns .webuploader-pick,
|
||||
#upload .statusBar .btns .uploadBtn,
|
||||
#upload .statusBar .btns .uploadBtn.state-uploading,
|
||||
#upload .statusBar .btns .uploadBtn.state-paused {
|
||||
background: #ffffff;
|
||||
border: 1px solid #cfcfcf;
|
||||
color: #565656;
|
||||
padding: 0 18px;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#upload .statusBar .btns .webuploader-pick-hover,
|
||||
#upload .statusBar .btns .uploadBtn:hover,
|
||||
#upload .statusBar .btns .uploadBtn.state-uploading:hover,
|
||||
#upload .statusBar .btns .uploadBtn.state-paused:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
#upload .statusBar .btns .uploadBtn,
|
||||
#upload .statusBar .btns .uploadBtn.state-paused {
|
||||
background: #00b7ee;
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
#upload .statusBar .btns .uploadBtn:hover,
|
||||
#upload .statusBar .btns .uploadBtn.state-paused:hover {
|
||||
background: #00a2d4;
|
||||
}
|
||||
|
||||
#upload .statusBar .btns .uploadBtn.disabled {
|
||||
pointer-events: none;
|
||||
filter: alpha(opacity=60);
|
||||
-moz-opacity: 0.6;
|
||||
-khtml-opacity: 0.6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
/* 在线文件的文件预览图标 */
|
||||
i.file-preview {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-image: url("./images/file-icons.png");
|
||||
background-image: url("./images/file-icons.gif") \9;
|
||||
background-position: -140px center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-dir {
|
||||
background-position: 0 center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-file {
|
||||
background-position: -140px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-filelist {
|
||||
background-position: -210px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-zip,
|
||||
i.file-preview.file-type-rar,
|
||||
i.file-preview.file-type-7z,
|
||||
i.file-preview.file-type-tar,
|
||||
i.file-preview.file-type-gz,
|
||||
i.file-preview.file-type-bz2 {
|
||||
background-position: -280px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-xls,
|
||||
i.file-preview.file-type-xlsx {
|
||||
background-position: -350px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-doc,
|
||||
i.file-preview.file-type-docx {
|
||||
background-position: -420px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-ppt,
|
||||
i.file-preview.file-type-pptx {
|
||||
background-position: -490px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-vsd {
|
||||
background-position: -560px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-pdf {
|
||||
background-position: -630px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-txt,
|
||||
i.file-preview.file-type-md,
|
||||
i.file-preview.file-type-json,
|
||||
i.file-preview.file-type-htm,
|
||||
i.file-preview.file-type-xml,
|
||||
i.file-preview.file-type-html,
|
||||
i.file-preview.file-type-js,
|
||||
i.file-preview.file-type-css,
|
||||
i.file-preview.file-type-php,
|
||||
i.file-preview.file-type-jsp,
|
||||
i.file-preview.file-type-asp {
|
||||
background-position: -700px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-apk {
|
||||
background-position: -770px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-exe {
|
||||
background-position: -840px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-ipa {
|
||||
background-position: -910px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-mp4,
|
||||
i.file-preview.file-type-swf,
|
||||
i.file-preview.file-type-mkv,
|
||||
i.file-preview.file-type-avi,
|
||||
i.file-preview.file-type-flv,
|
||||
i.file-preview.file-type-mov,
|
||||
i.file-preview.file-type-mpg,
|
||||
i.file-preview.file-type-mpeg,
|
||||
i.file-preview.file-type-ogv,
|
||||
i.file-preview.file-type-webm,
|
||||
i.file-preview.file-type-rm,
|
||||
i.file-preview.file-type-rmvb {
|
||||
background-position: -980px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-ogg,
|
||||
i.file-preview.file-type-wav,
|
||||
i.file-preview.file-type-wmv,
|
||||
i.file-preview.file-type-mid,
|
||||
i.file-preview.file-type-mp3 {
|
||||
background-position: -1050px center;
|
||||
}
|
||||
|
||||
i.file-preview.file-type-jpg,
|
||||
i.file-preview.file-type-jpeg,
|
||||
i.file-preview.file-type-gif,
|
||||
i.file-preview.file-type-bmp,
|
||||
i.file-preview.file-type-png,
|
||||
i.file-preview.file-type-psd {
|
||||
background-position: -140px center;
|
||||
}
|
109
public/UEditorPlus/dialogs/video/video.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<script type="text/javascript" src="../internal.js?aea0c61c"></script>
|
||||
<link rel="stylesheet" type="text/css" href="video.css?3ce050b9"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div id="videoTab">
|
||||
<div id="tabHeads" class="tabhead">
|
||||
<span tabSrc="video" class="focus" data-content-id="video"><var id="lang_tab_insertV"></var></span>
|
||||
<span tabSrc="upload" style="display:none;" data-content-id="upload"><var
|
||||
id="lang_tab_uploadV"></var></span>
|
||||
</div>
|
||||
<div id="tabBodys" class="tabbody">
|
||||
<div id="video" class="panel focus">
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="videoUrl" class="url"><var id="lang_video_url"></var></label></td>
|
||||
<td><input id="videoUrl" type="text"><a href="javascript:;" id="videoSelect"
|
||||
style="display:none;">选择视频</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="padding:0 5px 5px 5px;color:#999;">
|
||||
外链视频支持:优酷、腾讯视频、哔哩哔哩
|
||||
</div>
|
||||
<div id="preview"></div>
|
||||
<div id="videoInfo">
|
||||
<fieldset>
|
||||
<legend><var id="lang_video_size"></var></legend>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="videoWidth"><var id="lang_videoW"></var></label></td>
|
||||
<td><input class="txt" id="videoWidth" type="text"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="videoHeight"><var id="lang_videoH"></var></label></td>
|
||||
<td><input class="txt" id="videoHeight" type="text"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend><var id="lang_alignment"></var></legend>
|
||||
<div id="videoFloat"></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div id="upload" class="panel">
|
||||
<div id="upload_left">
|
||||
<div id="queueList" class="queueList">
|
||||
<div class="statusBar element-invisible">
|
||||
<div class="progress">
|
||||
<span class="text">0%</span>
|
||||
<span class="percentage"></span>
|
||||
</div>
|
||||
<div class="info"></div>
|
||||
<div class="btns">
|
||||
<div id="filePickerBtn"></div>
|
||||
<div class="uploadBtn"><var id="lang_start_upload"></var></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dndArea" class="placeholder">
|
||||
<div class="filePickerContainer">
|
||||
<div id="filePickerReady"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="filelist element-invisible">
|
||||
<li id="filePickerBlock" class="filePickerBlock"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="uploadVideoInfo">
|
||||
<fieldset>
|
||||
<legend><var id="lang_upload_size"></var></legend>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label><var id="lang_upload_width"></var></label></td>
|
||||
<td><input class="txt" id="upload_width" type="text"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label><var id="lang_upload_height"></var></label></td>
|
||||
<td><input class="txt" id="upload_height" type="text"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend><var id="lang_upload_alignment"></var></legend>
|
||||
<div id="upload_alignment"></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jquery -->
|
||||
<script type="text/javascript" src="../../third-party/jquery-1.10.2.js?628072e7"></script>
|
||||
|
||||
<!-- webuploader -->
|
||||
<script type="text/javascript" src="../../third-party/webuploader/webuploader.js?f37088cc"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css?0057c5c7">
|
||||
|
||||
<!-- video -->
|
||||
<script type="text/javascript" src="video.js?b2c03ee9"></script>
|
||||
</body>
|
||||
</html>
|
841
public/UEditorPlus/dialogs/video/video.js
Normal file
@ -0,0 +1,841 @@
|
||||
/**
|
||||
* 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;
|
||||
var editorOpt = {};
|
||||
|
||||
window.onload = function () {
|
||||
editorOpt = editor.getOpt('videoConfig');
|
||||
$focus($G("videoUrl"));
|
||||
initTabs();
|
||||
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 j, bodyId, target = e.target || e.srcElement;
|
||||
for (j = 0; j < tabs.length; j++) {
|
||||
bodyId = tabs[j].getAttribute('data-content-id');
|
||||
if (tabs[j] == target) {
|
||||
domUtils.addClass(tabs[j], 'focus');
|
||||
domUtils.addClass($G(bodyId), 'focus');
|
||||
} else {
|
||||
domUtils.removeClasses(tabs[j], 'focus');
|
||||
domUtils.removeClasses($G(bodyId), 'focus');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!editorOpt.disableUpload) {
|
||||
$G('tabHeads').querySelector('[data-content-id="upload"]').style.display = 'inline-block';
|
||||
}
|
||||
if (!!editorOpt.selectCallback) {
|
||||
$G('videoSelect').style.display = 'inline-block';
|
||||
domUtils.on($G('videoSelect'), "click", function (e) {
|
||||
editorOpt.selectCallback(editor, function (info) {
|
||||
if (info) {
|
||||
$G('videoUrl').value = info.path;
|
||||
createPreviewVideo(info.path);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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 == "edui-faked-video"),
|
||||
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;
|
||||
}
|
||||
}
|
||||
createPreviewVideo(url);
|
||||
})();
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听确认和取消两个按钮事件,用户执行插入或者清空正在播放的视频实例操作
|
||||
*/
|
||||
function addOkListener() {
|
||||
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;
|
||||
}
|
||||
};
|
||||
dialog.oncancel = function () {
|
||||
$G("preview").innerHTML = "";
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 依据传入的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', {
|
||||
url: 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({
|
||||
url: 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/embed/$1')
|
||||
// .replace(/(www\.)?youtube\.com\/watch\?v=([\w\-]+)/i, "www.youtube.com/v/$2")
|
||||
// .replace(/youtu.be\/(\w+)$/i, "www.youtube.com/v/$1")
|
||||
//.replace(/www\.iqiyi\.com\/v_(\w+)\.html/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")
|
||||
// https://v.qq.com/x/cover/wagzbx91asjomnu/w05337nxfof.html
|
||||
// https://v.qq.com/iframe/player.html?vid=w05337nxfof&tiny=0&auto=0
|
||||
.replace(/v\.qq\.com\/x\/cover\/[\w]+\/([\w]+)\.html/i, "v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0")
|
||||
.replace(/v\.qq\.com\/x\/page\/([\w]+)\.html/i, "v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0")
|
||||
.replace(/www\.bilibili\.com\/video\/([a-zA-Z0-9]+)\/?.*$/i, "player.bilibili.com/player.html?bvid=$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.unhtml(conUrl);
|
||||
|
||||
// $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
|
||||
// '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
|
||||
// ' src="' + conUrl + '"' +
|
||||
// ' width="' + 420 + '"' +
|
||||
// ' height="' + 280 + '"' +
|
||||
// ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
|
||||
// '</embed>';
|
||||
|
||||
$G("preview").innerHTML = '<div class="previewMsg"><span>' + lang.urlError + '</span></div>' +
|
||||
'<iframe class="previewVideo" ' +
|
||||
' src="' + conUrl + '"' +
|
||||
' width="' + 420 + '"' +
|
||||
' height="' + 280 + '"' +
|
||||
' frameborder=0 allowfullscreen>' +
|
||||
'</iframe>';
|
||||
}
|
||||
|
||||
|
||||
/* 插入上传视频 */
|
||||
function insertUpload() {
|
||||
var videoObjs = [],
|
||||
uploadDir = editor.getOpt('videoUrlPrefix'),
|
||||
width = $G('upload_width').value || 420,
|
||||
height = $G('upload_height').value || 280,
|
||||
align = findFocus("upload_alignment", "name") || 'none';
|
||||
for (var key in uploadVideoList) {
|
||||
var file = uploadVideoList[key];
|
||||
videoObjs.push({
|
||||
url: uploadDir + file.url,
|
||||
width: width,
|
||||
height: height,
|
||||
align: align
|
||||
});
|
||||
}
|
||||
|
||||
var count = uploadFile.getQueueCount();
|
||||
if (count) {
|
||||
$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
|
||||
return false;
|
||||
} else {
|
||||
editor.execCommand('insertvideo', videoObjs, 'upload');
|
||||
}
|
||||
}
|
||||
|
||||
/*初始化上传标签*/
|
||||
function initUpload() {
|
||||
uploadFile = new UploadFile('queueList');
|
||||
}
|
||||
|
||||
|
||||
/* 上传附件 */
|
||||
function UploadFile(target) {
|
||||
this.$wrap = target.constructor == String ? $('#' + target) : $(target);
|
||||
this.init();
|
||||
}
|
||||
|
||||
UploadFile.prototype = {
|
||||
init: function () {
|
||||
this.fileList = [];
|
||||
this.initContainer();
|
||||
this.initUploader();
|
||||
},
|
||||
initContainer: function () {
|
||||
this.$queue = this.$wrap.find('.filelist');
|
||||
},
|
||||
/* 初始化容器 */
|
||||
initUploader: function () {
|
||||
var _this = this,
|
||||
$ = jQuery, // just in case. Make sure it's not an other libaray.
|
||||
$wrap = _this.$wrap,
|
||||
// 图片容器
|
||||
$queue = $wrap.find('.filelist'),
|
||||
// 状态栏,包括进度和控制按钮
|
||||
$statusBar = $wrap.find('.statusBar'),
|
||||
// 文件总体选择信息。
|
||||
$info = $statusBar.find('.info'),
|
||||
// 上传按钮
|
||||
$upload = $wrap.find('.uploadBtn'),
|
||||
// 上传按钮
|
||||
$filePickerBtn = $wrap.find('.filePickerBtn'),
|
||||
// 上传按钮
|
||||
$filePickerBlock = $wrap.find('.filePickerBlock'),
|
||||
// 没选择文件之前的内容。
|
||||
$placeHolder = $wrap.find('.placeholder'),
|
||||
// 总体进度条
|
||||
$progress = $statusBar.find('.progress').hide(),
|
||||
// 添加的文件数量
|
||||
fileCount = 0,
|
||||
// 添加的文件总大小
|
||||
fileSize = 0,
|
||||
// 优化retina, 在retina下这个值是2
|
||||
ratio = window.devicePixelRatio || 1,
|
||||
// 缩略图大小
|
||||
thumbnailWidth = 113 * ratio,
|
||||
thumbnailHeight = 113 * ratio,
|
||||
// 可能有pedding, ready, uploading, confirm, done.
|
||||
state = '',
|
||||
// 所有文件的进度信息,key为file id
|
||||
percentages = {},
|
||||
supportTransition = (function () {
|
||||
var s = document.createElement('p').style,
|
||||
r = 'transition' in s ||
|
||||
'WebkitTransition' in s ||
|
||||
'MozTransition' in s ||
|
||||
'msTransition' in s ||
|
||||
'OTransition' in s;
|
||||
s = null;
|
||||
return r;
|
||||
})(),
|
||||
// WebUploader实例
|
||||
uploader,
|
||||
actionUrl = editor.getActionUrl(editor.getOpt('videoActionName')),
|
||||
fileMaxSize = editor.getOpt('videoMaxSize'),
|
||||
acceptExtensions = (editor.getOpt('videoAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');
|
||||
;
|
||||
|
||||
if (!WebUploader.Uploader.support()) {
|
||||
$('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();
|
||||
return;
|
||||
} else if (!editor.getOpt('videoActionName')) {
|
||||
$('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();
|
||||
return;
|
||||
}
|
||||
|
||||
uploader = _this.uploader = WebUploader.create({
|
||||
pick: {
|
||||
id: '#filePickerReady',
|
||||
label: lang.uploadSelectFile
|
||||
},
|
||||
swf: '../../third-party/webuploader/Uploader.swf',
|
||||
server: actionUrl,
|
||||
fileVal: editor.getOpt('videoFieldName'),
|
||||
duplicate: true,
|
||||
fileSingleSizeLimit: fileMaxSize,
|
||||
headers: editor.getOpt('serverHeaders') || {},
|
||||
compress: false
|
||||
});
|
||||
uploader.addButton({
|
||||
id: '#filePickerBlock'
|
||||
});
|
||||
uploader.addButton({
|
||||
id: '#filePickerBtn',
|
||||
label: lang.uploadAddFile
|
||||
});
|
||||
|
||||
setState('pedding');
|
||||
|
||||
// 当有文件添加进来时执行,负责view的创建
|
||||
function addFile(file) {
|
||||
var $li = $('<li id="' + file.id + '">' +
|
||||
'<p class="title">' + file.name + '</p>' +
|
||||
'<p class="imgWrap"></p>' +
|
||||
'<p class="progress"><span></span></p>' +
|
||||
'</li>'),
|
||||
|
||||
$btns = $('<div class="file-panel">' +
|
||||
'<span class="cancel">' + lang.uploadDelete + '</span>' +
|
||||
'<span class="rotateRight">' + lang.uploadTurnRight + '</span>' +
|
||||
'<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li),
|
||||
$prgress = $li.find('p.progress span'),
|
||||
$wrap = $li.find('p.imgWrap'),
|
||||
$info = $('<p class="error"></p>').hide().appendTo($li),
|
||||
|
||||
showError = function (code) {
|
||||
switch (code) {
|
||||
case 'exceed_size':
|
||||
text = lang.errorExceedSize;
|
||||
break;
|
||||
case 'interrupt':
|
||||
text = lang.errorInterrupt;
|
||||
break;
|
||||
case 'http':
|
||||
text = lang.errorHttp;
|
||||
break;
|
||||
case 'not_allow_type':
|
||||
text = lang.errorFileType;
|
||||
break;
|
||||
default:
|
||||
text = lang.errorUploadRetry;
|
||||
break;
|
||||
}
|
||||
$info.text(text).show();
|
||||
};
|
||||
|
||||
if (file.getStatus() === 'invalid') {
|
||||
showError(file.statusText);
|
||||
} else {
|
||||
$wrap.text(lang.uploadPreview);
|
||||
if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|' + file.ext.toLowerCase() + '|') == -1) {
|
||||
$wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' +
|
||||
'<span class="file-title">' + file.name + '</span>');
|
||||
} else {
|
||||
if (browser.ie && browser.version <= 7) {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
} else {
|
||||
uploader.makeThumb(file, function (error, src) {
|
||||
if (error || !src || (/^data:/.test(src) && browser.ie && browser.version <= 7)) {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
} else {
|
||||
var $img = $('<img src="' + src + '">');
|
||||
$wrap.empty().append($img);
|
||||
$img.on('error', function () {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
});
|
||||
}
|
||||
}, thumbnailWidth, thumbnailHeight);
|
||||
}
|
||||
}
|
||||
percentages[file.id] = [file.size, 0];
|
||||
file.rotation = 0;
|
||||
|
||||
/* 检查文件格式 */
|
||||
if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {
|
||||
showError('not_allow_type');
|
||||
uploader.removeFile(file);
|
||||
}
|
||||
}
|
||||
|
||||
file.on('statuschange', function (cur, prev) {
|
||||
if (prev === 'progress') {
|
||||
$prgress.hide().width(0);
|
||||
} else if (prev === 'queued') {
|
||||
$li.off('mouseenter mouseleave');
|
||||
$btns.remove();
|
||||
}
|
||||
// 成功
|
||||
if (cur === 'error' || cur === 'invalid') {
|
||||
showError(file.statusText);
|
||||
percentages[file.id][1] = 1;
|
||||
} else if (cur === 'interrupt') {
|
||||
showError('interrupt');
|
||||
} else if (cur === 'queued') {
|
||||
percentages[file.id][1] = 0;
|
||||
} else if (cur === 'progress') {
|
||||
$info.hide();
|
||||
$prgress.css('display', 'block');
|
||||
} else if (cur === 'complete') {
|
||||
}
|
||||
|
||||
$li.removeClass('state-' + prev).addClass('state-' + cur);
|
||||
});
|
||||
|
||||
$li.on('mouseenter', function () {
|
||||
$btns.stop().animate({height: 30});
|
||||
});
|
||||
$li.on('mouseleave', function () {
|
||||
$btns.stop().animate({height: 0});
|
||||
});
|
||||
|
||||
$btns.on('click', 'span', function () {
|
||||
var index = $(this).index(),
|
||||
deg;
|
||||
|
||||
switch (index) {
|
||||
case 0:
|
||||
uploader.removeFile(file);
|
||||
return;
|
||||
case 1:
|
||||
file.rotation += 90;
|
||||
break;
|
||||
case 2:
|
||||
file.rotation -= 90;
|
||||
break;
|
||||
}
|
||||
|
||||
if (supportTransition) {
|
||||
deg = 'rotate(' + file.rotation + 'deg)';
|
||||
$wrap.css({
|
||||
'-webkit-transform': deg,
|
||||
'-mos-transform': deg,
|
||||
'-o-transform': deg,
|
||||
'transform': deg
|
||||
});
|
||||
} else {
|
||||
$wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$li.insertBefore($filePickerBlock);
|
||||
}
|
||||
|
||||
// 负责view的销毁
|
||||
function removeFile(file) {
|
||||
var $li = $('#' + file.id);
|
||||
delete percentages[file.id];
|
||||
updateTotalProgress();
|
||||
$li.off().find('.file-panel').off().end().remove();
|
||||
}
|
||||
|
||||
function updateTotalProgress() {
|
||||
var loaded = 0,
|
||||
total = 0,
|
||||
spans = $progress.children(),
|
||||
percent;
|
||||
|
||||
$.each(percentages, function (k, v) {
|
||||
total += v[0];
|
||||
loaded += v[0] * v[1];
|
||||
});
|
||||
|
||||
percent = total ? loaded / total : 0;
|
||||
|
||||
spans.eq(0).text(Math.round(percent * 100) + '%');
|
||||
spans.eq(1).css('width', Math.round(percent * 100) + '%');
|
||||
updateStatus();
|
||||
}
|
||||
|
||||
function setState(val, files) {
|
||||
|
||||
if (val != state) {
|
||||
|
||||
var stats = uploader.getStats();
|
||||
|
||||
$upload.removeClass('state-' + state);
|
||||
$upload.addClass('state-' + val);
|
||||
|
||||
switch (val) {
|
||||
|
||||
/* 未选择文件 */
|
||||
case 'pedding':
|
||||
$queue.addClass('element-invisible');
|
||||
$statusBar.addClass('element-invisible');
|
||||
$placeHolder.removeClass('element-invisible');
|
||||
$progress.hide();
|
||||
$info.hide();
|
||||
uploader.refresh();
|
||||
break;
|
||||
|
||||
/* 可以开始上传 */
|
||||
case 'ready':
|
||||
$placeHolder.addClass('element-invisible');
|
||||
$queue.removeClass('element-invisible');
|
||||
$statusBar.removeClass('element-invisible');
|
||||
$progress.hide();
|
||||
$info.show();
|
||||
$upload.text(lang.uploadStart);
|
||||
uploader.refresh();
|
||||
break;
|
||||
|
||||
/* 上传中 */
|
||||
case 'uploading':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadPause);
|
||||
break;
|
||||
|
||||
/* 暂停上传 */
|
||||
case 'paused':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadContinue);
|
||||
break;
|
||||
|
||||
case 'confirm':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadStart);
|
||||
|
||||
stats = uploader.getStats();
|
||||
if (stats.successNum && !stats.uploadFailNum) {
|
||||
setState('finish');
|
||||
return;
|
||||
}
|
||||
break;
|
||||
|
||||
case 'finish':
|
||||
$progress.hide();
|
||||
$info.show();
|
||||
if (stats.uploadFailNum) {
|
||||
$upload.text(lang.uploadRetry);
|
||||
} else {
|
||||
$upload.text(lang.uploadStart);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
state = val;
|
||||
updateStatus();
|
||||
|
||||
}
|
||||
|
||||
if (!_this.getQueueCount()) {
|
||||
$upload.addClass('disabled')
|
||||
} else {
|
||||
$upload.removeClass('disabled')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function updateStatus() {
|
||||
var text = '', stats;
|
||||
|
||||
if (state === 'ready') {
|
||||
text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize));
|
||||
} else if (state === 'confirm') {
|
||||
stats = uploader.getStats();
|
||||
if (stats.uploadFailNum) {
|
||||
text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum);
|
||||
}
|
||||
} else {
|
||||
stats = uploader.getStats();
|
||||
text = lang.updateStatusFinish.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)).replace('_', stats.successNum);
|
||||
|
||||
if (stats.uploadFailNum) {
|
||||
text += lang.updateStatusError.replace('_', stats.uploadFailNum);
|
||||
}
|
||||
}
|
||||
|
||||
$info.html(text);
|
||||
}
|
||||
|
||||
uploader.on('fileQueued', function (file) {
|
||||
fileCount++;
|
||||
fileSize += file.size;
|
||||
|
||||
if (fileCount === 1) {
|
||||
$placeHolder.addClass('element-invisible');
|
||||
$statusBar.show();
|
||||
}
|
||||
|
||||
addFile(file);
|
||||
});
|
||||
|
||||
uploader.on('fileDequeued', function (file) {
|
||||
fileCount--;
|
||||
fileSize -= file.size;
|
||||
|
||||
removeFile(file);
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('filesQueued', function (file) {
|
||||
if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {
|
||||
setState('ready');
|
||||
}
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('all', function (type, files) {
|
||||
switch (type) {
|
||||
case 'uploadFinished':
|
||||
setState('confirm', files);
|
||||
break;
|
||||
case 'startUpload':
|
||||
/* 添加额外的GET参数 */
|
||||
var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
|
||||
url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?' : '&') + 'encode=utf-8&' + params);
|
||||
uploader.option('server', url);
|
||||
setState('uploading', files);
|
||||
break;
|
||||
case 'stopUpload':
|
||||
setState('paused', files);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadBeforeSend', function (file, data, header) {
|
||||
//这里可以通过data对象添加POST参数
|
||||
if (actionUrl.toLowerCase().indexOf('jsp') != -1) {
|
||||
header['X_Requested_With'] = 'XMLHttpRequest';
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadProgress', function (file, percentage) {
|
||||
var $li = $('#' + file.id),
|
||||
$percent = $li.find('.progress span');
|
||||
|
||||
$percent.css('width', percentage * 100 + '%');
|
||||
percentages[file.id][1] = percentage;
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('uploadSuccess', function (file, ret) {
|
||||
var $file = $('#' + file.id);
|
||||
try {
|
||||
var responseText = (ret._raw || ret),
|
||||
json = utils.str2json(responseText);
|
||||
if (json.state == 'SUCCESS') {
|
||||
uploadVideoList.push({
|
||||
'url': json.url,
|
||||
'type': json.type,
|
||||
'original': json.original
|
||||
});
|
||||
$file.append('<span class="success"></span>');
|
||||
// 触发上传视频事件
|
||||
editor.fireEvent("uploadsuccess", {
|
||||
res: json,
|
||||
type: 'video'
|
||||
});
|
||||
} else {
|
||||
$file.find('.error').text(json.state).show();
|
||||
}
|
||||
} catch (e) {
|
||||
$file.find('.error').text(lang.errorServerUpload).show();
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadError', function (file, code) {
|
||||
});
|
||||
uploader.on('error', function (code, file) {
|
||||
if (code == 'Q_TYPE_DENIED' || code == 'F_EXCEED_SIZE') {
|
||||
addFile(file);
|
||||
}
|
||||
});
|
||||
uploader.on('uploadComplete', function (file, ret) {
|
||||
});
|
||||
|
||||
$upload.on('click', function () {
|
||||
if ($(this).hasClass('disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (state === 'ready') {
|
||||
uploader.upload();
|
||||
} else if (state === 'paused') {
|
||||
uploader.upload();
|
||||
} else if (state === 'uploading') {
|
||||
uploader.stop();
|
||||
}
|
||||
});
|
||||
|
||||
$upload.addClass('state-' + state);
|
||||
updateTotalProgress();
|
||||
},
|
||||
getQueueCount: function () {
|
||||
var file, i, status, readyFile = 0, files = this.uploader.getFiles();
|
||||
for (i = 0; file = files[i++];) {
|
||||
status = file.getStatus();
|
||||
if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;
|
||||
}
|
||||
return readyFile;
|
||||
},
|
||||
refresh: function () {
|
||||
this.uploader.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
})();
|