projects / Portfolio.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Merge branch 'dd_ordering' into zope-2.13
[Portfolio.git] / skins / photo_layout_macros.pt
diff --git a/skins/photo_layout_macros.pt b/skins/photo_layout_macros.pt
index 48b8040..f68f193 100644 (file)
--- a/skins/photo_layout_macros.pt
+++ b/skins/photo_layout_macros.pt
@@ -1,83 +1,102 @@
-<html xmlns:tal="http://xml.zope.org/namespaces/tal" xmlns:metal="http://xml.zope.org/namespaces/metal">
+<html xmlns:tal="http://xml.zope.org/namespaces/tal"
+      xmlns:metal="http://xml.zope.org/namespaces/metal"
+      xmlns:i18n="http://xml.zope.org/namespaces/i18n">
   <head>
     <title>Display macros for arbitrary set of photos</title>
     <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
   </head>
   <body>
     <div metal:define-macro="grid"
   <head>
     <title>Display macros for arbitrary set of photos</title>
     <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
   </head>
   <body>
     <div metal:define-macro="grid"
-         tal:define="slide_size portal_object/slide_size;"
+         tal:define="slide_size portal_object/slide_size;
+                     mayBeDropable exists:dropable;
+                     dropable python:True if mayBeDropable and dropable else False;
+                     mayBeOrderable exists:orderable;
+                     orderable python:True if mayBeOrderable and orderable else False"
          i18n:domain="portfolio">
          i18n:domain="portfolio">
-      <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
-      <div id="lightbox"
-           tal:define="mayBeDropable exists:dropable;
-                       dropable python:True if mayBeDropable and dropable else False"
-           tal:attributes="class python:'lightbox photo-drop-target' if dropable else 'lightbox'">
-        <span tal:repeat="info infos" tal:omit-tag="">
+      <div id="lightbox" tal:attributes="class python:'lightbox photo-drop-target' if dropable else 'lightbox'">
+        <span metal:define-macro="thumbnails" tal:repeat="info infos" tal:omit-tag="">
           <span tal:define="size info/thumbSize;
                             margin_top python:(slide_size - size['height']) / 2;
                             margin_left python:(slide_size - size['width']) / 2;
                             selected info/selected|nothing"
                 tal:attributes="class info/className;
                                 name info/cmf_uid"
           <span tal:define="size info/thumbSize;
                             margin_top python:(slide_size - size['height']) / 2;
                             margin_left python:(slide_size - size['width']) / 2;
                             selected info/selected|nothing"
                 tal:attributes="class info/className;
                                 name info/cmf_uid"
-                metal:define-macro="thumbnail">
+                metal:define-macro="thumbnail"
+                draggable="true">
             <a class="slide" tal:attributes="href info/href; title info/title">
             <a class="slide" tal:attributes="href info/href; title info/title">
-              <img border="0" tal:attributes="src info/thumbUrl;
-                                 alt info/title;
-                                 height size/height;
-                                 width size/width;
-                                 style string:margin-top : ${margin_top}px ;;margin-left:${margin_left}px;"/>
+              <img tal:attributes="src info/thumbUrl;
+                                   alt info/title;
+                                   height size/height;
+                                   width size/width;
+                                   style string:margin-top:${margin_top}px;; margin-left:${margin_left}px;"/>
             </a>
             <tal:block tal:condition="python:features.has_key('select')">
               <span class="button slide-select" tal:condition="not:selected">
             </a>
             <tal:block tal:condition="python:features.has_key('select')">
               <span class="button slide-select" tal:condition="not:selected">
-                <a name="add_to_selection" title="Add to selection" i18n:attributes="title"
-                   tal:attributes="href python:features['select'](info['o'], False)">
-                  <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="12"
-                       alt="Add to selection" i18n:attributes="alt"/>
-                  </a>
+                <a name="add_to_selection" title="Add to selection"
+                   tal:attributes="href python:features['select'](info['o'], False)"
+                   i18n:attributes="title">
+                  <img tal:attributes="src string:${portal_url}/transparent.gif"
+                       height="17" width="12" alt="Add to selection"
+                       i18n:attributes="alt"/>
+                </a>
               </span>
               <span class="button slide-deselect" tal:condition="selected">
               </span>
               <span class="button slide-deselect" tal:condition="selected">
