designer 0.1.2

data/app/javascript/designer/components/SortableInputArray.vue

@@ -0,0 +1,74 @@
+<template>
+  <Draggable v-model="object" :options="{handle:'.drag-handle-child'}" @update="onUpdate">
+    <div class="section-heading d-flex align-items-center">
+      <div class="title flex-fill">{{ spec.label || spec.name }}</div>
+      <a class="btn btn-sm btn-success" @click.prevent="object.push({})" href="#"><i class="fa fa-plus"></i> Add</a>
+    </div>
+    <div class="card child" v-for="(data, index) in object">
+      <div class="card-header drag-handle-child">
+        <a class="btn btn-sm float-right" @click.prevent="object.splice(index, 1)" href="#"><i class="fa fa-trash"></i></a>
+        <a class="title" data-toggle="collapse" v-bind:data-target="'#collapse-' + index" href="#">
+          <span v-if="data.title">{{ data.title }}</span>
+          <span v-else-if="data.label">{{ data.label }}</span>
+          <span v-else-if="data.id">Item {{ data.id }}</span>
+          <span v-else>Item {{ index }}</span>
+        </a>
+      </div>
+      <div v-bind:id="'collapse-' + index" class="collapse card-body" @change="onUpdate">
+        <!--
+        <br>data ###########################
+        {{data}}
+        <br>item ###########################
+        {{item}}
+        <br>object ###########################
+        {{object}}-->
+        <DefaultInput
+          v-for="(property, name) in spec.properties"
+          :key="property.name"
+          v-bind:name="name"
+          v-bind:item="data"
+          v-bind:spec="property"></DefaultInput>
+      </div>
+    </div>
+  </Draggable>
+</template>
+
+<script>
+import DefaultInput from './DefaultInput.vue'
+import Draggable from 'vuedraggable'
+
+export default {
+  props: {
+    item: {
+      type: Object
+    },
+    scope: {
+      default: 'items',
+      type: String
+    },
+    spec: {
+      type: Object
+    }
+  },
+  components: {
+    DefaultInput, Draggable
+  },
+  created() {
+    // console.log('SortableInputArray', this, this.object, this.scope, this.spec)
+  },
+  data() {
+    return {
+      id: this.randomString(10),
+      object: this.item && this.item[this.scope] ? this.item[this.scope] : []
+    }
+  },
+  methods: {
+    onUpdate() {
+      // console.log('FormList onUpdate', this)
+
+      // FIXME: This is evil, but can't seem to to trigger the right event
+      this.$set(this.$parent.item.values, this.scope, this.object)
+    }
+  }
+}
+</script>

data/app/javascript/designer/editor.js

@@ -0,0 +1,65 @@
+import SimpleMDE from 'simplemde/dist/simplemde.min'
+
+export default class Editor {
+  constructor(element) {
+    let self = this
+
+    this.mde = new SimpleMDE({
+      element: element,
+      forceSync: true,
+      autoDownloadFontAwesome: false,
+      toolbar: ['bold', 'italic', 'strikethrough', 'heading', '|',
+            'unordered-list', 'ordered-list', 'quote', 'code', 'table', 'link', '|',
+            'clean-block', 'fullscreen']
+    })
+
+    // console.log(this.mde.gui.toolbar)
+    $(this.mde.gui.toolbar).find('.fa-header').attr('class', 'fa fa-heading')
+
+    this.mde.codemirror.on('drop', function(cm, event) {
+      const id = event.dataTransfer.getData('id')
+      const embed = event.dataTransfer.getData('embed')
+      console.log('handleDrop', cm, event, id, embed)
+
+      var coords = cm.coordsChar({ left: event.x, top: event.y })
+      cm.replaceRange(embed, coords)
+      event.preventDefault()
+    })
+  }
+  destroy() {
+    this.mde.toTextArea()
+  }
+  refresh() {
+    var self = this
+    setTimeout(function() { self.mde.codemirror.refresh() }, 0)
+  }
+  value() {
+    return this.mde.value()
+  }
+  toggleFullscreen() {
+    const elem = this.mde.options.element || document.documentElement;
+    if (!document.fullscreenElement && !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement && !document.msFullscreenElement) {
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    }
+    else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+  }
+}

