PagePart widgets except "system widget"

2013-10-28 11:37:56 +08:00 · 2013-10-28 11:37:56 +08:00 · 218cb03641
parent 42d0afe65c
commit 218cb03641
29 changed files with 642 additions and 111 deletions
--- a/app/assets/images/module/default_widgets/style01.png
+++ b/app/assets/images/module/default_widgets/style01.png
--- a/app/assets/images/module/default_widgets/style02.png
+++ b/app/assets/images/module/default_widgets/style02.png
--- a/app/assets/images/module/default_widgets/style03.png
+++ b/app/assets/images/module/default_widgets/style03.png
--- a/app/assets/images/module/default_widgets/style04.png
+++ b/app/assets/images/module/default_widgets/style04.png
--- a/app/assets/images/module/default_widgets/style05.png
+++ b/app/assets/images/module/default_widgets/style05.png
--- a/app/assets/javascripts/lib/items/items.js.erb
+++ b/app/assets/javascripts/lib/items/items.js.erb
@ -189,7 +189,7 @@ function pageSetting(id, edit) {
            });
            $pageCategoryGroup.show();
          }
-          if(val.category.length > 0) {
+          if(val.tag.length > 0) {
            $.each(val.tags, function(index, val) {
              var _arr = $.inArray($(this)[1], _selectData.module.tags[1]);
              $pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
@ -385,6 +385,7 @@ $(function() {
              $pageDivCount.show();

              if(event.target.id == 'page_module_app_id') {
+                $pageCategory.empty();
                if(val.category.length > 0) {
                  $.each(val.category, function(index, val) {
                    if(val !== 0) {
@ -398,9 +399,9 @@ $(function() {
                  });
                  $pageCategoryGroup.show();
                } else {
-                  $pageCategory.empty();
                  $pageCategoryGroup.hide();
                }
+                $pageTags.empty();
                if(val.tags.length > 0) {
                  $.each(val.tags, function(index, val) {
                    if(val !== 0) {
@ -414,7 +415,6 @@ $(function() {
                  });
                  $pageTagsGroup.show();
                } else {
-                  $pageTags.empty();
                  $pageTagsGroup.hide();
                }
              }
--- a/app/assets/javascripts/lib/items/page_part.js.erb
+++ b/app/assets/javascripts/lib/items/page_part.js.erb
@ -0,0 +1,141 @@
+function getPageData() {
+  $.getJSON("<%= Rails.application.routes.url_helpers.get_page_module_json_admin_page_parts_path %>").done(function(data) {
+    _pageData = data;
+  });
+}
+
+function getView(module_id, id) {
+  var _data = {};
+      _data.val = $('#module_widget #page_part_widget_path option:selected').val();
+      _data.id = id;
+      _data.module_id = module_id
+  $.ajax({
+    url: "<%= Rails.application.routes.url_helpers.get_display_style_admin_page_parts_path %>",
+    dataType: "script",
+    data: _data,
+    contentType: "application/html; charset=utf-8",
+    cache: false,
+  });
+}
+
+$(function() {
+  $pageModule = $('#module_widget #page_part_module_app'),
+  $pageF2E = $('#module_widget #page_part_widget_path'),
+  $pageCategory = $('#module_widget #page-category'),
+  $pageCategoryGroup = $('#module_widget #page-category-groups'),
+  $pageTags = $('#module_widget #page-tags'),
+  $pageTagsGroup = $('#module_widget #page-tags-groups'),
+  $pageCount = $('#module_widget #page_count'),
+  _boolean = null,
+  _ID = null,
+  _type = null,
+  _status = null,
+  _pageData = null,
+  _selectData = null;
+
+  $('#module_widget').on('change', '.change', function(event) {
+    var _data, _select, $subSelete;
+    if(event.target.id !== 'page_part_widget_path') {
+      _data = _pageData.module;
+      _select = _boolean ? _selectData.module : null;
+      $subSelete = $('#module_widget #page_part_widget_path');
+      $(this).children("option:selected").each(function () {
+        var _val = $(this).val();
+        $subSelete.empty();
+        if(_val) {
+          $.each(_data, function(index, val) {
+            if(_val == val.main[1]) {
+              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.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>');
+              });      
+
+              if(event.target.id == 'page_part_module_app') {
+                $pageCategory.empty();
+                if(val.category.length > 0) {
+                  $.each(val.category, function(index, val) {
+                    if(val !== 0) {
+                      var _arr = _select ? $.inArray($(this)[1], _select.category[1]) : '';
+                      $pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
+                      if(_select && !_select.category[0] && _arr !== -1) {
+                        $pageCategory.find('input[type="checkbox"]').eq(index).prop('checked', true);
+                      }
+                      _select && _val == _select.main && _select.category[0] ? $pageCategory.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
+                    }
+                  });
+                  $pageCategoryGroup.show();
+                } else {
+                  $pageCategoryGroup.hide();
+                }
+                if(val.tags.length > 0) {
+                  $pageTags.empty();
+                  $.each(val.tags, function(index, val) {
+                    if(val !== 0) {
+                      var _arr = _select ? $.inArray($(this)[1], _select.tags[1]) : '';
+                      $pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
+                      if(_select && !_select.tags[0] && _arr !== -1) {
+                        $pageTags.find('input[type="checkbox"]').eq(index).prop('checked', true);
+                      }
+                      _select && _val == _select.main && _select.tags[0] ? $pageTags.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
+                    }  
+                  });
+                  $pageTagsGroup.show();
+                } else {
+                  $pageTagsGroup.hide();
+                }
+              }
+              return false;
+            };
+          });
+        } else {
+          $pageCategory.empty();
+          $pageCategoryGroup.hide();
+          $pageTags.empty();
+          $pageTagsGroup.hide();
+          $pageF2E.empty();
+          $pageCount.empty();  
+        }
+      });
+    }
+    else {
+      getView($pageModule.val());
+    }
+    event.preventDefault();
+  });
+
+  $('#module_widget').on('change', '.checkbox-groups input', function(event) {
+    var $checked = $(this);
+    if($checked.attr('type') == 'checkbox') {
+      if($checked.hasClass('select_all') && $checked.prop('checked')) {
+        $checked.closest('.checkbox').siblings('.groups').find('input[type="checkbox"]').prop('checked', false);
+      } else if($checked.prop('checked') && !$checked.hasClass('lang-enable')) {
+        $checked.closest('.groups').siblings('.checkbox').find('.select_all').prop('checked', false);
+      } else {
+        if($checked.prop('checked')) {
+          $checked.closest('.active-link').addClass('active').siblings('active-link').removeClass('active').end().find('.active-mune').slideDown(300);
+          if(_status) {
+            var _index = $checked.closest('.link-options').find('.active').index() - 1,
+                _index = _type == 'page' ? _selectData.module.link[_index][1] : _linkData.link[_index][1] ;
+            $checked.closest('.active-link').find('.active-mune input').eq(_index).prop('checked', true);
+          }
+        } else {
+          $('.active-link').removeClass('active');
+          $checked.closest('.active-link').find('.active-mune').slideUp(300, function() {
+            $(this).find('input:eq(0)').prop('checked', true);
+          })
+        }
+      }
+      return false;
+    } else if($checked.attr('type') == 'radio' && !$(this).closest('div').hasClass('active-mune')) {
+      $('#module_widget #page_is_published_true').prop('checked') || $('#module_widget #link_is_published_true').prop('checked') ? $('.link-options').slideDown(300) : $('.link-options').slideUp(300);
+      return false;
+    }
+    event.preventDefault();
+  });
+
+  getPageData();
+});
--- a/app/assets/javascripts/structure.js
+++ b/app/assets/javascripts/structure.js
@ -2,4 +2,3 @@
 //= require jquery.ui.sortable
 //= require lib/jquery.ui.touch-punch.min.js
 //= require lib/jquery.mjs.nestedSortable.js
-//= require lib/items/items
--- a/app/assets/stylesheets/lib/main-forms.css
+++ b/app/assets/stylesheets/lib/main-forms.css
@ -334,6 +334,75 @@
 .main-forms .control-group .add-target .btn-group .btn.last {
 	border-radius: 0 4px 4px 0;
 }
+.main-forms .parts-none {
+	width: 100%;
+	text-align: center;
+	padding: 50px 0 70px;
+	font-size: 2em;
+}
+.main-forms .display-mode .typesetting {
+	margin: 0 0 10px 0;
+}
+.main-forms .display-mode table td:last-child {
+	text-align: right;
+}
+.main-forms .display-mode .typesetting li {
+	display: inline-block;
+	float: left;
+	width: 120px;
+	position: relative;
+	padding: 2px;
+	text-align: center;
+}
+.main-forms .display-mode .typesetting li + li {
+	margin-left: 10px;
+}
+.main-forms .display-mode .typesetting li.active {
+	padding: 0;
+	width: 124px;
+}
+.main-forms .display-mode .typesetting li.active:after {
+	font-family: FontAwesome;
+	content: "\f00c";
+	font-size: 12px;
+	text-indent: 15px;
+	line-height: 18px;
+	color: #FFF;
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	width: 0px;
+	height: 0px;
+	border-style: solid;
+	border-width: 0 30px 30px 0;
+	border-color: transparent #FFA307 transparent transparent;
+	z-index: 1;
+}
+.main-forms .display-mode .typesetting li.active img {
+	border-radius: 5px;
+	background-color: #FFA307;
+	padding: 2px;
+}
+.main-forms .display-mode .typesetting img {
+	width: 120px;
+	height: 120px;
+}
+.main-forms .display-mode .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;
+}
+.main-forms .display-mode .typesetting .style_description {
+	display: block;
+	line-height: 1.2em;
+	font-size: 12px;
+	color: #686868;
+	padding-top: 10px;
+}

 #user-forms .control-group .add-target .input-append input.last {
 	border-radius: 4px;
--- a/app/assets/stylesheets/lib/pageslide.css
+++ b/app/assets/stylesheets/lib/pageslide.css
@ -70,7 +70,7 @@
 }
 #pageslide .preview {
  position: relative;
-  /*height: 80px;*/
+  height: 80px;
  margin: 0;
  padding: 0;
 }
@ -155,8 +155,8 @@
  list-style: none;
 }
 #pageslide .typesetting li {
-  width: 72px;
-  height: 72px;
+  width: 60px;
+  height: 60px;
  position: relative;
  margin-bottom: 10px;
  padding: 2px;
@ -197,9 +197,13 @@
 }
 #pageslide .typesetting .style_description {
  position: absolute;
-  width: 240%;
+  width: 195px;
  top: 0;
-  left: 85px;
+  left: 75px;
+  line-height: 1.1em;
+  font-size: 12px;
+  color: #E7E7E7;
+  padding-top: 5px;
 }


--- a/app/controllers/admin/page_parts_controller.rb
+++ b/app/controllers/admin/page_parts_controller.rb
@ -19,36 +19,117 @@ class Admin::PagePartsController < OrbitBackendController


  def edit
+    # @part = PagePart.find(params[:id])
+    # @r_tag = @part.public_r_tag.blank? ? LIST[:public_r_tags][0] : @part.public_r_tag
+    # @tag_objects = @r_tag.classify.constantize.all rescue nil
+    # if @r_tag.eql?('tag_cloud')
+    #   @tag_objects = ModuleApp.where(has_tag: true)
+    # else
+    #   @tag_objects = @r_tag.classify.constantize.all rescue nil
+    # end
+
+    # @module_apps = ModuleApp.for_widget_select
+    # @categories = nil
+    # @tags = nil
+    # @page_frontend_data_counts = nil
+    # # @frontend_styles = nil
+
+    # @selected={
+    #   :module_app=> @part.module_app ? @part.module_app : nil,
+    #   :app_frontend_url=> @part.widget_path || "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,
+    #   :widget_path=> nil
+    # }
+
+    # @selected[:widget_path] = @part.widget_path ? @part.widget_path : (@selected[:module_app].widgets.keys[0] rescue nil)
+    # get_categories_and_tags
+    # get_frontend_data_count
+    # @app_frontend_urls = get_app_frontend_urls
+    # @no_orbit_bar = @side_bar = @no_header = true
+
+
+
+    @id = params[:id]
    @part = PagePart.find(params[:id])
-    @r_tag = @part.public_r_tag.blank? ? LIST[:public_r_tags][0] : @part.public_r_tag
-    @tag_objects = @r_tag.classify.constantize.all rescue nil
-    if @r_tag.eql?('tag_cloud')
-      @tag_objects = ModuleApp.where(has_tag: true)
+    @module_apps = ModuleApp.for_widget_select
+    @module_app = @part.module_app
+    if @module_app
+      @module_app_categories = @module_app.categories
+      @module_app_tags = @module_app.tags
+      @widget_paths = ModuleApp.find(@module_app.id).widgets.map{|name, data| [t(data["i18n"]), name]} rescue []
+      if @part.widget_path.present?
+        if @part.widget_path.eql?("default_widget")
+          @checked_style = @part.widget_style
+          @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_widget'
        else
-      @tag_objects = @r_tag.classify.constantize.all rescue nil
+          @frontend_styles = @module_app.widgets[params[:val]]["style"] rescue nil
+          @partial = 'custom_widget' if @frontend_styles.present?
+        end
+      end
+      @data_count = @module_app.get_registration.get_data_count.to_a rescue []
+    end
+    @no_orbit_bar = @side_bar = @no_header = true
+
+
+
  end

-    @module_apps = ModuleApp.for_widget_select
-    @categories = nil
-    @tags = nil
-    @page_frontend_data_counts = nil
-    # @frontend_styles = nil
+  def get_page_setting_json
+    begin
+      part = PagePart.find(params[:id])
+      m = {}
+      m["main"] = part.module_app_id.to_s
+      m["sub"] = part.widget_path
+      m["category"] = part.category.present? ? [0, part.category.map{|c| c.to_s}] : [1]
+      m["tags"] = part.tag.present? ? [0, part.tag.map{|c| c.to_s}] : [1]
+      m["count"] = part.widget_data_count 
+      render json: JSON.pretty_generate({module: m})
+    rescue
+      render :json => {error: ''}, status: 422
+    end
+  end

-    @selected={
-      :module_app=> @part.module_app ? @part.module_app : nil,
-      :app_frontend_url=> @part.widget_path || "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,
-      :widget_path=> nil
-    }
+  def get_page_module_json
+    modules = ModuleApp.for_widget_select.inject([]) do |module_apps, module_app|
+      m = {}
+      m["main"] = [module_app.title, module_app.id.to_s]
+      m["sub"] = module_app.widgets.map{|name, data| [t(data["i18n"]), name]} rescue []
+      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
+      module_apps << m
+    end
+    render json: JSON.pretty_generate({module: modules})
+  end

-    @selected[:widget_path] = @part.widget_path ? @part.widget_path : (@selected[:module_app].widgets.keys[0] rescue nil)
-    get_categories_and_tags
-    get_frontend_data_count
-    @app_frontend_urls = get_app_frontend_urls
-    @no_orbit_bar = @side_bar = @no_header = true
+  def get_display_style
+    @part = PagePart.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 = @part.widget_path.present? ? @part.widget_style : nil if @part && @part.widget_path.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_widget'
+      else
+        @frontend_styles = @module_app.widgets[params[:val]]["style"] rescue nil
+        @partial = 'custom_widget' if @frontend_styles.present?
+      end
+    end
  end

  def reload_widgets
--- a/app/controllers/admin/pages_controller.rb
+++ b/app/controllers/admin/pages_controller.rb
@ -2,6 +2,13 @@ class Admin::PagesController < Admin::ItemsController
  # helper Admin::PagePartsHelper
  # 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 create
    @item = Page.new(params[:page])
  	if @item.module_app && @item.module_app.key == 'page_content'
--- a/app/helpers/admin/frontend_widget_interface.rb
+++ b/app/helpers/admin/frontend_widget_interface.rb
@ -19,35 +19,12 @@ protected
    end
  end

-  def clean_tags_and_category_params
-    field_name = set_field_name
-    if self.class==Admin::PagePartsController and params[field_name][:module_app].blank?
-      params[field_name][:module_app] = nil
-    end
-    if params[field_name][:tag].nil? || params[field_name][:tag].include?("nil")
-      params[field_name][:tag] = []
-    end
-
-    if params[field_name][:category].nil? || params[field_name][:category].include?("nil")
-      params[field_name][:category] = []
-    end       
-  end  #of clean_tags_and_category_params
-
  def set_local_item
    local_item = @part 
    local_item = @item if local_item.nil? && @item
    local_item
  end

-  def set_field_name
-    case self.class.to_s
-    when "Admin::PagesController"
-       return "page"
-    when "Admin::PagePartsController"
-      return  "page_part"
-    end # of  case
-  end
-
  def select_array_for_app_frontend_urls(hash)
    ary =  hash.collect{|name,data| [I18n.t(data["i18n"]),name]}
    ary << [I18n.t('default_widget.name'),'default_widget'] if @selected[:module_app] and @selected[:module_app].has_default_widget? 
--- a/app/models/page_part.rb
+++ b/app/models/page_part.rb
@ -4,7 +4,7 @@ class PagePart

  field :name
  field :content, localize: true
-  field :kind
+  field :kind, default: "none"
  field :public_r_tag
  field :public_r_tag_object_id, :default => nil
  field :public_r_tag_option, :default => nil
--- a/app/views/admin/items/index.html.erb
+++ b/app/views/admin/items/index.html.erb
@ -1,3 +1,7 @@
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "lib/items/items" %>
+<% end %>
+
 <% node = Item.root %>
 <% unless node.nil? %>
 <ol id='<%= node.id %>' class="sortable item-groups">
--- a/app/views/admin/page_parts/_custom_widget.html.erb
+++ b/app/views/admin/page_parts/_custom_widget.html.erb
@ -0,0 +1,6 @@
+<div class="control-group input-content">
+  <label class="control-label muted"><%= t("default_widget.select_widget_style") %></label>
+  <div class="controls">
+    <%= select 'page_part', 'widget_style', @frontend_styles, {:selected => (@part && @part[:widget_style])}, class: "input-xlarge" %>
+  </div>
+</div>
--- a/app/views/admin/page_parts/_default_widget.html.erb
+++ b/app/views/admin/page_parts/_default_widget.html.erb
@ -0,0 +1,109 @@
+
+<div class="control-group input-content">
+  <label class="control-label muted"><%= t("default_widget.select_widget_style") %></label>
+  <div class="controls">
+    <ul class="typesetting clearfix">
+      <% if @enabled_styles.include?("typeA") %>
+        <li>
+          <%= radio_button_tag "page_part[widget_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_part[widget_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_part[widget_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_part[widget_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_part[widget_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>
+  </div>
+</div>
+<div class="control-group input-content">
+  <label class="control-label muted"><%= t("default_widget.fields_") %></label>
+  <div class="controls">
+    <table>
+      <tbody class="form-inline">
+        <% @widget_fields.count.times do |i| %>
+          <tr>
+            <td>
+              <%= select_tag "page_part[widget_field][][field_name]", options_for_select(@widget_fields, (@part.widget_field_name[i] if @part)), include_blank: true, class: "input-large widget_field" %>
+            </td>
+            <td><i class="icons-arrow-right-6"></i></td>
+            <td>
+              <%= select_tag "page_part[widget_field][][class]", options_for_select(@class_options, (@part.widget_class[i] if @part)), include_blank: true, class: "input-large" %>
+            </td>
+            <td>
+              <label class="checkbox">
+                <span class="checkbox_link hide"><%= check_box_tag 'page_part[widget_field][][sat_to_link]', true, @part && @part.widget_sat_to_link[i] || false %> <%= t(:link) %></span>
+              </label>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th><%= t "default_widget.fields_order" %></th>
+          <th></th>
+          <th><%= t "default_widget.fields_style" %></th>
+          <th class="span2"></th>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</div>
+
+<script>
+  $('.typesetting li').each(function(index, el) {
+    $(this).find('input').prop('checked') ? $(this).addClass('active') : '';
+  });
+
+  $('.controls').on(clickEvent, '.typesetting input[type="radio"]', function(event) {
+    $(this).prop('checked') ? $(this).closest('li').addClass('active').siblings('li').removeClass('active') : '';
+  });
+
+  $('#module_widget select.widget_field').each(function() {
+    if($(this).find(":selected").prop('class') == 'link') {
+      $(this).closest('tr').find('.checkbox_link').show();
+    }
+  });
+  
+  $('#module_widget').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>
--- a/app/views/admin/page_parts/_edit.html.erb
+++ b/app/views/admin/page_parts/_edit.html.erb
@ -1,21 +1,136 @@
-<%= stylesheet_link_tag "admin/default_widget_setting" %>
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "lib/items/page_part" %>
+<% end %>

-<%= form_for @part, :url => admin_page_part_path(@part),:html=>{:class=>"clear form-horizontal edit_page_part"} do |f| %>
-	<% LIST[:page_part_kinds].each do |kind| %>
-          <%= label_tag '',:class=>'checkbox inline' do  %>
-		<%= f.radio_button :kind, kind, :class => 'part_kind' %>
-		<%= t(kind, :scope => 'page_part_kinds') %>
+<%= form_for @part, url: admin_page_part_path(@part), html: { class: "form-horizontal main-forms"} do |f| %>
+  <div class="btn-group" data-toggle="buttons-radio">
+    <label href="#none" class="btn btn-large" data-toggle="tab">
+      <%= t("page_part_kinds.none") %>
+      <%= f.radio_button :kind, "none", class: "hide" %>
+    </label>
+    <label href="#text" class="btn btn-large" data-toggle="tab">
+      <%= t("page_part_kinds.text") %>
+      <%= f.radio_button :kind, "text", class: "hide" %>
+    </label>
+    <label href="#public_r_tag" class="btn btn-large" data-toggle="tab">
+      <%= t("page_part_kinds.public_r_tag") %>
+      <%= f.radio_button :kind, "public_r_tag", class: "hide" %>
+    </label>
+    <label href="#module_widget" class="btn btn-large" data-toggle="tab">
+      <%= t("page_part_kinds.module_widget") %>
+      <%= f.radio_button :kind, "module_widget", class: "hide" %>
+    </label>
+  </div>
+  <fieldset>
+    <div class="input-area tab-content">
+      <div id="none" class="parts-none tab-pane fade in"><%= t(:select_one_function) %></div>
+      <div id="text" class="tab-pane fade in">
+        <div class="nav-name">
+          <strong><%= t(:language) %></strong>
+        </div>
+        <ul class="nav nav-pills language-nav">
+          <% @site_valid_locales.each_with_index do |locale, i| %>
+            <li class="<%= 'active' if i == 0 %>">
+              <a href=".<%= locale %>" data-toggle="tab"><%= I18nVariable.from_locale(locale) %></a>
+            </li>
          <% end %>
+        </ul>
+        <div class="tab-content language-area">
+          <% @site_valid_locales.each_with_index do |locale, i| %>
+            <div class="tab-pane fade <%= locale %> <%= 'active in' if i == 0 %>">
+              <div class="control-group input-content">
+                <label class="control-label muted"><%= t(:content) %></label>
+                <div class="controls">
+                  <div class="textarea">
+                    <%= f.fields_for :content_translations do |f| %>
+                       <%= f.text_area locale, class: "ckeditor input-block-level", value: (@part.content_translations[locale] rescue nil) %>
                    <% end %>
-	<% LIST[:page_part_kinds].each do |kind| %>
-		<div id='<%= "part_#{kind}" %>' class='part_kind_partial' style="display:<%= kind.eql?(@part.kind) ? 'block' : 'none' %>">
-			<%= render :partial => kind, :locals => {:f => f} %>
+                  </div>
+                </div>
+              </div>
            </div>
          <% end %>
-	
-  <div class="form-actions form-fixed pagination-right">
-                <%= f.submit t(:update_),:class=>"btn btn-primary" %> 
-                <%= link_back("btn") %>
-
-</div>
+        </div>
+      </div>
+      <div id="module_widget" class="tab-pane fade in">
+        <%= f.fields_for :title_translations do |f| %>
+          <% @site_valid_locales.each do |locale| %>
+            <div class="control-group input-content">
+              <%= f.label :locale, "#{t(:title)} #{I18nVariable.from_locale(locale)}", class: "control-label muted" %>
+              <div class="controls">
+                <%= f.text_field locale, class: 'input-xlarge page_title', placeholder: "#{t(:title)} #{I18nVariable.from_locale(locale)}", id: locale %>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+        <div class="control-group input-content">
+          <%= f.label :module_app_id, t(:module), class: "control-label muted" %>
+          <div class="controls">
+            <%= f.select :module_app, options_from_collection_for_select(@module_apps, :id, :module_name, selected: (@part.module_app_id rescue nil)), {}, {include_blank: true, class: "input-xlarge change"} %>
+          </div>
+        </div>
+        <div id="front_url" class="control-group input-content <%= 'hide' if @widget_paths.blank? %>">
+          <%= f.label :widget_path, t('front_page.display_mode'), class: "control-label muted" %>
+          <div class="controls">
+            <%= f.select :widget_path, @widget_paths, {}, selected: (@part.widget_path rescue nil), class: "input-xlarge change" %>
+          </div>
+        </div>
+        <div class="control-group input-content checkbox-groups <%= 'hide' if @module_app_categories.blank? %>" id="page-category-groups">
+          <%= f.label :categories, t(:categories), class: "control-label muted" %>
+          <div class="controls">
+            <%= content_tag :label, class: "checkbox" do %>
+              <%= check_box_tag nil, nil, true, class: "select_all" %> <%= t(:all) %>
+            <% end %>
+            <div class="groups" id="page-category">
+              <%= content_tag_for(:label, @module_app_categories, class: "checkbox") do |category|%>
+                <%= check_box_tag("page_part[tag][]", category.id, (@part.category.include?(category.id) rescue false) ) %>
+                <%= category.title %>
+              <% end if @module_app_tags %>
+            </div>
+          </div>
+        </div> 
+        <div class="control-group input-content checkbox-groups <%= 'hide' if @module_app_tags.blank? %>" id="page-tags-groups">
+          <%= f.label :tags, t(:tags), class: "control-label muted" %>
+          <div class="controls">
+            <%= content_tag :label, class: "checkbox" do %>
+              <%= check_box_tag nil, nil, true, class: "select_all" %> <%= t(:all) %>
+            <% end %>
+            <div class="groups" id="page-tags">
+              <%= content_tag_for(:label, @module_app_tags, class: "checkbox") do |tag|%>
+                <%= check_box_tag("page_part[tag][]", tag.id, (@part.tag.include?(tag.id) rescue false) ) %>
+                <%= tag.name %>
+              <% end if @module_app_tags %>
+            </div>
+          </div>
+        </div>
+        <div class="display-mode">
+          <%= render @partial %>
+        </div>
+        <div class="control-group input-content <%= 'hide' if @module_app.blank? %>">
+          <%= f.label :widget_data_count, t(:widget_data_count), class: "control-label muted" %>
+          <div class="controls">
+            <%= f.select :widget_data_count, options_for_select(@data_count, @part.widget_data_count), {}, class: "input-mini", id: "page_count" %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-actions">
+      <%= f.submit t(:update_), class: "btn btn-primary" %> 
+      <button type="button" class="btn" onclick="window.history.back()"><%= t(:cancel) %></button>
+    </div>
+  </fieldset>
 <% end %>
+
+<script>
+  $('.btn-group input[type="radio"]').each(function(index, el) {
+    if($(this).prop('checked')) {
+    	$(this).closest('label').addClass('active');
+    	$("#" + $(this).val()).addClass('active');
+    }
+  });
+  
+  $('.btn-group').on(clickEvent, 'label', function(event) {
+    $(this).find('input').prop('checked', true);
+    event.preventDefault();
+  });
+</script>
--- a/app/views/admin/page_parts/edit.html.erb
+++ b/app/views/admin/page_parts/edit.html.erb
@ -1 +1,2 @@
+<%= stylesheet_link_tag "lib/main-forms" %>
 <%= render 'edit' %>
--- a/app/views/admin/page_parts/get_display_style.js.erb
+++ b/app/views/admin/page_parts/get_display_style.js.erb
@ -0,0 +1,5 @@
+<% if @partial %>
+	$("#module_widget .display-mode").html("<%= j render @partial %>")
+<% else %>
+	$("#module_widget .display-mode").html('')
+<% end %>
--- a/app/views/admin/pages/_default_front.html.erb
+++ b/app/views/admin/pages/_default_front.html.erb
@ -1,8 +1,7 @@
 <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">
+    <li>
      <%= 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>  
@ -69,15 +68,20 @@


 <script>
-  $(document).ready(function() {
+  $('.typesetting li').each(function(index, el) {
+    $(this).find('input').prop('checked') ? $(this).addClass('active') : '';
+  });
+
  $('#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')
@ -94,5 +98,4 @@
                            .prop('checked', false);
    }
  });
-  });
 </script>
--- a/app/views/layouts/page_layout.html.erb
+++ b/app/views/layouts/page_layout.html.erb
@ -30,10 +30,10 @@
  <% if @edit %>
    <script>
      $(document).ajaxStop(function() {
-        $('a').not('.nav').on('click', function(e){
+        $('a').not('.backend_edit').on('click', function(e){
          e.preventDefault();
        });
-        $('a').not('.nav').css("cursor", "default");
+        $('a').not('.backend_edit').css("cursor", "default");
      });
    </script>
    <style>
--- a/app/views/layouts/structure.html.erb
+++ b/app/views/layouts/structure.html.erb
@ -7,6 +7,7 @@
 	<%= stylesheet_link_tag "structure" %>
 	<%= render 'layouts/ie_html5_fix' %>
 	<%= javascript_include_tag "structure" %>
+  <%= yield :page_specific_javascript %>
 	<%= csrf_meta_tag %>
 </head>
 <body id="sideset">
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -322,6 +322,7 @@ en:
  page: Page
  page_part_kinds:
    module_widget: Plug-in Module Widget
+    none: None
    public_r_tag: System Widget
    text: Text Area
  passed: Approved
--- a/config/locales/new_ui.en.yml
+++ b/config/locales/new_ui.en.yml
@ -59,6 +59,7 @@ en:
  select_all: Select all
  select_file: Select file
  select_image: Select image
+  select_one_function: Please select one of the functions above
  sort_number: Sort number
  tag:
    add: Add tag
--- a/config/locales/new_ui.zh_tw.yml
+++ b/config/locales/new_ui.zh_tw.yml
@ -56,6 +56,7 @@ zh_tw:
  select_all: 全選
  select_file: 選擇檔案
  select_image: 選擇圖片
+  select_one_function: 請選擇一個以上的功能
  sort_number: 排序數
  tag:
    add: 新增標籤
--- a/config/locales/zh_tw.yml
+++ b/config/locales/zh_tw.yml
@ -323,6 +323,7 @@ zh_tw:
  page: 頁面
  page_part_kinds:
    module_widget: 外掛模塊
+    non: 沒有
    public_r_tag: 系統模塊
    text: 文字區域
  passed: 通過審核
--- a/config/routes.rb
+++ b/config/routes.rb
@ -151,6 +151,11 @@ Orbit::Application.routes.draw do
    end

    resources :page_parts do
+      collection do
+        get 'get_display_style'
+        get 'get_page_module_json'
+        get 'get_page_setting_json'
+      end
      member do
        get 'reload_after_widget_field_changed',:action=>'reload_widget_field'
        get 'reload_after_module_changed',:action=>'reload_widgets'
--- a/lib/parsers/parser_front_end.rb
+++ b/lib/parsers/parser_front_end.rb
@ -32,7 +32,7 @@ module ParserFrontEnd
        ret = ''
        ret << "<div class='editable'>"
        ret << "<div class='edit_link'>"
-        ret << "<a href='#{edit_admin_page_part_path(page_part['part_id'])}' title='#{part ? part.edit_title : ''}'>#{t(:edit)}</a>"
+        ret << "<a href='#{edit_admin_page_part_path(page_part['part_id'])}' class='backend_edit' title='#{part ? part.edit_title : ''}'>#{t(:edit)}</a>"
        ret << '</div>'
        ret << page_part.child.to_html rescue nil
        ret << '</div>'