Changeset 1847

Timestamp:

07/23/10 19:06:05 (19 months ago)

Author:

johnnyoffline

Message:

cleaned up cropping somewhat with rick and jake

Location:

plugins/apostrophePlugin/branches/features/cropping

Files:

• lib/action/BaseaMediaActions.class.php (modified) (1 diff)
• lib/toolkit/aMediaTools.php (modified) (1 diff)
• modules/aMedia/templates/_browser.php (modified) (1 diff)
• modules/aMedia/templates/_describeConstraints.php (modified) (1 diff)
• modules/aMedia/templates/_multipleList.php (modified) (2 diffs)
• modules/aMedia/templates/_selectMultiple.php (modified) (2 diffs)
• modules/aMedia/templates/indexSuccess.php (modified) (3 diffs)
• modules/aSlideshowSlot/templates/_normalView.php (modified) (1 diff)
• web/css/a.css (modified) (5 diffs)
• web/images/a-icon-crop.png (added)
• web/js/aCrop.js (modified) (6 diffs)

plugins/apostrophePlugin/branches/features/cropping/lib/action/BaseaMediaActions.class.php

@@ -21 +21 @@
     }
     
-                //$this->getResponse()->addStylesheet('/apostrophePlugin/css/aToolkit.css', 'first'); // Merged into a.css 2/3/2010
         $this->getResponse()->addStylesheet('/apostrophePlugin/css/a.css', 'first');    
     $this->getResponse()->addJavascript('/apostrophePlugin/js/aControls.js');   
     $this->getResponse()->addJavascript('/apostrophePlugin/js/aUI.js');
-    $this->getResponse()->addJavascript('/apostrophePlugin/js/jquery.hotkeys-0.7.9.min.js');            
         }
 

plugins/apostrophePlugin/branches/features/cropping/lib/toolkit/aMediaTools.php

@@ -160 +160 @@
         "resizeType" => "s"),
     "selected_constraints" => array(
-        "width" => 134,
+        "width" => 100,
         "height" => false,
         "resizeType" => "c",),

plugins/apostrophePlugin/branches/features/cropping/modules/aMedia/templates/_browser.php

@@ -1 +1 @@
 <?php use_helper('I18N') ?>
+<?php // Media is now an engine, so there's a page ?>
+<?php $page = aTools::getCurrentPage() ?>
   
 <?php // Entire media browser goes into what would otherwise be the regular apostrophe subnav ?>
 <?php slot('a-subnav') ?>
-
-<?php // Media is now an engine, so there's a page ?>
-<?php $page = aTools::getCurrentPage() ?>
 
 <?php // For backwards compatibility reasons it is best to implement these as before and after partials ?>

plugins/apostrophePlugin/branches/features/cropping/modules/aMedia/templates/_describeConstraints.php

@@ -26 +26 @@
   // Markup change: for I18N it's better to use a list here rather than
   // trying to create a sentence with commas and 'and'
-  echo('<h3>' . __("Displaying only %t% with:", array('%t%' => $type), 'apostrophe') . '</h3>');
+  echo('<h4>' . __("Displaying only %t% with:", array('%t%' => $type), 'apostrophe') . '</h4>');
   echo('<ul class="a-constraints">');
   foreach ($clauses as $clause)

plugins/apostrophePlugin/branches/features/cropping/modules/aMedia/templates/_multipleList.php

@@ -9 +9 @@
         <?php $id = $item->getId() ?>
   <ul class="a-controls a-media-multiple-list-controls">        
