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