From d8beb6f5301204cac3b74a827dbbc3082324de6f Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Mon, 9 Nov 2009 13:54:55 -0800
Subject: First cut at replacing swfupload with uploadify.  Probably need to
 review the css and remove extra swfupload selectors.  Also changed the dialog
 so tags can be entered for all the files being uploaded. Probably need to add
 better start processing so the batch is started before the first image is
 loaded.  Maybe add a module variable so the number of simultaneous uploads
 can be initiated (currently hard ocded to 10.

---
 modules/gallery/controllers/simple_uploader.php |   9 +
 modules/gallery/css/gallery.css                 |  23 +-
 modules/gallery/helpers/gallery_theme.php       |   1 +
 modules/gallery/views/simple_uploader.html.php  | 287 ++++++------------------
 4 files changed, 96 insertions(+), 224 deletions(-)

(limited to 'modules/gallery')

diff --git a/modules/gallery/controllers/simple_uploader.php b/modules/gallery/controllers/simple_uploader.php
index bc508319..36464e24 100644
--- a/modules/gallery/controllers/simple_uploader.php
+++ b/modules/gallery/controllers/simple_uploader.php
@@ -66,6 +66,15 @@ class Simple_Uploader_Controller extends Controller {
           log::success("content", t("Added a photo"),
                        html::anchor("photos/$item->id", t("view photo")));
         }
+        $tags = $this->input->post("tags");
+        if (!empty($tags)) {
+          foreach (split(",", $tags) as $tag_name) {
+            $tag_name = trim($tag_name);
+            if ($tag_name) {
+              $tag = tag::add($item, $tag_name);
+            }
+          }
+        }
       } catch (Exception $e) {
         Kohana::log("alert", $e->__toString());
         if (file_exists($temp_filename)) {
diff --git a/modules/gallery/css/gallery.css b/modules/gallery/css/gallery.css
index 3262dee2..077b21bc 100644
--- a/modules/gallery/css/gallery.css
+++ b/modules/gallery/css/gallery.css
@@ -73,6 +73,7 @@
 #g-add-photos button {
   float: right;
   margin-bottom: .5em;
+  margin-left: .5em;
 }
 
 #g-uploadqueue-infobar {
@@ -116,6 +117,14 @@
   border: 1px solid #beb;
 }
 
+#g-add-photos p {
+  margin: 0
+}
+
+#g-add-photos .g-breadcrumbs li {
+  padding-top: .5em;
+}
+
 /** *******************************************************************
  * 2) Admin
  **********************************************************************/
@@ -129,23 +138,23 @@
 }
 
 #g-languages-form table {
-	width: 40%;
-	margin: 0 3em 1em 0;
+  width: 40%;
+  margin: 0 3em 1em 0;
 }
 
 #g-languages-form input {
-	clear: both;
+  clear: both;
 }
 
 #g-translations ol {
-	margin: 0 0 1em 2em;
+  margin: 0 0 1em 2em;
 }
 #g-translations ol li {
   list-style-type: decimal;
-	line-height: 150%;
+  line-height: 150%;
 }
 
 #g-translations .g-button {
-	padding: .5em;
-	margin-bottom: 1em;
+  padding: .5em;
+  margin-bottom: 1em;
 }
diff --git a/modules/gallery/helpers/gallery_theme.php b/modules/gallery/helpers/gallery_theme.php
index ab3e7eb5..0018fd9a 100644
--- a/modules/gallery/helpers/gallery_theme.php
+++ b/modules/gallery/helpers/gallery_theme.php
@@ -49,6 +49,7 @@ class gallery_theme_Core {
       $theme->script("l10n_client.js");
     }
 
+    $theme->css("uploadify/uploadify.css");
     return $buf;
   }
 