data/app/javascript/designer/helpers.js

@@ -0,0 +1,73 @@
+import Editor from  './editor'
+
+export default {
+  install(Vue, options) {
+
+    // Inject reusable component options
+    Vue.mixin({
+      methods: {
+        openMarkdownEditor(textareaSelector) {
+          let $textarea = $(textareaSelector)
+          const $modal = $('#markdown-editor-modal')
+
+          let editor = new Editor($modal.find('textarea')[0])
+          editor.mde.value($textarea.val())
+          $modal.modal('show')
+
+          function updateEditorHeight() {
+            $modal.find('.CodeMirror').height($modal.height())
+          }
+          updateEditorHeight()
+          $(window).on('resize', updateEditorHeight)
+
+          editor.mde.codemirror.on('change', function() {
+            $textarea.val(editor.value())
+          })
+
+          $modal.on('hidden.bs.modal', function(e) {
+            editor.destroy()
+            $(window).off('resize', updateEditorHeight)
+          })
+        },
+
+        copyToClipboard(text) {
+          const dummy = document.createElement('input')
+          document.body.appendChild(dummy)
+          dummy.value = text
+          dummy.select()
+          document.execCommand('copy', false)
+          dummy.remove()
+          toastr.info("Copied!")
+          console.log('copied', text)
+        },
+
+        getEmbedCode(itemId) {
+          return '<%= designer_embed("' + itemId + '") %>'
+        },
+
+        // Generate a random alphanumeric string
+        randomString(len) {
+          const p = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+          return [...Array(len)].reduce(a=>a+p[~~(Math.random()*p.length)],'')
+        }
+      }
+    })
+
+    Vue.filter('formatSize', (size) => {
+      if (size > 1024 * 1024 * 1024 * 1024) {
+        return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
+      } else if (size > 1024 * 1024 * 1024) {
+        return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
+      } else if (size > 1024 * 1024) {
+        return (size / 1024 / 1024).toFixed(2) + ' MB'
+      } else if (size > 1024) {
+        return (size / 1024).toFixed(2) + ' KB'
+      }
+      return size.toString() + ' B'
+    })
+
+    Vue.filter('titleize', (str) => {
+      return str.replace(/[A-Z]/g, ' $&').replace(/_/g, ' ').replace(/^./, str => str.toUpperCase())
+    })
+  }
+}

data/app/javascript/designer/index.js

