designer 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 06c10fc816f6482724649727d5821e2d1a8b94830424bb3a80599481f9880ef1
-  data.tar.gz: 286a7149c4c6259ca391738680f4159204ea59a32c33f46ceb15574d7cf89a04
+  metadata.gz: ee447f7be3f902533ff04eb6ea3d02c850fd109d6e68ed9e96027ded4ce58e9c
+  data.tar.gz: 76a65f82c623196057d743d4972f08fcfb0cb03ace8d3104f35564aa1c54a891
 SHA512:
-  metadata.gz: 5ba179dc8959b91f61a87ded776d299fec8089eef56406d21bc0d1861e00c106e79ec9521b702da938124ba67aaffb3543642a55a50fd7d153c58e8a19673f7e
-  data.tar.gz: 7bbe1e69658e7d843f900a710e431456f8228aff2c2e7d5ad758331e6ccda6b3368bc8fd1e5bdf19e49bde9cbaa324f81108aa3937d1f9f3523803e8611fba41
+  metadata.gz: 6f4622a6fdaeeb6209576100c25ae6d6dcdc10ed44af51e9654faafc2f9f840bcd3cd2a3b46fce18b7b6df76228e6c34919218c1b127c8c2002f71710ee8d251
+  data.tar.gz: c8fb00bbf03d9eeca7930085672d6b807ed6374975f798120d5e13879dc33baebfcfbb0b169c4ce7658c1cf1dda8b3ca2de2e77975f1f636336b3b4f557d383f

data/.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 pkg/
 bak/
+.gem

data/app/controllers/designer/application_controller.rb

@@ -23,6 +23,11 @@ module Designer
     end
 
     def resource_params
+      if params[:resource] &&
+        params[:resource][:elements].present? &&
+        params[:resource][:elements].is_a?(String)
+        params[:resource][:elements] = JSON.parse(params[:resource][:elements])
+      end
       params.require(:resource).permit!
     end
 

data/app/controllers/designer/editor_controller.rb

@@ -9,7 +9,7 @@ module Designer
     end
 
     def update
-      if @resource.update(resource_params.merge(elements: resource_elements))
+      if @resource.update(resource_params)
         render_success
       else
         render_error
@@ -22,13 +22,6 @@ module Designer
 
     protected
 
-    def resource_elements
-      # BUG: The front end stringifies the elements JSON, but this is getting
-      # auto-parsed by Rails only in production, so check if it's a string first.
-      @resource_elements ||= params[:resource][:elements]&.is_a?(String) ?
-        JSON.parse(params[:resource][:elements]) : params[:resource][:elements]
-    end
-
     def render_success message = nil
       if request.xhr?
         flash.now[:notice] = message || "#{resource_type.classify} saved"

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

@@ -2,7 +2,7 @@
   <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>
+      <a class="btn btn-sm btn-success mr-2 my-2" @click.prevent="object.push({})" href="#">Add</a>
     </div>
     <div class="card child" v-for="(data, index) in object">
       <div class="card-header drag-handle-child">

data/app/javascript/designer/editor.js

@@ -1,4 +1,5 @@
 import SimpleMDE from 'simplemde/dist/simplemde.min'
