issue #50 styling the new uploader

dokuwiki · Aug 15, 2011 · 873cd06 · 873cd06
1 parent e9eba4b
commit 873cd06
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 13 deletions.
diff --git a/inc/lang/en/lang.php b/inc/lang/en/lang.php
@@ -354,7 +354,7 @@
 $lang['js']['media_diff_opacity']  = 'Changeable opacity of images';
 $lang['js']['media_diff_portions'] = 'Portions of images';
 
-$lang['js']['media_select']     = 'Select files';
+$lang['js']['media_select']     = 'Select files...';
 $lang['js']['media_upload_btn'] = 'Start uploading';
 $lang['js']['media_drop']       = 'Drop files here to upload';
 $lang['js']['media_cancel']     = 'remove';

diff --git a/lib/exe/ajax.php b/lib/exe/ajax.php
@@ -256,16 +256,25 @@ function ajax_mediaupload(){
     if($AUTH >= AUTH_UPLOAD) { io_createNamespace("$NS:xxx", 'media'); }
 
     if ($_FILES['qqfile']['error']) unset($_FILES['qqfile']);
-    if ($_FILES['qqfile']['tmp_name']) $res = media_upload($NS, $AUTH, $_FILES['qqfile']);
-    if (isset($_GET['qqfile'])) $res = media_upload_xhr($NS, $AUTH);
-    if ($res) $result = array('success'=>true);
+
+    if ($_FILES['qqfile']['tmp_name']) {
+        $res = media_upload($NS, $AUTH, $_FILES['qqfile']);
+        $id = ((empty($_POST['mediaid'])) ? $_FILES['qqfile']['name'] : $_POST['mediaid']);
+    }
+    if (isset($_GET['qqfile'])) {
+        $res = media_upload_xhr($NS, $AUTH);
+        $id = $_GET['qqfile'];
+    }
+
+    if ($res) $result = array('success' => true,
+        'link' => media_managerURL(array('ns' => getNS($id), 'image' => $id), '&'));
 
     if (!$result) {
         $error = '';
         if (isset($MSG)) {
             foreach($MSG as $msg) $error .= $msg['msg'];
         }
-        $result = array('error'=> $msg['msg']);
+        $result = array('error' => $msg['msg']);
     }
     echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);
 }

