root/branches/release-29/plugins/StyleCatcher/tmpl/view.tmpl @ 1309

Revision 1309, 21.8 kB (checked in by ddavis, 23 months ago)

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