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.)

app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee

@@ -5,14 +5,17 @@ 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 =>
       @_hideSpinner()
     $('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()

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
 

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);

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'

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

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:)

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)

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

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