diff --git a/modules/gallery/views/simple_uploader.html.php b/modules/gallery/views/simple_uploader.html.php
index b9c33d32..014919c3 100644
--- a/modules/gallery/views/simple_uploader.html.php
+++ b/modules/gallery/views/simple_uploader.html.php
@@ -1,15 +1,62 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<script type="text/javascript" src="<?= url::file("lib/swfupload/swfupload.js") ?>"></script>
-<script type="text/javascript" src="<?= url::file("lib/swfupload/swfupload.queue.js") ?>"></script>
-<script type="text/javascript" src="<?= url::file("lib/jquery.scrollTo.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("lib/swfobject.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("lib/uploadify/jquery.uploadify.min.js") ?>"></script>
+<script type="text/javascript">
+  $("#g-add-photos-canvas").ready(function () {
+    $("#g-uploadify").uploadify({
+      uploader: "<?= url::file("lib/uploadify/uploadify.swf") ?>",
+      folder: "<?= url::file("var/uploads") ?>",
+      script: "<?= url::site("simple_uploader/add_photo/{$item->id}") ?>",
+      scriptData: <?= json_encode(array(
+        "g3sid" => Session::instance()->id(),
+        "user_agent" => Input::instance()->server("HTTP_USER_AGENT"),
+        "tags" => "",
+        "csrf" => $csrf)) ?>,
+      fileExt: "*.gif;*.jpg;*.jpeg;*.png;*.flv;*.mp4;*.GIF;*.JPG;*.JPEG;*.PNG;*.FLV;*.MP4",
+      fileDesc: <?= t("Photos and movies")->for_js() ?>,
+      cancelImg: "<?= url::file("lib/uploadify/cancel.png") ?>",
+      buttonText: <?= t("Select Files")->for_js() ?>,
+      simUploadLimit: 10,
+      auto: true,
+      multi: true,
+      onAllComplete: function(filesUploaded, errors, allbytesLoaded, speed) {
+        $("#g-upload-cancel-all")
+          .addClass("ui-state-disabled")
+          .attr("disabled", "disabled");
+        return true;
+      },
+      onClearQueue: function(event) {
+        $("#g-upload-cancel-all")
+          .addClass("ui-state-disabled")
+          .attr("disabled", "disabled");
+        return true;
+      },
+      onSelect: function(event) {
+        if ($("#g-upload-cancel-all").hasClass("ui-state-disabled")) {
+          $("#g-upload-cancel-all")
+            .removeClass("ui-state-disabled")
+            .attr("disabled", null);
+        }
+        return true;
+      }
+    });
+  <? if (module::active("tag")): ?>
+    $('#g-add-photos-tags').autocomplete(
+      '<?= url::site("tags/autocomplete") ?>',
+      {max: 30, multiple: true, multipleSeparator: ',', cacheLength: 1}
+    );
+    $('#g-add-photos-tags').blur(function (event) {
+      $("#g-uploadify").uploadifySettings("scriptData", {"tags": $(this).val()});
+    });
+  <? endif ?>
+  });
+</script>
 
-<!-- hack to set the title for the dialog -->
 <form id="g-add-photos-form" action="<?= url::site("simple_uploader/finish?csrf=$csrf") ?>">
   <fieldset>
     <legend> <?= t("Add photos to %album_title", array("album_title" => html::purify($item->title))) ?> </legend>
-  </fieldset>
-</form>
 
+  </fieldset>
 <div id="g-add-photos">
   <? if (ini_get("suhosin.session.encrypt")): ?>
   <ul id="g-action-status" class="g-message-block">
@@ -21,230 +68,36 @@
   </ul>
   <? endif ?>
 
+  <div>
   <p>
     <?= t("Photos will be uploaded to album: ") ?>
   </p>
   <ul class="g-breadcrumbs">
-    <? $i = 0 ?>
-    <? foreach ($item->parents() as $parent): ?>
+    <? foreach ($item->parents() as $i => $parent): ?>
     <li<? if ($i == 0) print " class=\"g-first\"" ?>> <?= html::clean($parent->title) ?> </li>
-    <? $i++ ?>
     <? endforeach ?>
     <li class="g-active"> <?= html::purify($item->title) ?> </li>
   </ul>
+  </div>
 
-  <div id="g-uploadqueue-infobar">
-    <?= t("Upload queue") ?>
-    <span id="g-uploadstatus"></span>
-    <a id="g-cancelupload" title="<?= t("Cancel all the pending uploads")->for_html_attr() ?>" onclick="swfu.cancelQueue();"><?= t("cancel") ?></a>
+  <? if (module::active("tag")): ?>
+  <div style="clear: both;">
+  <label for="g-add-photos-tags"><?= t("Add tags to all uploaded files") ?></label>
+  <input type="text" id="g-add-photos-tags" name="tags" value="" />
   </div>
-  <div id="g-add-photos-canvas" style="text-align: center;">
-    <div id="g-add-photos-queue"></div>
-    <div id="g-edit-photos-queue"></div>
+  <? endif ?>
+
+    <div id="g-add-photos-canvas" style="text-align: center;">
+    <div id="g-uploadify"></div>
   </div>
-  <span id="g-choose-files-placeholder"></span>
 
   <!-- Proxy the done request back to our form, since its been ajaxified -->
-  <button class="ui-state-default ui-corner-all" onclick="$('#g-add-photos-form').submit()">
+  <button id="g-upload-done" class="ui-state-default ui-corner-all" onclick="$('#g-add-photos-form').submit()">
     <?= t("Done") ?>
   </button>
-</div>
-
-<script type="text/javascript">
-  var swfu = new SWFUpload({
-    flash_url: <?= html::js_string(url::file("lib/swfupload/swfupload.swf")) ?>,
-    upload_url: <?= html::js_string(url::site("simple_uploader/add_photo/$item->id")) ?>,
-    post_params: <?= json_encode(array(
-      "g3sid" => Session::instance()->id(),
-      "user_agent" => Input::instance()->server("HTTP_USER_AGENT"),
-      "csrf" => $csrf)) ?>,
-    file_size_limit: <?= html::js_string(ini_get("upload_max_filesize") ? num::convert_to_bytes(ini_get("upload_max_filesize"))."B" : "100MB") ?>,
-    file_types: "*.gif;*.jpg;*.jpeg;*.png;*.flv;*.mp4;*.GIF;*.JPG;*.JPEG;*.PNG;*.FLV;*.MP4",
-    file_types_description: <?= t("Photos and movies")->for_js() ?>,
-    file_upload_limit: 1000,
-    file_queue_limit: 0,
-    custom_settings: { },
-    debug: false,
-
-    // Button settings
-    button_image_url: <?= html::js_string(url::file(gallery::find_file("images", "select-photos-backg.png"))) ?>,
-    button_width: "202",
-    button_height: "45",
-    button_placeholder_id: "g-choose-files-placeholder",
-    button_text: <?= json_encode('<span class="swfUploadFont">' . t("Select photos...") . '</span>') ?>,
-    button_text_style: ".swfUploadFont { color: #2E6E9E; font-size: 16px; font-family: Lucida Grande,Lucida Sans,Arial,sans-serif; font-weight: bold; }",
-    button_text_left_padding: 30,
-    button_text_right_padding: 30,
-    button_text_top_padding: 10,
-
-    // The event handler functions are defined in handlers.js
-    file_queued_handler: file_queued,
-    file_queue_error_handler: file_queue_error,
-    file_dialog_complete_handler: file_dialog_complete,
-    upload_start_handler: upload_start,
-    upload_progress_handler: upload_progress,
-    upload_error_handler: upload_error,
-    upload_success_handler: upload_success,
-    upload_complete_handler: upload_complete,
-    queue_complete_handler: queue_complete
-  });
-
-  // @todo add support for cancelling individual uploads
-  function File_Progress(file) {
-    this.box = $("#" + file.id);
-    if (!this.box.length) {
-      $("#g-add-photos-queue").append(
-        "<div class=\"box\" id=\"" + file.id + "\">" +
-        "<div class=\"title\"></div>" +
-        "<div class=\"status\"></div>" +
-        "<div class=\"progressbar\"></div>" +
-        "</div>");
-      this.box = $("#" + file.id);
-    }
-    this.title = this.box.find(".title");
-    this.status = this.box.find(".status");
-    this.progress_bar = this.box.find(".progressbar");
-    this.progress_bar.progressbar();
-    this.progress_bar.css("visibility", "hidden");
-  }
-
-  File_Progress.prototype.set_status = function(status_class, msg) {
-    this.box.removeClass("pending error uploading complete").addClass(status_class);
-    this.status.html(msg);
-  }
-
-  function file_queued(file) {
-    var fp = new File_Progress(file);
-    fp.title.html(file.name);
-    fp.set_status("pending", <?= t("Pending...")->for_js() ?>);
-    // @todo add cancel button to call this.cancelUpload(file.id)
-  }
-
-  function file_queue_error(file, error_code, message) {
-    if (error_code === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
-      alert(<?= t("You have attempted to queue too many files.")->for_js() ?>);
-      return;
-    }
-
-    var fp = new File_Progress(file);
-    switch (error_code) {
-    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
-      fp.title.html(file.name);
-      fp.set_status("error", <?= t("<strong>File is too big.</strong> A likely error source is a too low value for <em>upload_max_filesize</em> (%upload_max_filesize) in your <em>php.ini</em>.", array("upload_max_filesize" => ini_get("upload_max_filesize")))->for_js() ?>);
-      break;
-    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
-      fp.title.html(file.name);
-      fp.set_status("error", <?= t("Cannot upload empty files.")->for_js() ?>);
-      break;
-    case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
-      fp.title.html(file.name);
-      fp.set_status("error", <?= t("Invalid file type.")->for_js() ?>);
-      break;
-    default:
-      if (file !== null) {
-        fp.title.html(file.name);
-        fp.set_status("error", <?= t("Unknown error")->for_js() ?>);
-      }
-      break;
-    }
-  }
-
-  function file_dialog_complete(num_files_selected, num_files_queued) {
-    if (num_files_selected > 0) {
-      $("#g-cancelupload").show();
-      $("#g-uploadstatus").text(get_completed_status_msg(this.getStats()));
-    }
-
-    // Auto start the upload
-    this.startUpload();
-  }
-
-  function upload_start(file) {
-    // Do all file validation on the server side.  Update the UI here because in Linux
-    // no uploadProgress events are called (limitation in the Linux Flash VM).
-    var fp = new File_Progress(file);
-    fp.title.html(file.name);
-    fp.set_status("uploading", <?= t("Uploading...")->for_js() ?>);
-    $("#g-add-photos-canvas").scrollTo(fp.box, 1000);
-
-    // move file select button
-    $("#SWFUpload_0").css({'left': '0', 'top': '0'});
-    swfu.setButtonText(<?= json_encode('<span class="swfUploadFont">' . t("Select more photos...") . '</span>') ?>);
-
-    return true;
-    // @todo add cancel button to call this.cancelUpload(file.id)
-  }
-
-  function upload_progress(file, bytes_loaded, bytes_total) {
-    var percent = Math.ceil((bytes_loaded / bytes_total) * 100);
-    var fp = new File_Progress(file);
-    fp.set_status("uploading", <?= t("Uploading...")->for_js() ?>);
-    fp.progress_bar.css("visibility", "visible");
-    fp.progress_bar.progressbar("value", percent);
-  }
-
-  function upload_success(file, serverData) {
-    var fp = new File_Progress(file);
-    fp.progress_bar.progressbar("value", 100);
-    fp.set_status("complete", <?= t("Complete.")->for_js() ?>);
-  }
-
-  function upload_error(file, error_code, message) {
-    var fp = new File_Progress(file);
-    switch (error_code) {
-    case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
-      fp.set_status("error", <?= t("Upload error: bad image file")->for_js() ?>);
-      break;
-    case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
-      fp.set_status("error", <?= t("Upload failed")->for_js() ?>);
-      break;
-    case SWFUpload.UPLOAD_ERROR.IO_ERROR:
-      fp.set_status("error", <?= t("Server error")->for_js() ?>);
-      break;
-    case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
-      fp.set_status("error", <?= t("Security error")->for_js() ?>);
-      break;
-    case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
-      fp.set_status("error", <?= t("Upload limit exceeded")->for_js() ?>);
-      break;
-    case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
-      fp.set_status("error", <?= t("Failed validation.  File skipped")->for_js() ?>);
-      break;
-    case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
-      // If there aren't any files left (they were all cancelled) disable the cancel button
-      if (this.getStats().files_queued === 0) {
-        $("#g-cancelupload").hide();
-      }
-      fp.set_status("error", <?= t("Cancelled")->for_js() ?>);
-      break;
-    case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
-      fp.set_status("error", <?= t("Stopped")->for_js() ?>);
-      break;
-    default:
-      fp.set_status("error", <?= t("Unknown error: ")->for_js() ?> + error_code);
-      break;
-    }
-  }
-
-  function upload_complete(file) {
-    var stats = this.getStats();
-    $("#g-uploadstatus").text(get_completed_status_msg(stats));
-    if (stats.files_queued === 0) {
-      $("#g-cancelupload").hide();
-    }
-  }
-
-  function get_completed_status_msg(stats) {
-    var msg = <?= t("(completed %completed of %total)", array("completed" => "__COMPLETED__", "total" => "__TOTAL__"))->for_js() ?>;
-    msg = msg.replace("__COMPLETED__", stats.successful_uploads);
-    msg = msg.replace("__TOTAL__", stats.files_queued + stats.successful_uploads +
-      stats.upload_errors + stats.upload_cancelled + stats.queue_errors);
-    return msg;
-  }
+  <button id="g-upload-cancel-all" class="ui-state-default ui-corner-all ui-state-disabled" onclick="$('#g-uploadify').uploadifyClearQueue();return false;" disabled="disabled">
+    <?= t("Cancel All") ?>
+  </button>
 
-  // This event comes from the Queue Plugin
-  function queue_complete(num_files_uploaded) {
-    var status_msg = <?= t("Uploaded: __COUNT__")->for_js() ?>;
-    $("#g-upload-status").html(status_msg.replace("__COUNT__", num_files_uploaded));
-  }
-</script>
+</div>
+</form>
-- 
cgit v1.2.3