@@ -0,0 +1,136 @@
+import $ from 'jquery/dist/jquery'
+// import Rails from 'rails-ujs/lib/assets/compiled/rails-ujs'
+import 'popper.js/dist/popper'
+import 'bootstrap/dist/js/bootstrap'
+import 'jquery-serializejson/jquery.serializejson'
+import 'jquery-resizable-dom/src/jquery-resizable'
+import * as toastr from 'toastr/toastr'
+import Vue from 'vue/dist/vue.esm.js'
+
+import MediaGallery from '../designer/components/MediaGallery.vue'
+import DefaultForm from '../designer/components/DefaultForm.vue'
+
+import Draggable from 'vuedraggable'
+import Helpers from  '../designer/helpers'
+
+
+export default {
+  start() {
+
+    // Set globals for erb.js callbacks
+    window.$ = $
+    window.toastr = toastr
+
+    toastr.options = {
+      "positionClass": "toast-bottom-right"
+    }
+
+    // Load the Vue app on DOMContentLoaded
+    if (/complete|interactive|loaded/.test(document.readyState)) {
+      this.load()
+    } else {
+      document.addEventListener('DOMContentLoaded', this.load, false)
+    }
+  },
+  load() {
+    // document.addEventListener('DOMContentLoaded', () => {
+
+    Vue.use(Helpers)
+
+    this.app = new Vue({
+      el: '#app',
+      components: {
+        MediaGallery, Draggable, DefaultForm
+      },
+      props: ['elements', 'spec', 'resource_id', 'resource_type', 'resource_path', 'preview_path', 'upload_path'],
+      beforeMount() {
+        console.log('before mount', this.$attrs, this.$el.dataset.elements, this.$el.dataset.spec)
+        const dataset = this.$el.dataset
+        for(const key in dataset) {
+          this[key] = (dataset[key][0] === '{' || dataset[key][0] === '[') ? JSON.parse(dataset[key]) : dataset[key]
+        }
+        this.elements = this.filterMetadata()
+      },
+      data() {
+        return {
+          showPreview: true
+        }
+      },
+      methods: {
+        getSpec(template) {
+          return Object.values(this.spec).find(function(item) {
+            return item.template == template
+          })
+        },
+        filterMetadata() {
+          var self = this
+          if (!Array.isArray(this.elements))
+            return []
+          return this.elements.map(function(item) {
+            if (!item.id)
+              item.id = item.template + '-' + self.randomString(10)
+            const found = Object.values(self.spec).find(function(definition) {
+              return definition.template == item.template
+            })
+            if (found) {
+              return item
+            } else {
+              alert('No template exists for: ' + JSON.stringify(item))
+              return null
+            }
+          }).filter(Boolean)
+        },
+        addElement(template) {
+          this.elements.push({
+            id: template + '-' + this.randomString(10),
+            template: template,
+            values: {}
+          })
+        },
+        save() {
+          console.log('saving', this.elements)
+          let self = this
+          let data = $('#editor form').serializeJSON()
+          if (!data || !data.resource)
+            data = { resource: {} }
+          data.resource.elements = JSON.stringify(this.elements)
+
+          return $.ajax({
+            method: 'PATCH',
+            url: this.resource_path,
+            data: data
+          }).done((result) => {
+            console.log('saved', result)
+            self.refreshPreview()
+          })
+          // return false
+        },
+        refreshPreview() {
+          document.getElementById('preview').contentWindow.location.reload()
+        }
+      }
+    })
+
+    //
+    // Resizable Panels
+    // TODO: Use Vue
+
+    $('#sidebar').resizable({
+      handleSelector: '.splitter',
+      resizeHeight: false
+    })
+
+    //
+    // Markdown Editor
+
+    // var $markdown = $('textarea.markdown')
+    // if ($markdown.length) {
+    //   let editor = new Editor($markdown[0])
+    //
+    //   $('#sidebar [rel="editor"]').click(() => {
+    //     editor.refresh() // ensure content is redered
+    //   })
+    // }
+    // })
+  }
+}

data/app/javascript/packs/designer.js

@@ -0,0 +1,2 @@
+import Designer from 'designer'
+Designer.start()

data/app/views/designer/application/notifications.js.erb

@@ -0,0 +1,13 @@
+<% if flash.any? %>
+  toastr.clear()
+<% end %>
+
+<% flash.each do |type, message| %>
+  <% if type == 'error' %>
+    toastr.error("<%= message %>")
+  <% elsif type == 'notice' %>
+    toastr.success("<%= message %>")
+  <% else %>
+    toastr.info("<%= message %>")
+  <% end %>
+<% end %>

data/app/views/designer/editor/show.html.slim

