source: trunk/themes/default/template/index.tpl @ 13844

Last change on this file since 13844 was 13844, checked in by mistic100, 12 years ago

feature 2588: use jQuery to toggle derivatives and sort boxes + prevent boxes to overflow the page
  • Property svn:eol-style set to LF
File size: 8.1 KB
Line 
1{$MENUBAR}
2{if !empty($PLUGIN_INDEX_CONTENT_BEFORE)}{$PLUGIN_INDEX_CONTENT_BEFORE}{/if}
3<div id="content" class="content{if isset($MENUBAR)} contentWithMenu{/if}">
4<div class="titrePage{if isset($chronology.TITLE)} calendarTitleBar{/if}">
5        <ul class="categoryActions">
6{if !empty($image_orders)}
7                <li>{strip}<a id="sortOrderLink" title="{'Sort order'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
8                        <span class="pwg-icon pwg-icon-sort">&nbsp;</span><span class="pwg-button-text">{'Sort order'|@translate}</span>
9                </a>
10                <div id="sortOrderBox" class="switchBox" style="display:none">
11                        <div class="switchBoxTitle">{'Sort order'|@translate}</div>
12                        {foreach from=$image_orders item=image_order name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
13                        {if $image_order.SELECTED}
14                        <span>&#x2714; </span>{$image_order.DISPLAY}
15                        {else}
16                        <span style="visibility:hidden">&#x2714; </span><a href="{$image_order.URL}" rel="nofollow">{$image_order.DISPLAY}</a>
17                        {/if}
18                        {/foreach}
19                </div>
20                {footer_script}{literal}
21$(document).ready(function() {
22  $("#sortOrderBox").css({'top':0,'left':0});
23  var sortOrderBox_width = $("#sortOrderBox").outerWidth(true);
24  var sortOrderBox_height = $("#sortOrderBox").outerHeight(true);
25 
26  $("#sortOrderLink").click(function() {
27    $("#sortOrderBox").toggle();
28   
29    if ($(this).offset().left + sortOrderBox_width > $(window).width()) {
30      $("#sortOrderBox").css("left", $(window).width() - sortOrderBox_width - 5);
31    } else {
32      $("#sortOrderBox").css("left", $(this).offset().left);
33    }
34    $("#sortOrderBox").css("top", $(this).offset().top + $(this).outerHeight(true));
35  });
36 
37  $("#sortOrderBox").bind("mouseleave", function() {
38    $(this).hide();
39  });
40});
41                {/literal}{/footer_script}
42                {/strip}</li>
43{/if}
44
45{if !empty($image_derivatives)}
46                <li>{strip}<a id="derivativeSwitchLink" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
47                        <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span>
48                </a>
49                <div id="derivativeSwitchBox" class="switchBox" style="display:none">
50                        <div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
51                        {foreach from=$image_derivatives item=image_derivative name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
52                        {if $image_derivative.SELECTED}
53                        <span>&#x2714; </span>{$image_derivative.DISPLAY}
54                        {else}
55                        <span style="visibility:hidden">&#x2714; </span><a href="{$image_derivative.URL}" class="switchUnselected" rel="nofollow">{$image_derivative.DISPLAY}</a>
56                        {/if}
57                        {/foreach}
58                </div>
59                {footer_script}{literal}
60$(document).ready(function() {
61  $("#derivativeSwitchBox").css({'top':0,'left':0});
62  var derivativeSwitchBox_width = $("#derivativeSwitchBox").outerWidth(true);
63  var derivativeSwitchBox_height = $("#derivativeSwitchBox").outerHeight(true);
64 
65  $("#derivativeSwitchLink").click(function() {
66    $("#derivativeSwitchBox").toggle();
67   
68    if ($(this).offset().left + derivativeSwitchBox_width > $(window).width()) {
69      $("#derivativeSwitchBox").css("left", $(window).width() - derivativeSwitchBox_width - 5);
70    } else {
71      $("#derivativeSwitchBox").css("left", $(this).offset().left);
72    }
73    $("#derivativeSwitchBox").css("top", $(this).offset().top + $(this).outerHeight(true));
74  });
75 
76  $("#derivativeSwitchBox").bind("mouseleave", function() {
77    $(this).hide();
78  });
79});
80                {/literal}{/footer_script}
81                {/strip}</li>
82{/if}
83
84{if isset($favorite)}
85                <li><a href="{$favorite.U_FAVORITE}" title="{'delete all photos from your favorites'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
86                        <span class="pwg-icon pwg-icon-favorite-del">&nbsp;</span><span class="pwg-button-text">{'delete all photos from your favorites'|@translate}</span>
87                </a></li>
88{/if}
89{if isset($U_CADDIE)}
90                <li><a href="{$U_CADDIE}" title="{'Add to caddie'|@translate}" class="pwg-state-default pwg-button">
91                        <span class="pwg-icon pwg-icon-caddie-add">&nbsp;</span><span class="pwg-button-text">{'Caddie'|@translate}</span>
92                </a></li>
93{/if}
94{if isset($U_EDIT)}
95                <li><a href="{$U_EDIT}" title="{'Edit album'|@translate}" class="pwg-state-default pwg-button">
96                        <span class="pwg-icon pwg-icon-category-edit">&nbsp;</span><span class="pwg-button-text">{'Edit'|@translate}</span>
97                </a></li>
98{/if}
99{if isset($U_SEARCH_RULES)}
100                {combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
101                <li><a href="{$U_SEARCH_RULES}" onclick="popuphelp(this.href); return false;" title="{'Search rules'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
102                        <span class="pwg-icon pwg-icon-help">&nbsp;</span><span class="pwg-button-text">(?)</span>
103                </a></li>
104{/if}
105{if isset($U_SLIDESHOW)}
106                <li>{strip}<a href="{$U_SLIDESHOW}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
107                        <span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'slideshow'|@translate}</span>
108                </a>{/strip}</li>
109{/if}
110{if isset($U_MODE_FLAT)}
111                <li>{strip}<a href="{$U_MODE_FLAT}" title="{'display all photos in all sub-albums'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
112                        <span class="pwg-icon pwg-icon-category-view-flat">&nbsp;</span><span class="pwg-button-text">{'display all photos in all sub-albums'|@translate}</span>
113                </a>{/strip}</li>
114{/if}
115{if isset($U_MODE_NORMAL)}
116                <li>{strip}<a href="{$U_MODE_NORMAL}" title="{'return to normal view mode'|@translate}" class="pwg-state-default pwg-button">
117                        <span class="pwg-icon pwg-icon-category-view-normal">&nbsp;</span><span class="pwg-button-text">{'return to normal view mode'|@translate}</span>
118                </a>{/strip}</li>
119{/if}
120{if isset($U_MODE_POSTED)}
121                <li>{strip}<a href="{$U_MODE_POSTED}" title="{'display a calendar by posted date'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
122                        <span class="pwg-icon pwg-icon-calendar">&nbsp;</span><span class="pwg-button-text">{'Calendar'|@translate}</span>
123                </a>{/strip}</li>
124{/if}
125{if isset($U_MODE_CREATED)}
126                <li>{strip}<a href="{$U_MODE_CREATED}" title="{'display a calendar by creation date'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
127                        <span class="pwg-icon pwg-icon-camera-calendar">&nbsp;</span><span class="pwg-button-text">{'Calendar'|@translate}</span>
128                </a>{/strip}</li>
129{/if}
130{if !empty($PLUGIN_INDEX_ACTIONS)}{$PLUGIN_INDEX_ACTIONS}{/if}
131        </ul>
132
133<h2>{$TITLE}</h2>
134
135{if isset($chronology_views)}
136<div class="calendarViews">{'View'|@translate}:
137        <select onchange="document.location = this.options[this.selectedIndex].value;">
138                {foreach from=$chronology_views item=view}
139                <option value="{$view.VALUE}"{if $view.SELECTED} selected="selected"{/if}>{$view.CONTENT}</option>
140                {/foreach}
141        </select>
142</div>
143{/if}
144
145{if isset($chronology.TITLE)}
146<h2 class="calendarTitle">{$chronology.TITLE}</h2>
147{/if}
148
149</div>{* <!-- titrePage --> *}
150
151{if isset($errors) or not empty($infos)}
152{include file='infos_errors.tpl'}
153{/if}
154{if !empty($PLUGIN_INDEX_CONTENT_BEGIN)}{$PLUGIN_INDEX_CONTENT_BEGIN}{/if}
155
156{if !empty($category_search_results)}
157<div style="font-size:16px;margin:10px 16px">{'Album results for'|@translate} <strong>{$QUERY_SEARCH}</strong> :
158        <em><strong>
159        {foreach from=$category_search_results item=res name=res_loop}
160        {if !$smarty.foreach.res_loop.first} &mdash; {/if}
161        {$res}
162        {/foreach}
163        </strong></em>
164</div>
165{/if}
166
167{if !empty($tag_search_results)}
168<div style="font-size:16px;margin:10px 16px">{'Tag results for'|@translate} <strong>{$QUERY_SEARCH}</strong> :
169        <em><strong>
170        {foreach from=$tag_search_results item=res name=res_loop}
171        {if !$smarty.foreach.res_loop.first} &mdash; {/if}
172        {$res}
173        {/foreach}
174        </strong></em>
175</div>
176{/if}
177
178{if isset($FILE_CHRONOLOGY_VIEW)}
179{include file=$FILE_CHRONOLOGY_VIEW}
180{/if}
181
182{if !empty($CONTENT_DESCRIPTION)}
183<div class="additional_info">
184        {$CONTENT_DESCRIPTION}
185</div>
186{/if}
187
188{if !empty($CATEGORIES)}{$CATEGORIES}{/if}
189{if !empty($THUMBNAILS)}
190<ul class="thumbnails" id="thumbnails">
191{$THUMBNAILS}
192</ul>
193{/if}
194
195{if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
196
197{if !empty($PLUGIN_INDEX_CONTENT_END)}{$PLUGIN_INDEX_CONTENT_END}{/if}
198</div>{* <!-- content --> *}
199{if !empty($PLUGIN_INDEX_CONTENT_AFTER)}{$PLUGIN_INDEX_CONTENT_AFTER}{/if}
Note: See TracBrowser for help on using the repository browser.