-                <a name="remove_to_selection" title="Remove to selection" i18n:attributes="title"
-                   tal:attributes="href python:features['select'](info['o'], True)">
-                  <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="12"
-                       alt="Remove to selection" i18n:attributes="alt"/>
-                  </a>
+                <a name="remove_to_selection" title="Remove to selection"
+                   tal:attributes="href python:features['select'](info['o'], True)"
+                   i18n:attributes="title">
+                  <img height="17" width="12" alt="Remove to selection"
+                       tal:attributes="src string:${portal_url}/transparent.gif"
+                       i18n:attributes="alt"/>
+                </a>
               </span>
             </tal:block>
             <span class="button slide-cart" tal:condition="python:info.get('buyable')">
               </span>
             </tal:block>
             <span class="button slide-cart" tal:condition="python:info.get('buyable')">
-              <a name="add_to_cart" title="Add to cart" i18n:attributes="title"
-                 tal:attributes="href python:features['cart'](info['o'])">
-                <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="20"
-                     alt="Add to cart" i18n:attributes="alt"/>
-                </a>
+              <a name="add_to_cart" title="Add to cart"
+                 tal:attributes="href python:features['cart'](info['o'])"
+                 i18n:attributes="title">
+                <img height="17" width="20" alt="Add to cart"
+                     tal:attributes="src string:${portal_url}/transparent.gif"
+                     i18n:attributes="alt"/>
+              </a>
             </span>
             <span class="button slide-del" tal:condition="python:features.has_key('del')">
             </span>
             <span class="button slide-del" tal:condition="python:features.has_key('del')">
-              <a title="Delete" i18n:attributes="title"
-                 tal:attributes="href python:features['del'](info['o'])">
-                <img tal:attributes="src string:${portal_url}/transparent.gif" height="19" width="18"
-                     alt="Delete" i18n:attributes="alt"/>
-                </a>
+              <a title="Delete"
+                 tal:attributes="href python:features['del'](info['o'])"
+                 i18n:attributes="title">
+                <img height="19" width="18" alt="Delete"
+                     tal:attributes="src string:${portal_url}/transparent.gif"
+                     i18n:attributes="alt"/>
+              </a>
+            </span>
+            <span class="button cb" tal:condition="features/checkbox|nothing">
+              <input type="checkbox" name="uids:list"
+                     tal:attributes="value info/cmf_uid"/>
             </span>
             <tal:block tal:condition="features/hideAnonymous|nothing">
             </span>
             <tal:block tal:condition="features/hideAnonymous|nothing">
-              <span class="button slide-hide" tal:condition="not:info/hiddenForAnonymous"
+              <span class="button slide-hide"
                     tal:define="mtop python:margin_top + 4;
                                 mleft python:margin_left + size['width'] - 17"
                     tal:define="mtop python:margin_top + 4;
                                 mleft python:margin_left + size['width'] - 17"
+                    tal:condition="not:info/hiddenForAnonymous"
                     tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
                     tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
-                <a title="Hide for anonymous" i18n:attributes="title"
-                   name="hide_for_anonymous"
-                   tal:attributes="href string:${info/href}/hideForAnonymous">
-                  <img tal:attributes="src string:${portal_url}/transparent.gif" height="15" width="16"
-                       alt="Hide for anonymous" i18n:attributes="alt"/>
+                <a title="Hide for anonymous" name="hide_for_anonymous"
+                   tal:attributes="href string:${info/href}/hideForAnonymous"
+                   i18n:attributes="title">
+                  <img height="15" width="16" alt="Hide for anonymous"
+                       tal:attributes="src string:${portal_url}/transparent.gif"
+                       i18n:attributes="alt"/>
                 </a>
               </span>
                 </a>
               </span>
