Page form with front end style

app/assets/javascripts/lib/items/items.js.erb

@@ -200,6 +200,7 @@ function pageSetting(id, edit) {
             });
             $pageTagsGroup.show();
           }
+          getView(_selectData.module.main, id);
         };
       });
       _selectData.module.public ? $pagePublishedTrue.prop('checked', true) : $pagePublishedTrue.prop('checked', false);
@@ -209,8 +210,8 @@ function pageSetting(id, edit) {
           $('#pageslide .active-link.' + val[0]).find('input[type="radio"]').eq(val[2]).prop('checked', true);
         }
       });
-      changeSetting(id, _status);
       $('#pageslide').find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+      $pagePublishedTrue.prop('checked') ? $('.link-options').slideDown(300) : $('.link-options').slideUp(300);
     })
     .fail(function(jqXHR, textStatus) {
       console.log(jqXHR.status, textStatus)
@@ -230,7 +231,6 @@ function pageSetting(id, edit) {
     $.each(_pageData.module, function(index, val) {
       $pageModule.append('<option value="' + val.main[1] + '">' + val.main[0] + '</option>');
     });
-    changeSetting(id, _status);
   };
 };
 
@@ -265,23 +265,19 @@ function linkSetting(id, edit) {
   }
 }
 
-function changeSetting(id, edit) {
-  edit ? getView(id) : '';
-  $pagePublishedTrue.prop('checked') ? $('.link-options').slideDown(300) : $('.link-options').slideUp(300);
-}
-
 function getPageData() {
   $.getJSON("<%= Rails.application.routes.url_helpers.get_page_design_module_json_admin_items_path %>").done(function(data) {
     _pageData = data;
   });
 }
-function getView(id) {
+function getView(module_id, id) {
   var _data = {};
       _data.val = $('#pageslide #page_app_frontend_url option:selected').val();
       _data.id = id;
+      _data.module_id = module_id
       $.ajax({
-        url: "<%#= Rails.application.routes.url_helpers.get_display_style_admin_pages_path %>",
+        url: "<%= Rails.application.routes.url_helpers.get_display_style_admin_pages_path %>",
-        dataType: "html",
+        dataType: "script",
         data: _data,
         contentType: "application/html; charset=utf-8",
         cache: false,
@@ -370,6 +366,7 @@ $(function() {
         _select = _boolean ? _selectData.module : null;
         _subData = 'module';
         $subSelete = $('#pageslide #page_app_frontend_url');
+        $pageDivF2E.show();
       };
       $(this).children("option:selected").each(function () {
         var _val = $(this).val();
@@ -377,10 +374,10 @@ $(function() {
         if(_val) {
           $.each(_data, function(index, val) {
             if(_val == val.main[1]) {
-              $pageDivF2E.show();
+              getView(val.main[1]);
               $.each(val.sub, function(index, val) {
                 var _selected = _select && $(this)[1] == _select.sub ? 'selected="selected"' : '';
-                $subSelete.append('<option value="' + $(this)[1] + '" ' + _selected + '>' + $(this)[0] + '</option>');
+                $subSelete.append('<option value="' + $(this)[1] + '" ' + _selected.sub + '>' + $(this)[0] + '</option>');
               });
               $.each(val.count, function(index, val) {
                 $pageCount.append('<option value="' + val + '" ' + (_select && _select.main == _val && val == _selectData.module.count ? 'selected="selected"' : '') + '>' + val+ '</option>');
@@ -435,9 +432,9 @@ $(function() {
           $pageDivCount.hide();
         }
       });
-    } else {
+    }
-      getView(_ID);
+    else {
-      return false;
+      getView($pageModule.val());
     }
     event.preventDefault();
   });

app/assets/javascripts/structure.js

@@ -2,6 +2,4 @@
 //= require jquery.ui.sortable
 //= require lib/jquery.ui.touch-punch.min.js
 //= require lib/jquery.mjs.nestedSortable.js
-//= require lib/items/update_cates_and_tags
-//= require lib/items/page_widget_edit_interface
 //= require lib/items/items

app/assets/stylesheets/lib/pageslide.css

@@ -136,6 +136,71 @@
   color: #8A8A8A;
   float: left;
 }
+#pageslide .display-mode i {
+  font-size: 2em;
+}
+#pageslide .display-mode table {
+  margin-bottom: 10px;
+  text-align: left;
+}
+#pageslide .display-mode table td:last-child {
+  text-align: right;
+}
+#pageslide .display-mode table thead th {
+  color: #8A8A8A;
+  font-size: 12px;
+}
+#pageslide .typesetting {
+  margin: 0;
+  list-style: none;
+}
+#pageslide .typesetting li {
+  width: 72px;
+  height: 72px;
+  position: relative;
+  margin-bottom: 10px;
+  padding: 2px;
+}
+#pageslide .typesetting li.active {
+  border-radius: 5px;
+  background-color: #fff;
+}
+#pageslide .typesetting li.active:after {
+  font-family: FontAwesome;
+  content: "\f00c";
+  font-size: 12px;
+  text-indent: 15px;
+  line-height: 18px;
+  color: #08C;
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 0px;
+  height: 0px;
+  border-style: solid;
+  border-width: 0 30px 30px 0;
+  border-color: transparent #FFF transparent transparent;
+  z-index: 1;
+}
+#pageslide .typesetting input[type="radio"] {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+#pageslide .typesetting img {
+  width: 100%;
+  height: 100%;
+}
+#pageslide .typesetting .style_description {
+  position: absolute;
+  width: 240%;
+  top: 0;
+  left: 85px;
+}
 
 
 /* iFrame */