diff --git a/lib/scripts/fileuploaderextended.js b/lib/scripts/fileuploaderextended.js
@@ -52,11 +52,11 @@ qq.extend(qq.FileUploader.prototype, {
         item.qqFileId = id;
 
         var fileElement = this._find(item, 'file');
-        qq.setText(fileElement, this._formatFileName(fileName));
+        qq.setText(fileElement, fileName);
         this._find(item, 'size').style.display = 'none';
 
         var nameElement = this._find(item, 'nameInput');
-        nameElement.value = this._formatFileName(fileName);
+        nameElement.value = fileName;
         nameElement.id = id;
 
         this._listElement.appendChild(item);
@@ -76,20 +76,20 @@ qq.FileUploaderExtended = function(o){
         template: '<div class="qq-uploader">' +
                 '<div class="qq-upload-drop-area"><span>' + LANG.media_drop + '</span></div>' +
                 '<div class="qq-upload-button">' + LANG.media_select + '</div>' +
-                '<ul class="qq-upload-list"></ul>' +
+                '<div class="qq-upload-list"></div>' +
                 '<label class="check" for="dw__ow"><input id="dw__ow" type="checkbox" value="1" name="ow"><span>' + LANG.media_overwrt + '</span></label>' +
                 '<div><input class="button" type="submit" value="' + LANG.media_upload_btn + '" id="mediamanager__upload_button"></div>' +
              '</div>',
 
         // template for one item in file list
-        fileTemplate: '<li>' +
+        fileTemplate: '<div class="li">' +
                 '<span class="qq-upload-file qq-upload-file-hidden"></span>' +
                 '<input class="qq-upload-name-input edit" type="text">' +
                 '<span class="qq-upload-spinner-hidden"></span>' +
                 '<span class="qq-upload-size"></span>' +
                 '<a class="qq-upload-cancel" href="#">' + LANG.media_cancel + '</a>' +
                 '<span class="qq-upload-failed-text">Failed</span>' +
-            '</li>',
+            '</div>',
 
         classes: {
             // used to get elements from templates
@@ -140,6 +140,9 @@ qq.extend(qq.FileUploaderExtended.prototype, {
             qq.preventDefault(e);
             self._handler._options.onUpload();
 
+            jQuery(".qq-upload-name-input").each(function (i) {
+                jQuery(this).attr('disabled', 'disabled');
+            });
         });
     },
 
@@ -157,10 +160,13 @@ qq.extend(qq.FileUploaderExtended.prototype, {
         qq.removeClass(fileElement, 'qq-upload-file-hidden');
         qq.remove(nameInput);
         jQuery('.qq-upload-button, #mediamanager__upload_button').remove();
-        jQuery('#dw__ow').parent().remove();
+        jQuery('#dw__ow').parent().hide();
 
         if (result.success){
             qq.addClass(item, this._classes.success);
+            $link = '<a href="' + result.link + '">' + nameInput.value + '</a>';
+            jQuery(fileElement).html($link);
+
         } else {
             qq.addClass(item, this._classes.fail);
             var fail = this._find(item, 'failedText');

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
@@ -81,7 +81,9 @@ var dw_mediamanager = {
             // "upload as" field autofill
             .delegate('#upload__file', 'change', dw_mediamanager.suggest)
             // sort type selection
-            .delegate('#mediamanager__form_sort select', 'change', dw_mediamanager.list);
+            .delegate('#mediamanager__form_sort select', 'change', dw_mediamanager.list)
+            // uploaded images
+            .delegate('.qq-upload-file a', 'click', dw_mediamanager.details);
 
         // changing opened tab in the file details panel
         jQuery('#mediamanager__layout_detail').delegate('#mediamanager__tabs_details a', 'click', dw_mediamanager.details)
@@ -651,6 +653,7 @@ var dw_mediamanager = {
 
     init_ajax_uploader: function () {
         if (!jQuery('#mediamanager__uploader').length) return;
+        if (jQuery('.qq-upload-list').length) return;
 
         var params = dw_mediamanager.form_params(jQuery('#dw__upload'))+'&call=mediaupload';
         params = dw_mediamanager.params_toarray(params);

diff --git a/lib/tpl/default/_fileuploader.css b/lib/tpl/default/_fileuploader.css
@@ -0,0 +1,91 @@
+.qq-uploader {
+    position: relative;
+    width: 100%;
+}
+
+.qq-upload-button {
+    display: block;
+    width: 115px;
+    padding: 7px 0;
+    text-align: center;
+    background: __background_alt__;
+    border: 1px solid __border__;
+    color: __extern__;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.qq-upload-button-hover {
+    background: __border__;
+    color: __background__;
+}
+
+.qq-upload-button-focus {
+    outline: 1px dotted black;
+}
+
+.qq-upload-drop-area {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 70px;
+    z-index: 2;
+    background: __background_neu__;
+    text-align: center;
+}
+
+.qq-upload-drop-area span {
+    display:block;
+    position:absolute;
+    top: 50%;
+    width:100%;
+    margin-top:-8px;
+    font-size:16px;
+}
+
+.qq-upload-drop-area-active {
+    background: #DADADA;
+}
+
+.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
+    margin-right: 7px;
+}
+
+.qq-upload-spinner {
+    display: inline-block;
+    background: url("../../images/throbber.gif");
+    width: 15px;
+    height: 15px;
+    vertical-align: text-bottom;
+}
+
+.qq-upload-size,.qq-upload-cancel {
+    font-size:11px;
+}
+
+.qq-upload-failed-text {
+    display:none;
+}
+
+.qq-upload-fail .qq-upload-failed-text {
+    display:inline;
+}
+
+.qq-upload-file {
+    display: block;
+    font-weight: bold;
+}
+
+.qq-upload-file-hidden {
+    display:none;
+}
+
+.qq-upload-cancel {
+    padding-left: 10px;
+}
+
+.qq-uploader #dw__ow {
+    margin: 10px 0;
+}
diff --git a/lib/tpl/default/style.ini b/lib/tpl/default/style.ini
@@ -16,7 +16,7 @@ _admin.css        = screen
 _linkwiz.css      = screen
 _subscription.css = screen
 mediamanager.css  = screen
-fileuploader.css  = screen
+_fileuploader.css = screen
 
 rtl.css        = rtl
 print.css      = print