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