caboose-cms 0.9.55 → 0.9.56

data/app/controllers/caboose/sites_controller.rb

@@ -162,6 +162,7 @@ module Caboose
           when 'under_construction_html'  then site.under_construction_html = value
           when 'use_store'                then site.use_store               = value
           when 'use_fonts'                then site.use_fonts               = value
+          when 'use_dragdrop'             then site.use_dragdrop            = value
           when 'use_retargeting'          then site.use_retargeting         = value
           when 'custom_css'               then site.custom_css              = value            
           when 'custom_js'                then site.custom_js               = value

data/app/models/caboose/schema.rb

@@ -735,6 +735,7 @@ class Caboose::Schema < Caboose::Utilities::Schema
         [ :allow_self_registration , :boolean     , { :default => false }],
         [ :analytics_id            , :string     ],        
         [ :use_retargeting         , :boolean     , { :default => false }],
+        [ :use_dragdrop            , :boolean     , { :default => false }],
         [ :date_js_updated         , :datetime   ],
         [ :date_css_updated        , :datetime   ],
         [ :default_layout_id       , :integer    ],

data/app/models/caboose/site.rb

@@ -30,6 +30,7 @@ class Caboose::Site < ActiveRecord::Base
     :allow_self_registration ,
     :analytics_id            ,
     :use_retargeting         ,
+    :use_dragdrop            ,
     :date_js_updated         ,
     :date_css_updated        ,
     :default_layout_id       ,

data/app/views/caboose/pages/_new_block_header.html.erb

@@ -1,13 +1,34 @@
-<div id='new_blocks_container1'>
-  <p><input type='button' value='New Page Block' onclick='toggle_blocks();' /></p>
-</div>
-<div id='new_blocks_container2' style='display: none;'>
-  <input type='button' value='New Page Block' onclick='toggle_blocks();' />
-  <p>Drag a block onto the page.</p>
+<%
+btsm = Caboose::BlockTypeSiteMembership.where(:site_id => @site.id).pluq(:block_type_id)
+@block_types = Caboose::BlockType.where(:parent_id => nil, :block_type_category_id => 2).where(:id => btsm).order(:description)
+%>
+
+<div class='icons' id='new_blocks_container2'>
+  <h4>Drag a block<br />onto the page.</h4>
   <ul id='new_blocks'>
-    <% @block_types.each do |block_type| %><li id='new_block_<%= block_type.id %>'><%= block_type.description %></li><% end %>
+  	<li class='title'><span>Structure</span></li>
+  	<li class='blocktype' id='new_block_3159_2' data-btid='3159' data-children='2'>
+  		<span class='icon icon-insert-template'></span>
+  		<span class='bname'>2 Column Row</span>
+  	</li>
+  	<li class='blocktype' id='new_block_3159_3' data-btid='3159' data-children='3'>
+  		<span class='icon icon-insert-template'></span>
+  		<span class='bname'>3 Column Row</span>
+  	</li>
+  	<li class='blocktype' id='new_block_3159_4' data-btid='3159' data-children='4'>
+  		<span class='icon icon-insert-template'></span>
+  		<span class='bname'>4 Column Row</span>
+  	</li>
+  	<li class='blocktype' id='new_block_3159_5' data-btid='3159' data-children='5'>
+  		<span class='icon icon-insert-template'></span>
+  		<span class='bname'>5 Column Row</span>
+  	</li>
+  	<li class='title'><span>Content</span></li>
+    <% @block_types.each do |block_type| %>
+    	<li class='blocktype' id='new_block_<%= block_type.id %>' data-btid='<%= block_type.id %>'>
+    		<span class='icon icon-<%= block_type.icon %>'></span>
+    		<span class='bname'><%= block_type.description %></span>
+    	</li>
+    <% end %>
   </ul>
-  <p><a href='#' onclick='toggle_blocks();'>Close</a></p>
-</div>
-<ul id='blocks'></ul>
-
+</div>

data/app/views/caboose/pages/admin_edit_content.html.erb

@@ -5,68 +5,26 @@
 <% content_for :caboose_css do %>
 <%= stylesheet_link_tag 'jquery-ui' %>
 <%= stylesheet_link_tag 'caboose/admin_block_edit_image' %>
-
+<% if @site && @site.use_dragdrop %>
+<%= stylesheet_link_tag 'caboose/admin_edit_page_content_dragdrop' %>
+<% else %>
+<%= stylesheet_link_tag 'caboose/admin_edit_page_content' %>
+<% end %>
 <%= stylesheet_link_tag "caboose/modal_inline" %>