-              <span class="button slide-show" tal:condition="info/hiddenForAnonymous"
+              <span class="button slide-show"
                     tal:define="mtop python:margin_top + 4;
                                 mleft python:margin_left + size['width'] - 17"
                     tal:define="mtop python:margin_top + 4;
                                 mleft python:margin_left + size['width'] - 17"
+                    tal:condition="info/hiddenForAnonymous"
                     tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
                     tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
-                <a title="Show for anonymous" i18n:attributes="title"
-                   name="show_for_anonymous"
-                   tal:attributes="href string:${info/href}/resetHide">
-                  <img tal:attributes="src string:${portal_url}/transparent.gif" height="15" width="16"
-                       alt="Show for anonymous" i18n:attributes="alt"/>
+                <a title="Show for anonymous" name="show_for_anonymous"
+                   tal:attributes="href string:${info/href}/resetHide"
+                   i18n:attributes="title">
+                  <img height="15" width="16" alt="Show for anonymous"
+                       tal:attributes="src string:${portal_url}/transparent.gif"
+                       i18n:attributes="alt"/>
                 </a>
               </span>
             </tal:block>
                 </a>
               </span>
             </tal:block>
@@ -85,72 +104,92 @@
         </span>
       </div>
       <br clear="all"/>
         </span>
       </div>
       <br clear="all"/>
