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>