Merge branch 'dd_ordering' into zope-2.13
[Portfolio.git] / skins / photo_layout_macros.pt
1 <html xmlns:tal="http://xml.zope.org/namespaces/tal"
2 xmlns:metal="http://xml.zope.org/namespaces/metal"
3 xmlns:i18n="http://xml.zope.org/namespaces/i18n">
4 <head>
5 <title>Display macros for arbitrary set of photos</title>
6 <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
7 </head>
8 <body>
9 <div metal:define-macro="grid"
10 tal:define="slide_size portal_object/slide_size;
11 mayBeDropable exists:dropable;
12 dropable python:True if mayBeDropable and dropable else False;
13 mayBeOrderable exists:orderable;
14 orderable python:True if mayBeOrderable and orderable else False"
15 i18n:domain="portfolio">
16 <div id="lightbox" tal:attributes="class python:'lightbox photo-drop-target' if dropable else 'lightbox'">
17 <span metal:define-macro="thumbnails" tal:repeat="info infos" tal:omit-tag="">
18 <span tal:define="size info/thumbSize;
19 margin_top python:(slide_size - size['height']) / 2;
20 margin_left python:(slide_size - size['width']) / 2;
21 selected info/selected|nothing"
22 tal:attributes="class info/className;
23 name info/cmf_uid"
24 metal:define-macro="thumbnail"
25 draggable="true">
26 <a class="slide" tal:attributes="href info/href; title info/title">
27 <img tal:attributes="src info/thumbUrl;
28 alt info/title;
29 height size/height;
30 width size/width;
31 style string:margin-top:${margin_top}px;; margin-left:${margin_left}px;"/>
32 </a>
33 <tal:block tal:condition="python:features.has_key('select')">
34 <span class="button slide-select" tal:condition="not:selected">
35 <a name="add_to_selection" title="Add to selection"
36 tal:attributes="href python:features['select'](info['o'], False)"
37 i18n:attributes="title">
38 <img tal:attributes="src string:${portal_url}/transparent.gif"
39 height="17" width="12" alt="Add to selection"
40 i18n:attributes="alt"/>
41 </a>
42 </span>
43 <span class="button slide-deselect" tal:condition="selected">
44 <a name="remove_to_selection" title="Remove to selection"
45 tal:attributes="href python:features['select'](info['o'], True)"
46 i18n:attributes="title">
47 <img height="17" width="12" alt="Remove to selection"
48 tal:attributes="src string:${portal_url}/transparent.gif"
49 i18n:attributes="alt"/>
50 </a>
51 </span>
52 </tal:block>
53 <span class="button slide-cart" tal:condition="python:info.get('buyable')">
54 <a name="add_to_cart" title="Add to cart"
55 tal:attributes="href python:features['cart'](info['o'])"
56 i18n:attributes="title">
57 <img height="17" width="20" alt="Add to cart"
58 tal:attributes="src string:${portal_url}/transparent.gif"
59 i18n:attributes="alt"/>
60 </a>
61 </span>
62 <span class="button slide-del" tal:condition="python:features.has_key('del')">
63 <a title="Delete"
64 tal:attributes="href python:features['del'](info['o'])"
65 i18n:attributes="title">
66 <img height="19" width="18" alt="Delete"
67 tal:attributes="src string:${portal_url}/transparent.gif"
68 i18n:attributes="alt"/>
69 </a>
70 </span>
71 <span class="button cb" tal:condition="features/checkbox|nothing">
72 <input type="checkbox" name="uids:list"
73 tal:attributes="value info/cmf_uid"/>
74 </span>
75 <tal:block tal:condition="features/hideAnonymous|nothing">
76 <span class="button slide-hide"
77 tal:define="mtop python:margin_top + 4;
78 mleft python:margin_left + size['width'] - 17"
79 tal:condition="not:info/hiddenForAnonymous"
80 tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
81 <a title="Hide for anonymous" name="hide_for_anonymous"
82 tal:attributes="href string:${info/href}/hideForAnonymous"
83 i18n:attributes="title">
84 <img height="15" width="16" alt="Hide for anonymous"
85 tal:attributes="src string:${portal_url}/transparent.gif"
86 i18n:attributes="alt"/>
87 </a>
88 </span>
89 <span class="button slide-show"
90 tal:define="mtop python:margin_top + 4;
91 mleft python:margin_left + size['width'] - 17"
92 tal:condition="info/hiddenForAnonymous"
93 tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
94 <a title="Show for anonymous" name="show_for_anonymous"
95 tal:attributes="href string:${info/href}/resetHide"
96 i18n:attributes="title">
97 <img height="15" width="16" alt="Show for anonymous"
98 tal:attributes="src string:${portal_url}/transparent.gif"
99 i18n:attributes="alt"/>
100 </a>
101 </span>
102 </tal:block>
103 </span>
104 </span>
105 </div>
106 <br clear="all"/>
107 <noscript>
108 <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
109 </noscript>
110 <script type="text/javascript" tal:condition="not:dropable"
111 tal:content="structure python:'''
112 new Lightbox(document.getElementById('lightbox'),
113 document.getElementById('lightbox_toolbar'),
114 %(complete)s,
115 '%(container_type)s');
116 ''' % {'complete' : 'true' if not batch.next else 'false',
117 'container_type' : options.get('container_type', 'portfolio')}">
118 </script>
119 <script type="text/javascript"
120 tal:condition="dropable"
121 tal:content="structure python:'''
122 (function(){
123 var lb = document.getElementById('lightbox');
124 new Lightbox(lb,
125 document.getElementById('lightbox_toolbar'),
126 %(complete)s,
127 '%(container_type)s',
128 %(orderable)s);
129 var uploadUrl = '%(putUrl)s';
130 var options = {'slideSize' : %(slideSize)d,
131 'thumbnailSize' : %(thumbnailSize)d};
132 new DDImageUploader(lb, uploadUrl, options);
133 })();
134 ''' % {'putUrl' : '%s/put_upload' % here.absolute_url(),
135 'slideSize' : portal_object.slide_size,
136 'thumbnailSize' : portal_object.thumb_size,
137 'complete': 'true' if not batch.next else 'false',
138 'container_type' : options.get('container_type', 'portfolio'),
139 'orderable' : 'true' if orderable else 'false'}">
140 </script>
141 </div>
142 <div metal:define-macro="film_bar" tal:omit-tag="">
143 <div id="film_bar">
144 <table cellspacing="0">
145 <tr tal:define="slide_size python:portal_object.thumb_size/2 + 10;
146 blank_img string:$portal_url/transparent.gif">
147 <td tal:repeat="info contextInfos/infos">
148 <a tal:attributes="href info/href;
149 title info/title;
150 class info/className;
151 portfolio:position info/index;">
152 <img tal:define="size info/thumbSize;
153 margin_top python:(slide_size - size['height']) / 2"
154 tal:attributes="src python:info['src'] if info['displayed'] else blank_img;
155 alt info/title;
156 height size/height;
157 width size/width;
158 style string:margin-top : ${margin_top}px ;"/>
159 </a>
160 </td>
161 </tr>
162 </table>
163 </div>
164 <div class="jsslider">
165 <span id="slider"/>
166 </div>
167 <script type="text/javascript"
168 tal:content="python:'''
169 var startSlideShow, slideShowNext, stopSlideShow;
170 (function(){
171 var ctxInfos = {'filmLength': %(filmLength)s,
172 'center': %(center)s,
173 'slideSize': %(slideSize)d,
174 'ctxUrlTranslation' : [%(reBaseCtxUrl)s, %(canonicalUrl)s]};
175 var fs = new FilmSlider(document.getElementById('film_bar'),
176 document.getElementById('slider'),
177 ctxInfos,
178 document.getElementById('medium_image').getElementsByTagName('img')[0],
179 document.getElementById('image_toolbar'),
180 document.getElementById('Breadcrumbs'));
181 startSlideShow = function() {return fs.startSlideShow();};
182 stopSlideShow = function() {return fs.stopSlideShow();};
183 slideShowPrevious = function() {return fs.slideShowPrevious();};
184 slideShowNext = function() {return fs.slideShowNext();};
185 slideShowImageLoaded = function() {return fs.slideShowImageLoaded();};
186 })();
187 ''' % {'filmLength' : len(contextInfos['infos']),
188 'center' : index,
189 'slideSize' : portal_object.thumb_size/2 + 11,
190 'reBaseCtxUrl' : contextInfos['reBaseCtxUrl'],
191 'canonicalUrl' : contextInfos['canonicalUrl']}">
192 </script>
193 </div>
194 </body>
195 </html>