feature 2406 added: if the user wants a new album in the upload form, the album

is created before the start of the upload. The ergonomy is now simpler, the
page is smaller and cleaner.

bug 2373 fixed: now that album is created before upload, uploadify.php gets the
category_id and the level: as soon as it is uploaded (function add_uploaded_file)
the photo gets its final privacy level and is directly associated to the album.
This way, we can have an error on a photo without making orphan all photos of
the same upload group.

feature 2405 added: as soon as a photo is uploaded, its thumbnail is displayed
in the "Uploaded Photos" fieldset, without waiting for other photos to be
uploaded. The latest photos comes first.

I have slighlty changed the integration of colorbox in core. Now we have 2
styles available and by default, we use style2 (overlay in black, title and
control icons outside the popup). It is also used for zooming on bulk manager
in unit mode.

display change: on each uploading photos, instead of showing the transfer
speed, we display the transfer progression in %

bug fixed: the color of the "Start Upload" button was not correct because the
button was not a submit button but a simple type=button.

language: "Upload" button becomes "Start Upload" button.


git-svn-id: http://piwigo.org/svn/trunk@11962 68402e56-0260-453c-a942-63ccdbb3a9ee

admin/include/photos_add_direct_process.inc.php

@@ -43,44 +43,7 @@ if (isset($_GET['processed']))
       );
   }
   
-  $category_id = null;
-  if (!isset($_POST['category_type']))
-  {
-    // nothing to do, we certainly have the post_max_size issue
-  }
-  elseif ('existing' == $_POST['category_type'])
-  {
-    $category_id = $_POST['category'];
-  }
-  elseif ('new' == $_POST['category_type'])
-  {
-    $output_create = create_virtual_category(
-      $_POST['category_name'],
-      (0 == $_POST['category_parent'] ? null : $_POST['category_parent'])
-      );
-    
-    $category_id = $output_create['id'];
-
-    if (isset($output_create['error']))
-    {
-      array_push($page['errors'], $output_create['error']);
-    }
-    else
-    {
-      $category_name = get_cat_display_name_from_id($category_id, 'admin.php?page=cat_modify&cat_id=');
-      // information
-      array_push(
-        $page['infos'],
-        sprintf(
-          l10n('Album "%s" has been added'),
-          '<em>'.$category_name.'</em>'
-          )
-        );
-      // TODO: add the onclick="window.open(this.href); return false;"
-      // attribute with jQuery on upload.tpl side for href containing
-      // "cat_modify"
-    }
-  }
+  $category_id = $_POST['category'];
 
   $image_ids = array();
         
@@ -206,20 +169,6 @@ if (isset($_GET['processed']))
     if (isset($_SESSION['uploads'][ $_POST['upload_id'] ]))
     {
       $image_ids = $_SESSION['uploads'][ $_POST['upload_id'] ];
-
-      associate_images_to_categories(
-        $image_ids,
-        array($category_id)
-        );
-
-      $query = '
-UPDATE '.IMAGES_TABLE.'
-  SET level = '.$_POST['level'].'
-  WHERE id IN ('.implode(', ', $image_ids).')
-;';
-      pwg_query($query);
-    
-      invalidate_user_cache();
     }
   }
   
@@ -291,28 +240,25 @@ SELECT
         );
     }
 
-    if ('existing' == $_POST['category_type'])
-    {
-      $query = '
+    $query = '
 SELECT
     COUNT(*)
   FROM '.IMAGE_CATEGORY_TABLE.'
   WHERE category_id = '.$category_id.'
 ;';
-      list($count) = pwg_db_fetch_row(pwg_query($query));
-      $category_name = get_cat_display_name_from_id($category_id, 'admin.php?page=cat_modify&amp;cat_id=');
-      
-      // information
-      array_push(
-        $page['infos'],
-        sprintf(
-          l10n('Album "%s" now contains %d photos'),
-          '<em>'.$category_name.'</em>',
-          $count
-          )
-        );
-    }
-
+    list($count) = pwg_db_fetch_row(pwg_query($query));
+    $category_name = get_cat_display_name_from_id($category_id, 'admin.php?page=cat_modify&amp;cat_id=');
+    
+    // information
+    array_push(
+      $page['infos'],
+      sprintf(
+        l10n('Album "%s" now contains %d photos'),
+        '<em>'.$category_name.'</em>',
+        $count
+        )
+      );
+    
     $page['batch_link'] = PHOTOS_ADD_BASE_URL.'&batch='.implode(',', $image_ids);
   }
 }

