From 28b1669c4b1afaed7429da2cc9580340dcb13b6e Mon Sep 17 00:00:00 2001 From: Sem Date: Tue, 31 Jul 2012 10:09:51 +0200 Subject: New uploader based on javascript for Tidypics --- languages/en.php | 10 +++- pages/photos/image/upload.php | 16 +++++- start.php | 16 ++++++ views/default/forms/photos/basic_upload.php | 75 +++++++++++++++++------------ views/default/photos/css.php | 64 +++++++++++++++++++----- 5 files changed, 135 insertions(+), 46 deletions(-) diff --git a/languages/en.php b/languages/en.php index 1c40e5e0a..9d8773efd 100644 --- a/languages/en.php +++ b/languages/en.php @@ -57,6 +57,13 @@ $english = array( 'tidypics:sort' => 'Sorting the %s album', 'tidypics:none' => 'No photo albums', + //upload + 'tidypics:upload:error' => 'Error:', + 'tidypics:upload:maxfilesize' => 'File is too big', + 'tidypics:upload:minfilesize' => 'File is too small', + 'tidypics:upload:acceptfiletypes' => 'Filetype not allowed', + 'tidypics:upload:maxnumberoffiles' => 'Max number of files exceeded', + //settings 'tidypics:settings' => 'Settings', 'tidypics:settings:main' => 'Primary settings', @@ -157,8 +164,7 @@ $english = array( 'tidypics:uploader:upload' => "Upload photos", 'tidypics:uploader:describe' => "Describe photos", 'tidypics:uploader:filedesc' => 'Image files (jpeg, png, gif)', - 'tidypics:uploader:instructs' => 'There are three easy steps for adding photos to your album using this uploader: choosing, uploading, and describing them. There is a %s MB maximum per photo. If you do not have Flash, there is also a basic uploader available.', - 'tidypics:uploader:basic' => 'You can upload up to 10 photos at a time (%s MB maximum per photo)', + 'tidypics:uploader:help' => 'Tip: use Ctrl or Shift keys to select more than one file. You also can drag&drop photos from desktop.', 'tidypics:sort:instruct' => 'Sort the album photos by dragging and dropping the images. Then click the save button.', 'tidypics:sort:no_images' => 'No images found to sort. Upload images using the link above.', diff --git a/pages/photos/image/upload.php b/pages/photos/image/upload.php index 61be8523b..c8e57038c 100644 --- a/pages/photos/image/upload.php +++ b/pages/photos/image/upload.php @@ -38,7 +38,21 @@ elgg_push_breadcrumb($owner->name, "photos/owner/$owner->username"); elgg_push_breadcrumb($album->getTitle(), $album->getURL()); elgg_push_breadcrumb(elgg_echo('album:addpix')); -$content = elgg_view('forms/photos/basic_upload', array('entity' => $album)); +// load javascript dependences +elgg_load_js('jquery-tmpl'); +elgg_load_js('jquery-load-image'); +elgg_load_js('jquery-canvas-to-blob'); +elgg_load_js('jquery-fileupload'); +elgg_load_js('jquery-fileupload-ui'); +elgg_load_js('tidypics:upload'); + +$form_vars = array( + 'id' => 'fileupload', + 'action' => 'action/photos/image/upload', + 'enctype' => 'multipart/form-data', +); + +$content = elgg_view_form('photos/basic_upload', $form_vars, array('entity' => $album)); $body = elgg_view_layout('content', array( 'content' => $content, diff --git a/start.php b/start.php index 45e9257f5..376c7985d 100644 --- a/start.php +++ b/start.php @@ -38,12 +38,28 @@ function tidypics_init() { $js = elgg_get_simplecache_url('js', 'photos/tidypics'); elgg_register_simplecache_view('js/photos/tidypics'); elgg_register_js('tidypics', $js, 'footer'); + $js = elgg_get_simplecache_url('js', 'photos/upload'); + elgg_register_simplecache_view('js/photos/upload'); + elgg_register_js('tidypics:upload', $js, 'footer'); $js = elgg_get_simplecache_url('js', 'photos/tagging'); elgg_register_simplecache_view('js/photos/tagging'); elgg_register_js('tidypics:tagging', $js, 'footer'); elgg_register_js('tidypics:slideshow', 'mod/tidypics/vendors/PicLensLite/piclens_optimized.js', 'footer'); + $js_base = 'mod/tidypics/vendors/jquery-file-upload/js'; + + elgg_register_js('jquery-tmpl', "http://blueimp.github.com/JavaScript-Templates/tmpl.js", 'footer'); + elgg_register_js('jquery-load-image', "$js_base/vendor/load-image.min.js", 'footer'); + elgg_register_js('jquery-canvas-to-blob', "$js_base/vendor/canvas-to-blob.min.js", 'footer'); + elgg_register_js('jquery-image-gallery', "$js_base/vendor/jquery.image-gallery.min.js", 'footer'); + elgg_register_js('jquery-iframe-transport', "$js_base/jquery.iframe-transport.js", 'footer'); + + elgg_register_js('jquery-fileupload', "$js_base/jquery.fileupload.js", 'footer'); + elgg_register_js('jquery-fileupload-fp', "$js_base/jquery.fileupload-fp.js", 'footer'); + elgg_register_js('jquery-fileupload-ui', "$js_base/jquery.fileupload-ui.js", 'footer'); + elgg_register_js('jquery-fileupload-jui', "$js_base/jquery.fileupload-jui.js", 'footer'); + // Add photos link to owner block/hover menus elgg_register_plugin_hook_handler('register', 'menu:owner_block', 'tidypics_owner_block_menu'); diff --git a/views/default/forms/photos/basic_upload.php b/views/default/forms/photos/basic_upload.php index ba849d1b4..9e71cf59e 100644 --- a/views/default/forms/photos/basic_upload.php +++ b/views/default/forms/photos/basic_upload.php @@ -1,48 +1,63 @@ access_id; +$help = elgg_echo('tidypics:uploader:help'); -$maxfilesize = (float) elgg_get_plugin_setting('maxfilesize', 'tidypics'); +$input = elgg_view('input/file', array( + 'name' => 'images[]', + 'multiple' => 'multiple', + 'class' => 'hidden-js', +)); -$instructions = elgg_echo("tidypics:uploader:upload"); -$max = elgg_echo('tidypics:uploader:basic', array($maxfilesize)); +$button = elgg_view('output/url', array( + 'text' => elgg_echo('tidypics:uploader:upload') . $input, + 'class' => 'elgg-button elgg-button-action fileinput-button', +)); -$list = ''; -for ($x = 0; $x < 10; $x++) { - $list .= '
  • ' . elgg_view('input/file', array('name' => 'images[]')) . '
    • '; -} +$reset = elgg_view('input/reset', array( + 'value' => elgg_echo('cancel'), + 'class' => 'hidden', +)); $foot = elgg_view('input/hidden', array('name' => 'guid', 'value' => $album->getGUID())); $foot .= elgg_view('input/submit', array('value' => elgg_echo("save"))); -$form_body = << $max -
    -
      - $list -
    +
    + $button + $reset +

    $help

    +
    +
    + + +
    $foot
    HTML; -echo elgg_view('input/form', array( - 'body' => $form_body, - 'action' => 'action/photos/image/upload', - 'enctype' => 'multipart/form-data', -)); +?> + + + + + + +