Install and uninstall plugins with style
- Don't block the whole page when installing a plugin - allow people to search and install other plugins meanwhile Why? http://i.imgur.com/XoX6uYS.jpg
This commit is contained in:
Marcel Klehr
parent
981a33f01e
commit
638cea5fd6
|
|
@ -85,14 +85,14 @@ exports.socketio = function (hook_name, args, cb) {
|
|||
socket.on("install", function (plugin_name) {
|
||||
installer.install(plugin_name, function (er) {
|
||||
if(er) console.warn(er)
|
||||
socket.emit("finished:install", {error: er? er.message : null});
|
||||
socket.emit("finished:install", {plugin: plugin_name, error: er? er.message : null});
|
||||
});
|
||||
});
|
||||
|
||||
socket.on("uninstall", function (plugin_name) {
|
||||
installer.uninstall(plugin_name, function (er) {
|
||||
if(er) console.warn(er)
|
||||
socket.emit("finished:uninstall", {error: er? er.message : null});
|
||||
socket.emit("finished:uninstall", {plugin: plugin_name, error: er? er.message : null});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ div.menu li:last-child {
|
|||
div.innerwrapper {
|
||||
padding: 15px;
|
||||
margin-left: 265px;
|
||||
position:relative; /* Allows us to position the loading indicator relative to this div */
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
|
|
@ -137,23 +136,30 @@ td, th {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#installed-plugins td>div {
|
||||
position: relative;/* Allows us to position the loading indicator relative to this row */
|
||||
display: inline-block; /*make this fill the whole cell*/
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom:0; right:0;
|
||||
padding: auto;
|
||||
padding-top: 20%;
|
||||
|
||||
background: rgba(255,255,255,0.85);
|
||||
background: rgba(255,255,255,0.95);
|
||||
display: none;
|
||||
/*border-radius: 7px;
|
||||
border: 1px solid #ddd;*/
|
||||
}
|
||||
|
||||
#search-progress.progress {
|
||||
padding-top: 20%;
|
||||
background: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.progress * {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.settings {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,20 @@ $(document).ready(function () {
|
|||
search.sortDir = /*DESC?*/true;
|
||||
search.end = true;// have we received all results already?
|
||||
|
||||
var installed = {
|
||||
progress: {
|
||||
show: function(plugin, msg) {
|
||||
$('#installed-plugins .'+plugin+' .progress').show()
|
||||
$('#installed-plugins .'+plugin+' .progress .message').text(msg)
|
||||
},
|
||||
hide: function(plugin) {
|
||||
$('#installed-plugins .'+plugin+' .progress').hide()
|
||||
$('#installed-plugins .'+plugin+' .progress .message').text('')
|
||||
}
|
||||
},
|
||||
list: []
|
||||
}
|
||||
|
||||
function displayPluginList(plugins, container, template) {
|
||||
plugins.forEach(function(plugin) {
|
||||
var row = template.clone();
|
||||
|
|
@ -43,7 +57,7 @@ $(document).ready(function () {
|
|||
}
|
||||
}
|
||||
row.find(".version").html( plugin.version );
|
||||
|
||||
row.addClass(plugin.name)
|
||||
container.append(row);
|
||||
})
|
||||
updateHandlers();
|
||||
|
|
@ -60,18 +74,6 @@ $(document).ready(function () {
|
|||
})
|
||||
}
|
||||
|
||||
var progress = {
|
||||
show: function(msg) {
|
||||
$('#progress').show()
|
||||
$('#progress .message').text(msg)
|
||||
$(window).scrollTop(0)
|
||||
},
|
||||
hide: function() {
|
||||
$('#progress').hide()
|
||||
$('#progress .message').text('')
|
||||
}
|
||||
}
|
||||
|
||||
function updateHandlers() {
|
||||
// Search
|
||||
$("#search-query").unbind('keyup').keyup(function () {
|
||||
|
|
@ -82,17 +84,20 @@ $(document).ready(function () {
|
|||
$(".do-install, .do-update").unbind('click').click(function (e) {
|
||||
var $row = $(e.target).closest("tr")
|
||||
, plugin = $row.find(".name").text();
|
||||
$row.remove().appendTo('#installed-plugins')
|
||||
socket.emit("install", plugin);
|
||||
progress.show('Installing plugin '+plugin+'...')
|
||||
installed.progress.show(plugin, 'Installing')
|
||||
});
|
||||
|
||||
// uninstall
|
||||
$(".do-uninstall").unbind('click').click(function (e) {
|
||||
var $row = $(e.target).closest("tr")
|
||||
, plugin = $row.find(".name").text();
|
||||
$row.remove()
|
||||
socket.emit("uninstall", plugin);
|
||||
progress.show('Uninstalling plugin '+plugin+'...')
|
||||
, pluginName = $row.find(".name").text();
|
||||
socket.emit("uninstall", pluginName);
|
||||
installed.progress.show(pluginName, 'Uninstalling')
|
||||
installed.list = installed.list.filter(function(plugin) {
|
||||
return plugin.name != pluginName
|
||||
})
|
||||
});
|
||||
|
||||
// Infinite scroll
|
||||
|
|
@ -143,18 +148,19 @@ $(document).ready(function () {
|
|||
});
|
||||
|
||||
socket.on('results:installed', function (data) {
|
||||
sortPluginList(data.installed, 'name', /*ASC?*/true);
|
||||
installed.list = data.installed
|
||||
sortPluginList(installed.list, 'name', /*ASC?*/true);
|
||||
|
||||
data.installed = data.installed.filter(function(plugin) {
|
||||
// filter out epl
|
||||
installed.list = installed.list.filter(function(plugin) {
|
||||
return plugin.name != 'ep_etherpad-lite'
|
||||
})
|
||||
$("#installed-plugins *").remove();
|
||||
displayPluginList(data.installed, $("#installed-plugins"), $("#installed-plugin-template"));
|
||||
progress.hide()
|
||||
|
||||
setTimeout(function() {
|
||||
socket.emit('checkUpdates');
|
||||
}, 5000)
|
||||
// remove all installed plugins (leave all plugins that are still being installed)
|
||||
installed.list.forEach(function(plugin) {
|
||||
$('#installed-plugins .'+plugin.name).remove()
|
||||
})
|
||||
displayPluginList(installed.list, $("#installed-plugins"), $("#installed-plugin-template"));
|
||||
});
|
||||
|
||||
socket.on('results:updatable', function(data) {
|
||||
|
|
@ -171,7 +177,11 @@ $(document).ready(function () {
|
|||
})
|
||||
|
||||
socket.on('finished:install', function(data) {
|
||||
if(data.error) alert('An error occured while installing the plugin. \n'+data.error)
|
||||
if(data.error) {
|
||||
alert('An error occured while installing '+data.plugin+' \n'+data.error)
|
||||
$('#installed-plugins .'+data.plugin).remove()
|
||||
}
|
||||
|
||||
socket.emit("getInstalled");
|
||||
|
||||
// update search results
|
||||
|
|
@ -181,9 +191,13 @@ $(document).ready(function () {
|
|||
})
|
||||
|
||||
socket.on('finished:uninstall', function(data) {
|
||||
if(data.error) alert('An error occured while uninstalling the plugin. \n'+data.error)
|
||||
socket.emit("getInstalled");
|
||||
if(data.error) alert('An error occured while uninstalling the '+data.plugin+' \n'+data.error)
|
||||
|
||||
// remove plugin from installed list
|
||||
$('#installed-plugins .'+data.plugin).remove()
|
||||
|
||||
socket.emit("getInstalled");
|
||||
|
||||
// update search results
|
||||
search.offset = 0;
|
||||
search(search.searchTerm, search.results.length);
|
||||
|
|
@ -194,4 +208,9 @@ $(document).ready(function () {
|
|||
updateHandlers();
|
||||
socket.emit("getInstalled");
|
||||
search('');
|
||||
|
||||
// check for updates every 15mins
|
||||
setInterval(function() {
|
||||
socket.emit('checkUpdates');
|
||||
}, 1000*60*15)
|
||||
});
|
||||
|
|
|
|||
|
|
@ -47,7 +47,10 @@
|
|||
<td class="description" data-label="Description"></td>
|
||||
<td class="version" data-label="Version"></td>
|
||||
<td class="actions">
|
||||
<input type="button" value="Uninstall" class="do-uninstall">
|
||||
<div>
|
||||
<input type="button" value="Uninstall" class="do-uninstall">
|
||||
<div class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -78,7 +81,10 @@
|
|||
<td class="description" data-label="Description"></td>
|
||||
<td class="version" data-label="Version"></td>
|
||||
<td class="actions">
|
||||
<input type="button" value="Install" class="do-install">
|
||||
<div>
|
||||
<input type="button" value="Install" class="do-install">
|
||||
<div class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -91,7 +97,6 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="progress" class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue