1 /**
  2  * video dialog
  3  * @author yiminghe@gmail.com
  4  */
  5 KISSY.add("editor/plugin/video/dialog", function (S, Editor, FlashDialog, MenuButton) {
  6     var CLS_VIDEO = "ke_video",
  7         TYPE_VIDEO = "video",
  8         DTIP = "自动",
  9         MIDDLE = "vertical-align:middle;",
 10         MARGIN_DEFAULT = 0,
 11         bodyHtml = "<div style='padding:20px 20px 0 20px'>" +
 12             "<p>" +
 13             "<label>" +
 14             "链接: " +
 15             "" +
 16             "<input " +
 17             "class='ks-editor-video-url ks-editor-input' style='width:410px;" +
 18             MIDDLE + "'/>" +
 19             "</label>" +
 20             "</p>" +
 21             "<table " +
 22             "style='margin:10px 0 5px  40px;width:400px;'>" +
 23             "<tr><td>" +
 24             "<label>宽度: " +
 25             " " +
 26             "<input " +
 27             " data-verify='^(" + DTIP + "|((?!0$)\\d+))?$' " +
 28             " data-warning='宽度请输入正整数' " +
 29             "class='ks-editor-video-width ks-editor-input' " +
 30             "style='width:60px;margin-left:2px;" +
 31             MIDDLE + "' " +
 32             "/> 像素" +
 33             "</label>" +
 34             "</td>" +
 35             "<td>" +
 36             "<label> 高度: " +
 37             "" +
 38             " <input " +
 39             " data-verify='^(" + DTIP + "|((?!0$)\\d+))?$' " +
 40             " data-warning='高度请输入正整数' " +
 41             "class='ks-editor-video-height ks-editor-input' style='width:60px;" +
 42             MIDDLE +
 43             "'/> 像素" +
 44             "</label>" +
 45             "</td></tr>" +
 46             "<tr>" +
 47             "<td>" +
 48             "<label>对齐: " +
 49             "<select class='ks-editor-video-align' title='对齐'>" +
 50             "<option value='none'>无</option>" +
 51             "<option value='left'>左对齐</option>" +
 52             "<option value='right'>右对齐</option>" +
 53             "</select>" +
 54             "</td>" +
 55             "<td>" +
 56             "<label>间距: " +
 57             "<input " +
 58             "" +
 59             " data-verify='^\\d+$' " +
 60             " data-warning='间距请输入非负整数' " +
 61             "class='ks-editor-video-margin ks-editor-input' style='width:60px;" +
 62             MIDDLE + "' value='"
 63             + MARGIN_DEFAULT + "'/> 像素" +
 64             "</label>" +
 65             "</td></tr>" +
 66             "</table>" +
 67             "</div>",
 68         footHtml = "<div style='padding:5px 20px 20px;'><a " +
 69             "class='ks-editor-video-ok ks-editor-button ks-inline-block' " +
 70             "style='margin-left:40px;margin-right:20px;'>确定</button> " +
 71             "<a class='ks-editor-video-cancel ks-editor-button ks-inline-block'>取消</a></div>";
 72 
 73     function VideoDialog() {
 74         VideoDialog.superclass.constructor.apply(this, arguments);
 75     }
 76 
 77     S.extend(VideoDialog, FlashDialog, {
 78         _config:function () {
 79             var self = this,
 80                 cfg = self.config;
 81             self._cls = CLS_VIDEO;
 82             self._type = TYPE_VIDEO;
 83             self._title = "视频";//属性";
 84             self._bodyHtml = bodyHtml;
 85             self._footHtml = footHtml;
 86             self.urlCfg = cfg["video"] &&
 87                 cfg["video"].urlCfg;
 88             self._urlTip = (cfg["video"] &&
 89                 cfg["video"]['urlTip']) || "请输入视频播放链接...";
 90         },
 91         _initD:function () {
 92             var self = this,
 93                 d = self.dialog,
 94                 el = d.get("el");
 95             self.dUrl = el.one(".ks-editor-video-url");
 96             self.dAlign = MenuButton.Select.decorate(el.one(".ks-editor-video-align"), {
 97                 prefixCls:'ks-editor-big-',
 98                 elAttrs:{
 99                     hideFocus:"hideFocus"
100                 },
101                 width:80,
102                 menuCfg:{
103                     prefixCls:'ks-editor-',
104                     render:el
105                 }
106             });
107             self.dMargin = el.one(".ks-editor-video-margin");
108             self.dWidth = el.one(".ks-editor-video-width");
109             self.dHeight = el.one(".ks-editor-video-height");
110             var action = el.one(".ks-editor-video-ok"),
111                 cancel = el.one(".ks-editor-video-cancel");
112             action.on("click", self._gen, self);
113             cancel.on("click", function (ev) {
114                 d.hide();
115                 ev.halt();
116             });
117             Editor.Utils.placeholder(self.dUrl, self._urlTip);
118             Editor.Utils.placeholder(self.dWidth, DTIP);
119             Editor.Utils.placeholder(self.dHeight, DTIP);
120             self.addRes(self.dAlign);
121         },
122 
123         _getDInfo:function () {
124             var self = this,
125                 url = self.dUrl.val();
126             var videoCfg = self.config,
127                 p = videoCfg.getProvider(url);
128             if (!p) {
129                 alert("不支持该链接来源!");
130             } else {
131                 var re = p['detect'](url);
132                 if (!re) {
133                     alert("不支持该链接,请直接输入该视频提供的分享链接");
134                     return;
135                 }
136                 return {
137                     url:re,
138                     attrs:{
139                         height:parseInt(self.dHeight.val()) || p.height,
140                         width:parseInt(self.dWidth.val()) || p.width,
141                         style:"margin:" + (parseInt(self.dMargin.val()) || 0) + "px;" +
142                             "float:" + self.dAlign.get("value") + ";"
143                     }
144                 };
145             }
146         },
147 
148         _gen:function (ev) {
149             var self = this,
150                 url = self.dUrl.val(),
151                 urlCfg = self.urlCfg;
152             if (urlCfg) {
153                 for (var i = 0; i < urlCfg.length; i++) {
154                     var c = urlCfg[i];
155                     if (c['reg'].test(url)) {
156                         self.dialog.loading();
157 
158                         var data = {};
159 
160                         data[c['paramName'] || "url"] = url;
161 
162                         S.io({
163                             url:c.url,
164                             data:data,
165                             dataType:'jsonp',
166                             success:function (data) {
167                                 self._dynamicUrlPrepare(data[1]);
168                             }
169                         });
170 
171                         return;
172                     }
173                 }
174             }
175             VideoDialog.superclass._gen.call(self);
176             ev && ev.halt();
177         },
178 
179         _dynamicUrlPrepare:function (re) {
180             var self = this;
181             self.dUrl.val(re);
182             self.dialog.unloading();
183             VideoDialog.superclass._gen.call(self);
184         },
185 
186         _updateD:function () {
187             var self = this,
188                 editor = self.editor,
189                 f = self.selectedFlash;
190             if (f) {
191                 var r = editor.restoreRealElement(f);
192                 Editor.Utils.valInput(self.dUrl, self._getFlashUrl(r));
193                 self.dAlign.set("value", f.css("float"));
194                 self.dMargin.val(parseInt(r.style("margin")) || 0);
195                 Editor.Utils.valInput(self.dWidth, parseInt(f.css("width")));
196                 Editor.Utils.valInput(self.dHeight, parseInt(f.css("height")));
197             } else {
198                 Editor.Utils.resetInput(self.dUrl);
199                 self.dAlign.set("value", "none");
200                 self.dMargin.val(MARGIN_DEFAULT);
201                 Editor.Utils.resetInput(self.dWidth);
202                 Editor.Utils.resetInput(self.dHeight);
203             }
204         }
205     });
206 
207     return VideoDialog;
208 }, {
209     requires:['editor', '../flash/dialog', '../menubutton/']
210 });