root/trunk/StyleCatcher/plugins/StyleCatcher/tmpl/view.tmpl @ 68

Revision 68, 20.3 kB (checked in by jallen, 3 years ago)

Updated StyleCatcher? to v1.1-dev to sync up with changes made to create the bundled version in Movable Type 3.3
Line 
1<TMPL_INCLUDE NAME="header.tmpl">
2
3<!-- javascripts for this page -->
4
5        <script type="text/javascript">
6            var repoImg = "<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/mixed-media.gif";
7            var selected;
8            var selected_blog_id;
9            var mixer;         
10            var matchCategory = /^category-/;
11            var categories = [];
12            var firstCategoryId;
13            var repo_urls = {};
14            var repos = [];
15
16            TC.attachLoadEvent( init );
17
18            function init() {
19                initMixer();
20                showDetails( false );
21
22<TMPL_IF NAME=THEMES_JSON>
23                var data = <TMPL_VAR NAME=THEMES_JSON>;
24                if (data.categories) {
25                    for (var i = 0; i < data.categories.length; i++)
26                        enableCategory(data.categories[i]);
27                }
28</TMPL_IF>
29
30                initCategories();
31                chooseCategory( firstCategoryId );
32
33                if (data.themes)
34                    loadThemes(data.themes, 'local');
35
36                <TMPL_IF NAME=AUTO_FETCH>
37                getStyles();
38                </TMPL_IF>
39            }
40
41            function enableCategory(cat) {
42                mixer.addTagIndexDisplay('display-'+cat, 1000, 'collection:'+cat);
43                var el = document.getElementById('category-' + cat);
44                if (el)
45                    el.style.display = 'block';
46            }
47
48            function initMixer()
49            {
50                mixer = new TC.Mixer();
51                // initialize mixer object
52                mixer.addSelectedDisplay( "display-details" );
53            }
54
55            function initCategories()
56            {
57                var element = document.getElementById( "categories" );
58                if( !element )
59                    return;
60               
61                categories.length = 0;
62                var elements = element.childNodes;
63                for( var i = 0; i < elements.length; i++ )
64                {
65                    element = elements[ i ];
66                    var categoryId = element.id;
67                    if( !categoryId )
68                        continue;
69                   
70                    if( !firstCategoryId ) {
71                        if (element.style.display != 'none') {
72                            firstCategoryId = categoryId;
73                        }
74                    }
75                   
76                    var displayId = categoryId.replace( matchCategory, "display-" );
77                    var display = document.getElementById( displayId );
78                   
79                    element.onclick = chooseCategoryClosure( categoryId );
80                    TC.removeClassName( element, "category-selected" );
81                   
82                    categories[ categoryId ] =
83                    {
84                        "element" : element,
85                        "display" : display
86                    };
87                }
88            }
89
90            function chooseCategoryClosure( categoryId )
91            {
92                var func = function() { return chooseCategory( categoryId ); };
93                return func;
94            }
95
96            function chooseCategory( categoryId )
97            {
98                var titleElement = document.getElementById( "selected-category-title" );
99               
100                for( var id in categories )
101                {
102                    var element = categories[ id ].element;
103                    var display = categories[ id ].display;
104
105                    if( id == categoryId )
106                    {
107                        TC.addClassName( element, "category-selected" );
108                        display.style.display = "block";
109                       
110                        if( titleElement )
111                            titleElement.innerHTML = trans(element.firstChild.nextSibling.innerHTML);
112                        if (element.title.match(/^https?:/)) {
113                            var url_element = getByID("repo-url");
114                            url_element.value = element.title;
115                        }
116                    }
117                    else
118                    {
119                        TC.removeClassName( element, "category-selected" );
120                        display.style.display = "none";
121                    }
122                }
123               
124                mixer.display();
125            }
126
127            function showDetails( show )
128            {
129                var showElement = document.getElementById( "show-details" );
130                var hideElement = document.getElementById( "hide-details" );
131                var detailsElement = document.getElementById( "details-wrapper" );
132                var templatesElement = document.getElementById( "templates-wrapper" );
133               
134                if( show )
135                {
136                    showElement.style.display = "none";
137                    hideElement.style.display = "block";
138                    detailsElement.style.display = "block";
139                    TC.removeClassName( templatesElement, "templates-wrapper-wide" );
140                    TC.addClassName( templatesElement, "templates-wrapper-narrow" );
141                }
142                else
143                {
144                    showElement.style.display = "block";
145                    hideElement.style.display = "none";
146                    detailsElement.style.display = "none";
147                    TC.addClassName( templatesElement, "templates-wrapper-wide" );
148                    TC.removeClassName( templatesElement, "templates-wrapper-narrow" );
149                }
150               
151                return false;
152            }
153
154            function applyDesign() {
155                // disable apply button; change text to "Applying..."
156<TMPL_IF NAME=SINGLE_BLOG>
157                var blog_id = '<TMPL_VAR NAME=SINGLE_BLOG>';
158<TMPL_ELSE>
159                var sel = getByID("select-blog");
160                var blog_id = sel.options[sel.selectedIndex].value;
161                if (!blog_id) {
162                    alert("<MT_TRANS phrase="Please select a weblog to apply this theme.">");
163                    return;
164                }
165</TMPL_IF>
166                var btn = getByID("apply-button");
167                if (!btn) return;
168
169                selected = mixer.name;
170                if (!selected) {
171                    alert("<MT_TRANS phrase="Please click on a theme before attempting to apply a new design to your blog.">");
172                    return;
173                }
174                var url = mixer.entries[mixer.name].url;
175
176                btn.disabled = true;
177                btn.value = "<MT_TRANS phrase="Applying...">";
178                selected_blog_id = blog_id;
179                var client = TC.Client.call({
180                    'load': designApplied,
181                    'uri': '<TMPL_VAR NAME=SCRIPT_URL>',
182                    'method': 'POST',
183                    'arguments': {
184                        '__mode': 'apply',
185                        'url': url,
186                        'magic_token': '<TMPL_VAR NAME=MAGIC_TOKEN>',
187                        'blog_id': blog_id
188                    }
189                });
190            }
191
192            function designApplied(client, result) {
193                var btn = getByID("apply-button");
194                var entry = mixer.entries[selected];
195                if (entry) {
196                    // make this the new 'current' theme
197                    var found = false;
198                    for (var i = 0; i < entry.tags.length; i++) {
199                        if (entry.tags[i] == 'collection:current')
200                            found = true;
201                    }
202                    if (!found)
203                        entry.tags[entry.tags.length] = 'collection:current';
204                    /* we need to add the blog id of the blog that was
205                       applied to for this entry */
206
207                    found = false;
208                    if (entry.blogs && entry.blogs.length) {
209                        for (var i = 0; i < entry.blogs.length; i++) {
210                            if (entry.blogs[i] == selected_blog_id)
211                                found = true;
212                        }
213                    }
214                    if (!found)
215                        entry.blogs[entry.blogs.length] = selected_blog_id;
216
217                    /* loop through all the 'current' themes and strip
218                       this blog id from any that don't match the
219                       selected theme */
220                    for (var i in mixer.entries) {
221                        if (i == selected)
222                            continue;
223                        for (var j = 0; j < mixer.entries[i].blogs.length; j++) {
224                            if (mixer.entries[i].blogs[j] == selected_blog_id) {
225                                mixer.entries[i].blogs.splice(j,1);
226                                break;
227                            }
228                        }
229                        if (mixer.entries[i].blogs.length == 0) {
230                            // no longer 'current'
231                            for (var j = 0; j < mixer.entries[i].tags.length; j++) {
232                                if (mixer.entries[i].tags[j] == 'collection:current') {
233                                    mixer.entries[i].tags.splice(j,1);
234                                    break;
235                                }
236                            }
237                        }
238                    }
239                    mixer.createTagIndexes();
240                    mixer.remix();
241                }
242                chooseCategory('category-current');
243                if (!btn) return;
244                btn.value = "<MT_TRANS phrase="Choose this Design">";
245                btn.disabled = false;
246                alert(result);
247            }
248
249            function stylesLoaded(client, styles) {
250                var btn = getByID("find-button");
251                if (!btn) return;
252                var repo_num;
253                var cat;
254
255                var data;
256                try {
257                    data = eval('('+styles+')');
258                } catch (e) {
259                    alert(trans("Error loading themes! -- [_1]", styles));
260                    btn.value = "<MT_TRANS phrase="Find Style">";
261                    btn.disabled = false;
262                    return;
263                }
264                if (data.repo) {
265                    url = data.repo['url'];
266                    if (repo_urls[url] != undefined) {
267                        repo_num = repo_urls[url];
268                        cat = 'repo_' + repo_num;
269                    } else {
270                        repo_num = repos.length;
271                        repo_urls[url] = repo_num;
272
273                        // new repo -- create new
274                        // category for it
275                        cat = 'repo_' + repo_num;
276                        createCategory(cat, data.repo['display_name'], url);
277                    }
278                    repos[repo_num] = url;
279                }
280                if (data.auto) {
281                    cat = 'more';
282                    enableCategory(cat);
283                }
284                chooseCategory('category-' + cat);
285                if (data.themes)
286                    loadThemes(data.themes, cat);
287
288                btn.value = "<MT_TRANS phrase="Find Style">";
289                btn.disabled = false;
290            }
291
292            function createCategory(cat_name, cat_title, url) {
293                // things to create...
294                //   #1: new scrollbox under id 'categories'
295                /*
296                        <div class="category" id="category-repo" title="Remote Themes" style="display: none">
297                            <img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/mixed-media.gif" alt="" /><span id="repo-name">Remote Themes</span>
298                        </div>
299                */
300                var cats = getByID("categories");
301
302                element = document.createElement( "div" );
303                element.title = url;
304                element.className = "category";
305                element.id = "category-" + cat_name;
306
307                var img = document.createElement( "img" );
308                img.src = repoImg;
309                img.alt = "";
310                element.appendChild( img );
311
312                var spn = document.createElement( "span" );
313                spn.appendChild( document.createTextNode( cat_title ) );
314                element.appendChild( spn );
315
316                cats.appendChild( element );
317
318                //   #2: new div under id templates-wrapper
319                /*
320                    <div class="scrollbox" id="display-repo" style="display: none;"></div>
321                */
322
323                var wrapper = getByID("templates-wrapper");
324
325                var div = document.createElement( "div" );
326                div.className = "scrollbox";
327                div.id = "display-" + cat_name;
328                wrapper.appendChild(div);
329                element.onclick = chooseCategoryClosure( element.id );
330
331                categories[ element.id ] =
332                {
333                    "element" : element,
334                    "display" : div
335                };
336
337                enableCategory(cat_name);
338            }
339
340            function loadThemes(themes, prefix) {
341                var names = {};
342                for (var i = 0; i < themes.length; i++) {
343                    var name = prefix + '-' + themes[i]['name'];
344                    if (names[themes[i]['name']]) {
345                        names[themes[i]['name']]++;
346                        name += "_" + names[themes[i]['name']];
347                    } else {
348                        names[name] = 1;
349                    }
350                    themes[i]['name'] = name;
351                    themes[i].tags[themes[i].tags.length] = "collection:"+prefix;
352                    if (mixer.entries[name]) {
353                        // merge in tags
354                        var existing_tags = mixer.entries[name].tags;
355                        if (existing_tags && existing_tags.length) {
356                            var new_tag_names = {};
357                            for (var j in themes[i].tags)
358                                new_tag_names[j] = true;
359                            for (var j = 0; j < existing_tags.length; j++) {
360                                if (!new_tag_names[existing_tags[j]]) {
361                                    themes[i].tags[themes[i].tags.length] = existing_tags[j];
362                                }
363                            }
364                        }
365                    } else {
366                        mixer.addEntries(themes[i]);
367                    }
368                }
369                mixer.display();
370            }
371            function getStyles() {
372                var btn = getByID("find-button");
373                if (!btn) return;
374                btn.disabled = true;
375                btn.value = "<MT_TRANS phrase="Loading...">";
376
377                var el = getByID('repo-url');
378                if (!el) return;
379                var url = el.value;
380                var client = TC.Client.call({
381                    'load': stylesLoaded,
382                    'uri': '<TMPL_VAR NAME=SCRIPT_URL>',
383                    'method': 'POST',
384                    'arguments': {
385                        '__mode': 'js',
386                        'url': url
387                    }
388                });
389            }
390        </script>
391
392<!-- end script section -->
393
394        <div id="wrapper">
395
396<TMPL_IF NAME=BLOG_LOOP>
397
398         <p><MT_TRANS phrase="StyleCatcher lets you easily browse through styles and then apply them to your blog in just a few clicks. To find out more about Movable Type styles, or for new sources for styles, visit the <a href='http://www.sixapart.com/movabletype/styles'>Movable Type styles</a> page.">
399         <TMPL_IF NAME=CONFIG_LINK><MT_TRANS phrase=" To change the location of your local theme repository, <a href='<TMPL_VAR NAME=CONFIG_LINK>'> click here."></a></TMPL_IF></p>
400
401           <script type="text/javascript">
402           if(navigator.userAgent.indexOf("Firefox")!=-1){
403           var versionindex=navigator.userAgent.indexOf("Firefox")+8
404              document.writeln("<p><MT_TRANS phrase="Install <a href='http://greasemonkey.mozdev.org/'>GreaseMonkey</a>"> <a href='<TMPL_VAR NAME=SCRIPT_URL>?__mode=gm<TMPL_IF NAME=BLOG_ID>&amp;blog_id=<TMPL_VAR NAME=BLOG_ID></TMPL_IF>;file=stylecatcher.user.js'><MT_TRANS phrase="StyleCatcher user script."></a></p>");
405           }
406           </script>
407
408           <form method="get" action="<TMPL_VAR NAME=SCRIPT_URL>">
409              <strong><MT_TRANS phrase="Theme or Repository URL:"></strong>
410              <input class="repo-url" style="width:350px;" name="url" id="repo-url" value="<TMPL_VAR NAME=LAST_THEME_URL>" />
411              <input type="button" id="find-button" value="<MT_TRANS phrase="Find Styles">" onclick="getStyles()" />
412           </form>
413            <p><strong><MT_TRANS phrase="NOTE:"></strong> <MT_TRANS phrase="It will take a moment for themes to populate once you click 'Find Style'."></p>
414            <p id="status-message" class="message" style="display: none"></p>
415           
416            <div id="template-picker">
417                <div id="categories-wrapper">
418                    <h2><MT_TRANS phrase="Categories"></h2>
419                    <div class="scrollbox" id="categories">
420<TMPL_IF NAME=SINGLE_BLOG>
421                        <div class="category" id="category-current" title="<MT_TRANS phrase="Current theme for your weblog">" style="display: none"><img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/top-rated.gif" alt="Your Current Theme" /><span><MT_TRANS phrase="Current Theme"></span>
422<TMPL_ELSE>
423                        <div class="category" id="category-current" title="<MT_TRANS phrase="Current themes for your weblogs">" style="display: none"><img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/top-rated.gif" alt="Your Current Themes" /><span><MT_TRANS phrase="Current Themes"></span>
424</TMPL_IF>
425                        </div>
426                        <div class="category" id="category-my-designs" title="<MT_TRANS phrase="Locally saved themes">" style="display: none"><img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/my-designs.gif" alt="my-designs" /><span><MT_TRANS phrase="Saved Themes"></span>
427                        </div>
428                        <div class="category" id="category-more" title="<MT_TRANS phrase="Single themes from the web">" style="display: none"><img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/featured.gif" alt="my-designs" /><span><MT_TRANS phrase="More Themes"></span>
429                        </div>
430                    </div>
431                </div>
432
433                <div id="templates-wrapper">
434                    <h2 id="selected-category-title"><MT_TRANS phrase="Templates"></h2>
435                    <div class="scrollbox" id="display-current" style="display: none;"></div>
436                    <div class="scrollbox" id="display-my-designs" style="display: none;"></div>
437                    <div class="scrollbox" id="display-more" style="display: none;"></div>
438                </div>
439
440                <div id="details-wrapper" style="display: none">
441                    <h2><MT_TRANS phrase="Details"></h2>
442                    <div id="display-details">
443                        <div class="tc-mixer-entry"></div>
444                    </div>
445                </div>
446
447                <a id="show-details" href="javascript:void(0);" onclick="return showDetails( true );" style="display: none"><MT_TRANS phrase="Show Details"></a>
448                <a id="hide-details" href="javascript:void(0);" onclick="return showDetails( false );" style="display: none"><MT_TRANS phrase="Hide Details"></a>
449            </div>
450           
451            <br class="clr" />
452
453            <div id="select-design-controls">
454<TMPL_UNLESS NAME=SINGLE_BLOG>
455            <select name="blog_id" id="select-blog">
456            <option value=""><MT_TRANS phrase="Select a Weblog..."></option>
457            <TMPL_LOOP NAME=BLOG_LOOP>
458            <option value="<TMPL_VAR NAME=BLOG_ID>"><TMPL_VAR NAME=BLOG_NAME></option>
459            </TMPL_LOOP>
460            </select>
461</TMPL_UNLESS>
462
463            <input type="button" name="choose" id="apply-button" onclick="applyDesign()" value="<MT_TRANS phrase="Apply Selected Design">" />
464            </div>
465            <br class="clr" />
466        </div>
467
468<TMPL_ELSE>
469
470<p class="message">
471<MT_TRANS phrase="You don't appear to have any weblogs with a 'styles-site.css' template that you have rights to edit. Please check your weblog(s) for this template.">
472</p>
473
474</TMPL_IF>
475
476<TMPL_INCLUDE NAME="footer.tmpl">
Note: See TracBrowser for help on using the browser.