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