From 5df39b1c2fb73a0b1e8bae93a9fbec0415542f23 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Sat, 23 Dec 2017 17:43:52 -0600 Subject: [PATCH] Component modals wip --- .../javascripts/app/services/authManager.js | 6 +-- .../app/services/componentManager.js | 40 ++++++++++++++++++ .../services/directives/views/accountMenu.js | 4 ++ .../directives/views/componentModal.js | 41 +++++++++++++++++++ .../services/directives/views/editorMenu.js | 8 ++-- .../app/services/directives/views/roomBar.js | 23 +---------- .../{_permissions-modal.scss => _modals.scss} | 10 ++++- app/assets/stylesheets/frontend.css.scss | 2 +- .../directives/account-menu.html.haml | 2 +- .../directives/component-modal.html.haml | 5 +++ 10 files changed, 110 insertions(+), 31 deletions(-) create mode 100644 app/assets/javascripts/app/services/directives/views/componentModal.js rename app/assets/stylesheets/app/{_permissions-modal.scss => _modals.scss} (91%) create mode 100644 app/assets/templates/frontend/directives/component-modal.html.haml diff --git a/app/assets/javascripts/app/services/authManager.js b/app/assets/javascripts/app/services/authManager.js index 5b7d9b7bd..e5126ab76 100644 --- a/app/assets/javascripts/app/services/authManager.js +++ b/app/assets/javascripts/app/services/authManager.js @@ -95,9 +95,9 @@ angular.module('app.frontend') return supportedVersions.includes(version); } - this.getAuthParamsForEmail = function(url, email, callback) { + this.getAuthParamsForEmail = function(url, email, extraParams, callback) { var requestUrl = url + "/auth/params"; - httpManager.getAbsolute(requestUrl, {email: email}, function(response){ + httpManager.getAbsolute(requestUrl, _.merge({email: email}, extraParams), function(response){ callback(response); }, function(response){ console.error("Error getting auth params", response); @@ -121,7 +121,7 @@ angular.module('app.frontend') } this.login = function(url, email, password, ephemeral, extraParams, callback) { - this.getAuthParamsForEmail(url, email, function(authParams){ + this.getAuthParamsForEmail(url, email, extraParams, function(authParams){ if(authParams.error) { callback(authParams); diff --git a/app/assets/javascripts/app/services/componentManager.js b/app/assets/javascripts/app/services/componentManager.js index 049e05c75..89e2304fd 100644 --- a/app/assets/javascripts/app/services/componentManager.js +++ b/app/assets/javascripts/app/services/componentManager.js @@ -210,6 +210,7 @@ class ComponentManager { save-context-client-data get-context-client-data install-local-component + open-component */ if(message.action === "stream-items") { @@ -291,6 +292,12 @@ class ComponentManager { }) } + else if(message.action === "open-component") { + let openComponent = this.modelManager.findItem(message.data.uuid); + console.log("Received open-component event", openComponent); + this.openModalComponent(openComponent); + } + for(let handler of this.handlers) { if(handler.areas.includes(component.area)) { this.timeout(function(){ @@ -449,6 +456,13 @@ class ComponentManager { } } + openModalComponent(component) { + var scope = this.$rootScope.$new(true); + scope.component = component; + var el = this.$compile( "" )(scope); + angular.element(document.body).append(el); + } + replyToMessage(component, originalMessage, replyData) { var reply = { action: "reply", @@ -511,6 +525,11 @@ class ComponentManager { this.handlers.push(handler); } + deregisterHandler(identifier) { + var handler = _.find(this.handlers, {identifier: identifier}); + this.handlers.splice(this.handlers.indexOf(handler), 1); + } + // Called by other views when the iframe is ready registerComponentWindow(component, componentWindow) { if(component.window === componentWindow) { @@ -619,6 +638,27 @@ class ComponentManager { } } + handleSetSizeEvent(component, data) { + var setSize = function(element, size) { + var widthString = typeof size.width === 'string' ? size.width : `${data.width}px`; + var heightString = typeof size.height === 'string' ? size.height : `${data.height}px`; + element.setAttribute("style", `width:${widthString}; height:${heightString}; `); + } + + if(data.type === "content") { + var iframe = this.iframeForComponent(component); + var width = data.width; + var height = data.height; + iframe.width = width; + iframe.height = height; + + setSize(iframe, data); + } else { + var container = document.getElementById("room-" + component.uuid); + setSize(container, data); + } + } + } diff --git a/app/assets/javascripts/app/services/directives/views/accountMenu.js b/app/assets/javascripts/app/services/directives/views/accountMenu.js index 83f033aa0..4782899bd 100644 --- a/app/assets/javascripts/app/services/directives/views/accountMenu.js +++ b/app/assets/javascripts/app/services/directives/views/accountMenu.js @@ -117,6 +117,10 @@ class AccountMenu { $scope.formData.mfa = error; }) } else if(!response || (response && !response.didDisplayAlert)) { + $timeout(() => { + $scope.formData.showLogin = true; + $scope.formData.mfa = null; + }) alert(error.message); } } else { diff --git a/app/assets/javascripts/app/services/directives/views/componentModal.js b/app/assets/javascripts/app/services/directives/views/componentModal.js new file mode 100644 index 000000000..02748887f --- /dev/null +++ b/app/assets/javascripts/app/services/directives/views/componentModal.js @@ -0,0 +1,41 @@ +class ComponentModal { + + constructor() { + this.restrict = "E"; + this.templateUrl = "frontend/directives/component-modal.html"; + this.scope = { + show: "=", + component: "=", + callback: "=" + }; + } + + link($scope, el, attrs, componentManager) { + $scope.el = el; + } + + controller($scope, componentManager) { + 'ngInject'; + + let identifier = "modal-" + $scope.component.uuid; + + $scope.dismiss = function() { + componentManager.deregisterHandler(identifier); + $scope.el.remove(); + } + + $scope.url = function() { + return componentManager.urlForComponent($scope.component); + } + + componentManager.registerHandler({identifier: identifier, areas: ["modal"], + actionHandler: function(component, action, data){ + if(action == "set-size") { + componentManager.handleSetSizeEvent(component, data); + } + }.bind(this)}); + } + +} + +angular.module('app.frontend').directive('componentModal', () => new ComponentModal); diff --git a/app/assets/javascripts/app/services/directives/views/editorMenu.js b/app/assets/javascripts/app/services/directives/views/editorMenu.js index 26a8de3f7..2092c08f1 100644 --- a/app/assets/javascripts/app/services/directives/views/editorMenu.js +++ b/app/assets/javascripts/app/services/directives/views/editorMenu.js @@ -21,10 +21,10 @@ class EditorMenu { $scope.selectEditor = function($event, editor) { if(editor) { editor.conflict_of = null; // clear conflict if applicable - } - if(editor.local && !isDesktopApplication()) { - alert("This editor is installed ") - return; + if(editor.local && !isDesktopApplication()) { + alert("This editor is installed ") + return; + } } $scope.callback()(editor); } diff --git a/app/assets/javascripts/app/services/directives/views/roomBar.js b/app/assets/javascripts/app/services/directives/views/roomBar.js index ff492e739..4d9c552cb 100644 --- a/app/assets/javascripts/app/services/directives/views/roomBar.js +++ b/app/assets/javascripts/app/services/directives/views/roomBar.js @@ -15,7 +15,6 @@ class RoomBar { $rootScope.$on("initial-data-loaded", () => { $timeout(() => { $scope.rooms = componentManager.componentsForArea("rooms"); - console.log("Rooms:", $scope.rooms); }) }); @@ -31,26 +30,8 @@ class RoomBar { }.bind(this)); } }.bind(this), actionHandler: function(component, action, data){ - if(action === "set-size") { - console.log("Set size event", data); - var setSize = function(element, size) { - var widthString = typeof size.width === 'string' ? size.width : `${data.width}px`; - var heightString = typeof size.height === 'string' ? size.height : `${data.height}px`; - element.setAttribute("style", `width:${widthString}; height:${heightString}; `); - } - - if(data.type === "content") { - var iframe = componentManager.iframeForComponent(component); - var width = data.width; - var height = data.height; - iframe.width = width; - iframe.height = height; - - setSize(iframe, data); - } else { - var container = document.getElementById("room-" + component.uuid); - setSize(container, data); - } + if(action == "set-size") { + componentManager.handleSetSizeEvent(component, data); } }.bind(this)}); diff --git a/app/assets/stylesheets/app/_permissions-modal.scss b/app/assets/stylesheets/app/_modals.scss similarity index 91% rename from app/assets/stylesheets/app/_permissions-modal.scss rename to app/assets/stylesheets/app/_modals.scss index c51800dd1..a1bb020c5 100644 --- a/app/assets/stylesheets/app/_permissions-modal.scss +++ b/app/assets/stylesheets/app/_modals.scss @@ -1,4 +1,4 @@ -.permissions-modal { +.permissions-modal, .component-modal { position: fixed; margin-left: auto; margin-right: auto; @@ -82,5 +82,13 @@ border: 1px solid gray; } } +} + +.modal-iframe-container { + + .modal-iframe { + width: 100%; + height: 100%; + } } diff --git a/app/assets/stylesheets/frontend.css.scss b/app/assets/stylesheets/frontend.css.scss index 249d4f9ed..529b6ed35 100644 --- a/app/assets/stylesheets/frontend.css.scss +++ b/app/assets/stylesheets/frontend.css.scss @@ -9,7 +9,7 @@ $dark-gray: #2e2e2e; @import "app/editor"; @import "app/extensions"; @import "app/menus"; -@import "app/permissions-modal"; +@import "app/modals"; @import "app/lock-screen"; @import "ionicons"; diff --git a/app/assets/templates/frontend/directives/account-menu.html.haml b/app/assets/templates/frontend/directives/account-menu.html.haml index 099460fd9..6b5311743 100644 --- a/app/assets/templates/frontend/directives/account-menu.html.haml +++ b/app/assets/templates/frontend/directives/account-menu.html.haml @@ -43,7 +43,7 @@ %form.mt-5{"ng-if" => "formData.mfa"} %p {{formData.mfa.message}} - %input.form-control.mt-10{:autofocus => 'autofocus', :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'} + %input.form-control.mt-10{:autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'} %button.ui-button.block.mt-10{"ng-click" => "submitMfaForm()"} {{"Sign In"}} .mt-15{"ng-if" => "formData.showRegister"} diff --git a/app/assets/templates/frontend/directives/component-modal.html.haml b/app/assets/templates/frontend/directives/component-modal.html.haml new file mode 100644 index 000000000..4ce5aaf62 --- /dev/null +++ b/app/assets/templates/frontend/directives/component-modal.html.haml @@ -0,0 +1,5 @@ +.background{"ng-click" => "dismiss()"} + +.content + .modal-iframe-container{"ng-attr-id" => "component-{{component.uuid}}"} + %iframe.modal-iframe{"ng-src" => "{{url() | trusted}}", "frameBorder" => "0", "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-modals", "data-component-id" => "{{component.uuid}}"}