-      <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
-      <script type="text/javascript">
-      // <!--
-      (function(){
-        var lb = document.getElementById('lightbox');
-        var uploadUrl = absolute_url() + '/put_upload';
-        new Lightbox(lb);
-        new DDImageUploader(lb, uploadUrl);
-      })();
-      // -->
+      <noscript>
+        <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
+      </noscript>
+      <script type="text/javascript" tal:condition="not:dropable"
+              tal:content="structure python:'''
+              new Lightbox(document.getElementById('lightbox'),
+                           document.getElementById('lightbox_toolbar'),
+                           %(complete)s,
+                           '%(container_type)s');
+                           ''' % {'complete' : 'true' if not batch.next else 'false',
+                                  'container_type' : options.get('container_type', 'portfolio')}">
+      </script>
+      <script type="text/javascript"
+              tal:condition="dropable"
+              tal:content="structure python:'''
+              (function(){
+                var lb = document.getElementById('lightbox');
+                new Lightbox(lb,
+                             document.getElementById('lightbox_toolbar'),
+                             %(complete)s,
+                             '%(container_type)s',
+                             %(orderable)s);
+                var uploadUrl = '%(putUrl)s';
+                var options = {'slideSize' : %(slideSize)d,
+                               'thumbnailSize' : %(thumbnailSize)d};
+                new DDImageUploader(lb, uploadUrl, options);
+              })();
+              ''' % {'putUrl' : '%s/put_upload' % here.absolute_url(),
+                     'slideSize' : portal_object.slide_size,
+                     'thumbnailSize' : portal_object.thumb_size,
+                     'complete': 'true' if not batch.next else 'false',
+                     'container_type' : options.get('container_type', 'portfolio'),
+                     'orderable' : 'true' if orderable else 'false'}">
       </script>
     </div>
       </script>
     </div>
-
-
     <div metal:define-macro="film_bar" tal:omit-tag="">
       <div id="film_bar">
         <table cellspacing="0">
     <div metal:define-macro="film_bar" tal:omit-tag="">
       <div id="film_bar">
         <table cellspacing="0">
-          <tr tal:define="slide_size python:portal_object.thumb_size/2 + 10">
+          <tr tal:define="slide_size python:portal_object.thumb_size/2 + 10;
+                          blank_img string:$portal_url/transparent.gif">
             <td tal:repeat="info contextInfos/infos">
             <td tal:repeat="info contextInfos/infos">
-                <a href="." tal:attributes="href info/href;
-                                            class info/className;
-                                            portfolio:position info/index"
-                  ><img 
-                     tal:define="size info/thumbSize;
+              <a tal:attributes="href info/href;
+                                 title info/title;
+                                 class info/className;
+                                 portfolio:position info/index;">
+                <img tal:define="size info/thumbSize;
                                  margin_top python:(slide_size - size['height']) / 2"
                                  margin_top python:(slide_size - size['height']) / 2"
-                     tal:attributes="src    info/src;
-                                     alt    info/title;
+                     tal:attributes="src python:info['src'] if info['displayed'] else blank_img;
+                                     alt info/title;
                                      height size/height;
                                      height size/height;
-                                     width  size/width;
-                                     style  string:margin-top : ${margin_top}px ;"/></a>
+                                     width size/width;
+                                     style string:margin-top : ${margin_top}px ;"/>
+              </a>
             </td>
           </tr>
         </table>
       </div>
       <div class="jsslider">
             </td>
           </tr>
         </table>
       </div>
       <div class="jsslider">
-        <span id="slider"></span>
+        <span id="slider"/>
       </div>
       </div>
-      <script type="text/javascript" tal:content="python:'''
-          var startSlideShow, slideShowNext, stopSlideShow;
-          (function(){
-            
-            var ctxInfos = {'filmLength': %(filmLength)s
-                           ,'center': %(center)s
-                           ,'slideSize': %(slideSize)d
-                           ,'ctxUrlTranslation' : [%(reBaseCtxUrl)s, %(canonicalUrl)s]
-                           };
-            var fs = new FilmSlider(document.getElementById('film_bar'),
-                           document.getElementById('slider'),
-                           ctxInfos,
-                           document.getElementById('medium_image').getElementsByTagName('img')[0],
-                           document.getElementById('image_toolbar'),
-                           document.getElementById('Breadcrumbs'));
-            startSlideShow = function() {return fs.startSlideShow();};
-            stopSlideShow = function() {return fs.stopSlideShow();};
-            slideShowPrevious = function() {return fs.slideShowPrevious();};
-            slideShowNext = function() {return fs.slideShowNext();};
-            slideShowImageLoaded = function() {return fs.slideShowImageLoaded();};
-          })();
-          ''' % {'filmLength': len(contextInfos['infos'])
-                ,'center': index
-                ,'slideSize': portal_object.thumb_size/2 + 11
-                ,'reBaseCtxUrl':contextInfos['reBaseCtxUrl']
-                ,'canonicalUrl':contextInfos['canonicalUrl']
-                }">
+      <script type="text/javascript"
+              tal:content="python:'''
+              var startSlideShow, slideShowNext, stopSlideShow;
+              (function(){
+                var ctxInfos = {'filmLength': %(filmLength)s,
+                                'center': %(center)s,
+                                'slideSize': %(slideSize)d,
+                                'ctxUrlTranslation' : [%(reBaseCtxUrl)s, %(canonicalUrl)s]};
+              var fs = new FilmSlider(document.getElementById('film_bar'),
+                                      document.getElementById('slider'),
+                                      ctxInfos,
+                                      document.getElementById('medium_image').getElementsByTagName('img')[0],
+                                      document.getElementById('image_toolbar'),
+                                      document.getElementById('Breadcrumbs'));
+              startSlideShow = function() {return fs.startSlideShow();};
+              stopSlideShow = function() {return fs.stopSlideShow();};
+              slideShowPrevious = function() {return fs.slideShowPrevious();};
+              slideShowNext = function() {return fs.slideShowNext();};
+              slideShowImageLoaded = function() {return fs.slideShowImageLoaded();};
+              })();
+              ''' % {'filmLength' : len(contextInfos['infos']),
+                     'center' : index,
+                     'slideSize' : portal_object.thumb_size/2 + 11,
+                     'reBaseCtxUrl' : contextInfos['reBaseCtxUrl'],
+                     'canonicalUrl' : contextInfos['canonicalUrl']}">
       </script>
     </div>
       </script>
     </div>
-
   </body>
 </html>
   </body>
 </html>
Photo / portfolio product for Plinn