From 3372db3f0fef7c6be728c033fd394f3b43e1ef7a Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Mon, 2 Nov 2020 09:16:00 +0100
Subject: [PATCH 1/4] Add large select style

---
 app/assets/stylesheets/alchemy/_variables.scss | 2 ++
 app/assets/stylesheets/alchemy/selects.scss    | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
index e4f7b26e1f..49d66d8f6c 100644
--- a/app/assets/stylesheets/alchemy/_variables.scss
+++ b/app/assets/stylesheets/alchemy/_variables.scss
@@ -159,6 +159,8 @@ $datepicker_day_color: $text-color !default;
 
 $select-hover-bg-color: $dark-blue !default;
 $select-hover-text-color: $white !default;
+$medium-select-box-width: 90px;
+$large-select-box-width: 120px;
 
 $thumbnail-background-color: opacify($default-border-color, 1) !default;
 $medium-screen-break-point: 700px;
diff --git a/app/assets/stylesheets/alchemy/selects.scss b/app/assets/stylesheets/alchemy/selects.scss
index 1af2d44cf8..a86cf99782 100644
--- a/app/assets/stylesheets/alchemy/selects.scss
+++ b/app/assets/stylesheets/alchemy/selects.scss
@@ -1,5 +1,3 @@
-$medium-select-box-width: 90px;
-
 select {
   @include button-defaults(
     $background-color: $form-field-background-color,
@@ -76,6 +74,10 @@ select {
       width: $medium-select-box-width;
     }
 
+    &.large {
+      width: $large-select-box-width;
+    }
+
     &.select2-container-active {
 
       .select2-choice, .select2-choices {

From 6c025037af737fa783b7c8ff0792a2ca93468e11 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Mon, 2 Nov 2020 09:15:48 +0100
Subject: [PATCH 2/4] Allow multiple preview sources

Currently only one page preview source is available. Allowing to add more preview sources the user can select from makes it possible to see the same page content in different contexts (Static Frontends, A/B-Testing, etc.)
---
 .../alchemy/alchemy.preview_window.js.coffee  | 12 +++++-
 .../alchemy/admin/pages_controller.rb         |  7 +++-
 app/views/alchemy/admin/pages/edit.html.erb   | 10 ++++-
 config/locales/alchemy.en.yml                 |  2 +
 lib/alchemy.rb                                | 37 +++++++++++++++++++
 lib/alchemy/admin/preview_url.rb              |  2 +
 lib/alchemy/engine.rb                         |  4 --
 spec/dummy/config/locales/alchemy.en.yml      |  4 ++
 .../admin/page_editing_feature_spec.rb        | 22 +++++++++++
 9 files changed, 92 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
index 92405a5b14..b94fd7ccc5 100644
--- a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
+++ b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
@@ -5,7 +5,8 @@ Alchemy.PreviewWindow =
   HEIGHT: 75 # Top menu height
 
   init: (url) ->
-    $iframe = $("<iframe name=\"alchemy_preview_window\" src=\"#{url}\" id=\"alchemy_preview_window\" frameborder=\"0\"/>")
+    @previewUrl = url
+    $iframe = $("<iframe name=\"alchemy_preview_window\" src=\"#{@previewUrl}\" id=\"alchemy_preview_window\" frameborder=\"0\"/>")
     $reload = $('#reload_preview_button')
     @_showSpinner()
     $iframe.load =>
@@ -13,6 +14,8 @@ Alchemy.PreviewWindow =
     $('body').append($iframe)
     @currentWindow = $iframe
     @_bindReloadButton()
+    @_bindSelect()
+    return
 
   resize: (width) ->
     width = @MIN_WIDTH if width < @MIN_WIDTH
@@ -29,7 +32,7 @@ Alchemy.PreviewWindow =
       @_hideSpinner()
       if callback
         callback.call(e, $iframe)
-    $iframe.attr 'src', $iframe.attr('src')
+    $iframe.attr('src', @previewUrl)
     true
 
   postMessage: (data) ->
@@ -53,5 +56,10 @@ Alchemy.PreviewWindow =
       e.preventDefault()
       @refresh()
 
+  _bindSelect: ->
+    $('#preview_url').change (e) =>
+      @previewUrl = e.target.value
+      @refresh()
+
 Alchemy.reloadPreview = ->
   Alchemy.PreviewWindow.refresh()
diff --git a/app/controllers/alchemy/admin/pages_controller.rb b/app/controllers/alchemy/admin/pages_controller.rb
index 36dd073786..46d8658694 100644
--- a/app/controllers/alchemy/admin/pages_controller.rb
+++ b/app/controllers/alchemy/admin/pages_controller.rb
@@ -85,7 +85,12 @@ def edit
         elsif page_needs_lock?
           @page.lock_to!(current_alchemy_user)
         end
-        @preview_url = Alchemy::Admin::PREVIEW_URL.url_for(@page)
+        @preview_urls = Alchemy.preview_sources.map do |klass|
+          [
+            klass.model_name.human,
+            klass.new(routes: Alchemy::Engine.routes).url_for(@page),
+          ]
+        end
         @layoutpage = @page.layoutpage?
       end
 
diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb
index d9801d114a..7a318d24b4 100644
--- a/app/views/alchemy/admin/pages/edit.html.erb
+++ b/app/views/alchemy/admin/pages/edit.html.erb
@@ -88,6 +88,14 @@
       class: 'alchemy_selectbox medium' %>
   </div>
   <div class="toolbar_spacer"></div>
+  <% if @preview_urls.many? %>
+    <div class="select_with_label">
+      <label><%= Alchemy.t(:preview_url) %></label>
+      <%= select_tag 'preview_url',
+        options_for_select(@preview_urls),
+        class: 'alchemy_selectbox large' %>
+    </div>
+  <% end %>
   <div class="button_with_label">
     <%= link_to render_icon(:redo), nil, {
       title: Alchemy.t('Reload Preview'),
@@ -190,7 +198,7 @@
       }
     });
 
-    Alchemy.PreviewWindow.init('<%= @preview_url %>');
+    Alchemy.PreviewWindow.init('<%= @preview_urls.first.last %>');
 
     $('#preview_size').bind('open.selectBoxIt', function (e) {
       $('#top_menu').css('z-index', 5000);
diff --git a/config/locales/alchemy.en.yml b/config/locales/alchemy.en.yml
index c30802a3e8..686538392b 100644
--- a/config/locales/alchemy.en.yml
+++ b/config/locales/alchemy.en.yml
@@ -521,6 +521,7 @@ en:
       '768': '768px (iPad - Portrait)'
       '1024': '1024px (iPad - Landscape)'
       '1280': '1280px (Desktop)'
+    preview_url: Preview
     recently_uploaded_only: 'Recently uploaded only'
     "regular method": "Regular method"
     remove: "Remove"
@@ -690,6 +691,7 @@ en:
       alchemy/message:
         one: Message
         other: Messages
+      alchemy/admin/preview_url: Internal
     attributes:
       alchemy/message:
         salutation: 'Salutation'
diff --git a/lib/alchemy.rb b/lib/alchemy.rb
index 353817a786..71bb55976d 100644
--- a/lib/alchemy.rb
+++ b/lib/alchemy.rb
@@ -1,8 +1,45 @@
 # frozen_string_literal: true
 
+require "alchemy/admin/preview_url"
+
 module Alchemy
   YAML_WHITELIST_CLASSES = %w(Symbol Date Regexp)
 
+  # Define page preview sources
+  #
+  # A preview source is a Ruby class returning an URL
+  # that is used as source for the preview frame in the
+  # admin UI.
+  #
+  # == Example
+  #
+  #     # lib/acme/preview_source.rb
+  #     class Acme::PreviewSource < Alchemy::Admin::PreviewUrl
+  #       def url_for(page)
+  #         if page.site.name == "Next"
+  #           "https://user:#{ENV['PREVIEW_HTTP_PASS']}@next.acme.com"
+  #         else
+  #           "https://www.acme.com"
+  #         end
+  #       end
+  #     end
+  #
+  #     # config/initializers/alchemy.rb
+  #     require "acme/preview_source"
+  #     Alchemy.preview_sources << Acme::PreviewSource
+  #
+  #     # config/locales/de.yml
+  #     de:
+  #       activemodel:
+  #         models:
+  #           acme/preview_source: Acme Vorschau
+  #
+  def self.preview_sources
+    @_preview_sources ||= begin
+      Set.new << Alchemy::Admin::PreviewUrl
+    end
+  end
+
   # Define page publish targets
   #
   # A publish target is a ActiveJob that gets performed
diff --git a/lib/alchemy/admin/preview_url.rb b/lib/alchemy/admin/preview_url.rb
index 2b2325e88a..3bcde8a71e 100644
--- a/lib/alchemy/admin/preview_url.rb
+++ b/lib/alchemy/admin/preview_url.rb
@@ -31,6 +31,8 @@ module Admin
     #           password: <%= ENV["BASIC_AUTH_PASSWORD"] %>
     #
     class PreviewUrl
+      extend ActiveModel::Translation
+
       class MissingProtocolError < StandardError; end
 
       def initialize(routes:)
diff --git a/lib/alchemy/engine.rb b/lib/alchemy/engine.rb
index 5330477f2e..256af100e7 100644
--- a/lib/alchemy/engine.rb
+++ b/lib/alchemy/engine.rb
@@ -9,10 +9,6 @@ class Engine < Rails::Engine
       Alchemy::LOOKUP_CONTEXT = ActionView::LookupContext.new(Rails.root.join("app", "views", "alchemy"))
     end
 
-    initializer "alchemy.admin.preview_url" do
-      Alchemy::Admin::PREVIEW_URL = Alchemy::Admin::PreviewUrl.new(routes: Alchemy::Engine.routes)
-    end
-
     initializer "alchemy.dependency_tracker" do
       [:erb, :slim, :haml].each do |handler|
         ActionView::DependencyTracker.register_tracker(handler, CacheDigests::TemplateTracker)
diff --git a/spec/dummy/config/locales/alchemy.en.yml b/spec/dummy/config/locales/alchemy.en.yml
index adb8b12518..3dc7b0f045 100644
--- a/spec/dummy/config/locales/alchemy.en.yml
+++ b/spec/dummy/config/locales/alchemy.en.yml
@@ -29,3 +29,7 @@ en:
     resource_help_texts:
       party:
         name: Party
+
+  activemodel:
+    models:
+      foo_preview_source: Foo Preview
diff --git a/spec/features/admin/page_editing_feature_spec.rb b/spec/features/admin/page_editing_feature_spec.rb
index 0a69657408..317d230600 100644
--- a/spec/features/admin/page_editing_feature_spec.rb
+++ b/spec/features/admin/page_editing_feature_spec.rb
@@ -19,6 +19,28 @@
         expect(page).to have_selector("iframe[src='#{admin_page_path(a_page)}']")
       end
     end
+
+    describe "single preview source", :js do
+      it "does not show as select" do
+        visit alchemy.edit_admin_page_path(a_page)
+        expect(page).to_not have_select("preview_url")
+      end
+    end
+
+    describe "multiple preview sources", :js do
+      class FooPreviewSource < Alchemy::Admin::PreviewUrl; end
+
+      around do |example|
+        Alchemy.preview_sources << FooPreviewSource
+        example.run
+        Alchemy.instance_variable_set(:@_preview_sources, nil)
+      end
+
+      it "show as select" do
+        visit alchemy.edit_admin_page_path(a_page)
+        expect(page).to have_select("preview_url", options: ["Internal", "Foo Preview"])
+      end
+    end
   end
 
   context "as editor" do

From 966ef509a6a22a709d3571998d418108bd7819a1 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Mon, 2 Nov 2020 21:53:49 +0100
Subject: [PATCH 3/4] Allow to send and receive postMessage from all origins

This allows us to send and receive focusElement and focusElementEditor messages from the preview window to the elements window and vice versa.
---
 .../javascripts/alchemy/alchemy.element_editors.js.coffee    | 5 +----
 app/assets/javascripts/alchemy/alchemy.preview.js.coffee     | 3 ---
 .../javascripts/alchemy/alchemy.preview_window.js.coffee     | 2 +-
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee b/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee
index 80ae7b18be..6451431e21 100644
--- a/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee
+++ b/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee
@@ -38,10 +38,7 @@ Alchemy.ElementEditors =
       @onSaveElement(e, data)
     # Listen to postMessage messages from the preview frame
     window.addEventListener 'message', (e) =>
-      if e.origin == window.location.origin
-        @onMessage(e.data)
-      else
-        console.warn 'Unsafe message origin!', e.origin
+      @onMessage(e.data)
       true
     return
 
diff --git a/app/assets/javascripts/alchemy/alchemy.preview.js.coffee b/app/assets/javascripts/alchemy/alchemy.preview.js.coffee
index 542b8e1d2a..26f59935bd 100644
--- a/app/assets/javascripts/alchemy/alchemy.preview.js.coffee
+++ b/app/assets/javascripts/alchemy/alchemy.preview.js.coffee
@@ -22,9 +22,6 @@ Alchemy.initAlchemyPreviewMode = ->
 
       init: ->
         window.addEventListener "message", (event) =>
-          if event.origin != window.location.origin
-            console.warn 'Unsafe message origin!', event.origin
-            return
           switch event.data.message
             when "Alchemy.blurElements" then @blurElements()
             when "Alchemy.focusElement" then @focusElement(event.data)
diff --git a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
index b94fd7ccc5..c850d737af 100644
--- a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
+++ b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
@@ -37,7 +37,7 @@ Alchemy.PreviewWindow =
 
   postMessage: (data) ->
     frameWindow = @currentWindow[0].contentWindow
-    frameWindow.postMessage(data, window.location.origin)
+    frameWindow.postMessage(data, "*")
 
   _showSpinner: ->
     @reload = $('#reload_preview_button')

From 03ebb9a12414959e408aa623ee042a21a84007c0 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Tue, 3 Nov 2020 13:21:18 +0100
Subject: [PATCH 4/4] Store current preview source in local storage

---
 .../alchemy/alchemy.preview_window.js.coffee  | 25 ++++++++++++++++---
 app/views/alchemy/admin/pages/edit.html.erb   |  2 +-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
index c850d737af..6ea32af5ef 100644
--- a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
+++ b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
@@ -4,8 +4,9 @@ Alchemy.PreviewWindow =
   MIN_WIDTH: 240
   HEIGHT: 75 # Top menu height
 
-  init: (url) ->
-    @previewUrl = url
+  init: (previewUrl) ->
+    @select = document.querySelector('#preview_url')
+    @previewUrl = @_getCurrentPreviewUrl() || previewUrl[1]
     $iframe = $("<iframe name=\"alchemy_preview_window\" src=\"#{@previewUrl}\" id=\"alchemy_preview_window\" frameborder=\"0\"/>")
     $reload = $('#reload_preview_button')
     @_showSpinner()
@@ -14,7 +15,9 @@ Alchemy.PreviewWindow =
     $('body').append($iframe)
     @currentWindow = $iframe
     @_bindReloadButton()
-    @_bindSelect()
+    if @select
+      @select.value = @previewUrl
+      @_bindSelect()
     return
 
   resize: (width) ->
@@ -56,10 +59,24 @@ Alchemy.PreviewWindow =
       e.preventDefault()
       @refresh()
 
+  _getCurrentPreviewUrl: ->
+    if @select
+      option = Array.from(@select.options).find (o) =>
+        o.text == window.localStorage.getItem("alchemyPreview")
+      if option
+        option.value
+      else
+        null
+    else
+      null
+
   _bindSelect: ->
-    $('#preview_url').change (e) =>
+    $(@select).change (e) =>
       @previewUrl = e.target.value
+      option = e.target.querySelector("option[value='#{@previewUrl}']")
+      window.localStorage.setItem("alchemyPreview", option.text)
       @refresh()
+      return
 
 Alchemy.reloadPreview = ->
   Alchemy.PreviewWindow.refresh()
diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb
index 7a318d24b4..5a55cdd564 100644
--- a/app/views/alchemy/admin/pages/edit.html.erb
+++ b/app/views/alchemy/admin/pages/edit.html.erb
@@ -198,7 +198,7 @@
       }
     });
 
-    Alchemy.PreviewWindow.init('<%= @preview_urls.first.last %>');
+    Alchemy.PreviewWindow.init(<%== @preview_urls.first %>);
 
     $('#preview_size').bind('open.selectBoxIt', function (e) {
       $('#top_menu').css('z-index', 5000);