platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 42 Pull Requests Packages Projects 4 Releases Wiki Activity

Added iframe modal on dashboard with support for dynamic events to temporarily/permanently display a custom web page on the connected browsers

This commit is contained in:
Fabio Manganiello 2018-06-13 20:40:45 +02:00
parent d89b03a697
commit 5a1e77c174
4 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
platypush/backend/http/static/js/application.js
View File

@ -145,7 +145,7 @@ $(document).ready(function() {
};
var initModalOpenBindings = function() {
$('body').on('click touch', '[data-modal]', function(event) {
$('body').on('mouseup touchend', '[data-modal]', function(event) {
var $source = $(event.target);
var $modal = $($source.data('modal'));
$modal.fadeIn();
@ -153,11 +153,20 @@ $(document).ready(function() {
};
var initModalCloseBindings = function() {
$('body').on('click touch', '[data-dismiss-modal]', function(event) {
$('body').on('mouseup touchend', '[data-dismiss-modal]', function(event) {
var $source = $(event.target);
var $modal = $($source.data('dismiss-modal'));
$modal.fadeOut();
});
$('body').on('mouseup touchend', function(event) {
var $source = $(event.target);
if (!$source.parents('.modal').length
&& !$source.data('modal')
&& !$source.data('dismiss-modal')) {
$('.modal').filter(':visible').fadeOut();
}
});
};
var initModals = function() {

15
platypush/backend/http/static/js/dashboard.js
View File

@ -7,6 +7,21 @@ $(document).ready(function() {
for (var key of Object.keys(event.args)) {
$widget.find('[data-bind=' + key + ']').text(event.args[key]);
}
} else if (event.args.type == 'platypush.message.event.web.DashboardIframeUpdateEvent') {
var url = event.args.url;
var $modal = $('#iframe-modal');
var $iframe = $modal.find('iframe');
$iframe.attr('src', url);
$iframe.prop('width', event.args.width || '100%');
$iframe.prop('height', event.args.height || '600');
if ('timeout' in event.args) {
setTimeout(function() {
$modal.fadeOut();
}, parseFloat(event.args.timeout) * 1000);
}
$modal.fadeIn();
}
};

8
platypush/backend/http/templates/dashboard.html
View File

@ -33,6 +33,14 @@
<body>
<main>
<!-- You can send events of type platypush.message.event.web.DashboardIframeUpdateEvent
to control what is shown in the optional iframe modal -->
<div id="iframe-modal" class="modal">
<div class="modal-container">
<iframe></iframe>
</div>
</div>
<div id="widgets-container">
{% set used_columns = [0] %}
{% for widget_name, widget in config['widgets'].items() %}

16
platypush/message/event/web/__init__.py
View File

@ -0,0 +1,16 @@
from platypush.message.event import Event
class DashboardIframeUpdateEvent(Event):
"""
Deliver a DashboardIframeUpdateEvent if you are using the web dashboard
and you want the connected web clients to show a certain URL in the iframe
modal window for (optionally) a certain time.
"""
def __init__(self, url, width=None, height=None, timeout=None, *args, **kwargs):
super().__init__(url=url, width=width, height=height, timeout=timeout, *args, **kwargs)
# vim:sw=4:ts=4:et: