Skip to content

Commit

Permalink
[ui] fix Studio-42#1609 toast notification on complete of upload/past…
Browse files Browse the repository at this point in the history
…e into any folder
  • Loading branch information
nao-pon committed Aug 21, 2016
1 parent 6838b88 commit ad4f7bc
Show file tree
Hide file tree
Showing 11 changed files with 179 additions and 5 deletions.
1 change: 1 addition & 0 deletions css/fonts.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,5 @@
.elfinder-button-search input { font-size:.8em; }
.elfinder-statusbar div { font-size:.7em; }
.elfinder-drag-num { font-size:12px; }
.elfinder-toast { font-size:.76em; }

70 changes: 70 additions & 0 deletions css/toast.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/*
* CSS for Toastr
* Copyright 2012-2015
* Authors: John Papa, Hans Fjällemark, and Tim Ferrell.
* All Rights Reserved.
* Use, reproduction, distribution, and modification of this code is subject to the terms and
* conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
*
* ARIA Support: Greta Krafsig
*
* Project: https://github.com/CodeSeven/toastr
*/

.elfinder .elfinder-toast {
position: absolute;
top: 12px;
right: 12px;
max-width: 90%;
}

.elfinder .elfinder-toast > div {
position: relative;
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 8px 8px 8px 50px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
-moz-box-shadow: 0 0 12px #999999;
-webkit-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 0.9;
filter: alpha(opacity=90);
background-color: #030303;
text-align: center;
}