app/controllers/admin/items_controller.rb

@@ -38,7 +38,7 @@ class Admin::ItemsController < OrbitBackendController
       m = {}
       m["main"] = [module_app.title, module_app.id.to_s]
       m["sub"] = module_app.app_pages.map{|name, data| [t(data["i18n"]), name]} rescue []
-      m["sub"] << [I18n.t('default_widget.name'),'default_widget'] if module_app.has_default_widget?
+      m["sub"] << [I18n.t('default_widget.default_widget'),'default_widget'] if module_app.has_default_widget?
       m["category"] = module_app.categories.map{|category| [category.title, category.id.to_s] } rescue ''
       m["tags"] = module_app.tags.map{|tag| [tag.name, tag.id.to_s] } rescue ''
       m["count"] = module_app.get_registration.get_data_count.to_a

app/controllers/admin/pages_controller.rb

@@ -1,143 +1,51 @@
 class Admin::PagesController < Admin::ItemsController
-  helper Admin::PagePartsHelper
+  # helper Admin::PagePartsHelper
-  include Admin::FrontendWidgetInterface
+  # include Admin::FrontendWidgetInterface
-
-  def show
-    @item = Page.find(params[:id])
-    @no_orbit_bar = true
-    @edit = true
-    render :text => parse_page_content(@item), :layout => 'page_layout'
-  end
-
-  def new
-    @item = Page.new(params[:page])
-    @item.parent = Item.find(params[:parent_id]) rescue nil
-    get_variables_for_new
-    render layout: false
-  end
-
-  def edit
-    @item = Page.find(params[:id])
-    get_variables_for_edit
-    render layout: false
-  end
-
-  def reload_themes
-    design = Design.find(params[:design_id])
-    @themes = design.themes
-    respond_to do |format|
-      format.js  {}
-    end
-  end
-
-  def reload_frontend_pages
-    @item = Page.find(params[:id]) rescue Page.new 
-        @selected={
-      :design => nil,
-      :theme=> nil,
-      :module_app=>(ModuleApp.find(params[:module_app_id]) rescue nil),
-      :app_frontend_url=> @item.app_frontend_url || 'default_widget', #@module_apps.first
-      :category=>nil, #fetch by method: get_categories_and_tags
-      :tag=>nil, #fetch by method: get_categories_and_tags
-      :page_frontend_data_count=>nil,
-      :frontend_style => nil
-    }
-    @app_frontend_urls = @selected[:module_app] ? select_array_for_app_frontend_urls(@selected[:module_app].app_pages) : nil
-
-    get_categories_and_tags
-    get_frontend_data_count
-    get_frontend_styles
-
-    respond_to do |format|
-      format.js  {}
-    end
-  end
-  
-
-  def reload_front_end_setting
-    @item = Page.find(params[:id]) rescue Page.new 
-    
-    @categories = nil
-    @tags = nil
-    @page_frontend_data_counts = nil
-
-    @selected={
-      # :design => @item.design || @designs.first,
-      # :theme=> @item.theme,
-      :module_app=>ModuleApp.find(params[:module_app_id]),
-      :app_frontend_url=>  params[:frontend] ,
-      :category=>nil, #fetch by method: get_categories_and_tags
-      :tag=>nil, #fetch by method: get_categories_and_tags
-      :page_frontend_data_count=>nil,
-      :frontend_style => nil
-    }
-    @app_frontend_urls = @selected[:module_app].nil? ? nil :  @selected[:module_app].app_pages.each{|name,data| [I18n.t(data["i18n"]),name]}
-    @frontend_styles = @selected[:module_app].app_pages[params["frontend"]]["style"] rescue nil
-
-  end  
-
-
-  def reload_widget_field
-    @index = params[:field_seri].to_i
-    @item = Page.find(params[:id]) rescue Page.new 
-    @selected = {
-      :module_app=> (ModuleApp.find(params[:module_app_id]) || @item.module_app   ),
-      :default_widget_field=>params[:widget_field_value]
-    }
-    # @choosen_field = params[:widget_field_value]
-    # @module_app = @item.module_app
-    # @module_app = ModuleApp.find params[:module_app_id] if @module_app.nil?
-  end
 
   def create
