alchemy_cms 5.1.4 → 6.0.0.b1

data/app/views/alchemy/admin/attachments/assign.js.erb

@@ -0,0 +1,11 @@
+(function () {
+  var $form_field = $("#<%= @form_field_id -%>")
+  $("#assignable_<%= @assignable_id %> a").attr("href", "#").off("click")
+  $form_field.val("<%= @assignable_id %>")
+  $form_field.parent().find("> .file_name").text("<%= @attachment.name %>")
+  $form_field.parent().find("> .file_icon").html("<%= j render_icon(@attachment.icon_css_class) %>")
+  $form_field.parent().find("> .remove_file_link").removeClass("hidden")
+  Alchemy.closeCurrentDialog(function() {
+    Alchemy.setElementDirty($form_field.closest(".element-editor"))
+  })
+})()

data/app/views/alchemy/admin/crop.html.erb

@@ -0,0 +1,36 @@
+<div id="jscropper">
+<% if @no_image_notice %>
+  <%= render_message :warn do %>
+    <%= @no_image_notice %>
+  <% end %>
+<% else %>
+  <%= render_message do %>
+    <%= simple_format Alchemy.t(:explain_cropping) %>
+  <% end %>
+  <div class="thumbnail_background">
+    <%= image_tag @picture.url(size: '800x600', flatten: true), id: 'imageToCrop' %>
+  </div>
+  <form>
+    <%= button_tag Alchemy.t(:apply), type: 'submit' %>
+    <%= button_tag Alchemy.t('Reset Imagemask'), class: 'reset_mask', type: 'reset' %>
+  </form>
+</div>
+<% end %>
+<% if @settings %>
+<script type="text/javascript">
+  Alchemy.ImageLoader('#jscropper .thumbnail_background');
+  $('#imageToCrop').load(function() {
+    new Alchemy.ImageCropper(
+      <%= @settings[:min_size].to_json %>,
+      <%= @settings[:default_box].to_json %>,
+      <%= @settings[:ratio] %>,
+      <%= @settings[:image_size].to_json %>,
+      [
+        "<%= params[:crop_from_form_field_id] %>",
+        "<%= params[:crop_size_form_field_id] %>",
+      ],
+      <%= @element.id %>
+    );
+  });
+</script>
+<% end %>

data/app/views/alchemy/admin/elements/_element.html.erb

@@ -4,11 +4,11 @@
   class: element.css_classes do %>
 
   <% unless element.fixed? %>
-    <%= render 'alchemy/admin/elements/element_header', element: element %>
+    <%= render 'alchemy/admin/elements/header', element: element %>
   <% end %>
 
   <% if element.expanded? || element.fixed? %>
-    <%= render 'alchemy/admin/elements/element_toolbar', element: element %>
+    <%= render 'alchemy/admin/elements/toolbar', element: element %>
 
     <% element.definition[:message].tap do |message| %>
       <%= render_message(:info, sanitize(message)) if message %>
@@ -23,11 +23,15 @@
         html: {id: "element_#{element.id}_form".html_safe, class: 'element-content'} do |f| %>
 
         <div id="element_<%= element.id %>_errors" class="element_errors"></div>
-
-        <div id="element_<%= element.id %>_content" class="element-content-editors">
-          <%= render element.contents %>
-        </div>
-
+        <% if element.has_ingredients_defined? %>
+          <div class="element-ingredient-editors">
+            <%= render element.ingredients, element_form: f %>
+          </div>
+        <% else %>
+          <div id="element_<%= element.id %>_content" class="element-content-editors">
+            <%= render element.contents %>
+          </div>
+        <% end %>
         <% if element.taggable? %>
           <div class="autocomplete_tag_list">
             <%= f.label :tag_list %>
@@ -36,7 +40,7 @@
         <% end %>
       <% end %>
 
-      <%= render 'alchemy/admin/elements/element_footer', element: element %>
+      <%= render 'alchemy/admin/elements/footer', element: element %>
     <% end %>
   <% end %>
 
@@ -57,7 +61,7 @@
           <%= form_for [:admin, Alchemy::Element.new(name: nestable_element)],
             remote: true, html: { class: 'add-nested-element-form', id: nil } do |f| %>
             <%= f.hidden_field :name %>
