1 /**
  2  * xiamiMusic dialog
  3  * @author yiminghe@gmail.com
  4  */
  5 KISSY.add("editor/plugin/xiamiMusic/dialog", function (S, Editor, FlashDialog, MenuButton) {
  6     var UA = S.UA,
  7         DOM = S.DOM,
  8         Node = S.Node,
  9         Utils = Editor.Utils,
 10         loading = Utils.debugUrl("theme/tao-loading.gif"),
 11         XIAMI_URL = "http://www.xiami.com/app/nineteen/search/key/{key}/page/{page}",
 12         CLS_XIAMI = "ke_xiami",
 13         TYPE_XIAMI = "xiamiMusic",
 14         BTIP = "搜 索",
 15         TIP = "输入歌曲名、专辑名、艺人名";
 16 
 17 
 18     var css = '.ks-editor-xiami-list {' +
 19         'margin:10px 0 10px 0;' +
 20         'padding:10px 20px 0 20px;' +
 21         'border-top:1px solid #CED5E0;' +
 22         'display:none;' +
 23         '}' +
 24         '' +
 25         '' +
 26         '.ks-editor-xiami-list li{' +
 27         'border:1px solid #CED5E0;' +
 28         'border-width:0 0 1px 0;' +
 29         'overflow:hidden;' +
 30         'zoom:1;' +
 31         'color:#646464;' +
 32         'height:24px;' +
 33         'line-height:24px;' +
 34         'padding:0 20px 0 10px;' +
 35         '}' +
 36         '' +
 37         '' +
 38         '.ks-editor-xiami-list .ks-editor-xiami-add {' +
 39         'float:right;' +
 40         '}' +
 41         '' +
 42         '' +
 43         '' +
 44         '.ks-editor-xiami-list .ks-editor-xiami-song {' +
 45         'float:left;' +
 46         'width:300px;' +
 47         'white-space:nowrap;' +
 48         'overflow:hidden;' +
 49         '}' +
 50         '' +
 51         '' +
 52         '.ks-editor-xiami-paging a{' +
 53         'display: inline-block;'
 54         + ' zoom: 1; '
 55         + ' *display: inline; '
 56         + 'padding:1px 7px;'
 57         + 'margin:0 3px;' +
 58         '}' +
 59         '' +
 60         '' +
 61         '.ks-editor-xiami-paging a:hover,.ks-editor-xiami-paging a.ks-editor-xiami-curpage {' +
 62         'color:red;' +
 63         'text-decoration:none;' +
 64         '}' +
 65         '' +
 66         '' +
 67         '.ks-editor-xiami-paging {' +
 68         'text-align:center;' +
 69         'margin:20px -10px 0 -10px;' +
 70         '}' +
 71         '' +
 72         '.ks-editor-xiami-page-more {' +
 73         'padding:0 10px;' +
 74         '}';
 75 
 76     DOM.addStyleSheet(css, "XiamiMusic");
 77 
 78 
 79     function limit(str, l) {
 80         if (str.length > l)
 81             str = str.substring(0, l) + "...";
 82         return str;
 83     }
 84 
 85     var MIDDLE = "vertical-align:middle;",
 86         MARGIN_DEFAULT = 0,
 87         bodyHtml = "<div style='padding:20px 0;'>" +
 88             "<form action='#' class='ks-editor-xiami-form' style='margin:0 20px;'>" +
 89             "<p class='ks-editor-xiami-title'>" +
 90             "" +
 91             "</p>" +
 92             "<p class='ks-editor-xiami-url-wrap'>" +
 93             "<input class='ks-editor-xiami-url ks-editor-input' " +
 94             "style='width:370px;" + (UA['ie'] == 6 ? "" : MIDDLE)
 95             + "'" +
 96             "/>   " +
 97             " <a " +
 98             "class='ks-editor-xiami-submit ks-editor-button ks-inline-block'" +
 99             ">"
100             + BTIP + "</a>" +
101             "</p>" +
102             "<p " +
103             "style='margin:10px 0'>" +
104             "<label>对 齐: " +
105             "<select " +
106             "class='ks-editor-xiami-align' title='对齐'>" +
107             "<option value='none'>无</option>" +
108             "<option value='left'>左对齐</option>" +
109             "<option value='right'>右对齐</option>" +
110             "</select>" +
111             "</label>" +
112             "<label style='margin-left:70px;'>间距: " +
113             " " +
114             "<input " +
115             "" +
116             " data-verify='^\\d+$' " +
117             " data-warning='间距请输入非负整数' " +
118             "class='ks-editor-xiami-margin ks-editor-input' style='width:60px;" +
119             MIDDLE + "' value='"
120             + MARGIN_DEFAULT + "'/> 像素" +
121             "</label>" +
122             "</p>" +
123             "</form>" +
124             "<div " +
125             "class='ks-editor-xiami-list'>" +
126             "</div>" +
127             "</div>",
128         footHtml = "<div style='padding:5px 20px 20px;'><a " +
129             "class='ks-editor-xiami-ok ks-editor-button ks-inline-block' " +
130             "style='margin-right:20px;'>确 定</a>" +
131             "<a class='ks-editor-xiami-cancel ks-editor-button ks-inline-block'>取 消</a></div>";
132 
133     function XiamiMusicDialog() {
134         XiamiMusicDialog.superclass.constructor.apply(this, arguments);
135     }
136 
137     S.extend(XiamiMusicDialog, FlashDialog, {
138         _config:function () {
139             var self = this;
140             self._cls = CLS_XIAMI;
141             self._type = TYPE_XIAMI;
142             self._title = "虾米音乐";//属性";
143             self._bodyHtml = bodyHtml;
144             self._footHtml = footHtml;
145         },
146         _initD:function () {
147             var self = this,
148                 editor = self.editor,
149                 d = self.dialog,
150                 del = d.get("el"),
151                 dfoot = d.get("footer"),
152                 input = del.one(".ks-editor-xiami-url");
153             self.dAlign = MenuButton.Select.decorate(del.one(".ks-editor-xiami-align"), {
154                 prefixCls:'ks-editor-big-',
155                 width:80,
156                 elAttrs:{
157                     hideFocus:"hideFocus"
158                 },
159                 menuCfg:{
160                     prefixCls:'ks-editor-',
161                     render:del
162                 }
163             });
164             self.addRes(self.dAlign);
165             self._xiami_input = input;
166             Editor.Utils.placeholder(input, TIP);
167             self.addRes(input);
168             self._xiamia_list = del.one(".ks-editor-xiami-list");
169             self._xiami_submit = del.one(".ks-editor-xiami-submit");
170             self._xiami_submit.on("click", function (ev) {
171                 if (!self._xiami_submit.hasClass("ks-editor-button-disabled", undefined))
172                     loadRecordsByPage(1);
173                 ev.halt();
174             });
175             self.addRes(self._xiami_submit);
176             input.on("keydown", function (ev) {
177                 if (ev.keyCode === 13) {
178                     loadRecordsByPage(1);
179                 }
180             });
181             self.dMargin = del.one(".ks-editor-xiami-margin");
182             self._xiami_url_wrap = del.one(".ks-editor-xiami-url-wrap");
183             self._xiamia_title = del.one(".ks-editor-xiami-title");
184 
185             var _xiami_ok = dfoot.one(".ks-editor-xiami-ok");
186             dfoot.one(".ks-editor-xiami-cancel").on("click", function (ev) {
187                 d.hide();
188                 ev.halt();
189             });
190             self.addRes(dfoot);
191             _xiami_ok.on("click", function (ev) {
192                 var f = self.selectedFlash,
193                     r = editor.restoreRealElement(f);
194                 self._dinfo = {
195                     url:self._getFlashUrl(r),
196                     attrs:{
197                         title:f.attr("title"),
198                         //align:self.dAlign.val(),
199                         style:"margin:" +
200                             (parseInt(self.dMargin.val()) || 0)
201                             + "px;" +
202                             "float:" + self.dAlign.get("value") + ";"
203                     }
204                 };
205                 self._gen();
206                 ev.halt();
207             }, self);
208             self.addRes(_xiami_ok);
209 
210             function loadRecordsByPage(page) {
211                 var query = input.val();
212                 if (query.replace(/[^\x00-\xff]/g, "@@").length > 30) {
213                     alert("长度上限30个字符(1个汉字=2个字符)");
214                     return;
215                 } else if (!S.trim(query) || query == TIP) {
216                     alert("不能为空!");
217                     return;
218                 }
219                 self._xiami_submit.addClass("ks-editor-button-disabled", undefined);
220                 var req = S.substitute(XIAMI_URL, {
221                     key:encodeURIComponent(input.val()),
222                     page:page
223                 });
224                 self._xiamia_list.html("<img style='" +
225                     "display:block;" +
226                     "width:32px;" +
227                     "height:32px;" +
228                     "margin:5px auto 0 auto;" +
229                     "'src='" + loading + "'/>" +
230                     "<p style='width: 130px; margin: 15px auto 0; color: rgb(150, 150, 150);'>正在搜索,请稍候......</p>");
231                 self._xiamia_list.show();
232 
233                 S.io({
234                     cache:false,
235                     url:req,
236                     dataType:'jsonp',
237                     success:function (data) {
238                         data.page = page;
239                         self._listSearch(data);
240                     },
241                     error:function () {
242                         self._xiami_submit.removeClass("ks-editor-button-disabled", undefined);
243                         var html = "<p style='text-align:center;margin:10px 0;'>" +
244                             "不好意思,超时了,请重试!" +
245                             "</p>";
246                         self._xiamia_list.html(html);
247                     }
248                 });
249             }
250 
251             self._xiamia_list.on("click", function (ev) {
252                 ev.preventDefault();
253                 var t = new Node(ev.target),
254                     add = t.closest(function (node) {
255                         return self._xiamia_list.contains(node) &&
256                             DOM.hasClass(node, "ks-editor-xiami-add");
257                     }, undefined),
258                     paging = t.closest(function (node) {
259                         return self._xiamia_list.contains(node) &&
260                             DOM.hasClass(node, "ks-editor-xiami-page-item");
261                     }, undefined);
262                 if (add) {
263                     self._dinfo = {
264                         url:("http://www.xiami.com/widget/" +
265                             add.attr("data-value")
266                             + "/singlePlayer.swf"),
267                         attrs:{
268                             title:add.attr("title"),
269                             //align:self.dAlign.val(),
270                             style:"margin:" +
271                                 (parseInt(self.dMargin.val()) || 0)
272                                 + "px;" +
273                                 "float:" + self.dAlign.get("value") + ";"
274                         }
275                     };
276                     self._gen();
277                 } else if (paging) {
278                     loadRecordsByPage(parseInt(paging.attr("data-value")));
279                 }
280                 ev.halt();
281             });
282             self.addRes(self._xiamia_list);
283         },
284         _listSearch:function (data) {
285             var self = this,
286                 i,
287                 re = data['results'],
288                 html = "";
289             // xiami 返回结果自动trim了
290             if (data.key == S.trim(self._xiami_input.val())) {
291                 self._xiami_submit.removeClass("ks-editor-button-disabled", undefined);
292                 if (re && re.length) {
293                     html = "<ul>";
294                     for (i = 0; i < re.length; i++) {
295                         var r = re[i], d = getDisplayName(r);
296                         html += "<li " +
297                             "title='" + d + "'>" +
298                             "<span class='ks-editor-xiami-song'>"
299                             + limit(d, 35) +
300                             "</span>" +
301                             "" +
302                             "" +
303                             //album_id_song_id
304                             "<a href='#' " +
305                             "title='" + d + "' " +
306                             "class='ks-editor-xiami-add' data-value='" +
307                             (
308                                 r['album_id']
309                                     + "_"
310                                     + r['song_id']
311                                 )
312                             + "'>添加</a>" +
313                             "</li>"
314                     }
315                     html += "</ul>";
316 
317                     var page = data.page,
318                         totalPage = Math.floor(data['total'] / 8),
319                         start = page - 1,
320                         end = page + 1;
321 
322                     if (totalPage > 1) {
323                         html += "<p class='ks-editor-xiami-paging'>";
324                         if (start <= 2) {
325                             end = Math.min(2 - start + end, totalPage - 1);
326                             start = 2;
327                         }
328                         end = Math.min(end, totalPage - 1);
329                         if (end == totalPage - 1) {
330                             start = Math.max(2, end - 3);
331                         }
332                         if (page != 1) {
333                             html += getXiamiPaging(page, page - 1, "上一页");
334                         }
335                         html += getXiamiPaging(page, 1, "1");
336                         if (start != 2) {
337                             html += "<span class='ks-editor-xiami-page-more'>...</span>";
338                         }
339                         for (i = start; i <= end; i++) {
340                             html += getXiamiPaging(page, i, undefined);
341                         }
342                         if (end != totalPage) {
343                             if (end != totalPage - 1) {
344                                 html += "<span class='ks-editor-xiami-page-more'>...</span>";
345                             }
346                             html += getXiamiPaging(page, totalPage, totalPage);
347                         }
348                         if (page != totalPage) {
349                             html += getXiamiPaging(page, page + 1, "下一页");
350                         }
351                         html += "</p>";
352                     }
353 
354                 } else {
355                     html = "<p style='text-align:center;margin:10px 0;'>" +
356                         "不好意思,没有找到结果!" +
357                         "</p>";
358                 }
359                 self._xiamia_list.html(html);
360             }
361         },
362 
363         _updateD:function () {
364             var self = this,
365                 f = self.selectedFlash;
366             if (f) {
367                 self._xiami_input.val(f.attr("title"));
368                 self._xiamia_title.html(f.attr("title"));
369                 self.dAlign.set("value", f.css("float"));
370                 self.dMargin.val(parseInt(f.style("margin")) || 0);
371                 self._xiami_url_wrap.hide();
372                 self.dialog.get("footer").show();
373                 self._xiamia_title.show();
374             } else {
375                 Editor.Utils.resetInput(self._xiami_input);
376                 self.dAlign.set("value", "none");
377                 self.dMargin.val(MARGIN_DEFAULT);
378                 self._xiami_url_wrap.show();
379                 self.dialog.get("footer").hide();
380                 self._xiamia_title.hide();
381                 self._xiami_submit.removeClass("ks-editor-button-disabled", undefined);
382             }
383             self._xiamia_list.hide();
384             self._xiamia_list.html("");
385         },
386 
387         _getDInfo:function () {
388             var self = this;
389             S.mix(self._dinfo.attrs, {
390                 width:257,
391                 height:33
392             });
393             return self._dinfo;
394         }
395 
396     });
397 
398 
399     function getXiamiPaging(page, i, s) {
400         return "<a class='ks-editor-xiami-page-item ks-editor-button ks-inline-block" +
401             ((page == i) ? " ks-editor-xiami-curpage" : "") +
402             "' data-value='" + i + "' href='#'>" + (s || i) + "</a>";
403     }
404 
405     function getDisplayName(r) {
406         return decodeURIComponent(r['song_name'])
407             + " - "
408             + decodeURIComponent(r['artist_name']);
409     }
410 
411     return XiamiMusicDialog;
412 
413 }, {
414     requires:['editor', '../flash/dialog', '../menubutton/']
415 });