-    clean_tags_and_category_params
     @item = Page.new(params[:page])
-	
   	if @item.module_app && @item.module_app.key == 'page_content'
   	  @item.page_contexts.build(:create_user_id => current_user.id, :update_user_id => current_user.id )
   	end
-	
     if @item.save
-      flash.now[:notice] = t('create.success.page')
+      render 'admin/items/reload_items'
-      respond_to do |format|
-        format.js { render 'admin/items/reload_items' }
-      end
     else
-      flash.now[:error] = t('create.error.page')
+      @error = error_messages_for(@item)
-      @designs = Design.all.entries
+      render 'admin/items/form_error'
-      @design =  Design.find(params[:page][:design]) ||  Design.first
-      @themes = @design.themes
-      @module_apps = ModuleApp.for_frontend_select
-      @selected={
-      :design => params[:page][:design],
-      :theme=> (Theme.find(params[:page][:theme_id]) rescue nil),
-      :module_app=> (ModuleApp.find(params[:page][:module_app_id]) rescue nil) ,#@module_apps.first
-      :app_frontend_url=> params[:page][:app_frontend_url], #@module_apps.first
-      :category=>params[:page][:category],
-      :tag=>params[:page][:tag],
-      :page_frontend_data_count=>params[:page][:page_frontend_data_count],
-      :frontend_style => params[:page][:frontend_style]
-     }
-      @app_frontend_urls = @item.module_app ? select_array_for_app_frontend_urls(@item.module_app.app_pages) : nil
-      get_categories_and_tags
-      get_frontend_data_count
-      render :action => "new"
     end
   end
 
   def update
-    clean_tags_and_category_params
     @item = Page.find(params[:id])
     if @item.module_app && @item.module_app.key == 'page_content' && @item.page_contexts.blank?
       @item.page_contexts.build(:create_user_id => current_user.id, :update_user_id => current_user.id )
     end
-    unless @item.update_attributes(params[:page])
+    if @item.update_attributes(params[:page])
+      render 'admin/items/reload_items'
+    else
       @error = error_messages_for(@item)
+      render 'admin/items/form_error'
     end
   end
 
   def get_display_style
-    
+    @item = Page.find(params[:id]) rescue nil
+    @module_app = ModuleApp.find(params[:module_id]) rescue nil
+    if @module_app
+      if params[:val].eql?("default_widget")
+        @checked_style = @item.frontend_style.present? ? @item.frontend_style : nil if @item && @item.app_frontend_url.eql?("default_widget")
+        @enabled_styles = @module_app.get_default_widget["enabled_styles"]
+        @widget_fields = @module_app.widget_fields.collect do |widget_field| 
+          label = I18n.t("#{@module_app.key}.default_widget.#{widget_field[0]}")
+          [label, widget_field[0], class: widget_field[2]] 
+        end
+        @class_options = LIST[:widget_field_type].collect{|widget_field| [widget_field.humanize, widget_field]}
+        @partial = 'default_front'
+      else
+        @frontend_styles = @module_app.app_pages[params[:val]]["style"] rescue nil
+        @partial = 'custom_front' if @frontend_styles.present?
+      end
+    end
   end
 
   def get_page_setting_json