+import $ from 'jquery'
 
 export default class Editor {
   constructor(element) {
@@ -6,7 +7,7 @@ export default class Editor {
 
     this.mde = new SimpleMDE({
       element: element,
-      forceSync: true,
+      // forceSync: true,
       autoDownloadFontAwesome: false,
       toolbar: ['bold', 'italic', 'strikethrough', 'heading', '|',
             'unordered-list', 'ordered-list', 'quote', 'code', 'table', 'link', '|',
@@ -23,8 +24,21 @@ export default class Editor {
 
       var coords = cm.coordsChar({ left: event.x, top: event.y })
       cm.replaceRange(embed, coords)
-      event.preventDefault()
+      // event.preventDefault()
     })
+
+    // this.mde.codemirror.on('beforeChange', function() {
+    //   // element.trigger('input')
+    //   // element.trigger('change')
+    //   console.log('beforeChange')
+    //   element.change()
+    // })
+
+    // Trigger changed on the textarea
+    this.mde.codemirror.on('change', function() {
+      var event = new Event('change')
+      element.dispatchEvent(event)
+		})
   }
   destroy() {
     this.mde.toTextArea()

data/app/javascript/designer/helpers.js

@@ -22,6 +22,9 @@ export default {
 
           editor.mde.codemirror.on('change', function() {
             $textarea.val(editor.value())
+
+            $textarea[0].dispatchEvent(new Event('input', { bubbles: true }));
+            $textarea[0].dispatchEvent(new Event('change', { bubbles: true }));
           })
 
           $modal.on('hidden.bs.modal', function(e) {

data/app/javascript/designer/index.js

@@ -1,4 +1,4 @@
-import $ from 'jquery/dist/jquery'
+import $ from 'jquery'
 // import Rails from 'rails-ujs/lib/assets/compiled/rails-ujs'
 import 'popper.js/dist/popper'
 import 'bootstrap/dist/js/bootstrap'
@@ -7,11 +7,16 @@ 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 MediaGallery from '../designer/components/MediaGallery.vue'
+// import DefaultForm from '../designer/components/DefaultForm.vue'
+
+// import MediaGallery from '@/designer/components/MediaGallery.vue'
+import MediaGallery from './components/MediaGallery.vue'
+import DefaultForm from './components/DefaultForm.vue'
 
 import Draggable from 'vuedraggable'
-import Helpers from  '../designer/helpers'
+// import Helpers from  '../designer/helpers'
+import Helpers from  './helpers'
 
 
 export default {

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

@@ -22,12 +22,14 @@
         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
+      - if lookup_context.exists?('nav_items', designer_option(:designer_template_path), true)
+          = render "#{designer_option(:designer_template_path)}/nav_items", resource: @resource
       / = yield(:designer_nav)
       li.nav-item.flex-fill
+      - if lookup_context.exists?('nav_icons', designer_option(:designer_template_path), true)
+          = render "#{designer_option(:designer_template_path)}/nav_icons", resource: @resource
       li.nav-item
         a.nav-link href="#" @click="refreshPreview()" title="Refresh Preview"
           i class="fa fa-sync"

data/lib/designer/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Designer
-  VERSION = '0.1.2'
+  VERSION = '0.1.3'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: designer
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Kam Low
@@ -102,7 +102,6 @@ files:
 - app/controllers/designer/editor_controller.rb
 - app/controllers/designer/images_controller.rb
 - app/helpers/designer/designer_helper.rb
-- app/javascript/designer/DefaultInput.vue
 - app/javascript/designer/components/DefaultForm.vue
 - app/javascript/designer/components/DefaultInput.vue
 - app/javascript/designer/components/MediaGallery.vue

data/app/javascript/designer/DefaultInput.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="w-100">
-    <div v-if="spec.type == 'string' && spec.multiline" class="form-group">
-      <a href="#" @click="openMarkdownEditor('#textarea-' + object.id)" class="float-right"><i class="fa fa-edit"></i></a>
-      <label :for="'textarea-' + object.id" class="control-label">{{ spec.label || name | titleize }}</label>
-      <textarea :id="'textarea-' + object.id" v-model="object[name]" :placeholder="spec.placeholder" @change="$emit('change')" rows="5" class="form-control"></textarea>
-
-      <!-- <div class="col-sm-3 col-form-label">
-        {{ spec.label || name | titleize }}
-        <small><a href="#" @click="openMarkdownEditor('#textarea-' + object.id)">Editor</a></small>
-      </div>
-      <div class="col-sm-9">
-        <textarea :id="'textarea-' + object.id" :type="spec.type" v-model="object[name]" :placeholder="spec.placeholder" @change="$emit('change')" class="form-control"></textarea>
-      </div> -->
-    </div>
-    <div v-else-if="spec.type == 'array'" class="form-group form-row">
-      <label class="col-sm-3 col-form-label">{{ spec.label || name | titleize }}</label>
-      <div class="col-sm-9">
-        <tags-input element-id="tags"
-          v-model="object[name]"
-          :existing-tags="tagArrayToObject(spec.enum)"
-          :typeahead="true"
-          :typeahead-activation-threshold="0"
-          :only-existing-tags="!spec.custom"></tags-input>
-      </div>
-    </div>
-    <div v-else-if="spec.enum" class="form-group form-row">
-      <label class="col-sm-3 col-form-label">{{ spec.label || name | titleize }}</label>
-      <div class="col-sm-9">
-        <select v-model="object[name]" class="form-control">
-          <option value="">Please select one</option>
-          <option v-for="(value, index) in spec.enum">{{ value }}</option>
-        </select>
-      </div>
-    </div>
-    <div v-else-if="spec.type == 'boolean'" class="form-check">
-      <input type="checkbox" value="true" :id="name" v-model="object[name]" @change="$emit('change')" class="form-check-input">
-      <label class="form-check-label" :for="name">{{ spec.label || name | titleize }}</label>
-    </div>
-    <div v-else class="form-group form-row">
-      <label class="col-sm-3 col-form-label">{{ spec.label || name | titleize }}</label>
-      <div class="col-sm-9">
-        <input :type="spec.type" v-model="object[name]" :placeholder="spec.placeholder" class="form-control">
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue/dist/vue.esm.js'
-import VoerroTagsInput from '@voerro/vue-tagsinput'
-// import Helpers from  '../helpers'
-
-Vue.component('tags-input', VoerroTagsInput)
-
-export default {
-  props: ['spec', 'name', 'item'],
-  components: {
-    VoerroTagsInput
-  },
-  data() {
-    return {
-       object: this.item || {}
-    }
-  },
-  // beforeMount() {
-  //   // console.log('DefaultInput', this.object, this.spec.default)
-  //   // this.object[this.name] = this.object[this.name] || this.spec.default
-  // },
-  // created() {
-  //   console.log('DefaultInput', this, this.spec, this.name, this.item)
-  // },
-  methods: {
-    tagArrayToObject(tags) {
-      return tags.reduce((acc, cur, i) => {
-        acc[cur] = cur
-        return acc
-      }, {})
-    }
-  }
-}
-</script>