admin/include/uploadify/uploadify.php

@@ -19,7 +19,7 @@ echo '$user'."\n";
 print_r($user);
 $tmp = ob_get_contents(); 
 ob_end_clean();
-// error_log($tmp, 3, "/tmp/php-".date('YmdHis').'-'.sprintf('%020u', rand()).".log");
+error_log($tmp, 3, "/tmp/php-".date('YmdHis').'-'.sprintf('%020u', rand()).".log");
 
 if ($_FILES['Filedata']['error'] !== UPLOAD_ERR_OK)
 {
@@ -43,8 +43,8 @@ ob_start();
 $image_id = add_uploaded_file(
   $_FILES['Filedata']['tmp_name'],
   $_FILES['Filedata']['name'],
-  null,
-  8
+  array($_POST['category_id']),
+  $_POST['level']
   );
 
 if (!isset($_SESSION['uploads']))
@@ -62,12 +62,31 @@ array_push(
   $image_id
   );
 
+$query = '
+SELECT
+    id,
+    path,
+    tn_ext
+  FROM '.IMAGES_TABLE.'
+  WHERE id = '.$image_id.'
+;';
+$image_infos = pwg_db_fetch_assoc(pwg_query($query));
+
+$thumbnail_url = preg_replace('#^'.PHPWG_ROOT_PATH.'#', './', get_thumbnail_url($image_infos));
+
+$return = array(
+  'image_id' => $image_id,
+  'category_id' => $_POST['category_id'],
+  'thumbnail_url' => $thumbnail_url,
+  );
+
 $output = ob_get_contents(); 
 ob_end_clean();
 if (!empty($output))
 {
   add_upload_error($_POST['upload_id'], $output);
+  $return['error_message'] = $output;
 }
 
-echo "1";
+echo json_encode($return);
 ?>

admin/themes/clear/theme.css

@@ -20,7 +20,7 @@ body, h3, dt, h2, .throw, .content, label { color:#777; }
 th { color: #888; }
 INPUT, select, textarea { color:#666; background-color: #ccc; }
 input[type="radio"], input[type="checkbox"] { background-color: transparent; }
-INPUT[type="submit"], INPUT[type="reset"]  { color:#666; border: 1px solid #777; background-color: #bbb; padding: 1px 15px; }
+INPUT[type="submit"], INPUT[type="button"], INPUT[type="reset"]  { color:#666; border: 1px solid #777; background-color: #bbb; padding: 1px 15px; }
 legend, h3 { color: #777; }
 h2 { color: #777; }
 
@@ -50,6 +50,7 @@ input[type="button"], input[type="submit"], input[type="reset"] {
 }
 
 input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
+  cursor:pointer;
   color:#666;
   border-color: #999;
 }

admin/themes/default/template/include/colorbox.inc.tpl

@@ -1,2 +1,2 @@
 {combine_script id='jquery.colorbox' load='footer' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'}
-{combine_css path="themes/default/js/plugins/jquery.colorbox.css"}
+{combine_css path="themes/default/js/plugins/colorbox/style2/colorbox.css"}

admin/themes/default/template/photos_add_direct.tpl

@@ -6,6 +6,8 @@
 {combine_css path="admin/include/uploadify/uploadify.css"}
 {/if}
 
+{include file='include/colorbox.inc.tpl'}
+
 {footer_script}{literal}
 jQuery(document).ready(function(){
   function checkUploadStart() {
@@ -13,11 +15,6 @@ jQuery(document).ready(function(){
     jQuery("#formErrors").hide();
     jQuery("#formErrors li").hide();
 
-    if (jQuery("input[name=category_type]:checked").val() == "new" && jQuery("input[name=category_name]").val() == "") {
-      jQuery("#formErrors #emptyCategoryName").show();
-      nbErrors++;
-    }
-
     var nbFiles = 0;
     if (jQuery("#uploadBoxes").size() == 1) {
       jQuery("input[name^=image_upload]").each(function() {
@@ -65,15 +62,79 @@ jQuery(document).ready(function(){
     return byteSize+suffix;
   }
 
-  if (jQuery("select[name=category] option").length == 0) {
-    jQuery('input[name=category_type][value=existing]').attr('disabled', true);
-    jQuery('input[name=category_type]').attr('checked', false);
-    jQuery('input[name=category_type][value=new]').attr('checked', true);
+  function fillCategoryListbox(selectId, selectedValue) {
+    jQuery.getJSON(
+      "ws.php?format=json&method=pwg.categories.getList",
+      {
+        recursive: true,
+        fullname: true,
+        format: "json",
+      },
+      function(data) {
+        jQuery.each(
+          data.result.categories,
+          function(i,category) {
+            var selected = "";
+            if (category.id == selectedValue) {
+              selected = "selected";
+            }
+            
+            jQuery("<option/>")
+              .attr("value", category.id)
+              .attr("selected", selected)
+              .text(category.name)
+              .appendTo("#"+selectId)
+              ;
+          }
+        );
+      }
+    );
   }
 
-  jQuery("input[name=category_type]").click(function () {
-    jQuery("[id^=category_type_]").hide();
-    jQuery("#category_type_"+jQuery(this).attr("value")).show();
+/*
+  jQuery("#albumSelect").find("option").remove();
+  fillCategoryListbox("albumSelect");
+  fillCategoryListbox("category_parent");
+*/
+  
+  jQuery(".addAlbumOpen").colorbox({inline:true, href:"#addAlbumForm"});
+
+  jQuery("#addAlbumForm form").submit(function(){
+      jQuery("#categoryNameError").text("");
+
+      jQuery.ajax({
+        url: "ws.php?format=json&method=pwg.categories.add",
+        data: {
+          parent: jQuery("select[name=category_parent] option:selected").val(),
+          name: jQuery("input[name=category_name]").val(),
+        },
+        beforeSend: function() {
+          jQuery("#albumCreationLoading").show();
+        },
+        success:function(html) {
+          jQuery("#albumCreationLoading").hide();
+
+          var newAlbum = jQuery.parseJSON(html).result.id;
+          jQuery(".addAlbumOpen").colorbox.close();
+
+          jQuery("#albumSelect").find("option").remove();
+          fillCategoryListbox("albumSelect", newAlbum);
+
+          /* we refresh the album creation form, in case the user wants to create another album */
+          jQuery("#category_parent").find("option").remove();
+          fillCategoryListbox("category_parent", newAlbum);
+
+          jQuery("#addAlbumForm form input[name=category_name]").val('');
+
+          return true;
+        },
+        error:function(XMLHttpRequest, textStatus, errorThrows) {
+            jQuery("#albumCreationLoading").hide();
+            jQuery("#categoryNameError").text(errorThrows).css("color", "red");
+        }
+      });
+
+      return false;
   });
 
   jQuery("#hideErrors").click(function() {
@@ -120,7 +181,6 @@ var sizeLimit = {$upload_max_filesize};
     'cancelImg'      : uploadify_path + '/cancel.png',
     'queueID'        : 'fileQueue',
     'auto'           : false,
-    'displayData'    : 'speed',
     'buttonText'     : buttonText,
     'multi'          : true,
     'fileDesc'       : 'Photo files (*.jpg,*.jpeg,*.png)',
@@ -196,8 +256,14 @@ var sizeLimit = {$upload_max_filesize};
         }
       );
     },
-    onComplete: function (a, b ,c, d, e) {
+    onComplete: function (a, b ,c, response, e) {
       var size = Math.round(c.size/1024);
+
+      var response = jQuery.parseJSON(response);
+
+      jQuery("#uploadedPhotos").parent("fieldset").show();
+      jQuery("#uploadedPhotos").prepend('<img src="'+response.thumbnail_url+'" class="thumbnail"> ');
+
       jQuery.jGrowl(
         '<p></p>'+c.name+' - '+size+'KB',
         {
@@ -215,6 +281,14 @@ var sizeLimit = {$upload_max_filesize};
       return false;
     }
 
+    jQuery("#uploadify").uploadifySettings(
+      'scriptData',
+      {
+        'category_id' : jQuery("select[name=category] option:selected").val(),
+        'level' : jQuery("select[name=level] option:selected").val(),
+      }
+    );
+
     jQuery("#uploadify").uploadifyUpload();
   });
 
@@ -268,47 +342,39 @@ var sizeLimit = {$upload_max_filesize};
 
 <div id="formErrors" class="errors" style="display:none">
   <ul>
-    <li id="emptyCategoryName">{'The name of an album must not be empty'|@translate}</li>
     <li id="noPhoto">{'Select at least one photo'|@translate}</li>
   </ul>
   <div class="hideButton" style="text-align:center"><a href="#" id="hideErrors">{'Hide'|@translate}</a></div>
 </div>
 
+<div style="display:none">
+  <div id="addAlbumForm" style="text-align:left;padding:1em;">
+    <form>
+      {'Parent album'|@translate}<br>
+      <select id ="category_parent" name="category_parent">
+        <option value="0">------------</option>
+        {html_options options=$category_parent_options selected=$category_parent_options_selected}
+      </select>
+
+      <br><br>{'Album name'|@translate}<br><input name="category_name" type="text"> <span id="categoryNameError"></span>
+      <br><br><br><input type="submit" value="{'Create'|@translate}"> <span id="albumCreationLoading" style="display:none"><img src="themes/default/images/ajax-loader-small.gif"></span>
+    </form>
+  </div>
+</div>
+
 <form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}" class="properties">
+{if $upload_mode eq 'multiple'}
+    <input name="upload_id" value="{$upload_id}" type="hidden">
+{/if}
+
     <fieldset>
       <legend>{'Drop into album'|@translate}</legend>
-      {if $upload_mode eq 'multiple'}
-      <input name="upload_id" value="{$upload_id}" type="hidden">
-      {/if}
 
-      <label><input type="radio" name="category_type" value="existing"> {'existing album'|@translate}</label>
-      <label><input type="radio" name="category_type" value="new" checked="checked"> {'create a new album'|@translate}</label>
-
-      <div id="category_type_existing" style="display:none" class="category_selection">
-        <select class="categoryDropDown" name="category">
-          {html_options options=$category_options selected=$category_options_selected}
-        </select>
-      </div>
-
-      <div id="category_type_new" class="category_selection">
-        <table>
-          <tr>
-            <td>{'Parent album'|@translate}</td>
-            <td>
-              <select class="categoryDropDown" name="category_parent">
-                <option value="0">------------</option>
-                {html_options options=$category_parent_options selected=$category_parent_options_selected}
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td>{'Album name'|@translate}</td>
-            <td>
-              <input type="text" name="category_name" value="{$F_CATEGORY_NAME}" style="width:400px">
-            </td>
-          </tr>
-        </table>
-      </div>
+      <select id="albumSelect" name="category">
+        {html_options options=$category_options selected=$category_options_selected}
+      </select>
+      <br>{'... or '|@translate}<a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
+      
     </fieldset>
 
     <fieldset>
@@ -348,11 +414,17 @@ var sizeLimit = {$upload_max_filesize};
 
     </fieldset>
     <p>
-      <input class="submit" type="button" value="{'Upload'|@translate}">
+      <input class="submit" type="button" value="{'Start Upload'|@translate}">
       <input type="submit" name="submit_upload" style="display:none">
     </p>
 {/if}
 </form>
+
+<fieldset style="display:none">
+  <legend>{'Uploaded Photos'|@translate}</legend>
+  <div id="uploadedPhotos"></div>
+</fieldset>
+
 {/if} {* empty($thumbnails) *}
 {/if} {* $setup_errors *}
 

admin/themes/default/theme.css

@@ -605,6 +605,10 @@ img.ui-datepicker-trigger {
   margin:0;
 }
 
+#photosAddContent {
+  text-align:left;
+}
+
 #photosAddContent FIELDSET {
   width:650px;
   margin:0 auto 20px auto;