@@ -160,56 +68,4 @@ class Admin::PagesController < Admin::ItemsController
     end
   end
 
-  protected
-
-  def get_frontend_styles
-    has_old_value =  @selected[:module_app].app_pages[@selected[:app_frontend_url]]
-    @frontend_styles = has_old_value ? has_old_value["style"] : (@selected[:module_app].app_pages.first[1]["style"] rescue nil)
-  end
-
-  def get_variables_for_new
-    @designs = Design.all.entries
-    @themes = Design.first.themes
-    @module_apps = ModuleApp.for_frontend_select
-    @app_frontend_urls = nil
-    @categories = nil
-    @tags = nil
-    @page_frontend_data_counts = nil
-    @frontend_styles = nil
-    @selected={
-      :design => @designs.first,
-      :theme=> @themes.first,
-      :module_app=>nil,#@module_apps.first
-      :app_frontend_url=> nil, #@module_apps.first
-      :category=>nil,
-      :tag=>nil,
-      :page_frontend_data_count=>nil,
-      :frontend_style => nil
-    }
-  end
-
-  def get_variables_for_edit
-    @designs = Design.all.entries
-    @themes = @item.design ? @item.design.themes : @designs.first.themes
-    @module_apps = ModuleApp.for_frontend_select
-    @categories = nil
-    @tags = nil
-    @page_frontend_data_counts = nil
-    @frontend_styles = nil
-
-    @selected={
-      :design => @item.design || @designs.first,
-      :theme=> @item.theme,
-      :module_app=>@item.module_app,#@module_apps.first
-      :app_frontend_url=> @item.app_frontend_url, #@module_apps.first
-      :category=>nil, #fetch by method: get_categories_and_tags
-      :tag=>nil, #fetch by method: get_categories_and_tags
-      :page_frontend_data_count=>nil,
-      :frontend_style => nil
-    }
-    @app_frontend_urls = @item.module_app ? select_array_for_app_frontend_urls(@item.module_app.app_pages) : nil
-    get_categories_and_tags
-    get_frontend_data_count
-  end
-
 end

app/models/page.rb

@@ -38,6 +38,10 @@ class Page < Item
     self.save
   end
 
+  def frontend_with_link
+    frontend_sat_to_link.map{|d| (d && d.eql?("true")) ? true : false}
+  end
+
   def default_widget_field_sat_to_link?(i)
     case frontend_sat_to_link[i]
       when 'true'

app/views/admin/items/_form_error.js.erb

@@ -0,0 +1 @@
+$("#pageslide #page_error").html("<%= j @error %>");

app/views/admin/items/update.js.erb

@@ -1,6 +0,0 @@
-<% if @error %>
-	$("#pageslide #page_error").html("<%= j @error %>");
-<% else %>
-	$("#<%= @item.id.to_s %>").html("<%= j render 'admin/items/node_and_children', node: @item %>");
-	reloadStructure();
-<% end %>

app/views/admin/pages/_custom_front.html.erb

@@ -0,0 +1,2 @@
+<label><%= t("default_widget.select_widget_style") %></label>
+<%= select 'page', 'frontend_style', @frontend_styles, {:selected => (@item && @item[:frontend_style])}, class: "input-xlarge" %>

app/views/admin/pages/_default_front.html.erb

