From 873cd06e1bda38e0decce16d6ec7d3bdaece612e Mon Sep 17 00:00:00 2001
From: Kate Arzamastseva <pshns@ukr.net>
Date: Mon, 15 Aug 2011 14:22:19 +0300
Subject: [PATCH] issue #50 styling the new uploader
---
inc/lang/en/lang.php | 2 +-
lib/exe/ajax.php | 17 ++++--
lib/scripts/fileuploaderextended.js | 18 ++++--
lib/scripts/media.js | 5 +-
lib/tpl/default/_fileuploader.css | 91 +++++++++++++++++++++++++++++
lib/tpl/default/style.ini | 2 +-
6 files changed, 122 insertions(+), 13 deletions(-)
create mode 100644 lib/tpl/default/_fileuploader.css
diff --git a/inc/lang/en/lang.php b/inc/lang/en/lang.php
index f06315a77..d10f523ef 100644
--- a/inc/lang/en/lang.php
+++ b/inc/lang/en/lang.php
@@ -354,7 +354,7 @@ $lang['js']['media_diff_both'] = 'Both images';
$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
index aa07fe7b0..52131d864 100644
--- 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
index 822c32958..de0bdaa3d 100644
--- 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
index 4fc4155b2..c1ff1f451 100644
--- 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
new file mode 100644
index 000000000..07f3158a1
--- /dev/null
+++ 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
index e12ddbf57..05914012e 100644
--- 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
--
GitLab