+                <li>
+                        <a href="#crop" onclick="return false;" class="a-btn icon a-crop no-label">Crop</a>
+                </li>
           <li><?php echo jq_link_to_remote(__("remove this item", null, 'apostrophe'),
     array(
@@ -22 +25 @@
         <div class="a-media-selected-item-drag-overlay" title="<?php echo __('Drag &amp; Drop to Order', null, 'apostrophe') ?>"></div>
         <div class="a-media-selected-item-overlay"></div>
-  <img src="<?php echo url_for($item->getCropThumbnailUrl()) ?>" />
+  <img src="<?php echo url_for($item->getCropThumbnailUrl()) ?>" class="a-thumbnail" />
 
 </li>

plugins/apostrophePlugin/branches/features/cropping/modules/aMedia/templates/_selectMultiple.php

@@ -10 +10 @@
 <?php $type = "media item" ?>
 <?php endif ?>
-        <p><?php echo __('Select one or more %typeplural% by clicking on them below. Drag and drop %typeplural%  to reorder them within the list of selected items. Remove %typeplural% by clicking on the trashcan.', array('%typeplural%' => __($type . 's')), 'apostrophe') ?>
-  <?php if ($limitSizes): ?>
-  <?php echo __('Only appropriately sized %typeplural% are shown.', array('%typeplural%' => __($type . 's')), 'apostrophe') ?>
-  <?php endif ?>
-  <?php echo __('When you\'re done, click "Save."', null, 'apostrophe') ?></p>
-
-  <ul id="a-media-selection-preview">
-  <?php include_partial("aMedia/multiplePreview", array("items" => $items)) ?>
-  </ul>
-  
-  <ul class="a-controls a-media-crop-controls">
-                <li><?php echo jq_link_to_function(__("Set Crop", null, 'apostrophe'), "aCrop.setCrop('".url_for('aMedia/crop')."')", array("class"=>"a-btn save")) ?></li>
-          <li><?php echo jq_link_to_function(__("Reset", null, 'apostrophe'), "aCrop.resetCrop()", array("class"=>"a-btn icon a-cancel event-default")) ?></li>
-  </ul>
+        <h3><?php echo $label ?></h3>
 
         <ul id="a-media-selection-list">
@@ -30 +17 @@
 
         <?php echo jq_sortable_element("#a-media-selection-list", array("url" => "aMedia/multipleOrder")) ?>
+        <br class="c"/>
 
-        <br class="c"/>
+        <div class="a-crop-workspace">
+                <h4> Crop Image </h4>
+                <br class="c"/>
+          <ul id="a-media-selection-preview">
+                <?php include_partial("aMedia/multiplePreview", array("items" => $items)) ?>
+          </ul>
+          <ul class="a-controls a-media-crop-controls">
+                        <li><?php echo jq_link_to_function(__("Set Crop", null, 'apostrophe'), "aCrop.setCrop('".url_for('aMedia/crop')."')", array("class"=>"a-btn save")) ?></li>
+                  <li><?php echo jq_link_to_function(__("Reset", null, 'apostrophe'), "aCrop.resetCrop()", array("class"=>"a-btn icon a-cancel event-default")) ?></li>
+          </ul>
+        </div>
 
         <ul class="a-controls a-media-slideshow-controls">
-                <li><?php echo link_to(__("Save", null, 'apostrophe'), "aMedia/selected", array("class"=>"a-btn save")) ?></li>
-          <li><?php echo link_to(__("Cancel", null, 'apostrophe'), "aMedia/selectCancel", array("class"=>"a-btn icon a-cancel event-default")) ?></li>
+                <li><?php echo link_to(__("Save Slideshow", null, 'apostrophe'), "aMedia/selected", array("class"=>"a-btn save big")) ?></li>
+          <li><?php echo link_to(__("Cancel", null, 'apostrophe'), "aMedia/selectCancel", array("class"=>"a-btn icon a-cancel big no-label")) ?></li>
         </ul>
         
 </div>
-        <br class="c"/>
-
+<br class="c"/>

plugins/apostrophePlugin/branches/features/cropping/modules/aMedia/templates/indexSuccess.php

@@ -12 +12 @@
         <?php if (aMediaTools::isSelecting()): ?>
 
-    <?php if (isset($label)): ?>
-      <h3><?php echo htmlspecialchars($label) ?> or <?php echo link_to(__("Cancel", null, 'apostrophe'), "aMedia/selectCancel", array("class"=>"a-btn a-cancel text-only")) ?></h3>
-    <?php endif ?>
-
-    <?php include_partial('aMedia/describeConstraints') ?>
-
-    <?php include_component('aMedia', 'selectMultiple', array('limitSizes' => $limitSizes)) ?>
+    <?php include_component('aMedia', 'selectMultiple', array('limitSizes' => $limitSizes, 'label' => (isset($label)?$label:null))) ?>
 
         <?php endif ?>
@@ -28 +22 @@
 <div class="a-media-library">
         
+        <h3>Media Library</h3>
+        
+        <?php if ($limitSizes): ?>
+        <h4 class="a-help"><?php echo __('Some %typeplural% in your media library may not be large enough to be selected. Only %typeplural% that can be used are displayed currently.', array('%typeplural%' => __($type . 's')), 'apostrophe') ?></h4>
+        <?php endif ?>
+        
         <?php if (aMediaTools::userHasUploadPrivilege()): ?>
-
    <ul class="a-controls a-media-controls">
      <?php $selecting = aMediaTools::isSelecting() ?>
@@ -45 +44 @@
      <li><a href="<?php echo url_for("aMedia/editPdf") ?>" class="a-btn icon big a-add"><?php echo __('Add PDF', null, 'apostrophe') ?></a></li>
      <?php endif ?>
-
    </ul>
-
   <?php endif ?>
         

plugins/apostrophePlugin/branches/features/cropping/modules/aSlideshowSlot/templates/_normalView.php

@@ -20 +20 @@
               "aMediaIds" => implode(",", $itemIds),
               "type" => "image",
-              "label" => __("Create a Slideshow", null, 'apostrophe'),
+              "label" => __("You are creating a slideshow of images.", null, 'apostrophe'),
               "after" => url_for("aSlideshowSlot/edit") . "?" . 
                 http_build_query(

plugins/apostrophePlugin/branches/features/cropping/web/css/a.css

@@ -701 +701 @@
 {
 padding: 0 !important;
+}
+
+.icon.a-crop
+{
+background-image: url(/apostrophePlugin/images/a-icon-crop.png);
 }
 
@@ -3963 +3968 @@
 {
 margin-bottom: 10px;
-float: left;
-display: inline;
 padding-bottom:10px;
-background-color: #eee;
+padding: 10px;
+margin: 0 0 20px -1px;
+background-color: #efefef;
+-moz-border-radius: 6px;
+-webkit-border-radius: 6px;
+border-radius: 6px;
+-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.20);
+-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.20);
+box-shadow: 0 0 6px rgba(0, 0, 0, 0.20);
 border: 1px solid #ccc;
-padding: 10px;
+overflow: auto;
 }
 
@@ -4024 +4035 @@
         float:left;
         width:100%;
-        margin:20px 0;
+        margin:10px 0;
 }
 