@@ -0,0 +1,98 @@
+<label><%= t("default_widget.select_widget_style") %></label>
+<ul class="typesetting">
+  <% if @enabled_styles.include?("typeA") %>
+    <li class="active">
+      <input type="radio" class="d-theme" name="page[frontend_style]" value="typeA" checked="checked">
+      <%= radio_button_tag "page[frontend_style]", "typeA", @checked_style ? @checked_style.eql?("typeA") : true, class: "d-theme" %>
+      <%= image_tag 'module/default_widgets/style01.png'%>
+      <span class="style_description"><%= t("default_widget.caption.typeA") %></span>  
+    </li>
+  <% end %>
+  <% if @enabled_styles.include?("typeB_style2") %>
+    <li>
+      <%= radio_button_tag "page[frontend_style]", "typeB_style2", @checked_style ? @checked_style.eql?("typeB_style2") : false, class: "d-theme" %>
+      <%= image_tag 'module/default_widgets/style02.png'%>
+      <span class="style_description"><%= t("default_widget.caption.typeB_style2") %></span>
+    </li>
+  <% end %>
+  <% if @enabled_styles.include?("typeB_style3") %>
+    <li>
+      <%= radio_button_tag "page[frontend_style]", "typeB_style3", @checked_style ? @checked_style.eql?("typeB_style3") : false, class: "d-theme" %>
+      <%= image_tag 'module/default_widgets/style03.png'%>
+      <span class="style_description"><%= t("default_widget.caption.typeB_style3") %></span>
+    </li>
+  <% end %>
+  <% if @enabled_styles.include?("typeB_style4") %>
+    <li>
+      <%= radio_button_tag "page[frontend_style]", "typeB_style4", @checked_style ? @checked_style.eql?("typeB_style4") : false, class: "d-theme" %>
+      <%= image_tag 'module/default_widgets/style04.png'%>
+      <span class="style_description"><%= t("default_widget.caption.typeB_style4") %></span>
+    </li>
+  <% end %>
+  <% if @enabled_styles.include?("typeC") %>
+    <li>
+      <%= radio_button_tag "page[frontend_style]", "typeC", @checked_style ? @checked_style.eql?("typeC") : false, class: "d-theme" %>
+      <%= image_tag 'module/default_widgets/style05.png'%>
+      <span class="style_description"><%= t("default_widget.caption.typeC") %></span>
+    </li>
+  <% end %>
+</ul>
+<label><%= t("default_widget.fields_") %></label>
+<table>
+  <thead>
+    <tr>
+      <th><%= t "default_widget.fields_order" %></th>
+      <th></th>
+      <th><%= t "default_widget.fields_style" %></th>
+      <th class="span1"></th>
+    </tr>
+  </thead>
+  <tbody class="form-inline">
+    <% @widget_fields.count.times do |i| %>
+      <tr>
+        <td>
+          <%= select_tag "page[frontend_field][][field_name]", options_for_select(@widget_fields, (@item.frontend_field_name[i] if @item)), include_blank: true, class: "input-small widget_field" %>
+        </td>
+        <td><i class="icons-arrow-right-6"></i></td>
+        <td>
+          <%= select_tag "page[frontend_field][][class]", options_for_select(@class_options, (@item.frontend_class[i] if @item)), include_blank: true, class: "input-small" %>
+        </td>
+        <td>
+          <label class="checkbox">
+            <span class="checkbox_link hide"><%= check_box_tag 'page[frontend_field][][sat_to_link]', true, @item && @item.frontend_with_link[i] || false %> <%= t(:link) %></span>
+          </label>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+
+<script>
+  $(document).ready(function() {
+    $('#pageslide').on(clickEvent, '.typesetting input[type="radio"]', function(event) {
+      $(this).prop('checked') ? $(this).closest('li').addClass('active').siblings('li').removeClass('active') : '';
+    });
+    $('#pageslide select.widget_field').each(function() {
+      if($(this).find(":selected").prop('class') == 'link') {
+        $(this).closest('tr').find('.checkbox_link').show();
+      }
+    });
+    $('#pageslide').on('change', '.widget_field', function() {
+      if($(this).find(":selected").prop('class') == 'link') {
+        $(this).closest('tr').find('.checkbox_link')
+                              .show()
+                              .end()
+                              .find('.checkbox_link input[type="checkbox"]')
+                              .prop('checked', false);
+      }
+      else {
+        $(this).closest('tr').find('.checkbox_link')
+                              .hide()
+                              .end()
+                              .find('.checkbox_link input[type="checkbox"]')
+                              .prop('checked', false);
+      }
+    });
+  });
+</script>

app/views/admin/pages/get_display_style.js.erb

@@ -0,0 +1,5 @@
+<% if @partial %>
+	$("#pageslide .display-mode").html("<%= j render @partial %>")
+<% else %>
+	$("#pageslide .display-mode").html('')
+<% end %>