mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-07-25 14:16:44 +00:00
Merge pull request #2628 from IgorShadurin/swarm
swarm/examples/album: improve upload UX No more unhandled errors and loose ends in the UI. Forward/Back buttons work as undo/redo, all long operations display an informative modal dialog, minor problems with cursor movements fixed.
This commit is contained in:
Daniel A. Nagy
commit
4c19de895b
5 changed files with 364 additions and 41 deletions
|
|
@ -103,13 +103,14 @@ function onUploadingComplete(uri) {
|
|||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var i = xhr.responseText;
|
||||
window.location.replace("/bzz:/" + i + "/");
|
||||
window.location = "/bzz:/" + i + "/" + window.location.hash;
|
||||
}
|
||||
};
|
||||
sendImages(xhr, uri);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
showModal('Uploading photos..');
|
||||
uploadFile(files, 0, "");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||
<link rel="shortcut icon" href="images/favicon.ico"/>
|
||||
<script src="jquery.js"></script>
|
||||
<script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script>
|
||||
$.noConflict();
|
||||
</script>
|
||||
|
|
@ -16,8 +17,15 @@
|
|||
<script src="index.js" type="text/javascript"></script>
|
||||
|
||||
<link href="index.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="stylesheet" href="jquery.modal.css" type="text/css" media="screen"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="preview-modal" style="display:none; text-align: center">
|
||||
<p id="action-text"></p>
|
||||
<img style="text-align: center; padding-top: 20px" src="throbber.gif" id="currentPreview">
|
||||
</div>
|
||||
|
||||
<noscript>
|
||||
<h2>Frak! JavaScript required :'(</h2>
|
||||
</noscript>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
// Copyright(c) 2003-2014 by wave++ "Yuri D'Elia" <wavexx@thregr.org>
|
||||
// Distributed under GPL2 (see COPYING) WITHOUT ANY WARRANTY.
|
||||
var datafile = 'data.json';
|
||||
var padding = 100;
|
||||
var marginTop = 50;
|
||||
var padding = 20;
|
||||
var duration = 500;
|
||||
var thrdelay = 1500;
|
||||
var hidedelay = 3000;
|
||||
|
|
@ -42,7 +41,6 @@ var eback; // background
|
|||
var enoise; // additive noise
|
||||
var eflash; // flashing object
|
||||
var ehdr; // header
|
||||
var progress; // progress
|
||||
var elist; // thumbnail list
|
||||
var fscr; // thumbnail list scroll fx
|
||||
var econt; // picture container
|
||||
|
|
@ -61,6 +59,18 @@ var idle; // idle timer
|
|||
var clayout; // current layout
|
||||
var csr; // current scaling ratio
|
||||
|
||||
function showModal(text, previewImageUrl) {
|
||||
if (!previewImageUrl) {
|
||||
previewImageUrl = 'throbber.gif';
|
||||
}
|
||||
|
||||
jQuery('#currentPreview').attr('src', previewImageUrl);
|
||||
jQuery('#action-text').text(text);
|
||||
jQuery('#preview-modal').modal({
|
||||
fadeDuration: 250
|
||||
});
|
||||
}
|
||||
|
||||
function resize()
|
||||
{
|
||||
// best layout
|
||||
|
|
@ -233,7 +243,7 @@ function resizeMainImg(img)
|
|||
img.setStyles(
|
||||
{
|
||||
'position': 'absolute',
|
||||
'top': (contSize.y / 2 - img.height / 2) + marginTop,
|
||||
'top': contSize.y / 2 - img.height / 2,
|
||||
'left': contSize.x / 2 - img.width / 2
|
||||
});
|
||||
}
|
||||
|
|
@ -275,41 +285,53 @@ function imageToUrl(img, w, h) {
|
|||
return can.toDataURL();
|
||||
}
|
||||
|
||||
function deleteImg()
|
||||
{
|
||||
if(imgs.data.length < 2) return; // empty albums not allowed
|
||||
var fname = imgs.data[eidx].img[0];
|
||||
imgs.data.splice(eidx,1);
|
||||
function deleteImg() {
|
||||
if (imgs.data.length < 2) return; // empty albums not allowed
|
||||
var fname = imgs.data[eidx].img[0];
|
||||
imgs.data.splice(eidx, 1);
|
||||
|
||||
// construct an HTTP request
|
||||
var xhr = new XMLHttpRequest();
|
||||
showModal('Deleting photo..', fname);
|
||||
// construct an HTTP request
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
// set response handler
|
||||
xhr.onreadystatechange = function () { if (xhr.readyState === 4) {
|
||||
var i = xhr.responseText;
|
||||
var xhrd = new XMLHttpRequest();
|
||||
xhrd.onreadystatechange = function () { if (xhrd.readyState === 4) {
|
||||
var j = xhrd.responseText;
|
||||
window.location.replace("/bzz:/" + j + "/");
|
||||
}};
|
||||
xhrd.open("DELETE", "/bzz%3A/" + i + "/" + fname, true);
|
||||
xhrd.send();
|
||||
}};
|
||||
// set response handler
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var i = xhr.responseText;
|
||||
var xhrd = new XMLHttpRequest();
|
||||
xhrd.onreadystatechange = function () {
|
||||
if (xhrd.readyState === 4) {
|
||||
var j = xhrd.responseText;
|
||||
window.location = "/bzz:/" + j + "/" + window.location.hash;
|
||||
}
|
||||
};
|
||||
xhrd.open("DELETE", "/bzz%3A/" + i + "/" + fname, true);
|
||||
xhrd.send();
|
||||
}
|
||||
};
|
||||
|
||||
sendImages(xhr, "");
|
||||
sendImages(xhr, "");
|
||||
}
|
||||
|
||||
function moveUpDown(off)
|
||||
{
|
||||
var me = imgs.data[eidx];
|
||||
imgs.data[eidx] = imgs.data[eidx + off];
|
||||
imgs.data[eidx + off] = me;
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function () { if (xhr.readyState === 4) {
|
||||
var i = xhr.responseText;
|
||||
window.location.replace("/bzz:/" + i + "/#" + (eidx + off));
|
||||
}};
|
||||
sendImages(xhr, "");
|
||||
function moveUpDown(off) {
|
||||
var me = imgs.data[eidx];
|
||||
console.log(me.thumb[0]);
|
||||
var moveText = 'Moving up..';
|
||||
if (off > 0) {
|
||||
moveText = 'Moving down..';
|
||||
}
|
||||
|
||||
showModal(moveText, me.thumb[0]);
|
||||
imgs.data[eidx] = imgs.data[eidx + off];
|
||||
imgs.data[eidx + off] = me;
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var i = xhr.responseText;
|
||||
window.location.replace("/bzz:/" + i + "/#" + (eidx + off));
|
||||
}
|
||||
};
|
||||
sendImages(xhr, "");
|
||||
}
|
||||
|
||||
function moveUp()
|
||||
|
|
@ -364,9 +386,6 @@ function onMainReady()
|
|||
ehdr.set('html', dsc.join(' '));
|
||||
ehdr.setStyle('display', (dsc.length? 'block': 'none'));
|
||||
|
||||
progress.set('html', '<img id="currentPreview">');
|
||||
progress.set('style', 'text-align: center; padding-top: 20px');
|
||||
|
||||
// complete thumbnails
|
||||
var d = duration;
|
||||
if(first !== false)
|
||||
|
|
@ -601,9 +620,6 @@ function initGallery(data)
|
|||
ehdr = new Element('div', { id: 'header' });
|
||||
ehdr.inject(econt);
|
||||
|
||||
progress = new Element('div', { id: 'progress' });
|
||||
progress.inject(econt);
|
||||
|
||||
elist = new Element('div', { id: 'list' });
|
||||
elist.inject(emain);
|
||||
|
||||
|
|
|
|||
70
swarm/examples/album/jquery.modal.css
Normal file
70
swarm/examples/album/jquery.modal.css
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
.blocker {
|
||||
position: fixed;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.75);
|
||||
text-align: center;
|
||||
}
|
||||
.blocker:before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-right: -0.05em;
|
||||
}
|
||||
.blocker.behind {
|
||||
background-color: transparent;
|
||||
}
|
||||
.modal {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
padding: 15px 30px;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
-o-border-radius: 8px;
|
||||
-ms-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: 0 0 10px #000;
|
||||
-moz-box-shadow: 0 0 10px #000;
|
||||
-o-box-shadow: 0 0 10px #000;
|
||||
-ms-box-shadow: 0 0 10px #000;
|
||||
box-shadow: 0 0 10px #000;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal a.close-modal {
|
||||
position: absolute;
|
||||
top: -12.5px;
|
||||
right: -12.5px;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-indent: -9999px;
|
||||
background: url("data:image/png;base64,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") no-repeat 0 0;
|
||||
}
|
||||
|
||||
.modal-spinner {
|
||||
display: none;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -32px;
|
||||
margin-top: -32px;
|
||||
background: url("data:image/gif;base64,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") #111 no-repeat center center;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
-o-border-radius: 8px;
|
||||
-ms-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
228
swarm/examples/album/jquery.modal.js
Normal file
228
swarm/examples/album/jquery.modal.js
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
/*
|
||||
A simple jQuery modal (http://github.com/kylefox/jquery-modal)
|
||||
Version 0.7.0
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
var modals = [],
|
||||
getCurrent = function() {
|
||||
return modals.length ? modals[modals.length - 1] : null;
|
||||
},
|
||||
selectCurrent = function() {
|
||||
var i,
|
||||
selected = false;
|
||||
for (i=modals.length-1; i>=0; i--) {
|
||||
if (modals[i].$blocker) {
|
||||
modals[i].$blocker.toggleClass('current',!selected).toggleClass('behind',selected);
|
||||
selected = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.modal = function(el, options) {
|
||||
var remove, target;
|
||||
this.$body = $('body');
|
||||
this.options = $.extend({}, $.modal.defaults, options);
|
||||
this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
|
||||
this.$blocker = null;
|
||||
if (this.options.closeExisting)
|
||||
while ($.modal.isActive())
|
||||
$.modal.close(); // Close any open modals.
|
||||
modals.push(this);
|
||||
if (el.is('a')) {
|
||||
target = el.attr('href');
|
||||
//Select element by id from href
|
||||
if (/^#/.test(target)) {
|
||||
this.$elm = $(target);
|
||||
if (this.$elm.length !== 1) return null;
|
||||
this.$body.append(this.$elm);
|
||||
this.open();
|
||||
//AJAX
|
||||
} else {
|
||||
this.$elm = $('<div>');
|
||||
this.$body.append(this.$elm);
|
||||
remove = function(event, modal) { modal.elm.remove(); };
|
||||
this.showSpinner();
|
||||
el.trigger($.modal.AJAX_SEND);
|
||||
$.get(target).done(function(html) {
|
||||
if (!$.modal.isActive()) return;
|
||||
el.trigger($.modal.AJAX_SUCCESS);
|
||||
var current = getCurrent();
|
||||
current.$elm.empty().append(html).on($.modal.CLOSE, remove);
|
||||
current.hideSpinner();
|
||||
current.open();
|
||||
el.trigger($.modal.AJAX_COMPLETE);
|
||||
}).fail(function() {
|
||||
el.trigger($.modal.AJAX_FAIL);
|
||||
var current = getCurrent();
|
||||
current.hideSpinner();
|
||||
modals.pop(); // remove expected modal from the list
|
||||
el.trigger($.modal.AJAX_COMPLETE);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$elm = el;
|
||||
this.$body.append(this.$elm);
|
||||
this.open();
|
||||
}
|
||||
};
|
||||
|
||||
$.modal.prototype = {
|
||||
constructor: $.modal,
|
||||
|
||||
open: function() {
|
||||
var m = this;
|
||||
this.block();
|
||||
if(this.options.doFade) {
|
||||
setTimeout(function() {
|
||||
m.show();
|
||||
}, this.options.fadeDuration * this.options.fadeDelay);
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
$(document).off('keydown.modal').on('keydown.modal', function(event) {
|
||||
var current = getCurrent();
|
||||
if (event.which == 27 && current.options.escapeClose) current.close();
|
||||
});
|
||||
if (this.options.clickClose)
|
||||
this.$blocker.click(function(e) {
|
||||
if (e.target==this)
|
||||
$.modal.close();
|
||||
});
|
||||
},
|
||||
|
||||
close: function() {
|
||||
modals.pop();
|
||||
this.unblock();
|
||||
this.hide();
|
||||
if (!$.modal.isActive())
|
||||
$(document).off('keydown.modal');
|
||||
},
|
||||
|
||||
block: function() {
|
||||
this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
|
||||
this.$body.css('overflow','hidden');
|
||||
this.$blocker = $('<div class="jquery-modal blocker current"></div>').appendTo(this.$body);
|
||||
selectCurrent();
|
||||
if(this.options.doFade) {
|
||||
this.$blocker.css('opacity',0).animate({opacity: 1}, this.options.fadeDuration);
|
||||
}
|
||||
this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
|
||||
},
|
||||
|
||||
unblock: function(now) {
|
||||
if (!now && this.options.doFade)
|
||||
this.$blocker.fadeOut(this.options.fadeDuration, this.unblock.bind(this,true));
|
||||
else {
|
||||
this.$blocker.children().appendTo(this.$body);
|
||||
this.$blocker.remove();
|
||||
this.$blocker = null;
|
||||
selectCurrent();
|
||||
if (!$.modal.isActive())
|
||||
this.$body.css('overflow','');
|
||||
}
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
|
||||
if (this.options.showClose) {
|
||||
this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
|
||||
this.$elm.append(this.closeButton);
|
||||
}
|
||||
this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker);
|
||||
if(this.options.doFade) {
|
||||
this.$elm.css('opacity',0).show().animate({opacity: 1}, this.options.fadeDuration);
|
||||
} else {
|
||||
this.$elm.show();
|
||||
}
|
||||
this.$elm.trigger($.modal.OPEN, [this._ctx()]);
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
|
||||
if (this.closeButton) this.closeButton.remove();
|
||||
var _this = this;
|
||||
if(this.options.doFade) {
|
||||
this.$elm.fadeOut(this.options.fadeDuration, function () {
|
||||
_this.$elm.trigger($.modal.AFTER_CLOSE, [_this._ctx()]);
|
||||
});
|
||||
} else {
|
||||
this.$elm.hide(0, function () {
|
||||
_this.$elm.trigger($.modal.AFTER_CLOSE, [_this._ctx()]);
|
||||
});
|
||||
}
|
||||
this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
|
||||
},
|
||||
|
||||
showSpinner: function() {
|
||||
if (!this.options.showSpinner) return;
|
||||
this.spinner = this.spinner || $('<div class="' + this.options.modalClass + '-spinner"></div>')
|
||||
.append(this.options.spinnerHtml);
|
||||
this.$body.append(this.spinner);
|
||||
this.spinner.show();
|
||||
},
|
||||
|
||||
hideSpinner: function() {
|
||||
if (this.spinner) this.spinner.remove();
|
||||
},
|
||||
|
||||
//Return context for custom events
|
||||
_ctx: function() {
|
||||
return { elm: this.$elm, $blocker: this.$blocker, options: this.options };
|
||||
}
|
||||
};
|
||||
|
||||
$.modal.close = function(event) {
|
||||
if (!$.modal.isActive()) return;
|
||||
if (event) event.preventDefault();
|
||||
var current = getCurrent();
|
||||
current.close();
|
||||
return current.$elm;
|
||||
};
|
||||
|
||||
// Returns if there currently is an active modal
|
||||
$.modal.isActive = function () {
|
||||
return modals.length > 0;
|
||||
}
|
||||
|
||||
$.modal.defaults = {
|
||||
closeExisting: true,
|
||||
escapeClose: true,
|
||||
clickClose: true,
|
||||
closeText: 'Close',
|
||||
closeClass: '',
|
||||
modalClass: "modal",
|
||||
spinnerHtml: null,
|
||||
showSpinner: true,
|
||||
showClose: true,
|
||||
fadeDuration: null, // Number of milliseconds the fade animation takes.
|
||||
fadeDelay: 1.0 // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
|
||||
};
|
||||
|
||||
// Event constants
|
||||
$.modal.BEFORE_BLOCK = 'modal:before-block';
|
||||
$.modal.BLOCK = 'modal:block';
|
||||
$.modal.BEFORE_OPEN = 'modal:before-open';
|
||||
$.modal.OPEN = 'modal:open';
|
||||
$.modal.BEFORE_CLOSE = 'modal:before-close';
|
||||
$.modal.CLOSE = 'modal:close';
|
||||
$.modal.AFTER_CLOSE = 'modal:after-close';
|
||||
$.modal.AJAX_SEND = 'modal:ajax:send';
|
||||
$.modal.AJAX_SUCCESS = 'modal:ajax:success';
|
||||
$.modal.AJAX_FAIL = 'modal:ajax:fail';
|
||||
$.modal.AJAX_COMPLETE = 'modal:ajax:complete';
|
||||
|
||||
$.fn.modal = function(options){
|
||||
if (this.length === 1) {
|
||||
new $.modal(this, options);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
// Automatically bind links with rel="modal:close" to, well, close the modal.
|
||||
$(document).on('click.modal', 'a[rel="modal:close"]', $.modal.close);
|
||||
$(document).on('click.modal', 'a[rel="modal:open"]', function(event) {
|
||||
event.preventDefault();
|
||||
$(this).modal();
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Reference in a new issue