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 metal:define-macro="thumbnails" 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>