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>
<script src="https://tinymce.cachefly.net/4.3/tinymce.min.js"></script>
<div id="_generate_sections_metabox">

  <div class="generate_sections_control">

    <noscript>
      Javascript must be enabled to use Generate Sections
    </noscript>

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

  </div>
</div>



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

  <h3 class="section-title">
    <span class="text"><%= title %></span>
    <div class="section-controls">
      <a class="edit-section dashicons dashicons-admin-generic" href="#" title="Click to edit"></a>
      <a class="move-section dashicons dashicons-menu" href="#"  title="Click and drag to sort"></a>
      <a class="delete-section dashicons dashicons-no-alt" href="#" title="Click to remove"></a>
     </div>   
     
  </h3>
  <textarea name="_generate_sections[sections][<%= index %>]" readonly="readonly"></textarea>

</script>

<script type="text/template" id="tmpl-generate-press-buttons">
  <a href="#" id="generate-add-section" class="button-primary button-large">
    Add Section
  </a>
  <a href="#" id="generate-delete-sections" class="button button-large">
    Remove Sections
  </a>
</script>


<script type="text/html" id='tmpl-generate-press-modal-window'>
  <div class="backbone_modal">
    <a class="backbone_modal-close dashicons dashicons-no" href="#" title="Close"><span
        class="screen-reader-text">Close</span></a>

    <div class="backbone_modal-content">
      <section class="backbone_modal-main" role="main">
        <header>
   ...

CSS

.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;
}

.js .generate_sections_control .move-section {
  cursor: move;
}

#_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 .grid-container {
  max-width: 100%;
}

.box-type select,
.inner-box-type select,
.parallax-effect select,
.top-padding input,
.bottom-padding input {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (min-width: 769px) {
  .grid-50 {
    width: 50% !important;
    float: left;
 ...

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": [{
    "title": "Angelica, Eliza, and Peggy. Work!",
    "content": "Selvage 3 wolf moon raw denim fap normcore. Brunch shabby chic heirloom health goth kale chips, thundercats twee pabst selvage yr venmo listicle. Green juice cold-pressed thundercats, asymmetrical mumblecore venmo put a bird on it marfa beard scenester. +1 sriracha yuccie, vinyl blog meditation irony waistcoat. Health goth cardigan tousled, salvia chillwave williamsburg gluten-free swag schlitz kogi yuccie raw denim whatever tacos everyday carry. Street art viral tacos, butcher listicle pickled blog williamsburg kitsch lumbersexual drinking vinegar whatever franzen ramps. Tousled quinoa artisan franzen yuccie everyday carry.",
    "custom_classes": "bacon",
    "top_padding": 20,
    "bottom_padding": 20,
    "background_image": 5,
    "background_color": "",
    "text_color": "",
    "link_color": "",
    "link_color_hover": "",
    "box_type": "",
    "inner_box_type": "",
    "parallax_effect": ""
  }, {
    "title": "",
    "content": "Chambray drinking vinegar jean shorts flexitarian ramps skateboard, biodiesel portland. Cold-pressed bitters tilde, microdosing gastropub small batch 90's. Squid everyday carry swag knausgaard. Green juice cred kitsch deep v PBR&amp;B heirloom. Hella try-hard cronut asymmetrical, butcher etsy lumbersexual. Wolf kombucha vegan +1, swag drinking vinegar yr bushwick keffiyeh photo booth occupy semiotics waistcoat vice poutine. Lo-fi selvage messenger bag, ennui gentrify man bun chartreuse cardigan pork belly knausgaard tattooed gastropub mixtape bicycle rights.",
    "custom_classes": "",
    "top_padding": 0,
    "bottom_padding": 0,
   ...