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 %>",
-        dataType: "html",
+        url: "<%= Rails.application.routes.url_helpers.get_display_style_admin_pages_path %>",
+        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);
-      return false;
+    }
+    else {
+      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 */