.elfinder .elfinder-toast > .toast-info {
background-color: #2F96B4;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
.elfinder .elfinder-toast > .toast-error {
background-color: #BD362F;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
.elfinder .elfinder-toast > .toast-success {
background-color: #51A351;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
.elfinder .elfinder-toast > .toast-warning {
background-color: #F89406;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}


.elfinder .elfinder-toast > .toast-success button.ui-button {
background-color: green;
background-image: none;
color: #FFF;
margin-top: 8px;
}

.elfinder .elfinder-toast > .toast-success button.ui-button.ui-state-hover {
background-color: #add6ad;
color: #254b25;
}
2 changes: 2 additions & 0 deletions elfinder.playground.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<link rel="stylesheet" href="css/quicklook.css" type="text/css">
<link rel="stylesheet" href="css/statusbar.css" type="text/css">
<link rel="stylesheet" href="css/theme.css" type="text/css">
<link rel="stylesheet" href="css/toast.css" type="text/css">
<link rel="stylesheet" href="css/toolbar.css" type="text/css">

<!--
Expand Down Expand Up @@ -61,6 +62,7 @@
<script src="js/ui/searchbutton.js"></script>
<script src="js/ui/sortbutton.js"></script>
<script src="js/ui/stat.js"></script>
<script src="js/ui/toast.js"></script>
<script src="js/ui/toolbar.js"></script>
<script src="js/ui/tree.js"></script>
<script src="js/ui/uploadButton.js"></script>
Expand Down
2 changes: 2 additions & 0 deletions elfinder.src.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<link rel="stylesheet" href="css/quicklook.css" type="text/css">
<link rel="stylesheet" href="css/statusbar.css" type="text/css">
<link rel="stylesheet" href="css/theme.css" type="text/css">
<link rel="stylesheet" href="css/toast.css" type="text/css">
<link rel="stylesheet" href="css/toolbar.css" type="text/css">

<!-- Section JavaScript -->
Expand Down Expand Up @@ -58,6 +59,7 @@
<script src="js/ui/searchbutton.js"></script>
<script src="js/ui/sortbutton.js"></script>
<script src="js/ui/stat.js"></script>
<script src="js/ui/toast.js"></script>
<script src="js/ui/toolbar.js"></script>
<script src="js/ui/tree.js"></script>
<script src="js/ui/uploadButton.js"></script>
Expand Down
15 changes: 14 additions & 1 deletion js/commands/paste.js
Original file line number Diff line number Diff line change
Expand Up @@ -203,11 +203,24 @@ elFinder.prototype.commands.paste = function() {
notify : {type : cut ? 'move' : 'copy', cnt : cnt}
})
.done(function(data) {
var newItem, node;
dfrd.resolve(data);
if (data && data.added && data.added[0]) {
var newItem = fm.getUI('cwd').find('#'+fm.cwdHash2Id(data.added[0].hash));
newItem = fm.getUI('cwd').find('#'+fm.cwdHash2Id(data.added[0].hash));
if (newItem.length) {
newItem.trigger('scrolltoview');
} else {
if (dst.hash !== fm.cwd().hash) {
node = $('<div/>').append(
$('<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all"><span class="ui-button-text">'+fm.i18n('cmdopendir')+'</span></button>')
.on('mouseenter mouseleave', function(e) {
$(this).toggleClass('ui-state-hover', e.type == 'mouseenter');
}).on('click', function() {
fm.exec('open', dst.hash);
})
);
}
fm.toast({msg: fm.i18n(['complete', fm.i18n('cmd' + (cut ? 'move' : 'copy'))]), extNode: node});
}
}
})
Expand Down
15 changes: 14 additions & 1 deletion js/commands/upload.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,25 @@ elFinder.prototype.commands.upload = function() {
dfrd.reject(error);
})
.done(function(data) {
var cwd = fm.getUI('cwd');
var cwd = fm.getUI('cwd'),
node;
dfrd.resolve(data);
if (data && data.added && data.added[0]) {
var newItem = cwd.find('#'+fm.cwdHash2Id(data.added[0].hash));
if (newItem.length) {
newItem.trigger('scrolltoview');
} else {
if (targetDir.hash !== cwdHash) {
node = $('<div/>').append(
$('<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all"><span class="ui-button-text">'+fm.i18n('cmdopendir')+'</span></button>')
.on('mouseenter mouseleave', function(e) {
$(this).toggleClass('ui-state-hover', e.type == 'mouseenter');
}).on('click', function() {
fm.exec('open', targetDir.hash);
})
);
}
fm.toast({msg: fm.i18n(['complete', fm.i18n('cmdupload')]), extNode: node});
}
}
});
Expand Down
13 changes: 12 additions & 1 deletion js/elFinder.js
Original file line number Diff line number Diff line change
Expand Up @@ -1965,6 +1965,16 @@ window.elFinder = function(node, opts) {
return dialog;
};

/**
* Create and return toast.
*
* @param Object toast options - see ui/toast.js
* @return jQuery
*/
this.toast = function(options) {
return $('<div class="ui-front"/>').appendTo(this.ui.toast).elfindertoast(options || {}, this);
};

/**
* Return UI widget or node
*
Expand Down Expand Up @@ -2775,7 +2785,8 @@ window.elFinder = function(node, opts) {
title : '&nbsp;',
width : parseInt(this.options.notifyDialog.width)
}),
statusbar : $('<div class="ui-widget-header ui-helper-clearfix ui-corner-bottom elfinder-statusbar"/>').hide().appendTo(node)
statusbar : $('<div class="ui-widget-header ui-helper-clearfix ui-corner-bottom elfinder-statusbar"/>').hide().appendTo(node),
toast : $('<div class="elfinder-toast"/>').appendTo(node)
};

/**
Expand Down
2 changes: 2 additions & 0 deletions js/i18n/elfinder.LANG.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ if (elFinder && elFinder.prototype && typeof(elFinder.prototype.i18) == 'object'
'cmdchmod' : 'Change mode', // from v2.1 added 20.6.2015
'cmdopendir' : 'Open a folder', // from v2.1 added 13.1.2016
'cmdcolwidth' : 'Reset column width', // from v2.1.13 added 12.06.2016
'cmdmove' : 'Move', // from v2.1.15 added 21.08.2016

/*********************************** buttons ***********************************/
'btnClose' : 'Close',
Expand Down Expand Up @@ -363,6 +364,7 @@ if (elFinder && elFinder.prototype && typeof(elFinder.prototype.i18) == 'object'
'hasClipboard' : 'You have $1 items in the clipboard.', // from v2.1.13 added 6.3.2016
'incSearchOnly' : 'Incremental search is only from the current view.', // from v2.1.13 added 6.30.2016
'reinstate' : 'Reinstate', // from v2.1.15 added 3.8.2016
'complete' : '$1 complete', // from v2.1.15 added 21.8.2016

/********************************** mimetypes **********************************/
'kindUnknown' : 'Unknown',
Expand Down
4 changes: 3 additions & 1 deletion js/i18n/elfinder.en.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* English translation
* @author Troex Nevelin <[email protected]>
* @version 2016-08-03
* @version 2016-08-21
*/
if (elFinder && elFinder.prototype && typeof(elFinder.prototype.i18) == 'object') {
elFinder.prototype.i18.en = {
Expand Down Expand Up @@ -135,6 +135,7 @@ if (elFinder && elFinder.prototype && typeof(elFinder.prototype.i18) == 'object'
'cmdopendir' : 'Open a folder', // from v2.1 added 13.1.2016
'cmdcolwidth' : 'Reset column width', // from v2.1.13 added 12.06.2016
'cmdfullscreen': 'Full Screen', // from v2.1.15 added 03.08.2016
'cmdmove' : 'Move', // from v2.1.15 added 21.08.2016

/*********************************** buttons ***********************************/
'btnClose' : 'Close',
Expand Down Expand Up @@ -357,6 +358,7 @@ if (elFinder && elFinder.prototype && typeof(elFinder.prototype.i18) == 'object'
'hasClipboard' : 'You have $1 items in the clipboard.', // from v2.1.13 added 6.3.2016
'incSearchOnly' : 'Incremental search is only from the current view.', // from v2.1.13 added 6.30.2016
'reinstate' : 'Reinstate', // from v2.1.15 added 3.8.2016
'complete' : '$1 complete', // from v2.1.15 added 21.8.2016

/********************************** mimetypes **********************************/
'kindUnknown' : 'Unknown',
Expand Down
4 changes: 3 additions & 1 deletion js/i18n/elfinder.jp.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Japanese translation
* @author Tomoaki Yoshida <[email protected]>
* @author Naoki Sawada <[email protected]>
* @version 2016-08-03
* @version 2016-08-21
*/
if (elFinder && elFinder.prototype && typeof(elFinder.prototype.i18) == 'object') {
elFinder.prototype.i18.jp = {
Expand Down Expand Up @@ -136,6 +136,7 @@ if (elFinder && elFinder.prototype && typeof(elFinder.prototype.i18) == 'object'
'cmdopendir' : 'フォルダを開く', // from v2.1 added 13.1.2016
'cmdcolwidth' : '列幅リセット', // from v2.1.13 added 12.06.2016
'cmdfullscreen': 'フルスクリーン', // from v2.1.15 added 03.08.2016
'cmdmove' : '移動', // from v2.1.15 added 21.08.2016

/*********************************** buttons ***********************************/
'btnClose' : '閉じる',
Expand Down Expand Up @@ -358,6 +359,7 @@ if (elFinder && elFinder.prototype && typeof(elFinder.prototype.i18) == 'object'
'hasClipboard' : '$1 個のアイテムがクリップボードに入っています', // from v2.1.13 added 6.3.2016
'incSearchOnly' : '逐次検索は現在のビューからのみです', // from v2.1.13 added 6.30.2016
'reinstate' : '元に戻す', // from v2.1.15 added 3.8.2016
'complete' : '$1 完了', // from v2.1.15 added 21.8.2016

/********************************** mimetypes **********************************/
'kindUnknown' : '不明',
Expand Down
56 changes: 56 additions & 0 deletions js/ui/toast.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
"use strict";
/**
* @class elFinder toast
*
* This was created inspired by the toastr. Thanks to developers of toastr.
* CodeSeven/toastr: http://johnpapa.net <https://github.com/CodeSeven/toastr>
*
* @author Naoki Sawada
**/
$.fn.elfindertoast = function(opts, fm) {
var defOpts = {
mode: 'success',
msg: '',
showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
showDuration: 300,
showEasing: 'swing', //swing and linear are built into jQuery
onShown: undefined,
hideMethod: 'fadeOut',
hideDuration: 1000,
hideEasing: 'swing',
onHidden: undefined,
timeOut: 3000,
extNode: undefined
};
return this.each(function() {
var self = $(this);
opts = $.extend({}, defOpts, opts || {});
self.on('click', function(e) {
e.stopPropagation();
e.preventDefault();
self.remove();
}).hide().addClass('toast-' + opts.mode).append($('<div class="elfinder-toast-msg"/>').html(opts.msg));
if (opts.extNode) {
self.append(opts.extNode);
}
self[opts.showMethod]({
duration: opts.showDuration,
easing: opts.showEasing,
complete: function() {
opts.onShown && opts.onShown();
if (opts.timeOut) {
setTimeout(function() {
self[opts.hideMethod]({
duration: opts.hideDuration,
easing: opts.hideEasing,
complete: function() {
opts.onHidden && opts.onHidden();
self.remove();
}
});
}, opts.timeOut);
}
}
});
});
};

0 comments on commit ad4f7bc

Please sign in to comment.