Updates

app/assets/templates/frontend/directives/component-modal.html.haml

@@ -1,7 +1,9 @@
-.sn-component
-  .panel{"ng-attr-id" => "component-{{component.uuid}}"}
-    .header
-      %h1.title {{component.name}}
-      %a.close-button.info{"ng-click" => "dismiss()"} Close
-    .modal-iframe-container{"ng-attr-id" => "component-{{component.uuid}}"}
-      %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}}"}
+.background{"ng-click" => "dismiss()"}
+
+.content
+  .sn-component
+    .panel{"ng-attr-id" => "component-{{component.uuid}}"}
+      .header
+        %h1.title {{component.name}}
+        %a.close-button.info{"ng-click" => "dismiss()"} Close
+      %component-view.component-view{"component" => "component"}

app/assets/templates/frontend/directives/component-view.html.haml

@@ -1,6 +1,6 @@
 %iframe{"ng-if" => "component",
 "ng-attr-id" => "component-{{component.uuid}}",
-"ng-src" => "{{url() | trusted}}", "frameBorder" => "0",
+"ng-src" => "{{component.computedUrl() | 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}}"}
   Loading

app/assets/templates/frontend/directives/global-extensions-menu.html.haml

@@ -24,8 +24,8 @@
             %h3
               %input.bold{"ng-if" => "theme.rename", "ng-model" => "theme.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(theme);", "mb-autofocus" => "true", "should-focus" => "true"}
               %span{"ng-if" => "!theme.rename"} {{theme.name}}
-            %a{"ng-if" => "!themeManager.isThemeActive(theme)", "ng-click" => "themeManager.activateTheme(theme); $event.stopPropagation();"} Activate
-            %a{"ng-if" => "themeManager.isThemeActive(theme)", "ng-click" => "themeManager.deactivateTheme(theme); $event.stopPropagation();"} Deactivate
+            -# %a{"ng-if" => "!themeManager.isThemeActive(theme)", "ng-click" => "themeManager.activateTheme(theme); $event.stopPropagation();"} Activate
+            -# %a{"ng-if" => "themeManager.isThemeActive(theme)", "ng-click" => "themeManager.deactivateTheme(theme); $event.stopPropagation();"} Deactivate
             .mt-3{"ng-if" => "theme.showDetails"}
               .link-group
                 %a{"ng-click" => "renameExtension(theme); $event.stopPropagation();"} Rename

app/assets/templates/frontend/directives/permissions-modal.html.haml

@@ -5,7 +5,7 @@
     .panel
       .header
         %h1.title Activate Extension
-        %a.close-button.info Cancel
+        %a.close-button.info{"ng-click" => "deny()"} Cancel
       .content
         .panel-section
           .panel-row
@@ -14,7 +14,6 @@
               would like to interact with your
               %span{"ng-repeat" => "permission in formattedPermissions"}
                 {{permission}}.
-            -# %p.wrap URL: {{component.runningUrl}}
 
           .panel-row
             %p

app/assets/templates/frontend/editor.html.haml

@@ -8,8 +8,8 @@
     #save-status{"ng-class" => "{'red bold': ctrl.saveError, 'orange bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
 
     .editor-tags
-      #note-tags-component-container{"ng-if" => "ctrl.tagsComponent && ctrl.tagsComponent.active"}
-        %iframe#note-tags-iframe{"ng-src" => "{{ctrl.componentManager.urlForComponent(ctrl.tagsComponent) | trusted}}", "frameBorder" => "0", "sandbox" => "allow-scripts", "data-component-id" => "{{ctrl.tagsComponent.uuid}}"}
+      #note-tags-component-container{"ng-if" => "ctrl.tagsComponent"}
+        %component-view.component-view{ "component" => "ctrl.tagsComponent"}
       %input.tags-input{"ng-if" => "!(ctrl.tagsComponent && ctrl.tagsComponent.active)", "type" => "text", "ng-keyup" => "$event.keyCode == 13 && $event.target.blur();",
       "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"}
 
@@ -42,8 +42,7 @@
 
   .editor-content#editor-content{"ng-if" => "ctrl.noteReady && !ctrl.note.errorDecrypting"}
     %panel-resizer.left{"panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "property" => "'left'", "hoverable" => "true"}
-    -# ng-show is required here (as opposed to ng-if) in order for the component-view to receive events such as nulling ctrl.selectorEditor
-    %component-view{"ng-show" => "ctrl.selectedEditor", "component" => "ctrl.selectedEditor", "class" => "component-view"}
+    %component-view.component-view{"ng-if" => "ctrl.selectedEditor", "component" => "ctrl.selectedEditor"}
     %textarea.editable#note-text-editor{"ng-if" => "!ctrl.selectedEditor", "ng-model" => "ctrl.note.text",
      "ng-change" => "ctrl.contentChanged()", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()", "dir" => "auto"}
       {{ctrl.onSystemEditorLoad()}}
@@ -53,6 +52,4 @@
     %p.medium-padding{"style" => "padding-top: 0 !important;"} There was an error decrypting this item. Ensure you are running the latest version of this app, then sign out and sign back in to try again.
 
   #editor-pane-component-stack
-    .component.component-stack-border{"ng-repeat" => "component in ctrl.componentStack", "ng-if" => "component.active", "ng-show" => "!component.ignoreEvents", "id" => "{{'component-' + component.uuid}}", "ng-mouseover" => "component.showExit = true", "ng-mouseleave" => "component.showExit = false"}
-      .exit-button.body-text-color{"ng-if" => "component.showExit", "ng-click" => "ctrl.disableComponentForCurrentItem(component, true)"} ×
-      %iframe{"ng-src" => "{{ctrl.componentManager.urlForComponent(component) | 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}}"}
+    %component-view.component-view.component-stack-item{"ng-repeat" => "component in ctrl.componentStack", "ng-if" => "component.active", "component" => "component"}

app/assets/templates/frontend/footer.html.haml

@@ -22,7 +22,7 @@
       .item{"ng-repeat" => "room in ctrl.rooms"}
         .column{"ng-click" => "ctrl.selectRoom(room)"}
           .label {{room.name}}
-        %component-modal{"ng-if" => "room.show", "component" => "room"}
+        %component-modal{"ng-if" => "room.showRoom", "component" => "room", "controller" => "room.directiveController"}
 
 
     .right

app/assets/templates/frontend/tags.html.haml

@@ -1,5 +1,6 @@
 .section.tags#tags-column
-  %iframe#tags-list-iframe{"ng-if" => "ctrl.component && ctrl.component.active", "ng-src" => "{{ctrl.componentManager.urlForComponent(ctrl.component) | trusted}}", "frameBorder" => "0", "style" => "width: 100%; height: 100%;", "sandbox" => "allow-scripts"}
+  .component-view-container{"ng-if" => "ctrl.component"}
+    %component-view.component-view{"component" => "ctrl.component"}
   #tags-content.content{"ng-if" => "!(ctrl.component && ctrl.component.active)"}
     #tags-title-bar.section-title-bar
       .section-title-bar-header