| 1 | <mt:setvarblock name="page_title"><__trans phrase="Select a Style"></mt:setvarblock> |
|---|
| 2 | <mt:setvarblock name="html_head" append="1"> |
|---|
| 3 | <!-- stylecatcher --> |
|---|
| 4 | <link rel="stylesheet" type="text/css" title="Default Layout" href="<mt:var name="plugin_static_uri">templates.css" /> |
|---|
| 5 | |
|---|
| 6 | <script type="text/javascript" src="<mt:var name="static_uri">js/tc/mixer.js"></script> |
|---|
| 7 | <script type="text/javascript" src="<mt:var name="static_uri">js/tc/mixer/tagmatch.js"></script> |
|---|
| 8 | <script type="text/javascript" src="<mt:var name="static_uri">js/tc/mixer/display.js"></script> |
|---|
| 9 | <script type="text/javascript" src="<mt:var name="static_uri">js/tc/client.js"></script> |
|---|
| 10 | |
|---|
| 11 | <!-- javascripts for this page --> |
|---|
| 12 | |
|---|
| 13 | <script type="text/javascript"> |
|---|
| 14 | /* <![CDATA[ */ |
|---|
| 15 | var repoImg = "<mt:var name="plugin_static_uri">images/mixed-media.gif"; |
|---|
| 16 | var selected; |
|---|
| 17 | var blog_id = '<mt:var name="blog_id" escape="js">'; |
|---|
| 18 | var dynamic_blog = <mt:if name="dynamic_blog">true<mt:else>false</mt:if>; |
|---|
| 19 | var mixer; |
|---|
| 20 | var matchCategory = /^category-/; |
|---|
| 21 | var categories = []; |
|---|
| 22 | var firstCategoryId; |
|---|
| 23 | var repo_urls = {}; |
|---|
| 24 | var repos = []; |
|---|
| 25 | var libraries = <mt:var name="style_library" to_json="1">; |
|---|
| 26 | var current_theme = '<mt:var name="current_theme">'; |
|---|
| 27 | var current_layout = '<mt:var name="current_layout">'; |
|---|
| 28 | var layout_names = { |
|---|
| 29 | "layout-wtt": "<__trans phrase="3-Columns, Wide, Thin, Thin" escape="js">", |
|---|
| 30 | "layout-twt": "<__trans phrase="3-Columns, Thin, Wide, Thin" escape="js">", |
|---|
| 31 | "layout-tw": "<__trans phrase="2-Columns, Thin, Wide" escape="js">", |
|---|
| 32 | "layout-wt": "<__trans phrase="2-Columns, Wide, Thin" escape="js">", |
|---|
| 33 | "layout-wm": "<__trans phrase="2-Columns, Wide, Medium" escape="js">" |
|---|
| 34 | }; |
|---|
| 35 | |
|---|
| 36 | TC.attachLoadEvent( init ); |
|---|
| 37 | |
|---|
| 38 | function init() { |
|---|
| 39 | initMixer(); |
|---|
| 40 | |
|---|
| 41 | <mt:if name="themes_json"> |
|---|
| 42 | var data = <mt:var name="themes_json">; |
|---|
| 43 | if (data.categories) { |
|---|
| 44 | for (var i = 0; i < data.categories.length; i++) |
|---|
| 45 | enableCategory(data.categories[i]); |
|---|
| 46 | } |
|---|
| 47 | </mt:if> |
|---|
| 48 | |
|---|
| 49 | initCategories(); |
|---|
| 50 | chooseCategory( firstCategoryId ); |
|---|
| 51 | |
|---|
| 52 | if (data.themes) { |
|---|
| 53 | loadThemes(data.themes); |
|---|
| 54 | if (current_theme) { |
|---|
| 55 | mixer.name = current_theme; |
|---|
| 56 | selectDesign(); |
|---|
| 57 | } else { |
|---|
| 58 | showDetails(); |
|---|
| 59 | } |
|---|
| 60 | } |
|---|
| 61 | |
|---|
| 62 | <mt:if name="auto_fetch"> |
|---|
| 63 | getStyles(); |
|---|
| 64 | </mt:if> |
|---|
| 65 | } |
|---|
| 66 | |
|---|
| 67 | function enableCategory(cat) { |
|---|
| 68 | mixer.addTagIndexDisplay('display-'+cat, 1000, 'collection:'+cat); |
|---|
| 69 | var el = getByID('category-' + cat); |
|---|
| 70 | if (el) |
|---|
| 71 | el.style.display = 'block'; |
|---|
| 72 | } |
|---|
| 73 | |
|---|
| 74 | function initMixer() { |
|---|
| 75 | mixer = new TC.Mixer(); |
|---|
| 76 | // initialize mixer object |
|---|
| 77 | mixer.addSelectedDisplay( "display-details-content" ); |
|---|
| 78 | mixer.onselect = selectDesign; |
|---|
| 79 | } |
|---|
| 80 | |
|---|
| 81 | function initCategories() { |
|---|
| 82 | var element = getByID( "categories" ); |
|---|
| 83 | if( !element ) |
|---|
| 84 | return; |
|---|
| 85 | |
|---|
| 86 | categories.length = 0; |
|---|
| 87 | var elements = element.childNodes; |
|---|
| 88 | for( var i = 0; i < elements.length; i++ ) |
|---|
| 89 | { |
|---|
| 90 | element = elements[ i ]; |
|---|
| 91 | var categoryId = element.id; |
|---|
| 92 | if( !categoryId ) |
|---|
| 93 | continue; |
|---|
| 94 | |
|---|
| 95 | if( !firstCategoryId ) { |
|---|
| 96 | if (element.style.display != 'none') { |
|---|
| 97 | firstCategoryId = categoryId; |
|---|
| 98 | } |
|---|
| 99 | } |
|---|
| 100 | |
|---|
| 101 | var displayId = categoryId.replace( matchCategory, "display-" ); |
|---|
| 102 | var display = getByID( displayId ); |
|---|
| 103 | |
|---|
| 104 | element.onclick = chooseCategoryClosure( categoryId ); |
|---|
| 105 | TC.removeClassName( element, "category-selected" ); |
|---|
| 106 | |
|---|
| 107 | categories[ categoryId ] = { |
|---|
| 108 | "element" : element, |
|---|
| 109 | "display" : display |
|---|
| 110 | }; |
|---|
| 111 | } |
|---|
| 112 | } |
|---|
| 113 | |
|---|
| 114 | function chooseCategoryClosure( categoryId ) { |
|---|
| 115 | var func = function() { return chooseCategory( categoryId ); }; |
|---|
| 116 | return func; |
|---|
| 117 | } |
|---|
| 118 | |
|---|
| 119 | function chooseCategory( categoryId ) { |
|---|
| 120 | var titleElement = getByID( "selected-category-title" ); |
|---|
| 121 | |
|---|
| 122 | for( var id in categories ) { |
|---|
| 123 | var element = categories[ id ].element; |
|---|
| 124 | if (!element) continue; |
|---|
| 125 | var display = categories[ id ].display; |
|---|
| 126 | |
|---|
| 127 | if( id == categoryId ) { |
|---|
| 128 | var repo_match = element.id.match(/^category-repo-(.+)$/); |
|---|
| 129 | if (repo_match) { |
|---|
| 130 | var repo_id = repo_match[1]; |
|---|
| 131 | var repo; |
|---|
| 132 | for (var i = 0; i < libraries.length; i++) { |
|---|
| 133 | if (libraries[i].key == repo_id) { |
|---|
| 134 | repo = libraries[i]; |
|---|
| 135 | break; |
|---|
| 136 | } |
|---|
| 137 | } |
|---|
| 138 | if (repo.url && !repo.loaded) { |
|---|
| 139 | getStyles(repo_id, repo.url); |
|---|
| 140 | } |
|---|
| 141 | } |
|---|
| 142 | TC.addClassName( element, "category-selected" ); |
|---|
| 143 | display.style.display = "block"; |
|---|
| 144 | |
|---|
| 145 | if( titleElement ) |
|---|
| 146 | titleElement.innerHTML = trans(element.firstChild.nextSibling.innerHTML); |
|---|
| 147 | } |
|---|
| 148 | else { |
|---|
| 149 | TC.removeClassName( element, "category-selected" ); |
|---|
| 150 | if (display) display.style.display = "none"; |
|---|
| 151 | } |
|---|
| 152 | } |
|---|
| 153 | |
|---|
| 154 | // select first theme in category |
|---|
| 155 | mixer.name = ''; |
|---|
| 156 | var select_design = getByID("select-design-controls"); |
|---|
| 157 | TC.addClassName(select_design, "hidden"); |
|---|
| 158 | mixer.display(); |
|---|
| 159 | mixer.remix(); |
|---|
| 160 | } |
|---|
| 161 | |
|---|
| 162 | function showDetails() { |
|---|
| 163 | mixer.remix(); |
|---|
| 164 | } |
|---|
| 165 | |
|---|
| 166 | function selectDesign() { |
|---|
| 167 | var apply_button = getByID("apply-button"); |
|---|
| 168 | var layout_select = getByID("layout-list"); |
|---|
| 169 | |
|---|
| 170 | var layouts; |
|---|
| 171 | if (mixer.name && mixer.entries[mixer.name]) |
|---|
| 172 | layouts = mixer.entries[mixer.name].layouts; |
|---|
| 173 | var layout_list; |
|---|
| 174 | if (layouts) layout_list = layouts.split(/\s*,\s*/); |
|---|
| 175 | if (layouts && layout_list && layout_list.length) { |
|---|
| 176 | layout_select.options.length = 0; |
|---|
| 177 | var selected_layout = 0; |
|---|
| 178 | for (var i = 0; i < layout_list.length; i++) { |
|---|
| 179 | var opt = new Option(layout_names[layout_list[i]] ? layout_names[layout_list[i]] : layout_list[i], layout_list[i]); |
|---|
| 180 | layout_select.options[layout_select.options.length] = opt; |
|---|
| 181 | if (layout_list[i] == current_layout) { |
|---|
| 182 | selected_layout = i; |
|---|
| 183 | } |
|---|
| 184 | } |
|---|
| 185 | layout_select.selectedIndex = selected_layout; |
|---|
| 186 | layout_select.disabled = false; |
|---|
| 187 | } else { |
|---|
| 188 | layout_select.options.length = 0; |
|---|
| 189 | layout_select.options[0] = new Option("<__trans phrase="None available" escape="js">", ""); |
|---|
| 190 | layout_select.disabled = true; |
|---|
| 191 | } |
|---|
| 192 | showDetails(); |
|---|
| 193 | var select_design = getByID("select-design-controls"); |
|---|
| 194 | TC.removeClassName(select_design, "hidden"); |
|---|
| 195 | updateApplyButton(); |
|---|
| 196 | } |
|---|
| 197 | |
|---|
| 198 | function updateApplyButton() { |
|---|
| 199 | var apply_button = getByID("apply-button"); |
|---|
| 200 | var layout_select = getByID("layout-list"); |
|---|
| 201 | var new_layout; |
|---|
| 202 | if (layout_select && layout_select.selectedIndex != -1) { |
|---|
| 203 | new_layout = layout_select.options[layout_select.selectedIndex].value; |
|---|
| 204 | } |
|---|
| 205 | var current_entry = mixer.entries[mixer.name]; |
|---|
| 206 | if ((mixer.name == current_theme) && ((!new_layout || !current_layout) || ((new_layout && current_layout) && (new_layout == current_layout)))) { |
|---|
| 207 | // same theme, same layout. don't allow apply design to be enabled |
|---|
| 208 | apply_button.disabled = true; |
|---|
| 209 | TC.addClassName(apply_button, "disabled-button"); |
|---|
| 210 | } else { |
|---|
| 211 | apply_button.disabled = false; |
|---|
| 212 | TC.removeClassName(apply_button, "disabled-button"); |
|---|
| 213 | } |
|---|
| 214 | } |
|---|
| 215 | |
|---|
| 216 | function applyDesign() { |
|---|
| 217 | // disable apply button; change text to "Applying..." |
|---|
| 218 | var btn = getByID("apply-button"); |
|---|
| 219 | var layout = getByID("layout-list"); |
|---|
| 220 | if (layout && layout.selectedIndex != -1) { |
|---|
| 221 | layout = layout.options[layout.selectedIndex].value; |
|---|
| 222 | } |
|---|
| 223 | |
|---|
| 224 | selected = mixer.name; |
|---|
| 225 | var url = mixer.entries[mixer.name].url; |
|---|
| 226 | |
|---|
| 227 | TC.addClassName(btn, "disabled-button"); |
|---|
| 228 | btn.disabled = true; |
|---|
| 229 | btn.value = "<__trans phrase="Applying..." escape="js">"; |
|---|
| 230 | |
|---|
| 231 | var args = { |
|---|
| 232 | '__mode': 'stylecatcher_apply', |
|---|
| 233 | 'url': url, |
|---|
| 234 | 'magic_token': '<mt:var name="magic_token">', |
|---|
| 235 | 'blog_id': blog_id, |
|---|
| 236 | 'name': mixer.name |
|---|
| 237 | }; |
|---|
| 238 | if (layout) |
|---|
| 239 | args['layout'] = layout; |
|---|
| 240 | var client = TC.Client.call({ |
|---|
| 241 | 'load': designApplied, |
|---|
| 242 | 'uri': '<mt:var name="script_url">', |
|---|
| 243 | 'method': 'POST', |
|---|
| 244 | 'arguments': args |
|---|
| 245 | }); |
|---|
| 246 | } |
|---|
| 247 | |
|---|
| 248 | function designApplied(client, result) { |
|---|
| 249 | var btn = getByID("apply-button"); |
|---|
| 250 | btn.value = "<__trans phrase="Apply Design" escape="js">"; |
|---|
| 251 | |
|---|
| 252 | var res; |
|---|
| 253 | try { |
|---|
| 254 | res = eval('(' + result + ')'); |
|---|
| 255 | } catch (e) { |
|---|
| 256 | } |
|---|
| 257 | if (res && res.error) { |
|---|
| 258 | showMsg("<__trans phrase="Error applying theme: " escape="js">" + res.error, "theme-applied", "error"); |
|---|
| 259 | TC.removeClassName(btn, "disabled-button"); |
|---|
| 260 | btn.disabled = false; |
|---|
| 261 | return; |
|---|
| 262 | } |
|---|
| 263 | |
|---|
| 264 | var layout = getByID("layout-list"); |
|---|
| 265 | var new_layout; |
|---|
| 266 | if (layout && layout.selectedIndex != -1) { |
|---|
| 267 | new_layout = layout.options[layout.selectedIndex].value; |
|---|
| 268 | } |
|---|
| 269 | var entry = mixer.entries[selected]; |
|---|
| 270 | if (entry) { |
|---|
| 271 | // make this the new 'current' theme |
|---|
| 272 | var found = false; |
|---|
| 273 | for (var i = 0; i < entry.tags.length; i++) { |
|---|
| 274 | if (entry.tags[i] == 'collection:current') |
|---|
| 275 | found = true; |
|---|
| 276 | } |
|---|
| 277 | if (!found) |
|---|
| 278 | entry.tags[entry.tags.length] = 'collection:current'; |
|---|
| 279 | /* we need to add the blog id of the blog that was |
|---|
| 280 | applied to for this entry */ |
|---|
| 281 | |
|---|
| 282 | found = false; |
|---|
| 283 | if (entry.blogs && entry.blogs.length) { |
|---|
| 284 | for (var i = 0; i < entry.blogs.length; i++) { |
|---|
| 285 | if (entry.blogs[i] == blog_id) |
|---|
| 286 | found = true; |
|---|
| 287 | } |
|---|
| 288 | } |
|---|
| 289 | if (!found) |
|---|
| 290 | entry.blogs[entry.blogs.length] = blog_id; |
|---|
| 291 | |
|---|
| 292 | /* loop through all the 'current' themes and strip |
|---|
| 293 | this blog id from any that don't match the |
|---|
| 294 | selected theme */ |
|---|
| 295 | for (var i in mixer.entries) { |
|---|
| 296 | if (i == selected) |
|---|
| 297 | continue; |
|---|
| 298 | for (var j = 0; j < mixer.entries[i].blogs.length; j++) { |
|---|
| 299 | if (mixer.entries[i].blogs[j] == blog_id) { |
|---|
| 300 | mixer.entries[i].blogs.splice(j,1); |
|---|
| 301 | break; |
|---|
| 302 | } |
|---|
| 303 | } |
|---|
| 304 | if (mixer.entries[i].blogs.length == 0) { |
|---|
| 305 | // no longer 'current' |
|---|
| 306 | for (var j = 0; j < mixer.entries[i].tags.length; j++) { |
|---|
| 307 | if (mixer.entries[i].tags[j] == 'collection:current') { |
|---|
| 308 | mixer.entries[i].tags.splice(j,1); |
|---|
| 309 | break; |
|---|
| 310 | } |
|---|
| 311 | } |
|---|
| 312 | } |
|---|
| 313 | } |
|---|
| 314 | mixer.createTagIndexes(); |
|---|
| 315 | } |
|---|
| 316 | |
|---|
| 317 | chooseCategory('category-current'); |
|---|
| 318 | current_theme = selected; |
|---|
| 319 | mixer.name = selected; |
|---|
| 320 | var layout_changed = (current_layout && new_layout) && (current_layout != new_layout); |
|---|
| 321 | current_layout = new_layout; |
|---|
| 322 | selectDesign(); |
|---|
| 323 | |
|---|
| 324 | if (layout_changed && (!dynamic_blog)) { |
|---|
| 325 | showMsg("<__trans phrase="The selected theme has been applied, but as you have changed the layout, you will need to republish your blog to apply the new layout." escape="js">", 'theme-applied', "info", "all", blog_id); |
|---|
| 326 | } else { |
|---|
| 327 | showMsg("<__trans phrase="The selected theme has been applied!" escape="js">", 'theme-applied', "info"); |
|---|
| 328 | } |
|---|
| 329 | } |
|---|
| 330 | |
|---|
| 331 | function stylesLoaded(client, styles, repo_id) { |
|---|
| 332 | var btn = getByID("find-button"); |
|---|
| 333 | TC.addClassName(TC.elementOrId("loading-styles"), "hidden"); |
|---|
| 334 | TC.removeClassName(btn, "hidden"); |
|---|
| 335 | |
|---|
| 336 | var repo_num; |
|---|
| 337 | var cat; |
|---|
| 338 | |
|---|
| 339 | var data; |
|---|
| 340 | try { |
|---|
| 341 | data = eval('('+styles+')'); |
|---|
| 342 | } catch (e) { |
|---|
| 343 | showMsg("<__trans phrase="Error loading themes! -- [_1]" params="ERROR" escape="js">".replace(/ERROR/, styles), "error", "error"); |
|---|
| 344 | return; |
|---|
| 345 | } |
|---|
| 346 | if (data.error) { |
|---|
| 347 | showMsg("<__trans phrase="Error loading themes! -- [_1]" params="ERROR" escape="js">".replace(/ERROR/, data.error), "error", "error"); |
|---|
| 348 | return; |
|---|
| 349 | } |
|---|
| 350 | log(data.result); |
|---|
| 351 | if (!repo_id) { |
|---|
| 352 | if (data.result.repo) { |
|---|
| 353 | url = data.result.repo['url']; |
|---|
| 354 | if (repo_urls[url] != undefined) { |
|---|
| 355 | repo_num = repo_urls[url]; |
|---|
| 356 | cat = 'repo_' + repo_num; |
|---|
| 357 | } else { |
|---|
| 358 | repo_num = repos.length; |
|---|
| 359 | repo_urls[url] = repo_num; |
|---|
| 360 | |
|---|
| 361 | // new repo -- create new |
|---|
| 362 | // category for it |
|---|
| 363 | cat = 'repo_' + repo_num; |
|---|
| 364 | createCategory(cat, data.result.repo['display_name'], url); |
|---|
| 365 | } |
|---|
| 366 | repos[repo_num] = url; |
|---|
| 367 | } |
|---|
| 368 | if (data.result.auto) { |
|---|
| 369 | cat = 'more'; |
|---|
| 370 | enableCategory(cat); |
|---|
| 371 | } |
|---|
| 372 | chooseCategory('category-' + cat); |
|---|
| 373 | } else { |
|---|
| 374 | var repo; |
|---|
| 375 | for (var i = 0; i < libraries.length; i++) { |
|---|
| 376 | if (libraries[i].key == repo_id) { |
|---|
| 377 | repo = libraries[i]; |
|---|
| 378 | break; |
|---|
| 379 | } |
|---|
| 380 | } |
|---|
| 381 | if (repo) { |
|---|
| 382 | repo.loaded = true; |
|---|
| 383 | cat = 'repo-' + repo_id; |
|---|
| 384 | enableCategory(cat); |
|---|
| 385 | chooseCategory('category-' + cat); |
|---|
| 386 | } |
|---|
| 387 | } |
|---|
| 388 | if (data.result.themes) |
|---|
| 389 | loadThemes(data.result.themes, cat); |
|---|
| 390 | } |
|---|
| 391 | |
|---|
| 392 | function createCategory(cat_name, cat_title, url) { |
|---|
| 393 | // things to create... |
|---|
| 394 | // #1: new scrollbox under id 'categories' |
|---|
| 395 | /* |
|---|
| 396 | <div class="category" id="category-repo" title="Remote Styles" style="display: none"> |
|---|
| 397 | <img src="<mt:var name="plugin_static_uri">images/mixed-media.gif" alt="" /><span id="repo-name">Remote Styles</span> |
|---|
| 398 | </div> |
|---|
| 399 | */ |
|---|
| 400 | var cats = getByID("categories"); |
|---|
| 401 | |
|---|
| 402 | element = document.createElement( "div" ); |
|---|
| 403 | element.title = url; |
|---|
| 404 | element.className = "category"; |
|---|
| 405 | element.id = "category-" + cat_name; |
|---|
| 406 | |
|---|
| 407 | var img = document.createElement( "img" ); |
|---|
| 408 | img.src = repoImg; |
|---|
| 409 | img.alt = ""; |
|---|
| 410 | element.appendChild( img ); |
|---|
| 411 | |
|---|
| 412 | var spn = document.createElement( "span" ); |
|---|
| 413 | spn.appendChild( document.createTextNode( cat_title ) ); |
|---|
| 414 | element.appendChild( spn ); |
|---|
| 415 | |
|---|
| 416 | cats.appendChild( element ); |
|---|
| 417 | |
|---|
| 418 | // #2: new div under id templates-wrapper |
|---|
| 419 | /* |
|---|
| 420 | <div class="scrollbox" id="display-repo" style="display: none;"></div> |
|---|
| 421 | */ |
|---|
| 422 | |
|---|
| 423 | var wrapper = getByID("templates-wrapper"); |
|---|
| 424 | |
|---|
| 425 | var div = document.createElement( "div" ); |
|---|
| 426 | div.className = "scrollbox"; |
|---|
| 427 | div.id = "display-" + cat_name; |
|---|
| 428 | wrapper.appendChild(div); |
|---|
| 429 | element.onclick = chooseCategoryClosure( element.id ); |
|---|
| 430 | |
|---|
| 431 | categories[ element.id ] = |
|---|
| 432 | { |
|---|
| 433 | "element" : element, |
|---|
| 434 | "display" : div |
|---|
| 435 | }; |
|---|
| 436 | |
|---|
| 437 | enableCategory(cat_name); |
|---|
| 438 | } |
|---|
| 439 | |
|---|
| 440 | function loadThemes(themes, pfx) { |
|---|
| 441 | var names = {}; |
|---|
| 442 | for (var i = 0; i < themes.length; i++) { |
|---|
| 443 | var prefix = themes[i]['prefix']; |
|---|
| 444 | if (!prefix) prefix = pfx; |
|---|
| 445 | var name = prefix + ':' + themes[i]['name']; |
|---|
| 446 | if (names[themes[i]['name']]) { |
|---|
| 447 | names[themes[i]['name']]++; |
|---|
| 448 | name += "_" + names[themes[i]['name']]; |
|---|
| 449 | } else { |
|---|
| 450 | names[name] = 1; |
|---|
| 451 | } |
|---|
| 452 | themes[i]['name'] = name; |
|---|
| 453 | themes[i].tags[themes[i].tags.length] = "collection:"+prefix; |
|---|
| 454 | if (mixer.entries[name]) { |
|---|
| 455 | // merge in tags |
|---|
| 456 | var existing_tags = mixer.entries[name].tags; |
|---|
| 457 | if (existing_tags && existing_tags.length) { |
|---|
| 458 | var new_tag_names = {}; |
|---|
| 459 | for (var j in themes[i].tags) |
|---|
| 460 | new_tag_names[j] = true; |
|---|
| 461 | for (var j = 0; j < existing_tags.length; j++) { |
|---|
| 462 | if (!new_tag_names[existing_tags[j]]) { |
|---|
| 463 | themes[i].tags[themes[i].tags.length] = existing_tags[j]; |
|---|
| 464 | } |
|---|
| 465 | } |
|---|
| 466 | } |
|---|
| 467 | } else { |
|---|
| 468 | mixer.addEntries(themes[i]); |
|---|
| 469 | } |
|---|
| 470 | } |
|---|
| 471 | mixer.display(); |
|---|
| 472 | } |
|---|
| 473 | |
|---|
| 474 | function downloadStyles() { |
|---|
| 475 | var url; |
|---|
| 476 | if (url = prompt("<__trans phrase="Stylesheet or Repository URL" escape="js">")) { |
|---|
| 477 | getStyles(null, url); |
|---|
| 478 | } |
|---|
| 479 | } |
|---|
| 480 | |
|---|
| 481 | function getStyles(repo_id, url) { |
|---|
| 482 | var btn = getByID("find-button"); |
|---|
| 483 | TC.addClassName(btn, "hidden"); |
|---|
| 484 | TC.removeClassName(TC.elementOrId("loading-styles"), "hidden"); |
|---|
| 485 | |
|---|
| 486 | var client = TC.Client.call({ |
|---|
| 487 | 'load': function(c,s) { stylesLoaded(c,s,repo_id) }, |
|---|
| 488 | 'uri': '<mt:var name="script_url">', |
|---|
| 489 | 'method': 'POST', |
|---|
| 490 | 'arguments': { |
|---|
| 491 | '__mode': 'stylecatcher_js', |
|---|
| 492 | 'url': url |
|---|
| 493 | } |
|---|
| 494 | }); |
|---|
| 495 | } |
|---|
| 496 | /* ]]> */ |
|---|
| 497 | </script> |
|---|
| 498 | <!-- end stylecatcher script section --> |
|---|
| 499 | </mt:setvarblock> |
|---|
| 500 | <mt:include name="include/header.tmpl"> |
|---|
| 501 | |
|---|
| 502 | <div id="msg-block"> |
|---|
| 503 | </div> |
|---|
| 504 | |
|---|
| 505 | <div id="wrapper"> |
|---|
| 506 | |
|---|
| 507 | <!-- |
|---|
| 508 | <form method="get" action="<mt:var name="script_url">"> |
|---|
| 509 | <strong><__trans phrase="Stylesheet or Repository URL:"></strong> |
|---|
| 510 | <input class="repo-url" style="width:350px;" name="url" id="repo-url" value="<mt:var name="last_theme_url">" /> |
|---|
| 511 | <input type="button" id="find-button" value="<__trans phrase="Download Styles">" onclick="getStyles()" /> |
|---|
| 512 | <span class="hidden" id="loading-styles"> |
|---|
| 513 | <img src="<mt:var name="static_uri">images/indicator.white.gif" height="16" width="16" alt="" /> |
|---|
| 514 | <__trans phrase="Loading..."> |
|---|
| 515 | </span> |
|---|
| 516 | </form> |
|---|
| 517 | --> |
|---|
| 518 | |
|---|
| 519 | <p id="status-message" class="message" style="display: none"></p> |
|---|
| 520 | |
|---|
| 521 | <div id="template-picker"> |
|---|
| 522 | <div id="categories-wrapper"> |
|---|
| 523 | |
|---|
| 524 | <h2> |
|---|
| 525 | <span style="float:right"> |
|---|
| 526 | <a href="javascript:void(0)" id="find-button" onclick="return downloadStyles()" class="icon-right icon-create" title="Download new styles"> </a> |
|---|
| 527 | |
|---|
| 528 | <span class="hidden" id="loading-styles"> |
|---|
| 529 | <img src="<mt:var name="static_uri">images/indicator.white.gif" height="16" width="16" alt="" /> |
|---|
| 530 | </span> |
|---|
| 531 | |
|---|
| 532 | </span> |
|---|
| 533 | |
|---|
| 534 | <__trans phrase="Categories"> |
|---|
| 535 | </h2> |
|---|
| 536 | |
|---|
| 537 | <div class="scrollbox" id="categories"> |
|---|
| 538 | <div class="category" id="category-current" title="<__trans phrase="Current theme for your weblog">" style="display: none"><img src="<mt:var name="plugin_static_uri">images/top-rated.gif" alt="Your Current Style" /><span><__trans phrase="Current Style"></span> |
|---|
| 539 | </div> |
|---|
| 540 | <div class="category" id="category-my-designs" title="<__trans phrase="Locally saved themes">" style="display: none"><img src="<mt:var name="plugin_static_uri">images/my-designs.gif" alt="my-designs" /><span><__trans phrase="Saved Styles"></span> |
|---|
| 541 | </div> |
|---|
| 542 | <div class="category" id="category-mt-designs" title="<__trans phrase="Default Styles">" style="display: none"><img src="<mt:var name="plugin_static_uri">images/gear.gif" alt="mt-designs" /><span><__trans phrase="Default Styles"></span> |
|---|
| 543 | </div> |
|---|
| 544 | <div class="category" id="category-more" title="<__trans phrase="Single themes from the web">" style="display: none"><img src="<mt:var name="plugin_static_uri">images/featured.gif" alt="my-designs" /><span><__trans phrase="More Styles"></span> |
|---|
| 545 | </div> |
|---|
| 546 | <mt:loop name="style_library"> |
|---|
| 547 | <div class="category" id="category-repo-<mt:var name="key">" title="<mt:var name="description_label" escape="html">"><img src="<mt:var name="plugin_static_uri">images/featured.gif" alt="more-designs" /><span><mt:var name="label"></span> |
|---|
| 548 | </div> |
|---|
| 549 | </mt:loop> |
|---|
| 550 | </div> |
|---|
| 551 | </div> |
|---|
| 552 | |
|---|
| 553 | <div id="templates-wrapper"> |
|---|
| 554 | <h2 id="selected-category-title"><__trans phrase="Templates"></h2> |
|---|
| 555 | <div class="scrollbox" id="display-current" style="display: none;"></div> |
|---|
| 556 | <div class="scrollbox" id="display-my-designs" style="display: none;"></div> |
|---|
| 557 | <div class="scrollbox" id="display-mt-designs" style="display: none;"></div> |
|---|
| 558 | <div class="scrollbox" id="display-more" style="display: none;"></div> |
|---|
| 559 | <mt:loop name="style_library"> |
|---|
| 560 | <div class="scrollbox" id="display-repo-<mt:var name="key">" style="display: none;"></div> |
|---|
| 561 | </mt:loop> |
|---|
| 562 | </div> |
|---|
| 563 | |
|---|
| 564 | <div id="details-wrapper"> |
|---|
| 565 | <h2><__trans phrase="Selected Design"></h2> |
|---|
| 566 | <div id="display-details"> |
|---|
| 567 | <div id="select-design-controls" class="actions-bar"> |
|---|
| 568 | <form method="get" action=""> |
|---|
| 569 | <p> |
|---|
| 570 | <label for="layout-list"><__trans phrase="Layout">:</label> |
|---|
| 571 | <select id="layout-list" onchange="updateApplyButton()"> |
|---|
| 572 | </select> |
|---|
| 573 | </p> |
|---|
| 574 | |
|---|
| 575 | <span class="button-actions actions"> |
|---|
| 576 | <button |
|---|
| 577 | type="button" |
|---|
| 578 | accesskey="s" |
|---|
| 579 | id="apply-button" |
|---|
| 580 | title="<__trans phrase="Apply Design"> (s)" |
|---|
| 581 | onclick="applyDesign()" |
|---|
| 582 | class="primary-button"><__trans phrase="Apply Design"></button> |
|---|
| 583 | </span> |
|---|
| 584 | </form> |
|---|
| 585 | </div> |
|---|
| 586 | |
|---|
| 587 | <div id="display-details-content"></div> |
|---|
| 588 | |
|---|
| 589 | |
|---|
| 590 | </div> |
|---|
| 591 | |
|---|
| 592 | </div> |
|---|
| 593 | |
|---|
| 594 | <br class="clr" /> |
|---|
| 595 | |
|---|
| 596 | </div> |
|---|
| 597 | |
|---|
| 598 | <mt:include name="include/footer.tmpl"> |
|---|
