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 });