-<style type='text/css'>
-
-#tiny_header {
-  display: block;  
-  color: #fff;
-  background-image: url(/assets/caboose/caboose_logo_small.png);
-  background-color: #000;  
-  background-repeat: no-repeat;
-  background-position: right 0;
-  padding: 0 50px 0 10px;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  z-index: 100000;
-  border-left: #fff 1px solid;
-  border-bottom: #fff 1px solid;  
-}
-#tiny_header a {
-  display: inline-block;
-  color: #fff;
-  padding: 16px 10px;  
-}
-.block_over { background: #e3e3e3; }
-.select_handle    { display: none; }
-.move_up_handle   { display: none; }
-.move_down_handle { display: none; }
-.delete_handle    { display: none; }
-.duplicate_handle    { display: none; }
-.block_over > .select_handle    { display: block; position: relative; z-index: 3; }
-.block_over > .move_up_handle   { display: block; position: relative; z-index: 3; }
-.block_over > .move_down_handle { display: block; position: relative; z-index: 3; }
-.block_over > .delete_handle    { display: block; position: relative; z-index: 3; }
-.block_over > .duplicate_handle    { display: block; position: relative; z-index: 3; }
-.block_over > .select_handle    span { position: absolute; top: 0; right: 72px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-.block_over > .move_up_handle   span { position: absolute; top: 0; right: 36px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-.block_over > .move_down_handle span { position: absolute; top: 0; right: 18px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-.block_over > .delete_handle    span { position: absolute; top: 0; right:  0px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-.block_over > .duplicate_handle    span { position: absolute; top: 0; right:  54px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-
-.selected { background: #fff799; }
-
-.new_block_link { position: relative; width: 100%; }
-.new_block_link .line { position: absolute; top: -11px; width: 100%; height: 2px; background: transparent; }
-.new_block_link a { position: absolute; top: -20px; left: 45%; background: transparent; color: transparent !important; display: block; padding: 4px 8px; }
-
-.new_block_link_over { position: relative; width: 100%; }
-.new_block_link_over .line { position: absolute; top: -11px; width: 100%; height: 2px; background: #ccc; }
-.new_block_link_over a { position: absolute; top: -22px; left: 45%; color: #fff; background: #666; display: block; padding: 2px 4px; text-decoration: none; font-size: 12px; }
-
-.caboose_note { padding: 10px 20px; background: #990000; color: #fff; font-size: 16px; }
-
-</style>
+<%= stylesheet_link_tag "caboose/icomoon_fonts" %>
 <% end %>
 
 <% content_for :caboose_js do %>
+
 <%= javascript_include_tag 'jquery-ui' %>
 <%= javascript_include_tag 'caboose/model/all' %>
 <%= javascript_include_tag 'caboose/jquery-ui.drag-multiple.min.js' %>
 <%= javascript_include_tag "caboose/clipboard" %>
+<% if @site && @site.use_dragdrop %>
+<%= javascript_include_tag 'caboose/block_content_controller_dragdrop' %>
+<% else %>
 <%= javascript_include_tag 'caboose/block_content_controller' %>
+<% end %>
 <%= javascript_include_tag "caboose/class" %>
 <%= javascript_include_tag "caboose/modal_controller" %>
 <%= javascript_include_tag "caboose/block_modal_controllers/block_modal_controller" %>
@@ -83,10 +41,24 @@ $(document).ready(function() {
   $('body').append($('<div/>')        
     .attr('id', 'tiny_header')
     .append($('<a/>').attr('href', '/admin/pages').html("< Back"))
-    .append($('<a/>').attr('href', '#').html('Page Options').click(function(e) { e.preventDefault(); caboose_modal_url('/admin/pages/<%= @page.id %>/custom-fields'); }))
-    .append($('<a/>').attr('href', '/admin/pages/<%= @page.id %>/layout').html("Layout"))
-    .append($('<a/>').attr('href', '/admin/pages/<%= @page.id %>').html("Settings"))    
-  );    
+    .append($('<a/>').attr('href', '#').html('Custom Fields').click(function(e) { e.preventDefault(); caboose_modal_url('/admin/pages/<%= @page.id %>/custom-fields'); }))
+   // .append($('<a/>').attr('href', '/admin/pages/<%= @page.id %>/layout').html("Layout"))
+    .append($('<a/>').attr('href', '/admin/pages/<%= @page.id %>').html("Page Settings"))
+    .append($('<a/>').attr('href', '/<%= @page.uri %>').attr('target','_blank').text("View Page"))  
+  );
+
+<% if @site && @site.use_dragdrop %>
+  var html = "<%== (render :partial => 'caboose/pages/new_block_header').gsub( / *\n+/, '' ) %> ";
+  $('body').append($('<div/>')
+    .attr('id', 'block_sidebar')
+    .append(html)
+  );
+  $("#new_blocks li.blocktype").draggable({ revert: true, helper: 'clone', appendTo: 'body', zIndex: 999999, scroll: false, start: function(event, ui) {
+    $(".line.ui-droppable").addClass('dropzone'); }, stop: function(event, ui) { $(".line.ui-droppable").removeClass('dropzone'); } });
+  $('body').addClass('icons');
+  $('body').append($('<div/>').attr('id','caboose-loading').append( $('<div/>').addClass('table').append($('<div/>').addClass('table-cell').append('<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg id="loader" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="60px" height="60px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M64 0L40.08 21.9a10.98 10.98 0 0 0-5.05 8.75C34.37 44.85 64 60.63 64 60.63V0z" fill="#ffb118"/><path d="M128 64l-21.88-23.9a10.97 10.97 0 0 0-8.75-5.05C83.17 34.4 67.4 64 67.4 64H128z" fill="#80c141"/><path d="M63.7 69.73a110.97 110.97 0 0 1-5.04-20.54c-1.16-8.7.68-14.17.68-14.17h38.03s-4.3-.86-14.47 10.1c-3.06 3.3-19.2 24.58-19.2 24.58z" fill="#cadc28"/><path d="M64 128l23.9-21.88a10.97 10.97 0 0 0 5.05-8.75C93.6 83.17 64 67.4 64 67.4V128z" fill="#cf171f"/><path d="M58.27 63.7a110.97 110.97 0 0 1 20.54-5.04c8.7-1.16 14.17.68 14.17.68v38.03s.86-4.3-10.1-14.47c-3.3-3.06-24.58-19.2-24.58-19.2z" fill="#ec1b21"/><path d="M0 64l21.88 23.9a10.97 10.97 0 0 0 8.75 5.05C44.83 93.6 60.6 64 60.6 64H0z" fill="#018ed5"/><path d="M64.3 58.27a110.97 110.97 0 0 1 5.04 20.54c1.16 8.7-.68 14.17-.68 14.17H30.63s4.3.86 14.47-10.1c3.06-3.3 19.2-24.58 19.2-24.58z" fill="#00bbf2"/><path d="M69.73 64.34a111.02 111.02 0 0 1-20.55 5.05c-8.7 1.14-14.15-.7-14.15-.7V30.65s-.86 4.3 10.1 14.5c3.3 3.05 24.6 19.2 24.6 19.2z" fill="#f8f400"/><circle cx="64" cy="64" r="2.03"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="-360 64 64" dur="2100ms" repeatCount="indefinite"></animateTransform></g></svg>').append('<h4>Loading...</h4>') )  ));
+<% end %>
+
 });
 
 </script>

data/app/views/caboose/posts/admin_edit_content.html.erb

@@ -5,60 +5,13 @@
 <% content_for :caboose_css do %>
 <%= stylesheet_link_tag 'jquery-ui' %>
 <%= stylesheet_link_tag 'caboose/admin_block_edit_image' %>
-<%= stylesheet_link_tag 'caboose/admin_post_edit_content' %>
+<% if @site && @site.use_dragdrop %>
+<%= stylesheet_link_tag 'caboose/admin_edit_page_content_dragdrop' %>
+<% else %>
+<%= stylesheet_link_tag 'caboose/admin_edit_page_content' %>
+<% end %>
 <%= stylesheet_link_tag "caboose/modal_inline" %>
-<style type='text/css'>
-
-#tiny_header {
-  display: block;  
-  color: #fff;
-  background-image: url(/assets/caboose/caboose_logo_small.png);
-  background-color: #000;  
-  background-repeat: no-repeat;
-  background-position: right 0;
-  padding: 0 50px 0 10px;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  z-index: 100000;
-  border-left: #fff 1px solid;
-  border-bottom: #fff 1px solid;  
-}
-#tiny_header a {
-  display: inline-block;
-  color: #fff;
-  padding: 16px 10px;  
-}
-.block_over { background: #e3e3e3; }
-.select_handle    { display: none; }
-.move_up_handle   { display: none; }
-.move_down_handle { display: none; }
-.delete_handle    { display: none; }
-.duplicate_handle    { display: none; }
-.block_over > .select_handle    { display: block; position: relative; }
-.block_over > .move_up_handle   { display: block; position: relative; }
-.block_over > .move_down_handle { display: block; position: relative; }
-.block_over > .delete_handle    { display: block; position: relative; }
-.block_over > .duplicate_handle    { display: block; position: relative; }
-.block_over > .select_handle    span { position: absolute; top: 0; right: 72px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-.block_over > .move_up_handle   span { position: absolute; top: 0; right: 36px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-.block_over > .move_down_handle span { position: absolute; top: 0; right: 18px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-.block_over > .delete_handle    span { position: absolute; top: 0; right:  0px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-.block_over > .duplicate_handle    span { position: absolute; top: 0; right:  54px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
-
-.selected { background: #fff799; }
-
-.new_block_link { position: relative; width: 100%; }
-.new_block_link .line { position: absolute; top: -11px; width: 100%; height: 2px; background: transparent; }
-.new_block_link a { position: absolute; top: -20px; left: 45%; background: transparent; color: transparent !important; display: block; padding: 4px 8px; }
-
-.new_block_link_over { position: relative; width: 100%; }
-.new_block_link_over .line { position: absolute; top: -11px; width: 100%; height: 2px; background: #ccc; }
-.new_block_link_over a { position: absolute; top: -22px; left: 45%; color: #fff; background: #666; display: block; padding: 2px 4px; text-decoration: none; font-size: 12px; }
-
-.caboose_note { padding: 10px 20px; background: #990000; color: #fff; font-size: 16px; }
-
-</style>
+<%= stylesheet_link_tag "caboose/icomoon_fonts" %>
 <% end %>
 
 <% content_for :caboose_js do %>
@@ -66,7 +19,11 @@
 <%= javascript_include_tag 'caboose/model/all' %>
 <%= javascript_include_tag 'caboose/jquery-ui.drag-multiple.min.js' %>
 <%= javascript_include_tag "caboose/clipboard" %>
+<% if @site && @site.use_dragdrop %>
+<%= javascript_include_tag 'caboose/block_content_controller_dragdrop' %>
+<% else %>
 <%= javascript_include_tag 'caboose/block_content_controller' %>
+<% end %>
 <%= javascript_include_tag "caboose/class" %>
 <%= javascript_include_tag "caboose/modal_controller" %>
 <%= javascript_include_tag "caboose/block_modal_controllers/block_modal_controller" %>
@@ -86,7 +43,20 @@ $(document).ready(function() {
     .append($('<a/>').attr('href', '#').html('Post Options').click(function(e) { e.preventDefault(); caboose_modal_url('/admin/posts/<%= @post.id %>/custom-fields'); }))
     .append($('<a/>').attr('href', '/admin/posts/<%= @post.id %>/layout').html("Layout"))
     .append($('<a/>').attr('href', '/admin/posts/<%= @post.id %>').html("Settings"))        
-  );    
+  );
+
+<% if @site && @site.use_dragdrop %>
+  var html = "<%== (render :partial => 'caboose/pages/new_block_header').gsub( / *\n+/, '' ) %> ";
+  $('body').append($('<div/>')
+    .attr('id', 'block_sidebar')
+    .append(html)
+  );
+  $("#new_blocks li.blocktype").draggable({ revert: true, helper: 'clone', appendTo: 'body', zIndex: 999999, scroll: false, start: function(event, ui) {
+    $(".line.ui-droppable").addClass('dropzone'); }, stop: function(event, ui) { $(".line.ui-droppable").removeClass('dropzone'); } });
+  $('body').addClass('icons');
+  $('body').append($('<div/>').attr('id','caboose-loading').append( $('<div/>').addClass('table').append($('<div/>').addClass('table-cell').append('<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg id="loader" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="60px" height="60px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M64 0L40.08 21.9a10.98 10.98 0 0 0-5.05 8.75C34.37 44.85 64 60.63 64 60.63V0z" fill="#ffb118"/><path d="M128 64l-21.88-23.9a10.97 10.97 0 0 0-8.75-5.05C83.17 34.4 67.4 64 67.4 64H128z" fill="#80c141"/><path d="M63.7 69.73a110.97 110.97 0 0 1-5.04-20.54c-1.16-8.7.68-14.17.68-14.17h38.03s-4.3-.86-14.47 10.1c-3.06 3.3-19.2 24.58-19.2 24.58z" fill="#cadc28"/><path d="M64 128l23.9-21.88a10.97 10.97 0 0 0 5.05-8.75C93.6 83.17 64 67.4 64 67.4V128z" fill="#cf171f"/><path d="M58.27 63.7a110.97 110.97 0 0 1 20.54-5.04c8.7-1.16 14.17.68 14.17.68v38.03s.86-4.3-10.1-14.47c-3.3-3.06-24.58-19.2-24.58-19.2z" fill="#ec1b21"/><path d="M0 64l21.88 23.9a10.97 10.97 0 0 0 8.75 5.05C44.83 93.6 60.6 64 60.6 64H0z" fill="#018ed5"/><path d="M64.3 58.27a110.97 110.97 0 0 1 5.04 20.54c1.16 8.7-.68 14.17-.68 14.17H30.63s4.3.86 14.47-10.1c3.06-3.3 19.2-24.58 19.2-24.58z" fill="#00bbf2"/><path d="M69.73 64.34a111.02 111.02 0 0 1-20.55 5.05c-8.7 1.14-14.15-.7-14.15-.7V30.65s-.86 4.3 10.1 14.5c3.3 3.05 24.6 19.2 24.6 19.2z" fill="#f8f400"/><circle cx="64" cy="64" r="2.03"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="-360 64 64" dur="2100ms" repeatCount="indefinite"></animateTransform></g></svg>').append('<h4>Loading...</h4>') )  ));
+<% end %>
+
 });
 
 </script>

data/app/views/caboose/sites/admin_edit.html.erb

@@ -13,6 +13,7 @@ user_ids = [] if user_ids.nil?
 <p><div id='site_<%= @site.id %>_under_construction_html' ></div></p>
 <p><div id='site_<%= @site.id %>_use_store'               ></div></p>
 <p><div id='site_<%= @site.id %>_use_fonts'               ></div></p>
+<p><div id='site_<%= @site.id %>_use_dragdrop'            ></div></p>
 <p><div id='site_<%= @site.id %>_allow_self_registration' ></div></p>
 <p><div id='site_<%= @site.id %>_default_layout_id'       ></div></p>
 
@@ -78,6 +79,7 @@ $(document).ready(function() {
       { name: 'under_construction_html' , nice_name: 'Under Construction HTML'  , type: 'textarea' , value: <%= raw Caboose.json(@site.under_construction_html)                %>, width: 600, height: 75 },
       { name: 'use_store'               , nice_name: 'Enable Store'             , type: 'checkbox' , value: <%= raw Caboose.json(@site.use_store               ? true : false) %>, width: 400 },
       { name: 'use_fonts'               , nice_name: 'Enable Fonts'             , type: 'checkbox' , value: <%= raw Caboose.json(@site.use_fonts               ? true : false) %>, width: 400 },
+      { name: 'use_dragdrop'               , nice_name: 'Enable Drag & Drop'             , type: 'checkbox' , value: <%= raw Caboose.json(@site.use_dragdrop              ? true : false) %>, width: 400 },
       { name: 'allow_self_registration' , nice_name: 'Allow Self Registration'  , type: 'checkbox' , value: <%= raw Caboose.json(@site.allow_self_registration ? true : false) %>, width: 400 },
       { name: 'default_layout_id'       , nice_name: 'Default Layout'           , type: 'select'   , value: <%= raw Caboose.json(@site.default_layout_id)                      %>, width: 600, options_url: "/admin/sites/<%= @site.id %>/default-layout-options" }      
     ]    

data/lib/caboose/version.rb

@@ -1,3 +1,3 @@
 module Caboose
-  VERSION = '0.9.55'
+  VERSION = '0.9.56'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: caboose-cms
 version: !ruby/object:Gem::Version
-  version: 0.9.55
+  version: 0.9.56
 platform: ruby
 authors:
 - William Barry
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-07-17 00:00:00.000000000 Z
+date: 2017-07-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pg
@@ -540,6 +540,7 @@ files:
 - app/assets/javascripts/caboose/assets_controller.js
 - app/assets/javascripts/caboose/authorize.net.js
 - app/assets/javascripts/caboose/block_content_controller.js
+- app/assets/javascripts/caboose/block_content_controller_dragdrop.js
 - app/assets/javascripts/caboose/block_media_controller.js
 - app/assets/javascripts/caboose/block_modal_controllers/block_modal_controller.js
 - app/assets/javascripts/caboose/block_modal_controllers/button_modal_controller.js
@@ -707,6 +708,8 @@ files:
 - app/assets/stylesheets/caboose/admin_assets_index.css
 - app/assets/stylesheets/caboose/admin_block_edit_image.css.scss
 - app/assets/stylesheets/caboose/admin_crumbtrail.css.scss
+- app/assets/stylesheets/caboose/admin_edit_page_content.scss
+- app/assets/stylesheets/caboose/admin_edit_page_content_dragdrop.scss
 - app/assets/stylesheets/caboose/admin_main.css
 - app/assets/stylesheets/caboose/admin_media_index.css.scss
 - app/assets/stylesheets/caboose/admin_new_block.css