@@ -0,0 +1,88 @@
+- resource_id ||= @resource.id
+- resource_type ||= @resource.class.name
+- elements ||= @resource.elements.to_json
+- spec ||= designer_option(:spec).to_json
+- resource_path ||= editor_path(id: @resource.id, resource_name: resource_name)
+- uploads_path ||= images_path(id: @resource.id, resource_name: resource_name)
+- preview_path ||= designer_preview_path
+
+#app {
+    data-resource_id=(resource_id.to_json)
+    data-resource_type=(resource_type)
+    data-elements=(elements)
+    data-spec=(spec)
+    data-resource_path=(resource_path)
+    data-preview_path=(preview_path)
+    data-uploads_path=(uploads_path)
+  }
+
+  #sidebar :class="{'panel-left': true, 'w-100': !showPreview}"
+    ul#menu.nav.nav-tabs role="tablist"
+      li.nav-item
+        a.nav-link.active data-toggle="tab" href="#elements" role="tab" Elements
+      li.nav-item
+        a.nav-link data-toggle="tab" href="#gallery" role="tab" Gallery
+      - if lookup_context.exists?('nav', designer_option(:designer_template_path), true)
+          = render "#{designer_option(:designer_template_path)}/nav", resource: @resource
+      li.nav-item
+        a.nav-link data-toggle="tab" href="#editor" role="tab" Editor
+      / = yield(:designer_nav)
+      li.nav-item.flex-fill
+      li.nav-item
+        a.nav-link href="#" @click="refreshPreview()" title="Refresh Preview"
+          i class="fa fa-sync"
+      li.nav-item
+        a.nav-link href="#" @click="save()" title="Save"
+          i class="fa fa-save"
+      /li.nav-item
+        a :class="{'nav-link': true, active: currentView == 'editor'}" href="#" @click="currentView = 'editor'" rel="editor" title="Editor"
+          i class="fa fa-edit"
+      li.nav-item
+        a :class="{'nav-link': true, active: showPreview}"  href="#" @click="showPreview = !showPreview" rel="preview" title="Preview"
+          i class="fa fa-eye"
+    .tab-content
+      #elements.tab-pane.fade.show.active
+        .row.align-items-center
+          .col-6
+            / .tab-title.m-0.pl-1 Page Designer
+          .col-6.text-right
+            .dropdown.mr-2.my-2
+              button.btn.btn-sm.btn-success.dropdown-toggle data-toggle="dropdown" type="button" Add
+              .dropdown-menu
+                a.dropdown-item v-for="definition in spec" @click="addElement(definition.template)" href="#"= '{{definition.label}}'
+        Draggable v-model="elements" :options="{handle:'.drag-handle'}"
+          component {
+            :is="item.component || 'DefaultForm'"
+            v-for="(item, index) in elements" :key="item.id"
+            v-bind:item="item"
+            v-bind:spec="getSpec(item.template)"
+            v-on:remove="elements.splice(index, 1)" }
+      #gallery.tab-pane.fade aria-labelledby="gallery-tab" role="tabpanel"
+        component is="MediaGallery" v-bind:uploads_path="uploads_path"
+      - if lookup_context.exists?('form', designer_option(:designer_template_path), true)
+        / #editor.panel-right v-show="currentView == 'editor'"
+        #editor.tab-pane.fade.p-3 aria-labelledby="editor-tab" role="tabpanel"
+          = render "#{designer_option(:designer_template_path)}/form", resource: @resource, resource_path: resource_path
+      /- if lookup_context.exists?('tabs', designer_option(:designer_template_path), true)
+        = render "#{designer_option(:designer_template_path)}/tabs", resource: @resource
+      / = yield(:designer_tabs)
+  .splitter
+      /= yield(:designer_form)
+  / height="100%" width="100%" src=(preview_path)
+  iframe#preview.panel-right v-show="showPreview" height="100%" width="100%" src=(preview_path)
+
+/ Markdown Editor
+#markdown-editor-modal.modal role="dialog" tabindex="-1"
+  .modal-dialog role="document"
+    .modal-content
+      /.modal-header
+        h5.modal-title Modal title
+        button.close aria-label="Close" data-dismiss="modal" type="button"
+          span aria-hidden="true"  ×
+      .modal-body.p-0.d-flex.flex-column
+        button.close aria-label="Close" data-dismiss="modal" type="button"
+          span aria-hidden="true"  ×
+        textarea.flex-fill
+      /.modal-footer
+        button.btn.btn-primary type="button"  Save changes
+        button.btn.btn-secondary data-dismiss="modal" type="button"  Close