From a0dc7fa92d62f74e87d152e08c9fa0ba1ebcb247 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Thu, 19 Sep 2024 18:18:24 +0530 Subject: [PATCH] force user to login when accessed from email message link --- .../javascripts/dialog/textMessageDialog.js | 1 + web/app/assets/javascripts/layout.js | 873 ++++++++++-------- 2 files changed, 481 insertions(+), 393 deletions(-) diff --git a/web/app/assets/javascripts/dialog/textMessageDialog.js b/web/app/assets/javascripts/dialog/textMessageDialog.js index d83f0efb5..953f8b2ba 100644 --- a/web/app/assets/javascripts/dialog/textMessageDialog.js +++ b/web/app/assets/javascripts/dialog/textMessageDialog.js @@ -263,6 +263,7 @@ // called from sidebar when messages come in function messageReceived(payload) { + alert("messageReceived"); if(showing && otherId == payload.sender_id) { if(fullyInitialized) { renderMessage(payload.msg, payload.sender_id, payload.sender_name, payload.created_at, true); diff --git a/web/app/assets/javascripts/layout.js b/web/app/assets/javascripts/layout.js index bf03c2c41..167d973f5 100644 --- a/web/app/assets/javascripts/layout.js +++ b/web/app/assets/javascripts/layout.js @@ -8,7 +8,6 @@ * See the layout-example.html file for a simple working example. */ (function (context, $) { - "use strict"; context.JK = context.JK || {}; @@ -18,19 +17,18 @@ // client as well as the landing page. context.JK.hideCurtain = function (duration) { context.setTimeout(function () { - $('.curtain').fadeOut(2 * duration); + $(".curtain").fadeOut(2 * duration); }, duration); }; context.JK.Layout = function () { - // privates var logger = context.JK.logger; var EVENTS = context.JK.EVENTS; var NOT_HANDLED = "not handled"; - var me = null; // Reference to this instance for context sanity. + var me = null; // Reference to this instance for context sanity. var opts = { headerHeight: 75, @@ -39,14 +37,14 @@ notifyGutter: 10, collapsedSidebar: 30, panelHeaderHeight: 36, - alwaysOpenPanelHeaderHeight:78, // for the search bar - gutter: 60, // Margin around the whole UI - screenMargin: 0, // Margin around screens (not headers/sidebar) - gridOuterMargin: 6, // Outer margin on Grids (added to screenMargin if screen) - gridPadding: 8, // Padding around grid cells. Added to outer margin. + alwaysOpenPanelHeaderHeight: 78, // for the search bar + gutter: 60, // Margin around the whole UI + screenMargin: 0, // Margin around screens (not headers/sidebar) + gridOuterMargin: 6, // Outer margin on Grids (added to screenMargin if screen) + gridPadding: 8, // Padding around grid cells. Added to outer margin. animationDuration: 400, - allowBodyOverflow: false, // Allow tests to disable the body-no-scroll policy - sizeOverlayToContent: false // if true, use the size of tag to decide overlay size everytime overlay is shown. should be used in non-client settings + allowBodyOverflow: false, // Allow tests to disable the body-no-scroll policy + sizeOverlayToContent: false, // if true, use the size of tag to decide overlay size everytime overlay is shown. should be used in non-client settings }; var width = $(context).width(); @@ -79,12 +77,10 @@ function setInitialExpandedSidebarPanel() { if (gon.global.chat_opened_by_default) { - expandedPanel = 'panelChat'; + expandedPanel = "panelChat"; + } else { + expandedPanel = "panelFriends"; } - else { - expandedPanel = 'panelFriends'; - } - } function layout() { @@ -104,25 +100,25 @@ layoutNotify3(width, height); layoutFooter(width, height); - $(document).triggerHandler('layout_resized'); + $(document).triggerHandler("layout_resized"); } function layoutCurtain(screenWidth, screenHeight) { var curtainStyle = { - position: 'absolute', - width: screenWidth + 'px', - height: screenHeight + 'px' + position: "absolute", + width: screenWidth + "px", + height: screenHeight + "px", }; - $('.curtain').css(curtainStyle); + $(".curtain").css(curtainStyle); } function layoutDialogOverlay(screenWidth, screenHeight) { var style = { - position: 'absolute', - width: screenWidth + 'px', - height: screenHeight + 'px' + position: "absolute", + width: screenWidth + "px", + height: screenHeight + "px", }; - $('.dialog-overlay').css(style); + $(".dialog-overlay").css(style); } function layoutScreens(screenWidth, screenHeight) { @@ -139,7 +135,10 @@ left = left.split("px")[0]; } } - $(previousScreenSelector).animate({left: left}, {duration: opts.animationDuration, queue: false}); + $(previousScreenSelector).animate( + { left: left }, + { duration: opts.animationDuration, queue: false } + ); sizeScreens(screenWidth, screenHeight, '[layout="screen"]'); positionOffscreens(screenWidth, screenHeight); positionOnscreen(screenWidth, screenHeight); @@ -153,18 +152,21 @@ var width = screenWidth - (2 * opts.gutter + 2 * opts.screenMargin); if (sidebarVisible) { - width -= (opts.sidebarWidth + 2 * opts.gridPadding); + width -= opts.sidebarWidth + 2 * opts.gridPadding; } else { width -= opts.collapsedSidebar + 2 * opts.gridPadding; width += opts.gutter; // Add back in the right gutter width. } - var height = screenHeight - opts.headerHeight - (2 * opts.gutter + 2 * opts.screenMargin); + var height = + screenHeight - + opts.headerHeight - + (2 * opts.gutter + 2 * opts.screenMargin); var css = { width: width, - height: height + height: height, }; var $screens = $(selector); - $screens.animate(css, {duration: duration, queue: false}); + $screens.animate(css, { duration: duration, queue: false }); layoutHomeScreen(width, height); } @@ -174,10 +176,12 @@ function positionOffscreens(screenWidth, screenHeight) { var top = opts.headerHeight + opts.gutter + opts.screenMargin; var left = -1 * (screenWidth + 2 * opts.gutter); - var $screens = $('[layout="screen"]').not('[layout-id="' + currentScreen + '"]'); + var $screens = $('[layout="screen"]').not( + '[layout-id="' + currentScreen + '"]' + ); $screens.css({ top: top, - left: left + left: left, }); } @@ -192,57 +196,69 @@ var top = opts.headerHeight + opts.gutter + opts.screenMargin; var left = opts.gutter + opts.screenMargin; var $screen = $('[layout-id="' + currentScreen + '"]'); - $screen.animate({ - top: top, - left: left, - overflow: 'auto' - }, duration); + $screen.animate( + { + top: top, + left: left, + overflow: "auto", + }, + duration + ); } function layoutHomeScreen(homeScreenWidth, homeScreenHeight) { - var $grid = $('[layout-grid]'); + var $grid = $("[layout-grid]"); var gridWidth = homeScreenWidth; var gridHeight = homeScreenHeight; - $grid.css({width: gridWidth, height: gridHeight}); - var layout = $grid.attr('layout-grid'); - if (!layout) - return; - var gridRows = layout.split('x')[0]; - var gridCols = layout.split('x')[1]; + $grid.css({ width: gridWidth, height: gridHeight }); + var layout = $grid.attr("layout-grid"); + if (!layout) return; + var gridRows = layout.split("x")[0]; + var gridCols = layout.split("x")[1]; var gutterWidth = 0; var findCardLayout; var feedCardLayout; - $grid.find('.homecard').each(function () { + $grid.find(".homecard").each(function () { var childPosition = $(this).attr("layout-grid-position"); - var childRow = childPosition.split(',')[1]; - var childCol = childPosition.split(',')[0]; + var childRow = childPosition.split(",")[1]; + var childCol = childPosition.split(",")[0]; var childRowspan = $(this).attr("layout-grid-rows"); var childColspan = $(this).attr("layout-grid-columns"); - var childLayout = me.getCardLayout(gridWidth, gridHeight, gridRows, gridCols, - childRow, childCol, childRowspan, childColspan); + var childLayout = me.getCardLayout( + gridWidth, + gridHeight, + gridRows, + gridCols, + childRow, + childCol, + childRowspan, + childColspan + ); - if($(this).is('.jamtrack')) { + if ($(this).is(".jamtrack")) { feedCardLayout = childLayout; - } - else if($(this).is('.findsession')) { + } else if ($(this).is(".findsession")) { findCardLayout = childLayout; } - $(this).animate({ - width: childLayout.width, - height: childLayout.height, - top: childLayout.top, - left: childLayout.left - }, opts.animationDuration); + $(this).animate( + { + width: childLayout.width, + height: childLayout.height, + top: childLayout.top, + left: childLayout.left, + }, + opts.animationDuration + ); }); var broadcastWidth = findCardLayout.width + feedCardLayout.width; //+ opts.gridPadding * 2; //layoutBroadcast(broadcastWidth, findCardLayout.left); - layoutTopMessage(broadcastWidth, findCardLayout.left) + layoutTopMessage(broadcastWidth, findCardLayout.left); } /** @@ -256,27 +272,31 @@ function layoutTopMessage(width, left) { var css = { - width:width + opts.gridPadding * 2, - left:left - } - $('[data-react-class="TopMessageHolder"]').animate(css, opts.animationDuration) + width: width + opts.gridPadding * 2, + left: left, + }; + $('[data-react-class="TopMessageHolder"]').animate( + css, + opts.animationDuration + ); } function layoutSidebar(screenWidth, screenHeight) { var width = opts.sidebarWidth; - var expanderHeight = $('[layout-sidebar-expander]').height(); - var height = screenHeight - opts.headerHeight - 2 * opts.gutter + expanderHeight; + var expanderHeight = $("[layout-sidebar-expander]").height(); + var height = + screenHeight - opts.headerHeight - 2 * opts.gutter + expanderHeight; var right = opts.gutter; if (!sidebarVisible) { // Negative right to hide most of sidebar - right = (0 - opts.sidebarWidth) + opts.collapsedSidebar; + right = 0 - opts.sidebarWidth + opts.collapsedSidebar; } var top = opts.headerHeight + opts.gutter - expanderHeight; var css = { width: width, height: height, top: top, - right: right + right: right, }; $('[layout="sidebar"]').animate(css, opts.animationDuration); layoutPanels(width, height); @@ -300,17 +320,26 @@ return; } var $expandedPanel = $('[layout-id="' + expandedPanel + '"]'); - var $expandedPanelContents = $expandedPanel.find('[layout-panel="contents"]'); - var combinedHeaderHeight = ($('[layout-panel="contents"]').length - 1) * opts.panelHeaderHeight + opts.alwaysOpenPanelHeaderHeight; - var expanderHeight = $('[layout-sidebar-expander]').height(); - var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight); + var $expandedPanelContents = $expandedPanel.find( + '[layout-panel="contents"]' + ); + var combinedHeaderHeight = + ($('[layout-panel="contents"]').length - 1) * opts.panelHeaderHeight + + opts.alwaysOpenPanelHeaderHeight; + var expanderHeight = $("[layout-sidebar-expander]").height(); + var expandedPanelHeight = + sidebarHeight - (combinedHeaderHeight + expanderHeight); $('[layout-panel="contents"]').hide(); - $('[layout-panel="contents"]').css({"height": "1px"}); + $('[layout-panel="contents"]').css({ height: "1px" }); $expandedPanelContents.show(); - $expandedPanel.triggerHandler('open') - $expandedPanelContents.animate({"height": expandedPanelHeight + "px"}, opts.animationDuration, function() { - $expandedPanel.triggerHandler('fullyOpen') - }); + $expandedPanel.triggerHandler("open"); + $expandedPanelContents.animate( + { height: expandedPanelHeight + "px" }, + opts.animationDuration, + function () { + $expandedPanel.triggerHandler("fullyOpen"); + } + ); } function layoutHeader(screenWidth, screenHeight) { @@ -322,7 +351,7 @@ width: width + "px", height: height + "px", top: top + "px", - left: left + "px" + left: left + "px", }; $('[layout="header"]').css(css); } @@ -331,9 +360,9 @@ var $notify1 = $('[layout="notify1"]'); //var nHeight = $notify1.height(); var notifyStyle = { - bottom: '0px', - position: 'fixed', - padding: '20px' + bottom: "0px", + position: "fixed", + padding: "20px", }; $notify1.css(notifyStyle); } @@ -343,9 +372,9 @@ var $notify2 = $('[layout="notify2"]'); var nHeight = $notify1.height(); var notifyStyle = { - bottom: (nHeight + 41).toString()+'px', - position: 'fixed', - padding: '20px' + bottom: (nHeight + 41).toString() + "px", + position: "fixed", + padding: "20px", }; $notify2.css(notifyStyle); } @@ -357,83 +386,88 @@ var nHeight1 = $notify1.height(); var nHeight2 = $notify2.height(); var notifyStyle = { - bottom: (nHeight1 + nHeight2 + 41 + 41).toString()+'px', - position: 'fixed', - padding: '20px' + bottom: (nHeight1 + nHeight2 + 41 + 41).toString() + "px", + position: "fixed", + padding: "20px", }; $notify3.css(notifyStyle); } function layoutFooter(screenWidth, screenHeight) { - if (!opts.layoutFooter) { return; } - var $footer = $('#footer'); + var $footer = $("#footer"); $footer.show(); var nHeight = $footer.height(); var footerStyle = { - top: (screenHeight - 80) + 'px' + top: screenHeight - 80 + "px", }; var width = screenWidth - (2 * opts.gutter + 2 * opts.screenMargin); var left = -1 * width - 100; - $footer.animate({ "left": opts.gutter, "width": width, "top": (screenHeight - 78) + "px"}, opts.animationDuration); + $footer.animate( + { left: opts.gutter, width: width, top: screenHeight - 78 + "px" }, + opts.animationDuration + ); } function requiredLayoutStyles() { var layoutStyle = { - position: 'absolute', - margin: '0px', - padding: '0px' + position: "absolute", + margin: "0px", + padding: "0px", }; - $('[layout]').css(layoutStyle); + $("[layout]").css(layoutStyle); // JW: Setting z-index of notify to 1001, so it will appear above the dialog overlay. // This allows dialogs to use the notification. - $('[layout="notify"]').css({"z-index": "1001", "padding": "20px"}); - $('[layout="panel"]').css({position: 'relative'}); + $('[layout="notify"]').css({ "z-index": "1001", padding: "20px" }); + $('[layout="panel"]').css({ position: "relative" }); var $headers = $('[layout-panel="expanded"] [layout-panel="header"]'); - context._.each($headers, function($header) { + context._.each($headers, function ($header) { $header = $($header); - var isAlwaysOpenHeader = $header.is('.always-open'); + var isAlwaysOpenHeader = $header.is(".always-open"); $header.css({ margin: "0px", padding: "0px", - height: (isAlwaysOpenHeader ? opts.alwaysOpenPanelHeaderHeight : opts.panelHeaderHeight) + "px" + height: + (isAlwaysOpenHeader + ? opts.alwaysOpenPanelHeaderHeight + : opts.panelHeaderHeight) + "px", }); - }) - $('[layout-grid]').css({ - position: "relative" }); - $('[layout-grid]').children().css({ - position: "absolute" + $("[layout-grid]").css({ + position: "relative", + }); + $("[layout-grid]").children().css({ + position: "absolute", }); } function requiredStyles() { var bodyStyle = { - margin: '0px', - padding: '0px', - overflow: 'hidden' + margin: "0px", + padding: "0px", + overflow: "hidden", }; if (opts.allowBodyOverflow) { delete bodyStyle.overflow; } - $('body').css(bodyStyle); + $("body").css(bodyStyle); requiredLayoutStyles(); var curtainStyle = { position: "absolute", - margin: '0px', - padding: '0px', - overflow: 'hidden', - zIndex: 100 + margin: "0px", + padding: "0px", + overflow: "hidden", + zIndex: 100, }; - $('.curtain').css(curtainStyle); + $(".curtain").css(curtainStyle); } function hideAll() { - $('[layout]').hide(); + $("[layout]").hide(); $('[layout="header"]').show(); } @@ -458,15 +492,15 @@ function hideDialogs() { // TODO - may need dialogEvents here for specific dialogs. $('[layout="dialog"]').hide(); - $('.dialog-overlay').hide(); + $(".dialog-overlay").hide(); } function tabClicked(evt) { evt.preventDefault(); - var destination = $(evt.currentTarget).attr('tab-target'); - $('[tab-target]').removeClass('selected'); - $(evt.currentTarget).addClass('selected'); - $('.tab').hide(); + var destination = $(evt.currentTarget).attr("tab-target"); + $("[tab-target]").removeClass("selected"); + $(evt.currentTarget).addClass("selected"); + $(".tab").hide(); $('[tab-id="' + destination + '"]').show(); } @@ -479,26 +513,29 @@ return; } - var destination = $(evt.currentTarget).attr('layout-link'); + var destination = $(evt.currentTarget).attr("layout-link"); var $destination = $('[layout-id="' + destination + '"]'); var destinationType = $destination.attr("layout"); if (destinationType === "screen") { - if(!context.JK.currentUserId && !$destination.is('.no-login-required')) { + if ( + !context.JK.currentUserId && + !$destination.is(".no-login-required") + ) { // there is no user, and this item does not support 'no-login', so warn user - showDialog('login-required-dialog'); + showDialog("login-required-dialog"); return; } - context.location = '/client#/' + destination; + context.location = "/client#/" + destination; } else if (destinationType === "dialog") { showDialog(destination); } } function close(evt) { - var $target = $(evt.currentTarget).closest('[layout]'); - var layoutId = $target.attr('layout-id'); - var isDialog = ($target.attr('layout') === 'dialog'); + var $target = $(evt.currentTarget).closest("[layout]"); + var layoutId = $target.attr("layout-id"); + var isDialog = $target.attr("layout") === "dialog"; if (isDialog) { closeDialog(layoutId); } else { @@ -508,14 +545,14 @@ } function cancel(evt) { - var $target = $(evt.currentTarget).closest('[layout]'); - var layoutId = $target.attr('layout-id'); - var isDialog = ($target.attr('layout') === 'dialog'); + var $target = $(evt.currentTarget).closest("[layout]"); + var layoutId = $target.attr("layout-id"); + var isDialog = $target.attr("layout") === "dialog"; if (isDialog) { cancelDialog(layoutId); } else { // ? - logger.warn("unable to handle cancel layout-action for %o", $target) + logger.warn("unable to handle cancel layout-action for %o", $target); } return false; } @@ -523,11 +560,10 @@ function cancelDialog(dialog) { logger.debug("cancelling dialog: " + dialog); var $dialog = $('[layout-id="' + dialog + '"]'); - var result = dialogEvent(dialog, 'onCancel'); - if(result !== false) { + var result = dialogEvent(dialog, "onCancel"); + if (result !== false) { closeDialog(dialog, true); - } - else { + } else { logger.debug("dialog refused cancel"); } } @@ -535,19 +571,29 @@ function closeDialog(dialog, canceled) { logger.debug("closing dialog: " + dialog); var $dialog = $('[layout-id="' + dialog + '"]'); - dialogEvent(dialog, 'beforeHide'); - var $overlay = $('.dialog-overlay'); + dialogEvent(dialog, "beforeHide"); + var $overlay = $(".dialog-overlay"); unstackDialogs($overlay); $dialog.hide(); - $dialog.triggerHandler(EVENTS.DIALOG_CLOSED, {name: dialog, dialogCount: openDialogs.length, result: $dialog.data('result'), canceled: canceled }); - $(context).triggerHandler(EVENTS.DIALOG_CLOSED, {name: dialog, dialogCount: openDialogs.length, result: $dialog.data('result'), canceled: canceled }); - dialogEvent(dialog, 'afterHide'); + $dialog.triggerHandler(EVENTS.DIALOG_CLOSED, { + name: dialog, + dialogCount: openDialogs.length, + result: $dialog.data("result"), + canceled: canceled, + }); + $(context).triggerHandler(EVENTS.DIALOG_CLOSED, { + name: dialog, + dialogCount: openDialogs.length, + result: $dialog.data("result"), + canceled: canceled, + }); + dialogEvent(dialog, "afterHide"); $.btOffAll(); // add any prod bubbles if you close a dialog } function screenProperty(screen, property) { if (screen && screen in screenBindings) { - return screenBindings[screen][property] + return screenBindings[screen][property]; } return null; } @@ -572,21 +618,26 @@ function activeElementEvent(evtName, data) { var result = {}; var currDialog = currentDialog(); - if(currDialog) { - result.dialog = dialogEvent(currDialog.attr('layout-id'), evtName, data); + if (currDialog) { + result.dialog = dialogEvent( + currDialog.attr("layout-id"), + evtName, + data + ); } - if(currentScreen) { + if (currentScreen) { result.screen = screenEvent(currentScreen, evtName, data); } return result; } function onHashChange(e, postFunction) { + if (currentHash == context.location.hash) { + return; + } - if(currentHash == context.location.hash) { return } - - if(resettingHash) { + if (resettingHash) { resettingHash = false; e.preventDefault(); return false; @@ -594,21 +645,28 @@ try { var location = context.RouteMap.parse(context.location.hash); - } - catch (e) { + } catch (e) { // this is nowhere in the rich client; just let it go through return postFunction(e); } var screen = location.page.substring(1); // remove leading slash - var accepted = screenEvent(currentScreen, 'beforeLeave', {screen:screen, hash: context.location.hash}); - if(accepted === false) { - logger.debug("navigation to " + context.location.hash + " rejected by " + currentScreen); + var accepted = screenEvent(currentScreen, "beforeLeave", { + screen: screen, + hash: context.location.hash, + }); + if (accepted === false) { + logger.debug( + "navigation to " + + context.location.hash + + " rejected by " + + currentScreen + ); //resettingHash = true; // reset the hash to where it just was context.location.hash = currentHash; - } - else {(screen) + } else { + screen; return postFunction(e); } } @@ -622,17 +680,23 @@ currentScreen = screen; currentHash = context.location.hash; - var accepted = screenEvent(previousScreen, 'beforeHide', data); - if(accepted === false) return; + var accepted = screenEvent(previousScreen, "beforeHide", data); + if (accepted === false) return; logger.debug("layout: changing screen to " + currentScreen); // notify everyone - $(document).triggerHandler(EVENTS.SCREEN_CHANGED, {previousScreen: previousScreen, newScreen: currentScreen}) - window.NavActions.screenChanged(currentScreen, screenProperty(currentScreen, 'navName')) - context.JamTrackPreviewActions.screenChange() + $(document).triggerHandler(EVENTS.SCREEN_CHANGED, { + previousScreen: previousScreen, + newScreen: currentScreen, + }); + window.NavActions.screenChanged( + currentScreen, + screenProperty(currentScreen, "navName") + ); + context.JamTrackPreviewActions.screenChange(); - screenEvent(currentScreen, 'beforeShow', data); + screenEvent(currentScreen, "beforeShow", data); // For now -- it seems we want it open always. // TODO - support user preference here? Remember how they left it? @@ -653,69 +717,80 @@ layout(); // add an attribute to any dialogs, which let's it know it's current screen (useful for contextual styling) - context._.each(openDialogs, function(dialog) { + context._.each(openDialogs, function (dialog) { addScreenContextToDialog($(dialog)); - }) + }); - screenEvent(previousScreen, 'afterHide', data); - screenEvent(currentScreen, 'afterShow', data); + screenEvent(previousScreen, "afterHide", data); + screenEvent(currentScreen, "afterShow", data); jQuery.btOffAll(); // add any prod bubbles if you change screens // Show any requested dialog if ("d" in data) { + // if the dialog is a text message dialog, and the user is not logged in, show the login dialog instead + if (!context.JK.currentUserId) { + if (isTextMessageInUrl()) { + showDialog("login-required-dialog"); + return false; + } + } + showDialog(data.d, data); } } + function isTextMessageInUrl() { + const hash = context.location.hash; + const regexp = /\S+\/text-message\/d1=/ + return regexp.test(hash); + } + // if no arguments passed, then see if any dialog is showing // if string passed, see if dialog is showing (even if buried) of a given name function isDialogShowing() { - if(arguments.length == 1) { + if (arguments.length == 1) { // user passed in dialog id var dialogId = arguments[0]; - var result = false - context._.each(openDialogs, function(dialog) { - if($(dialog).attr('layout-id') == dialogId) { + var result = false; + context._.each(openDialogs, function (dialog) { + if ($(dialog).attr("layout-id") == dialogId) { result = true; return false; } - }) + }); return result; - } - else { + } else { // user passed in nothing return openDialogs.length > 0; } } function currentDialog() { - if(openDialogs.length == 0) return null; + if (openDialogs.length == 0) return null; return openDialogs[openDialogs.length - 1]; } // payload is a notification event from websocket gateway function dialogObscuredNotification(payload) { - var openDialog = currentDialog(); - if(!openDialog) return false; + var openDialog = currentDialog(); + if (!openDialog) return false; - if(typeof openDialog.handledNotification === 'function') { - return !openDialog.handledNotification(payload); - } - else { - return true; - } + if (typeof openDialog.handledNotification === "function") { + return !openDialog.handledNotification(payload); + } else { + return true; + } } // payload is a notification event from websocket gateway function isNoisyNotification(payload) { var openDialog = currentDialog(); - if(!openDialog) return false; + if (!openDialog) return false; - if(typeof openDialog.isNoisyNotification === 'function') { + if (typeof openDialog.isNoisyNotification === "function") { return !openDialog.isNoisyNotification(payload); - } - else { + } else { return true; } } @@ -727,9 +802,9 @@ function stackDialogs($dialog, $overlay) { // don't push a dialog on the stack that is already on there; remove it from where ever it is currently // and the rest of the code will make it end up at the top - var layoutId = $dialog.attr('layout-id'); + var layoutId = $dialog.attr("layout-id"); for (var i = openDialogs.length - 1; i >= 0; i--) { - if (openDialogs[i].attr('layout-id') === layoutId) { + if (openDialogs[i].attr("layout-id") === layoutId) { openDialogs.splice(i, 1); } } @@ -737,22 +812,22 @@ // pull out a topmost one, if present var topMost = null; for (var i = openDialogs.length - 1; i >= 0; i--) { - if (openDialogs[i].attr('topmost') === 'true') { + if (openDialogs[i].attr("topmost") === "true") { topMost = openDialogs[i]; openDialogs.splice(i, 1); } } openDialogs.push($dialog); - if(topMost) openDialogs.push(topMost); + if (topMost) openDialogs.push(topMost); var zIndex = 1000; for (var i in openDialogs) { var $openDialog = openDialogs[i]; - $openDialog.css('zIndex', zIndex); + $openDialog.css("zIndex", zIndex); zIndex++; } - $overlay.css('zIndex', zIndex - 1); + $overlay.css("zIndex", zIndex - 1); } function unstackDialogs($overlay) { @@ -761,7 +836,7 @@ } var zIndex = 1000 + openDialogs.length; - $overlay.css('zIndex', zIndex - 1); + $overlay.css("zIndex", zIndex - 1); if (openDialogs.length == 0) { $overlay.hide(); @@ -769,46 +844,45 @@ } function addScreenContextToDialog($dialog) { - $dialog.attr('current-screen', currentScreen); // useful for contextual styling of dialogs + $dialog.attr("current-screen", currentScreen); // useful for contextual styling of dialogs } function showDialog(dialog, options) { - if (dialogEvent(dialog, 'beforeShow', options) === false) { + if (dialogEvent(dialog, "beforeShow", options) === false) { return null; } - logger.debug("opening dialog: " + dialog) + logger.debug("opening dialog: " + dialog); var $dialog = $('[layout-id="' + dialog + '"]'); - if($dialog.length == 0) { - logger.debug("unknown dialog encountered: " + dialog) - return + if ($dialog.length == 0) { + logger.debug("unknown dialog encountered: " + dialog); + return; } - - var $overlay = $('.dialog-overlay') + var $overlay = $(".dialog-overlay"); if (opts.sizeOverlayToContent) { - var $body = $('body') - $('.dialog-overlay').css({ - width: $body.width() + 'px', - height: $body.height() + 'px' + var $body = $("body"); + $(".dialog-overlay").css({ + width: $body.width() + "px", + height: $body.height() + "px", }); } $overlay.show(); centerDialog(dialog); stackDialogs($dialog, $overlay); - addScreenContextToDialog($dialog) + addScreenContextToDialog($dialog); $dialog.show(); // maintain center (un-attach previous sensor if applicable, then re-add always) - window.ResizeSensor.detach($dialog.get(0)) - new window.ResizeSensor($dialog, function(){ + window.ResizeSensor.detach($dialog.get(0)); + new window.ResizeSensor($dialog, function () { centerDialog(dialog); }); - dialogEvent(dialog, 'afterShow', options); + dialogEvent(dialog, "afterShow", options); $.btOffAll(); // add any prod bubbles if you open a dailog return $dialog; } @@ -816,31 +890,32 @@ function centerDialog(dialog) { var $dialog = $('[layout-id="' + dialog + '"]'); $dialog.css({ - left: width / 2 - ($dialog.width() / 2) + "px", - top: height / 2 - ($dialog.height() / 2) + "px" + left: width / 2 - $dialog.width() / 2 + "px", + top: height / 2 - $dialog.height() / 2 + "px", }); } - function panelHeaderClicked(evt) { evt.preventDefault(); - if(!context.JK.currentUserId) { - showDialog('login-required-dialog'); + if (!context.JK.currentUserId) { + showDialog("login-required-dialog"); return false; } - expandedPanel = $(evt.currentTarget).closest('[layout="panel"]').attr("layout-id"); + expandedPanel = $(evt.currentTarget) + .closest('[layout="panel"]') + .attr("layout-id"); layout(); return false; } - function expandNotificationPanel(){ - if(!context.JK.currentUserId) { - showDialog('login-required-dialog'); + function expandNotificationPanel() { + if (!context.JK.currentUserId) { + showDialog("login-required-dialog"); return false; } - expandedPanel = 'panelNotifications'; + expandedPanel = "panelNotifications"; layout(); return false; } @@ -856,7 +931,7 @@ // var step = 0; //setWizardStep(step); //wizardShowFunctions[step](); - return showDialog('gear-wizard'); + return showDialog("gear-wizard"); } function setWizardStep(targetStepId) { @@ -865,15 +940,17 @@ var stepDialogTitle = $targetStep.attr("dialog-title"); if (stepDialogTitle) { var $myDialog = $targetStep.closest('[layout="dialog"]'); - var $myTitle = $('.content-head h1', $myDialog); + var $myTitle = $(".content-head h1", $myDialog); $myTitle.html(stepDialogTitle); } // Hide all steps: // Invoke the 'show' function, if present prior to actually showing. - if (context._.contains(context._.keys(wizardShowFunctions), targetStepId)) { + if ( + context._.contains(context._.keys(wizardShowFunctions), targetStepId) + ) { wizardShowFunctions[targetStepId](); } - $('[layout-wizard-step]').hide(); + $("[layout-wizard-step]").hide(); $targetStep.show(); var ftuePurpose = $targetStep.attr("dialog-purpose"); @@ -881,52 +958,51 @@ } function trackLocationChange(e) { - context.JK.GA.virtualPageView(location.pathname + location.search + location.hash); + context.JK.GA.virtualPageView( + location.pathname + location.search + location.hash + ); } function onHandleKey(e) { - - if (e.keyCode == 27 /** esc */) - { - if(isDialogShowing()) { - var $dialog = currentDialog(); - if(!$dialog) { - logger.error("unable to find current dialog on ESC"); - return; - } - - cancelDialog($dialog.attr('layout-id')); + if (e.keyCode == 27 /** esc */) { + if (isDialogShowing()) { + var $dialog = currentDialog(); + if (!$dialog) { + logger.error("unable to find current dialog on ESC"); + return; } + + cancelDialog($dialog.attr("layout-id")); + } } } function handleDialogState() { - var rawDialogState = $.cookie('dialog_state'); + var rawDialogState = $.cookie("dialog_state"); try { var dialogState = JSON.parse(rawDialogState); if (!dialogState) { - $.removeCookie('dialog_state'); + $.removeCookie("dialog_state"); return; } - } - catch (e) { - $.removeCookie('dialog_state'); + } catch (e) { + $.removeCookie("dialog_state"); return; } - var dialogName = dialogState['name']; + var dialogName = dialogState["name"]; if (dialogName) { setTimeout(function () { // TODO: we need a 'everything is initialized' event showDialog(dialogName); }, 0); } - $.removeCookie('dialog_state'); + $.removeCookie("dialog_state"); } // on next page load, a dialog of this name will show function queueDialog(name) { - $.cookie('dialog_state', JSON.stringify({name: name})) + $.cookie("dialog_state", JSON.stringify({ name: name })); } function events() { @@ -936,14 +1012,17 @@ } resizing = context.setTimeout(layout, 80); }); - $('body').on('click', '[layout-link]', linkClicked); - $('[layout-action="close"]').on('click', close); - $('[layout-action="cancel"]').on('click', cancel); - $('[layout-sidebar-expander]').on('click', toggleSidebar); - $('[layout-panel="expanded"] [layout-panel="header"]').on('click', panelHeaderClicked); - $('[layout-wizard-link]').on('click', wizardLinkClicked); - $('[tab-target]').on('click', tabClicked); - $(context).on('hashchange', trackLocationChange); + $("body").on("click", "[layout-link]", linkClicked); + $('[layout-action="close"]').on("click", close); + $('[layout-action="cancel"]').on("click", cancel); + $("[layout-sidebar-expander]").on("click", toggleSidebar); + $('[layout-panel="expanded"] [layout-panel="header"]').on( + "click", + panelHeaderClicked + ); + $("[layout-wizard-link]").on("click", wizardLinkClicked); + $("[tab-target]").on("click", tabClicked); + $(context).on("hashchange", trackLocationChange); $(document).keyup(onHandleKey); } @@ -968,54 +1047,54 @@ var $notify2 = $('[layout="notify2"]'); var $notify3 = $('[layout="notify3"]'); - $notify1.on('mouseenter', mouseEnterNotification) - $notify1.on('mouseleave', mouseLeaveToNotification) - $notify2.on('mouseenter', mouseEnterNotification) - $notify2.on('mouseleave', mouseLeaveToNotification) - $notify3.on('mouseenter', mouseEnterNotification) - $notify3.on('mouseleave', mouseLeaveToNotification) + $notify1.on("mouseenter", mouseEnterNotification); + $notify1.on("mouseleave", mouseLeaveToNotification); + $notify2.on("mouseenter", mouseEnterNotification); + $notify2.on("mouseleave", mouseLeaveToNotification); + $notify3.on("mouseenter", mouseEnterNotification); + $notify3.on("mouseleave", mouseLeaveToNotification); - function mouseEnterNotification(evt){ + function mouseEnterNotification(evt) { var $notify = $(evt.target); //console.log("mouseEnter", $notify.prop("id")); - switch($notify.prop("id")){ - case 'notification1': + switch ($notify.prop("id")) { + case "notification1": isMouseOverNotify1 = true; - break; - case 'notification2': + break; + case "notification2": isMouseOverNotify2 = true; - break; - case 'notification3': + break; + case "notification3": isMouseOverNotify3 = true; - break; + break; } } - function mouseLeaveToNotification(evt){ + function mouseLeaveToNotification(evt) { var $notify = $(evt.target); //console.log("mouseLeave", $notify.prop("id")); - switch($notify.prop("id")){ - case 'notification1': - if(notify1Elapsed){ + switch ($notify.prop("id")) { + case "notification1": + if (notify1Elapsed) { $notify1.hide(0); notify1Showing = false; } isMouseOverNotify1 = false; - break; - case 'notification2': - if(notify2Elapsed){ + break; + case "notification2": + if (notify2Elapsed) { $notify2.hide(0); notify2Showing = false; } isMouseOverNotify2 = false; - break; - case 'notification3': - if(notify3Elapsed){ + break; + case "notification3": + if (notify3Elapsed) { $notify3.hide(0); notify3Showing = false; } isMouseOverNotify3 = false; - break; + break; } } @@ -1027,7 +1106,7 @@ text: "OKAY", "layout-action": "close", href: "#", - "class": "button-orange" + class: "button-orange", }; var cancelButton = { @@ -1035,13 +1114,10 @@ text: "CANCEL", "layout-action": "close", href: "#", - "class": "button-grey" + class: "button-grey", }; - var defaultButtons = [ - okButton, - cancelButton - ]; + var defaultButtons = [okButton, cancelButton]; // this.notify = function (message, buttons, noCancel) { // if (!buttons) { @@ -1098,115 +1174,118 @@ if (!buttons) { if (noCancel) { buttons = [okButton]; - } - else { + } else { buttons = defaultButtons; } } - notifyQueue.push({message: message, descriptor: buttons}); + notifyQueue.push({ message: message, descriptor: buttons }); showNotificationToast(); - - } + }; - function showNotificationToast(){ - if(!notify1Showing){ + function showNotificationToast() { + if (!notify1Showing) { var notifyDetails1 = notifyQueue.shift(); if (notifyDetails1 !== undefined) { - setNotificationInfo(notifyDetails1.message, notifyDetails1.descriptor, $notify1); + setNotificationInfo( + notifyDetails1.message, + notifyDetails1.descriptor, + $notify1 + ); notify1Elapsed = false; - $notify1.hide(0) - .show({ + $notify1.hide(0).show({ duration: 0, //queue: true, complete: function () { - console.log("Show notification1") + console.log("Show notification1"); notify1Showing = true; notifyDetails1 = {}; - } - }) + }, + }); //.delay(8000); - - setTimeout(function(){ - notify1Elapsed = true; - if(!isMouseOverNotify1){ - $notify1.hide(0, function(){ - notify1Showing = false; - console.log("Hide notification1") - }) - } - }, 8000) - - } - }else if(!notify2Showing){ + setTimeout(function () { + notify1Elapsed = true; + if (!isMouseOverNotify1) { + $notify1.hide(0, function () { + notify1Showing = false; + console.log("Hide notification1"); + }); + } + }, 8000); + } + } else if (!notify2Showing) { var notifyDetails2 = notifyQueue.shift(); if (notifyDetails2 !== undefined) { - setNotificationInfo(notifyDetails2.message, notifyDetails2.descriptor, $notify2); + setNotificationInfo( + notifyDetails2.message, + notifyDetails2.descriptor, + $notify2 + ); notify2Elapsed = false; - $notify2.hide(0) - .show({ + $notify2.hide(0).show({ duration: 0, //queue: true, complete: function () { - console.log("Show notification2") + console.log("Show notification2"); notify2Showing = true; notifyDetails2 = {}; - } + }, }); // .delay(8000) // .hide(0, function(){ // notify2Showing = false; // console.log("Hide notification2") // }) - setTimeout(function(){ + setTimeout(function () { notify2Elapsed = true; - if(!isMouseOverNotify2){ - $notify2.hide(0, function(){ + if (!isMouseOverNotify2) { + $notify2.hide(0, function () { notify2Showing = false; - console.log("Hide notification2") - }) + console.log("Hide notification2"); + }); } }, 8000); } - - }else if(!notify3Showing){ + } else if (!notify3Showing) { var notifyDetails3 = notifyQueue.shift(); if (notifyDetails3 !== undefined) { - setNotificationInfo(notifyDetails3.message, notifyDetails3.descriptor, $notify3); + setNotificationInfo( + notifyDetails3.message, + notifyDetails3.descriptor, + $notify3 + ); notify3Elapsed = false; - $notify3.hide(0) - .show({ + $notify3.hide(0).show({ duration: 0, //queue: true, complete: function () { - console.log("Show notification3") + console.log("Show notification3"); notify3Showing = true; notifyDetails3 = {}; - } - }) + }, + }); // .delay(8000) // .hide(0, function(){ // notify3Showing = false; // console.log("Hide notification3") // }) - setTimeout(function(){ + setTimeout(function () { notify3Elapsed = true; - if(!isMouseOverNotify3){ - $notify3.hide(0, function(){ + if (!isMouseOverNotify3) { + $notify3.hide(0, function () { notify3Showing = false; - console.log("Hide notification3") - }) + console.log("Hide notification3"); + }); } }, 8000); } - - }else if(notify1Showing && notify2Showing && notify3Showing){ + } else if (notify1Showing && notify2Showing && notify3Showing) { //try again after 1 second - setTimeout(function(){ - showNotificationToast() - }, 1000) + setTimeout(function () { + showNotificationToast(); + }, 1000); } } @@ -1280,65 +1359,63 @@ function setNotificationInfo(message, buttons, notificationSelector) { var $notify = notificationSelector; - $('h2', $notify).text(message.title); - $('p', $notify).empty(); + $("h2", $notify).text(message.title); + $("p", $notify).empty(); if (message.text instanceof jQuery) { - $('p', $notify).append(message.text) - } - else { - $('p', $notify).html(message.text); + $("p", $notify).append(message.text); + } else { + $("p", $notify).html(message.text); } if (message.icon_url) { - $('#avatar', $notify).attr('src', message.icon_url); - $('#notify-avatar', $notify).show(); - } - else { - $('#notify-avatar', $notify).hide(); + $("#avatar", $notify).attr("src", message.icon_url); + $("#notify-avatar", $notify).show(); + } else { + $("#notify-avatar", $notify).hide(); } if (message.detail) { - $('div.detail', $notify).html(message.detail).show(); - } - else { - $('div.detail', $notify).hide(); + $("div.detail", $notify).html(message.detail).show(); + } else { + $("div.detail", $notify).hide(); } - var $buttonDiv = $('#buttons', $notify); + var $buttonDiv = $("#buttons", $notify); $buttonDiv.empty(); - $.each(buttons, function(index, val) { - + $.each(buttons, function (index, val) { // build button HTML based on KV pairs var keys = Object.keys(val); - var buttonHtml = '  '; + buttonHtml += ">" + val["text"] + "  "; $buttonDiv.append(buttonHtml); // ensure it doesn't fire twice - $('#' + val.id, $notify).unbind('click'); + $("#" + val.id, $notify).unbind("click"); - $('#' + val.id, $notify).click(function() { + $("#" + val.id, $notify).click(function () { if (val.callback !== undefined) { if (val.callback_args) { val.callback(val.callback_args); - } - else { + } else { val.callback(); } return false; - } - else { + } else { $notify.hide(); return false; } @@ -1353,49 +1430,49 @@ changeToScreen(screen, data); }; - this.onHashChange = function(e, postFunction) { + this.onHashChange = function (e, postFunction) { return onHashChange(e, postFunction); - } + }; this.showDialog = function (dialog, options) { return showDialog(dialog, options); }; - this.dialogObscuredNotification = function(payload) { + this.dialogObscuredNotification = function (payload) { return dialogObscuredNotification(payload); - } + }; - this.isNoisyNotification= function(payload) { + this.isNoisyNotification = function (payload) { return isNoisyNotification(payload); - } + }; - this.shouldFreezeAppOnDisconnect = function() { + this.shouldFreezeAppOnDisconnect = function () { return shouldFreezeAppOnDisconnect(); - } + }; - this.isDialogShowing = function() { + this.isDialogShowing = function () { return isDialogShowing(arguments[0]); - } + }; - this.activeElementEvent = function(evtName, data) { + this.activeElementEvent = function (evtName, data) { return activeElementEvent(evtName, data); - } + }; - this.getCurrentScreen = function() { + this.getCurrentScreen = function () { return currentScreen; // will be a string of the layout-id of the active screen - } + }; this.close = function (evt) { close(evt); }; - this.beforeDisconnect = function() { + this.beforeDisconnect = function () { fireEvents(); - } + }; - this.afterReconnect = function() { + this.afterReconnect = function () { fireEvents(); - } + }; this.closeDialog = closeDialog; this.cancelDialog = cancelDialog; @@ -1408,24 +1485,36 @@ * margin options and return a list of [top, left, width, height] * for the cell. */ - this.getCardLayout = function (gridWidth, gridHeight, gridRows, gridCols, row, col, rowspan, colspan) { - + this.getCardLayout = function ( + gridWidth, + gridHeight, + gridRows, + gridCols, + row, + col, + rowspan, + colspan + ) { var _gridWidth = gridWidth + 3 * opts.gridPadding; var _gridHeight = gridHeight + 3 * opts.gridPadding; var cellWidth, cellHeight, top, left, width, height; - cellWidth = Math.floor((_gridWidth - 2 * opts.gridOuterMargin) / gridCols); - cellHeight = Math.floor((_gridHeight - 2 * opts.gridOuterMargin) / gridRows); + cellWidth = Math.floor( + (_gridWidth - 2 * opts.gridOuterMargin) / gridCols + ); + cellHeight = Math.floor( + (_gridHeight - 2 * opts.gridOuterMargin) / gridRows + ); width = colspan * cellWidth - 2 * opts.gridPadding; height = rowspan * cellHeight - 2 * opts.gridPadding; - top = row * cellHeight;// + opts.gridOuterMargin; // + opts.gridPadding; - left = col * cellWidth;// + opts.gridOuterMargin; // + opts.gridPadding; + top = row * cellHeight; // + opts.gridOuterMargin; // + opts.gridPadding; + left = col * cellWidth; // + opts.gridOuterMargin; // + opts.gridPadding; return { top: top, left: left, width: width, - height: height + height: height, }; }; @@ -1448,12 +1537,10 @@ events(); }; - this.expandNotificationPanel = function(){ - return expandNotificationPanel() - } + this.expandNotificationPanel = function () { + return expandNotificationPanel(); + }; return this; - }; - -}(window, jQuery)); +})(window, jQuery);