-            <%= f.hidden_field :page_id, value: element.page_id %>
+            <%= f.hidden_field :page_version_id, value: element.page_version_id %>
             <%= f.hidden_field :parent_element_id, value: element.id %>
             <button class="button add-nestable-element-button" data-alchemy-button>
               <%= Alchemy.t(:add_nested_element) % { name: Alchemy.t(nestable_element, scope: 'element_names') } %>
@@ -67,7 +71,7 @@
           <%= link_to_dialog Alchemy.t("New Element"),
             alchemy.new_admin_element_path(
               parent_element_id: element.id,
-              page_id: element.page.id
+              page_version_id: element.page_version_id
             ), {
               size: "320x125",
               title: Alchemy.t("New Element")

data/app/views/alchemy/admin/elements/{_new_element_form.html.erb → _form.html.erb}

@@ -4,7 +4,7 @@
   <% end %>
 <%- else -%>
   <%= alchemy_form_for [:admin, @element] do |form| %>
-    <%= form.hidden_field :page_id %>
+    <%= form.hidden_field :page_version_id %>
     <%= form.input :name,
       label: Alchemy.t(:element_of_type),
       collection: elements_for_select(@elements),

data/app/views/alchemy/admin/elements/{_element_header.html.erb → _header.html.erb}

@@ -2,6 +2,8 @@
   <span class="element-handle">
     <% if element.definition.blank? %>
       <%= hint_with_tooltip Alchemy.t(:element_definition_missing) %>
+    <% elsif element.deprecated? %>
+      <%= hint_with_tooltip element.deprecation_notice %>
     <% else %>
       <% if element.public? %>
         <%= render_icon('window-maximize', style: 'regular', class: 'element') %>
@@ -16,7 +18,7 @@
       <%= sanitize(element.preview_text.presence || '&nbsp;') %>
     </span>
   </span>
-  <%= render_hint_for(element) unless element.trashed? %>
+  <%= render_hint_for(element) %>
   <%= link_to '#', {
     'data-element-toggle' => element.id,
     title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content),

data/app/views/alchemy/admin/elements/{_element_toolbar.html.erb → _toolbar.html.erb}

@@ -22,14 +22,13 @@
       <label><%= Alchemy.t(:cut_element) %></label>
     </div>
     <div class="button_with_label">
-      <%= link_to(
+      <%= link_to_confirm_dialog(
         render_icon('trash-alt'),
-        alchemy.trash_admin_element_path(element),
-        method: :delete,
-        class: "icon_button",
-        remote: true
+        Alchemy.t(:confirm_to_delete_element),
+        alchemy.admin_element_path(element),
+        class: "icon_button"
       ) -%>
-      <label><%= Alchemy.t("trash element") %></label>
+      <label><%= Alchemy.t("Delete element") %></label>
     </div>
     <div class="button_with_label publish-element-button">
       <%= link_to(

data/app/views/alchemy/admin/elements/{trash.js.erb → destroy.js.erb}

@@ -1,9 +1,7 @@
 $('#element_<%= @element.id %>').hide(200, function() {
   $(this).remove();
-  Alchemy.growl('<%= j Alchemy.t("Element trashed") %>');
+  Alchemy.growl('<%= j @notice %>');
   $('#element_area .sortable-elements').sortable('refresh');
-  Alchemy.TrashWindow.refresh();
-  $('#element_trash_button .icon').addClass('full');
   Alchemy.PreviewWindow.refresh();
   <% @element.richtext_contents_ids.each do |id| %>
   tinymce.get('tinymce_<%= id %>').remove();

data/app/views/alchemy/admin/elements/new.html.erb

@@ -1,5 +1,5 @@
 <%- if @clipboard_items.blank? -%>
-  <%= render 'new_element_form' %>
+  <%= render 'form' %>
 <%- else -%>
 <div id="overlay_tabs">
   <ul>
@@ -7,11 +7,11 @@
     <li><a href="#paste_element_tab"><%= Alchemy.t('Paste from clipboard') %></a></li>
   </ul>
   <div id="create_element_tab">
-    <%= render 'new_element_form' %>
+    <%= render 'form' %>
   </div>
   <div id="paste_element_tab">
     <%= alchemy_form_for([:admin, @element]) do |f| %>
-      <%= f.hidden_field :page_id %>
+      <%= f.hidden_field :page_version_id %>
       <%= f.hidden_field :parent_element_id, value: @parent_element.try(:id) %>
       <div class="input select">
         <label for="paste_from_clipboard" class="control-label"><%= Alchemy.t("Element") %></label>

data/app/views/alchemy/admin/elements/order.js.erb

@@ -6,23 +6,6 @@
     '<%= sanitize(@parent_element.preview_text.presence || '&nbsp;') %>'
   );
 <% end %>
-
-<% if @trashed_element_ids.any? %>
-
-  $('#element_area .ajax-folder').show();
-  <% element_ids = @trashed_element_ids.collect do |id|
-                     "#element_area [data-element-id=\"#{id}\"]"
-                   end.join(", ").html_safe %>
-  <% @trashed_element_ids.each do |id| %>
-  $('<%= element_ids %>').each(function() { this.id = 'element_' + <%= id %> });
-  <% end %>
-  Alchemy.growl('<%= Alchemy.t(:successfully_restored_element) -%>');
-
-<% else %>
-
   Alchemy.growl('<%= Alchemy.t(:successfully_saved_element_position) -%>');
-
-<% end %>
-
   Alchemy.PreviewWindow.refresh();
 })();

data/app/views/alchemy/admin/elements/update.js.erb

@@ -1,7 +1,7 @@
 (function() {
   var $el = $('#element_<%= @element.id %>');
   var $errors = $('#element_<%= @element.id %>_errors');
-  $('> .element-content .content_editor', $el).removeClass('validation_failed');
+  $('> .element-content .content_editor, > .element-content .ingredient_editor', $el).removeClass('validation_failed');
 
 <%- if @element_validated -%>
 
@@ -15,9 +15,10 @@
 <%- else -%>
 
   Alchemy.growl('<%= j @notice %>', 'warn');
-  $errors.html('<%= j @error_message %><ul><li><%== j @element.essence_error_messages.join("</li><li>") %></li></ul>');
+  $errors.html('<%= j @error_message %><ul><li><%== j @error_messages.join("</li><li>") %></li></ul>');
   $errors.show();
   $('<%= @element.contents_with_errors.map { |content| "#" + content.dom_id }.join(", ") %>').addClass('validation_failed');
+  $('<%== @element.ingredients_with_errors.map { |ingredient| "[data-ingredient-id=\"#{ingredient.id}\"]" }.join(", ") %>').addClass('validation_failed');
   Alchemy.Buttons.enable($el);
 
 <%- end -%>

data/app/views/alchemy/admin/essence_audios/edit.html.erb

@@ -0,0 +1,7 @@
+<%= alchemy_form_for [:admin, @essence_audio] do |f| %>
+  <%= f.input :autoplay %>
+  <%= f.input :controls %>
+  <%= f.input :loop %>
+  <%= f.input :muted %>
+  <%= f.submit Alchemy.t(:save) %>
+<% end %>

data/app/views/alchemy/admin/essence_pictures/update.js.erb

@@ -1,5 +1,4 @@
 (function($) {
-  Alchemy.ImageCropper.destroy();
   Alchemy.closeCurrentDialog();
   Alchemy.setElementDirty('#element_<%= @content.element.id %>');
 <% if @content.ingredient %>

data/app/views/alchemy/admin/essence_videos/edit.html.erb

@@ -0,0 +1,11 @@
+<%= alchemy_form_for [:admin, @essence_video] do |f| %>
+  <%= f.input :width %>
+  <%= f.input :height %>
+  <%= f.input :autoplay %>
+  <%= f.input :controls %>
+  <%= f.input :loop %>
+  <%= f.input :muted %>
+  <%= f.input :preload, collection: %w(auto none metadata),
+    include_blank: false, input_html: {class: 'alchemy_selectbox'} %>
+  <%= f.submit Alchemy.t(:save) %>
+<% end %>

data/app/views/alchemy/admin/ingredients/_audio_fields.html.erb

@@ -0,0 +1,4 @@
+<%= f.input :autoplay, as: :boolean %>
+<%= f.input :controls, as: :boolean %>
+<%= f.input :loop, as: :boolean %>
+<%= f.input :muted, as: :boolean %>

data/app/views/alchemy/admin/ingredients/_file_fields.html.erb

@@ -0,0 +1,18 @@
+<% css_classes = ingredient.settings[:css_classes] %>
+
+<%= f.input :link_text %>
+<%= f.input :title %>
+<%- if css_classes.present? -%>
+  <%= f.input :css_class,
+    collection: css_classes,
+    include_blank: Alchemy.t('None'),
+    input_html: {class: 'alchemy_selectbox'} %>
+<%- else -%>
+  <%= f.input :css_class,
+    label: Alchemy.t(:position_in_text),
+    collection: [
+      [Alchemy.t(:above), "no_float"],
+      [Alchemy.t(:left), "left"],
+      [Alchemy.t(:right), "right"]
+    ], include_blank: Alchemy.t('Layout default'), input_html: {class: 'alchemy_selectbox'} %>
+<%- end -%>

data/app/views/alchemy/admin/ingredients/_picture_fields.html.erb

@@ -0,0 +1,25 @@
+<%= f.input :caption, as: ingredient.settings[:caption_as_textarea] ? 'text' : 'string' %>
+<%= f.input :title %>
+<%= f.input :alt_tag %>
+<%- if ingredient.settings[:sizes].present? && ingredient.settings[:srcset].blank? -%>
+  <%= f.input :render_size,
+    collection: [
+      [Alchemy.t('Layout default'), ""]
+    ] + ingredient.settings[:sizes].to_a,
+    include_blank: false,
+    input_html: {class: 'alchemy_selectbox'} %>
+<%- end -%>
+<%- if ingredient.settings[:css_classes].present? -%>
+  <%= f.input :css_class,
+    collection: ingredient.settings[:css_classes],
+    include_blank: Alchemy.t('None'),
+    input_html: {class: 'alchemy_selectbox'} %>
+<%- else -%>
+  <%= f.input :css_class,
+    label: Alchemy.t(:position_in_text),
+    collection: [
+      [Alchemy.t(:above), "no_float"],
+      [Alchemy.t(:left), "left"],
+      [Alchemy.t(:right), "right"]
+    ], include_blank: Alchemy.t("Layout default"), input_html: {class: 'alchemy_selectbox'} %>
+<%- end -%>

data/app/views/alchemy/admin/ingredients/_video_fields.html.erb

@@ -0,0 +1,8 @@
+<%= f.input :width %>
+<%= f.input :height %>
+<%= f.input :autoplay, as: :boolean %>
+<%= f.input :controls, as: :boolean %>
+<%= f.input :loop, as: :boolean %>
+<%= f.input :muted, as: :boolean %>
+<%= f.input :preload, collection: %w(auto none metadata),
+  include_blank: false, input_html: {class: 'alchemy_selectbox'} %>

data/app/views/alchemy/admin/ingredients/edit.html.erb

@@ -0,0 +1,4 @@
+<%= alchemy_form_for @ingredient, as: :ingredient, url: alchemy.admin_ingredient_path(@ingredient) do |f| %>
+  <%= render "alchemy/admin/ingredients/#{@ingredient.partial_name}_fields", ingredient: @ingredient, f: f %>
+  <%= f.submit Alchemy.t(:save) %>
+<% end %>

data/app/views/alchemy/admin/layoutpages/edit.html.erb

@@ -1,9 +1,4 @@
 <%= alchemy_form_for [:admin, @page], class: 'edit_page' do |f| %>
-  <%= f.input :page_layout,
-    collection: @page_layouts,
-    label: page_layout_label(@page),
-    include_blank: Alchemy.t('Please choose'),
-    input_html: {class: 'alchemy_selectbox'} %>
   <%= f.input :name, autofocus: true %>
   <div class="input string">
     <%= f.label :tag_list %>

data/app/views/alchemy/admin/nodes/_node.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag :li, class: 'menu-item', data: { id: node.id, parent_id: node.parent_id, folded: node.folded? } do %>
+<%= content_tag :li, class: 'menu-item', data: { id: node.id, parent_id: node.parent_id, folded: node.folded?, type: "node" } do %>
   <%= content_tag :div, class: [
     'sitemap_node',
     node.external? ? 'external' : 'internal',
@@ -67,7 +67,7 @@
       <% end %>
     </div>
   <% end %>
-  <%= content_tag :ul, class: "children #{' folded' if node.folded?}", data: { node_id: node.id } do %>
+  <%= content_tag :ul, class: "children #{' folded' if node.folded?}", data: { record_id: node.id } do %>
     <%= render partial: 'node', collection: node.children.includes(:page, :children) %>
   <% end %>
 <% end %>

data/app/views/alchemy/admin/pages/_anchor_link.html.erb

@@ -17,6 +17,6 @@
     <%= text_field_tag "anchor_link_title", '', class: 'link_title' %>
   </div>
   <div class="submit">
-    <%= link_to Alchemy.t(:apply), '', class: 'create-link button', 'data-link-type' => 'anchor' %>
+    <%= button_tag Alchemy.t(:apply), class: 'create-link button', data: { link_type: 'anchor' } %>
   </div>
 <% end %>

data/app/views/alchemy/admin/pages/_external_link.html.erb

@@ -26,6 +26,6 @@
       class: 'alchemy_selectbox link_target' %>
   </div>
   <div class="submit">
-    <%= link_to Alchemy.t(:apply), '#', class: 'create-link button', 'data-link-type' => 'external' %>
+    <%= button_tag Alchemy.t(:apply), class: 'create-link button', data: { link_type: 'external' } %>
   </div>
 <% end %>

data/app/views/alchemy/admin/pages/_file_link.html.erb

@@ -26,6 +26,6 @@
       class: 'alchemy_selectbox link_target' %>
   </div>
   <div class="submit">
-    <%= link_to Alchemy.t(:apply), '#', class: 'create-link button', 'data-link-type' => 'file' %>
+    <%= button_tag Alchemy.t(:apply), class: 'create-link button', data: { link_type: 'file' } %>
   </div>
 <% end %>

data/app/views/alchemy/admin/pages/_form.html.erb

@@ -1,10 +1,4 @@
 <%= alchemy_form_for [:admin, @page], class: 'edit_page' do |f| %>
-  <%= f.input :page_layout,
-    collection: @page_layouts,
-    label: page_layout_label(@page),
-    include_blank: Alchemy.t('Please choose'),
-    input_html: {class: 'alchemy_selectbox'} %>
-
   <div class="input check_boxes">
     <label class="control-label"><%= Alchemy.t(:page_status) %></label>
     <div class="control_group">

data/app/views/alchemy/admin/pages/_internal_link.html.erb

@@ -30,6 +30,6 @@
       class: 'alchemy_selectbox link_target' %>
   </div>
   <div class="submit">
-    <%= link_to Alchemy.t(:apply), '', class: 'create-link button', 'data-link-type' => 'internal' %>
+    <%= button_tag Alchemy.t(:apply), class: 'create-link button', data: { link_type: 'internal' } %>
   </div>
 <% end %>

data/app/views/alchemy/admin/pages/_tinymce_custom_config.html.erb

@@ -1,7 +1,10 @@
 <script>
   // Populate custom tinymce configurations
-  <% Alchemy::Tinymce.custom_config_contents(@page).each do |content| %>
-  Alchemy.Tinymce.customConfigs["<%= content['element'] %>_<%= content['name'] %>"] = {
+  <% (
+    Alchemy::Tinymce.custom_config_contents(@page) +
+    Alchemy::Tinymce.custom_config_ingredients(@page)
+  ).each do |content| %>
+  Alchemy.Tinymce.customConfigs["<%= content['element'] %>_<%= content['name'] || content['role'] %>"] = {
     <% content.fetch('settings', {}).fetch('tinymce', {}).each do |k, v| %>
     <%= k %>: <%== v.to_json %>,
     <% end %>

data/app/views/alchemy/admin/pages/edit.html.erb

@@ -56,23 +56,44 @@
     <% end %>
     <label><%= Alchemy.t(:page_properties) %></label>
   </div>
-  <% if can?(:publish, @page) %>
-    <div class="button_with_label">
-      <%= form_tag alchemy.publish_admin_page_path(@page), id: 'publish_page_form' do %>
-        <%= button_tag class: 'icon_button', title: Alchemy.t(:explain_publishing) do %>
-          <%= render_icon('cloud-upload-alt') %>
-        <% end %>
-        <label><%= Alchemy.t("Publish page") %></label>
+  <div class="button_with_label">
+    <%= form_tag alchemy.publish_admin_page_path(@page), id: 'publish_page_form' do %>
+      <%= button_tag class: 'icon_button', disabled: cannot?(:publish, @page) do %>
+        <%= render_icon('cloud-upload-alt') %>
       <% end %>
-    </div>
-  <% end %>
+      <label>
+        <% if @page.language.public? %>
+          <%= Alchemy.t(:explain_publishing) %>
+        <% elsif @page.editable_by?(current_alchemy_user) %>
+          <%= Alchemy.t(:publish_page_language_not_public) %>
+        <% else %>
+          <%= Alchemy.t(:publish_page_not_allowed) %>
+        <% end %>
+      </label>
+    <% end %>
+  </div>
   <% unless @page.layoutpage? %>
     <div class="button_with_label">
-      <%= form_tag alchemy.visit_admin_page_path(@page), id: 'visit_page_form' do %>
-        <%= button_tag class: 'icon_button', disabled: !@page.public? do %>
+      <% if @page.public? %>
+        <%= link_to show_page_url(
+              urlname: @page.urlname,
+              locale: prefix_locale? ? @page.language_code : nil,
+              host: @page.site.host == "*" ? request.host : @page.site.host,
+            ),
+            title: Alchemy.t("Visit page"),
+            data: { turbolinks: false },
+            target: "_blank",
+            class: 'icon_button' do %>
           <%= render_icon('external-link-alt') %>
         <% end %>
         <label><%= Alchemy.t("Visit page") %></label>
+      <% else %>
+        <%= content_tag "a",
+            title: Alchemy.t(:cannot_visit_unpublic_page),
+            class: 'disabled icon_button' do %>
+          <%= render_icon('external-link-alt') %>
+        <% end %>
+        <label><%= Alchemy.t(:cannot_visit_unpublic_page) %></label>
       <% end %>
     </div>
   <% end %>
@@ -128,14 +149,14 @@
 <script type="text/javascript" charset="utf-8">
 
   $(function() {
-    $('#unlock_page_form, #visit_page_form, #publish_page_form').on('submit', function(event) {
+    $('#unlock_page_form, #publish_page_form').on('submit', function(event) {
       var not_dirty = Alchemy.checkPageDirtyness(this);
       if (!not_dirty) Alchemy.pleaseWaitOverlay(false);
       return not_dirty;
     });
     Alchemy.Sitemap.watchPagePublicationState();
     Alchemy.PageLeaveObserver();
-    Alchemy.ElementsWindow.init('<%= alchemy.admin_elements_path(page_id: @page.id) %>', {
+    Alchemy.ElementsWindow.init('<%= alchemy.admin_elements_path(page_version_id: @page_version.id) %>', {
       texts: {
         title: '<%= Alchemy.t("Elements") %>',
         dirtyTitle: '<%= Alchemy.t("Warning!") %>',
@@ -152,7 +173,7 @@
           hotkey: 'alt+n',
           iconClass: 'plus',
           onClick: function() {
-            Alchemy.openDialog('<%= alchemy.new_admin_element_path(page_id: @page.id) %>', {
+            Alchemy.openDialog('<%= alchemy.new_admin_element_path(page_version_id: @page_version.id) %>', {
               title: '<%= Alchemy.t("New Element") %>',
               size: '320x125'
             });
@@ -169,15 +190,6 @@
               size: '400x305'
             });
           }
-        },
-        {
-          title: '<%= Alchemy.t("Show trash") %>',
-          label: '<%= Alchemy.t("Show trash") %>',
-          iconClass: 'trash-alt<%= trash_empty?("elements") ? "" : " full" %>',
-          buttonId: 'element_trash_button',
-          onClick: function() {
-            Alchemy.TrashWindow.open(<%= @page.id %>, '<%= Alchemy.t("Trash") %>');
-          }
         }
       ]
     }, function() {
@@ -185,7 +197,7 @@
       Alchemy.SortableElements(<%= @page.id %>, '<%= form_authenticity_token %>');
       Alchemy.ElementEditors.init();
       Alchemy.SelectBox('.element-editor');
-      Alchemy.Tinymce.init(<%= @page.richtext_contents_ids.to_json %>);
+      Alchemy.Tinymce.init(<%= (@page.richtext_contents_ids + @page.richtext_ingredients_ids).to_json %>);
       $('#fixed-elements').tabs().tabs('paging', {
         follow: true,
         followOnSelect: true,