From eac4fe7e75699481703ce50a4ef1d93402a96155 Mon Sep 17 00:00:00 2001 From: Sayan Chowdhury Date: Sep 19 2017 15:42:12 +0000 Subject: hubs.static: Initial to migrate the JS code to their own files Signed-off-by: Sayan Chowdhury --- diff --git a/.gitignore b/.gitignore index f769f52..13effb2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ *.pyc *.egg* +*.vscode* +*.swp fedmsg.d/fas_credentials.py fedmsg.d/credentials.py node* diff --git a/hubs/static/js/hubs.edit.js b/hubs/static/js/hubs.edit.js new file mode 100644 index 0000000..cd47612 --- /dev/null +++ b/hubs/static/js/hubs.edit.js @@ -0,0 +1,100 @@ +$(document).ready(function() { + + // Intialize Sortable to sort the left & the right widgets + Sortable.create(document.getElementById('left-widgets'), { + animation: 150, + draggable: '.widget', + handle: '.card', + }); + + Sortable.create(document.getElementById('right-widgets'), { + animation: 150, + draggable: '.widget', + handle: '.card', + }); + + $('#save-edits-btn').click(function(e) { + e.preventDefault(); + + $this = $(this); + var requestUrl = $this.data('request-url'); + var redirectUrl = $this.data('redirect-url'); + + var _r_indexes = []; + var _r_widgets = []; + $.each($('#right-widgets .widget'), function(i, el) { + _r_indexes.push(i); + _r_widgets.push($(el).attr('id').split('widget-')[1]) + }); + + var _l_indexes = []; + var _l_widgets = []; + $.each($('#left-widgets .widget'), function(i, el) { + _l_indexes.push(i); + _l_widgets.push($(el).attr('id').split('widget-')[1]) + }); + + $.post( + url: url, + data: { + 'right_indexes': _r_indexes, + 'right_widgets': _r_widgets, + 'left_indexes': _l_indexes, + 'left_widgets': _l_widgets, + 'js': true + }, + function(){ + window.location = redirectUrl; + } + ); + }); + + // Setup events for the "add widget" button. + $(".modal-widget").click(function(e) { + e.preventDefault(); + $.ajax({ + url: $(this).data('url'), + dataType: 'html', + success: function(html) { + $('#edit-modal-content').html(html); + }, + error: function(html) { + $('#edit-modal-content .modal-body').html('An error occured when trying to add a new widget'); + }, + complete: function() { + $('#edit-modal').modal(); + } + }); + return false; + }); + + // Setup events for the "add widget" form using delegated events because it's + // not in the DOM yet. + $("body").on("submit", "#widget-add-form form", function(e) { + var form = $(this); + var error_msg = "An error occured when trying to add a new widget."; + e.preventDefault(); + + $.ajax({ + type: "POST", + url: form.attr("action"), + dataType: "json", + data: form.serialize(), + success: function(data) { + if (data.status === "CONFIGURE") { + $("#widget-add-form").load(data.url); + } else if (data.status === "ADDED") { + // no config necessary, reload the page + window.location = window.location; + } else { + $('#widget-add-form .modal-body').html(error_msg); + $('#widget-add-form .modal-footer button[type="submit"]').remove(); + } + }, + error: function(html) { + $('#widget-add-form .modal-body').html(error_msg); + $('#adding_form .modal-footer button[type="submit"]').remove(); + } + }); + }); +}); diff --git a/hubs/static/js/hubs.main.js b/hubs/static/js/hubs.main.js new file mode 100644 index 0000000..cf4515d --- /dev/null +++ b/hubs/static/js/hubs.main.js @@ -0,0 +1,72 @@ +function visitCounter() { + if (window.performance.navigation.type != 0) { + return null; + } + + if(userName != null && userName != '' && userName != visitedHub) { + var url = [urlPrefix, visitedHub].join(""); + + $.ajax({ + method: "POST", + url: url, + dataType: 'html', + success: function(html) { + console.log('Success: incrementing counter') + }, + error: function() { + console.log('Error: incrementing counter'); + }, + }); + } +} + +function setupSettings() { + var settingsPanel = React.createElement(Hubs.HubConfig, { + urls: { + config: hubConfigURL, + suggestUsers: hubConfigSuggestUsers, + } + }); + ReactDOM.render(settingsPanel, document.getElementById("settings-modal")); +} + +$(document).ready(function() { + // Call the visit counter + visitCounter(); + + // Setup the widgets + setupWidgets(); + + // Setup the SSE URL + setupSSE(sseURL); + + // Setup settings if allowed to setup settings + if (canSetupSettings) { + setupSettings(); + } + + // Send a AJAX request and fill the target with the response html. + $('ajax-hubs-modal').click(function(e) { + e.preventDefault(); + $this = $(this); + var target = $this.attr('data-target'); + var url = $this.attr('ajax'); + + $.ajax({ + url: url, + dataType: 'html', + success: function(html) { + var target = document.getElementById(target); + target.html(html); + } + }); + }); + + // This is how to activate and remove (here after 13 sec) the favicon + // notification + Notificon('#33ff00'); + setTimeout(function(){Notificon()}, 13000) + setTimeout(function(){Notificon('#eb361e')}, 15000) + setTimeout(function(){Notificon()}, 18000) + +}); \ No newline at end of file diff --git a/hubs/static/js/utils.js b/hubs/static/js/utils.js index 63f3ed0..4634d21 100644 --- a/hubs/static/js/utils.js +++ b/hubs/static/js/utils.js @@ -1,77 +1,77 @@ // These two functions are used by the feed widget to expand and collapse // entries. var expand_feed_entries = function(idx) { - $("#expand-" + idx).addClass('hidden'); - $("#collapse-" + idx).removeClass('hidden'); - $("#content-" + idx).removeClass('hidden'); + $("#expand-" + idx).addClass('hidden'); + $("#collapse-" + idx).removeClass('hidden'); + $("#content-" + idx).removeClass('hidden'); } var collapse_feed_entries = function(idx) { - $("#expand-" + idx).removeClass('hidden'); - $("#collapse-" + idx).addClass('hidden'); - $("#content-" + idx).addClass('hidden'); + $("#expand-" + idx).removeClass('hidden'); + $("#collapse-" + idx).addClass('hidden'); + $("#content-" + idx).addClass('hidden'); } // Load widgets -function setup_widgets() { - $("div.widget[data-url]").each(function() { - var element=$(this); - $.ajax({ - url: element.attr("data-url"), - dataType: 'html', - success: function(html) { - element.html(html); - setTimeout(function() { - element.find('.panel').toggleClass('panel-visible'); - }, 100); - }, - error: function() { - element.html('Got an error retrieving this widget. Sorry :('); - console.log('error'); - console.trace(); - }, - }); +function setupWidgets() { + $("div.widget[data-url]").each(function() { + var element=$(this); + $.ajax({ + url: element.attr("data-url"), + dataType: 'html', + success: function(html) { + element.html(html); + setTimeout(function() { + element.find('.panel').toggleClass('panel-visible'); + }, 100); + }, + error: function() { + element.html('Got an error retrieving this widget. Sorry :('); + console.log('error'); + console.trace(); + }, }); + }); } -function setup_sse(url) { - if (!url || !window.EventSource) { - // Auto-update is disabled. - return; - } - var sseSource = new Hubs.ReconnectingEventSource(url), - notifTimeout = null; - sseSource.addEventListener("hubs:widget-updated", function(e) { - var widget = $("#widget-" + e.data); - if (widget.length === 0) { return; } - if (widget.find("div.card[data-disable-autoreload]").length !== 0) { return; } - $.ajax({ - url: widget.attr("data-url"), - dataType: 'html', - success: function(html) { - widget.css("opacity", "0.5"); - widget.html(html); - widget.animate({opacity: 1}, 200); - }, - error: function() { - console.log('error updating the widget'); - console.trace(); - }, - }); +function setupSSE(url) { + if (!url || !window.EventSource) { + // Auto-update is disabled. + return; + } + var sseSource = new Hubs.ReconnectingEventSource(url), + notifTimeout = null; + sseSource.addEventListener("hubs:widget-updated", function(e) { + var widget = $("#widget-" + e.data); + if (widget.length === 0) { return; } + if (widget.find("div.card[data-disable-autoreload]").length !== 0) { return; } + $.ajax({ + url: widget.attr("data-url"), + dataType: 'html', + success: function(html) { + widget.css("opacity", "0.5"); + widget.html(html); + widget.animate({opacity: 1}, 200); + }, + error: function() { + console.log('error updating the widget'); + console.trace(); + }, }); - function change_notify_icon(color) { - // Set the notify icon for 5s - if (color == "green") { - color = "#33ff00"; - } else if (color == "red") { - color = "#eb361e"; - } - Notificon(color); - if (notifTimeout) { clearTimeout(notifTimeout); } - notifTimeout = setTimeout(function(){ Notificon(); }, 5000) + }); + function change_notify_icon(color) { + // Set the notify icon for 5s + if (color == "green") { + color = "#33ff00"; + } else if (color == "red") { + color = "#eb361e"; } - // Icon to red on disconnect, icon to green on reconnect. - sseSource.addEventListener("error", function() { change_notify_icon("red"); }); - sseSource.addEventListener("open", function() { change_notify_icon("green"); }); - // Make it accessible by other components on the page. - document.sseSource = sseSource; + Notificon(color); + if (notifTimeout) { clearTimeout(notifTimeout); } + notifTimeout = setTimeout(function(){ Notificon(); }, 5000) } + // Icon to red on disconnect, icon to green on reconnect. + sseSource.addEventListener("error", function() { change_notify_icon("red"); }); + sseSource.addEventListener("open", function() { change_notify_icon("green"); }); + // Make it accessible by other components on the page. + document.sseSource = sseSource; +} diff --git a/hubs/templates/add_widget.html b/hubs/templates/add_widget.html index 878c2fd..1d391a2 100644 --- a/hubs/templates/add_widget.html +++ b/hubs/templates/add_widget.html @@ -1,20 +1,16 @@ - - - {% endblock header %} - {% block content %} -
- - + + - + {% if title %}
{{title}}
{% endif %} +
{% block content %}{% endblock %}
diff --git a/runserver.py b/runserver.py index 42bd503..503907c 100755 --- a/runserver.py +++ b/runserver.py @@ -20,7 +20,6 @@ parser.add_argument( help='A configuration file to load (allowing to override the default ' 'configuraton)') - args = parser.parse_args() if args.config: