Backbone Model of Sections

preparing for WordPress Metaboxes

by helgatheviking

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/dashicons/0.1.0/css/dashicons.min.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="generate_sections_control">

  <div id="generate_sections_container"></div>

  <p>
    <a href="#" id="generate-add-section" class="button-primary button">
      Add Section
    </a>  
    <a href="#" id="generate-delete-sections" class="button button-large">
      Remove Sections
    </a>
  </p>

</div>


<script type="text/template" id="tmpl-generate-press-section">

  <h3 class="section-title">
		<%= title %>
		<div class="section-controls">
			<a class="edit-section dashicons dashicons-admin-generic" href="#" title="<?php _e( 'Click to edit', 'generate-sections' );?>"></a>
			<a class="move-section dashicons dashicons-menu" href="#"  title="<?php _e( 'Click and drag to sort', 'generate-sections' );?>"></a>
			<a class="delete-section dashicons dashicons-no-alt" href="#" title="<?php esc_attr_e( 'Click to remove', 'generate-sections' );?>"></a>
	   </div>   
	   
	</h3>
  <textarea name="_generate_sections[sections][<%= index %>]" readonly="readonly"></textarea>

</script>

CSS

#_generate_sections_metabox { opacity: 0; height: 0; overflow: hidden; }

.generate-sections-enabled .send-to-editor { display: none; }
.generate-sections-enabled #postdivrich { opacity: 0; height: 0; overflow: hidden; }
.generate-sections-enabled #_generate_sections_metabox { opacity: 1; height: auto; }

.generate_sections_control .warning { color: red; }
.generate_sections_control .dodelete-repeating_textareas { float: right; }
.generate_sections_control .section { border: 1px solid #DFDFDF; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); margin: 6px 0px 8px; overflow: hidden; position: relative; background: white; }
.generate_sections_control .section .section-title { min-height: 20px; font-size: 14px; padding: 8px 12px; margin: 0; }
.generate_sections_control .section .section-controls { float: right; }
.generate_sections_control .section .section-controls a { color: #aaa; }
.generate_sections_control .section .section-controls a:hover { color: #777; }
//.generate_sections_control .section textarea { display: none; }
.generate_sections_control .section h3 { color: #999; font-size: 1em; margin: 15px 6px; text-transform: uppercase; }
.generate_sections_control .section .ui-sortable-placeholder { line-height: 1.4em; border: 3px dashed #DDD; }

.generate_sections_control .button{ padding: 5px; background: lightblue; color: white; margin-right: 5px; text-decoration: none; }
.generate_sections_control .move-section { cursor: move; }

.customEditor { position: relative; padding: 1em; }

.customEditor .mce-wp-dfw, .customEditor .ed_button.qt-dfw { display: none; }

.group-inside .grid-container > div { padding: .5em 1em; }

.group-inside label { margin-left: 0; }

#_generate_sections_metabox { background: transparent; border: 0; }

#_generate_sections_metabox > .handlediv, #_generate_sections_metabox > .hndle { display: none; }

#_generate_sections_metabox > .inside { padding-left: 0; padding-right: 0; }

body.wp-admin...

JavaScript

var generate_sections_metabox_i18n = {"confirm":"This action can not be undone, are you sure?","no_content_error":"Error: Content already detected in default editor.","use_visual_editor":"Please activate the \"Visual\" tab in your main editor before transferring content.","post_id":"12","sections":[{"content":"","custom_classes":"bacon","top_padding":20,"bottom_padding":20,"background_image":0,"background_color":"","text_color":"","link_color":"","link_color_hover":"","box_type":"","inner_box_type":"","parallax_effect":""},{"content":"","custom_classes":"","top_padding":0,"bottom_padding":0,"background_image":0,"background_color":"","text_color":"","link_color":"","link_color_hover":"","box_type":"","inner_box_type":"","parallax_effect":""}],"default_title":"Section","tabs":[{"title":"Content","url":"#content","active":"false"},{"title":"General","url":"#general","active":"true"},{"title":"Style","url":"#style","active":"false"}],"top_padding":"40","bottom_padding":"40","media_library_title":"Section Background","media_library_button":"Set as Section Background"};

var Generate_Sections = Generate_Sections || {};

(function($, Generate_Sections) {

  // Model
  Generate_Sections.Section = Backbone.Model.extend({
    defaults: {
      "title": generate_sections_metabox_i18n.default_title,
      "box_type": "",
      "inner_box_type": "",
      "custom_classes": "",
      "top_padding": "",
      "bottom_padding": "",
      "background_color": "",
      "background_image": "",
      "background_image_preview": "",
      "parallax_effect": "",
      "text_color": "",
      "link_color": "",
      "link_color_hover": "",
      "content": ""
    }
  });

  // Collection
  Generate_Sections.SectionsCollection = Backbone.Collection.extend({
    model: Generate_Sections.Section,
    el: "#generate_sections_container",
    comparator: function(model) {
      return model.get('index');
    }
  });

  // Singular View
  Generate_Sections.sectionView =...