@@ -4033 +4044 @@
         width:auto;
         height:auto;
-        margin-left:160px;
 }
 li.a-media-selection-preview-item.current {
@@ -4045 +4055 @@
         left:1px;
         width: 150px;
+}
+
+.a-crop-workspace
+{
+        overflow: hidden;
+        display: none;
+        width: 100%;
+        margin: 20px 0 20px -10px;
+        padding: 10px;
+}
+
+.a-crop-workspace h4
+{
+        color:#ddd;
 }
 

plugins/apostrophePlugin/branches/features/cropping/web/js/aCrop.js

@@ -24 +24 @@
     }
     
-    $(aCrop.el.slideshowList).find('li').click(aCrop.thumbnailClickHandler);
+    $(aCrop.el.slideshowList).find('li .a-crop').click(aCrop.thumbnailClickHandler);
   },
   
@@ -40 +40 @@
                         return;
                 }
+
+                // TODO: Make this work -- 
+                // This would set the initial crop selection to be the maximum size, centered for the image being cropped
+                // This would work except it's using the full image dimensions, not the dimensions of the crop image workspace
+                // setSelectCenter = imageInfo.height / 2;
+                // setSelectHeight = imageInfo.width * aCrop.options.aspectRatio;
+                // setSelectY1 = setSelectHeight / 2;
+                // setSelectY2 = setSelectY1 + setSelectHeight;
+
     aCrop.api = $.Jcrop(cropEl);
     aCrop.api.setOptions({
       allowSelect: false,
       aspectRatio: aCrop.options.aspectRatio,
+                        // setSelect: [0,setSelectY1,imageInfo.width,setSelectY2],
                         minSize: aCrop.options.minimumSize ? aCrop.options.minimumSize : [1,1],
       maxSize: aCrop.options.maximumSize ? aCrop.options.maximumSize : [imageInfo.width, imageInfo.height],
@@ -49 +59 @@
     });
     aCrop.setAspectMask(cropEl);
-    $('.a-media-crop-controls').clone().appendTo('.jcrop-holder div:first').show();
+    // $('.a-media-crop-controls').appendTo('.jcrop-holder div:first').show();
   },
   
@@ -87 +97 @@
   
   thumbnailClickHandler: function(e){
-    var mediaId = aCrop.getMediaIdForLi(e.currentTarget);
+    var mediaId = aCrop.getMediaIdForLi($(e.currentTarget).parents('.a-media-selection-list-item'));
                 if (mediaId)
                 {
             $('#' + aCrop.el.previewList.replace('#','') + '-' + mediaId).addClass('current').siblings().removeClass('current');
+                        $('.a-crop-workspace').fadeIn();
     }
     aCrop.startCrop();
@@ -145 +156 @@
       // make sure delete button is visible
       aUI("a-media-selection-list");
+                        $(".a-crop-workspace").fadeTo(500,1).fadeOut();
     });
   },
@@ -169 +181 @@
     
     aCrop.api.setSelect(coords);
+                $(".a-crop-workspace").fadeTo(500,1).fadeOut();
   }
 }