designer 0.1.2 → 0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/app/controllers/designer/application_controller.rb +5 -0
- data/app/controllers/designer/editor_controller.rb +1 -8
- data/app/javascript/designer/components/SortableInputArray.vue +1 -1
- data/app/javascript/designer/editor.js +16 -2
- data/app/javascript/designer/helpers.js +3 -0
- data/app/javascript/designer/index.js +9 -4
- data/app/views/designer/editor/show.html.slim +4 -2
- data/lib/designer/version.rb +1 -1
- metadata +1 -2
- data/app/javascript/designer/DefaultInput.vue +0 -82
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ee447f7be3f902533ff04eb6ea3d02c850fd109d6e68ed9e96027ded4ce58e9c
|
4
|
+
data.tar.gz: 76a65f82c623196057d743d4972f08fcfb0cb03ace8d3104f35564aa1c54a891
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6f4622a6fdaeeb6209576100c25ae6d6dcdc10ed44af51e9654faafc2f9f840bcd3cd2a3b46fce18b7b6df76228e6c34919218c1b127c8c2002f71710ee8d251
|
7
|
+
data.tar.gz: c8fb00bbf03d9eeca7930085672d6b807ed6374975f798120d5e13879dc33baebfcfbb0b169c4ce7658c1cf1dda8b3ca2de2e77975f1f636336b3b4f557d383f
|
data/.gitignore
CHANGED
@@ -23,6 +23,11 @@ module Designer
|
|
23
23
|
end
|
24
24
|
|
25
25
|
def resource_params
|
26
|
+
if params[:resource] &&
|
27
|
+
params[:resource][:elements].present? &&
|
28
|
+
params[:resource][:elements].is_a?(String)
|
29
|
+
params[:resource][:elements] = JSON.parse(params[:resource][:elements])
|
30
|
+
end
|
26
31
|
params.require(:resource).permit!
|
27
32
|
end
|
28
33
|
|
@@ -9,7 +9,7 @@ module Designer
|
|
9
9
|
end
|
10
10
|
|
11
11
|
def update
|
12
|
-
if @resource.update(resource_params
|
12
|
+
if @resource.update(resource_params)
|
13
13
|
render_success
|
14
14
|
else
|
15
15
|
render_error
|
@@ -22,13 +22,6 @@ module Designer
|
|
22
22
|
|
23
23
|
protected
|
24
24
|
|
25
|
-
def resource_elements
|
26
|
-
# BUG: The front end stringifies the elements JSON, but this is getting
|
27
|
-
# auto-parsed by Rails only in production, so check if it's a string first.
|
28
|
-
@resource_elements ||= params[:resource][:elements]&.is_a?(String) ?
|
29
|
-
JSON.parse(params[:resource][:elements]) : params[:resource][:elements]
|
30
|
-
end
|
31
|
-
|
32
25
|
def render_success message = nil
|
33
26
|
if request.xhr?
|
34
27
|
flash.now[:notice] = message || "#{resource_type.classify} saved"
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<Draggable v-model="object" :options="{handle:'.drag-handle-child'}" @update="onUpdate">
|
3
3
|
<div class="section-heading d-flex align-items-center">
|
4
4
|
<div class="title flex-fill">{{ spec.label || spec.name }}</div>
|
5
|
-
<a class="btn btn-sm btn-success" @click.prevent="object.push({})" href="#"
|
5
|
+
<a class="btn btn-sm btn-success mr-2 my-2" @click.prevent="object.push({})" href="#">Add</a>
|
6
6
|
</div>
|
7
7
|
<div class="card child" v-for="(data, index) in object">
|
8
8
|
<div class="card-header drag-handle-child">
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import SimpleMDE from 'simplemde/dist/simplemde.min'
|
2
|
+
import $ from 'jquery'
|
2
3
|
|
3
4
|
export default class Editor {
|
4
5
|
constructor(element) {
|
@@ -6,7 +7,7 @@ export default class Editor {
|
|
6
7
|
|
7
8
|
this.mde = new SimpleMDE({
|
8
9
|
element: element,
|
9
|
-
forceSync: true,
|
10
|
+
// forceSync: true,
|
10
11
|
autoDownloadFontAwesome: false,
|
11
12
|
toolbar: ['bold', 'italic', 'strikethrough', 'heading', '|',
|
12
13
|
'unordered-list', 'ordered-list', 'quote', 'code', 'table', 'link', '|',
|
@@ -23,8 +24,21 @@ export default class Editor {
|
|
23
24
|
|
24
25
|
var coords = cm.coordsChar({ left: event.x, top: event.y })
|
25
26
|
cm.replaceRange(embed, coords)
|
26
|
-
event.preventDefault()
|
27
|
+
// event.preventDefault()
|
27
28
|
})
|
29
|
+
|
30
|
+
// this.mde.codemirror.on('beforeChange', function() {
|
31
|
+
// // element.trigger('input')
|
32
|
+
// // element.trigger('change')
|
33
|
+
// console.log('beforeChange')
|
34
|
+
// element.change()
|
35
|
+
// })
|
36
|
+
|
37
|
+
// Trigger changed on the textarea
|
38
|
+
this.mde.codemirror.on('change', function() {
|
39
|
+
var event = new Event('change')
|
40
|
+
element.dispatchEvent(event)
|
41
|
+
})
|
28
42
|
}
|
29
43
|
destroy() {
|
30
44
|
this.mde.toTextArea()
|
@@ -22,6 +22,9 @@ export default {
|
|
22
22
|
|
23
23
|
editor.mde.codemirror.on('change', function() {
|
24
24
|
$textarea.val(editor.value())
|
25
|
+
|
26
|
+
$textarea[0].dispatchEvent(new Event('input', { bubbles: true }));
|
27
|
+
$textarea[0].dispatchEvent(new Event('change', { bubbles: true }));
|
25
28
|
})
|
26
29
|
|
27
30
|
$modal.on('hidden.bs.modal', function(e) {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import $ from 'jquery
|
1
|
+
import $ from 'jquery'
|
2
2
|
// import Rails from 'rails-ujs/lib/assets/compiled/rails-ujs'
|
3
3
|
import 'popper.js/dist/popper'
|
4
4
|
import 'bootstrap/dist/js/bootstrap'
|
@@ -7,11 +7,16 @@ import 'jquery-resizable-dom/src/jquery-resizable'
|
|
7
7
|
import * as toastr from 'toastr/toastr'
|
8
8
|
import Vue from 'vue/dist/vue.esm.js'
|
9
9
|
|
10
|
-
import MediaGallery from '../designer/components/MediaGallery.vue'
|
11
|
-
import DefaultForm from '../designer/components/DefaultForm.vue'
|
10
|
+
// import MediaGallery from '../designer/components/MediaGallery.vue'
|
11
|
+
// import DefaultForm from '../designer/components/DefaultForm.vue'
|
12
|
+
|
13
|
+
// import MediaGallery from '@/designer/components/MediaGallery.vue'
|
14
|
+
import MediaGallery from './components/MediaGallery.vue'
|
15
|
+
import DefaultForm from './components/DefaultForm.vue'
|
12
16
|
|
13
17
|
import Draggable from 'vuedraggable'
|
14
|
-
import Helpers from '../designer/helpers'
|
18
|
+
// import Helpers from '../designer/helpers'
|
19
|
+
import Helpers from './helpers'
|
15
20
|
|
16
21
|
|
17
22
|
export default {
|
@@ -22,12 +22,14 @@
|
|
22
22
|
a.nav-link.active data-toggle="tab" href="#elements" role="tab" Elements
|
23
23
|
li.nav-item
|
24
24
|
a.nav-link data-toggle="tab" href="#gallery" role="tab" Gallery
|
25
|
-
- if lookup_context.exists?('nav', designer_option(:designer_template_path), true)
|
26
|
-
= render "#{designer_option(:designer_template_path)}/nav", resource: @resource
|
27
25
|
li.nav-item
|
28
26
|
a.nav-link data-toggle="tab" href="#editor" role="tab" Editor
|
27
|
+
- if lookup_context.exists?('nav_items', designer_option(:designer_template_path), true)
|
28
|
+
= render "#{designer_option(:designer_template_path)}/nav_items", resource: @resource
|
29
29
|
/ = yield(:designer_nav)
|
30
30
|
li.nav-item.flex-fill
|
31
|
+
- if lookup_context.exists?('nav_icons', designer_option(:designer_template_path), true)
|
32
|
+
= render "#{designer_option(:designer_template_path)}/nav_icons", resource: @resource
|
31
33
|
li.nav-item
|
32
34
|
a.nav-link href="#" @click="refreshPreview()" title="Refresh Preview"
|
33
35
|
i class="fa fa-sync"
|
data/lib/designer/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: designer
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Kam Low
|
@@ -102,7 +102,6 @@ files:
|
|
102
102
|
- app/controllers/designer/editor_controller.rb
|
103
103
|
- app/controllers/designer/images_controller.rb
|
104
104
|
- app/helpers/designer/designer_helper.rb
|
105
|
-
- app/javascript/designer/DefaultInput.vue
|
106
105
|
- app/javascript/designer/components/DefaultForm.vue
|
107
106
|
- app/javascript/designer/components/DefaultInput.vue
|
108
107
|
- app/javascript/designer/components/MediaGallery.vue
|
@@ -1,82 +0,0 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="w-100">
|
3
|
-
<div v-if="spec.type == 'string' && spec.multiline" class="form-group">
|
4
|
-
<a href="#" @click="openMarkdownEditor('#textarea-' + object.id)" class="float-right"><i class="fa fa-edit"></i></a>
|
5
|
-
<label :for="'textarea-' + object.id" class="control-label">{{ spec.label || name | titleize }}</label>
|
6
|
-
<textarea :id="'textarea-' + object.id" v-model="object[name]" :placeholder="spec.placeholder" @change="$emit('change')" rows="5" class="form-control"></textarea>
|
7
|
-
|
8
|
-
<!-- <div class="col-sm-3 col-form-label">
|
9
|
-
{{ spec.label || name | titleize }}
|
10
|
-
<small><a href="#" @click="openMarkdownEditor('#textarea-' + object.id)">Editor</a></small>
|
11
|
-
</div>
|
12
|
-
<div class="col-sm-9">
|
13
|
-
<textarea :id="'textarea-' + object.id" :type="spec.type" v-model="object[name]" :placeholder="spec.placeholder" @change="$emit('change')" class="form-control"></textarea>
|
14
|
-
</div> -->
|
15
|
-
</div>
|
16
|
-
<div v-else-if="spec.type == 'array'" class="form-group form-row">
|
17
|
-
<label class="col-sm-3 col-form-label">{{ spec.label || name | titleize }}</label>
|
18
|
-
<div class="col-sm-9">
|
19
|
-
<tags-input element-id="tags"
|
20
|
-
v-model="object[name]"
|
21
|
-
:existing-tags="tagArrayToObject(spec.enum)"
|
22
|
-
:typeahead="true"
|
23
|
-
:typeahead-activation-threshold="0"
|
24
|
-
:only-existing-tags="!spec.custom"></tags-input>
|
25
|
-
</div>
|
26
|
-
</div>
|
27
|
-
<div v-else-if="spec.enum" class="form-group form-row">
|
28
|
-
<label class="col-sm-3 col-form-label">{{ spec.label || name | titleize }}</label>
|
29
|
-
<div class="col-sm-9">
|
30
|
-
<select v-model="object[name]" class="form-control">
|
31
|
-
<option value="">Please select one</option>
|
32
|
-
<option v-for="(value, index) in spec.enum">{{ value }}</option>
|
33
|
-
</select>
|
34
|
-
</div>
|
35
|
-
</div>
|
36
|
-
<div v-else-if="spec.type == 'boolean'" class="form-check">
|
37
|
-
<input type="checkbox" value="true" :id="name" v-model="object[name]" @change="$emit('change')" class="form-check-input">
|
38
|
-
<label class="form-check-label" :for="name">{{ spec.label || name | titleize }}</label>
|
39
|
-
</div>
|
40
|
-
<div v-else class="form-group form-row">
|
41
|
-
<label class="col-sm-3 col-form-label">{{ spec.label || name | titleize }}</label>
|
42
|
-
<div class="col-sm-9">
|
43
|
-
<input :type="spec.type" v-model="object[name]" :placeholder="spec.placeholder" class="form-control">
|
44
|
-
</div>
|
45
|
-
</div>
|
46
|
-
</div>
|
47
|
-
</template>
|
48
|
-
|
49
|
-
<script>
|
50
|
-
import Vue from 'vue/dist/vue.esm.js'
|
51
|
-
import VoerroTagsInput from '@voerro/vue-tagsinput'
|
52
|
-
// import Helpers from '../helpers'
|
53
|
-
|
54
|
-
Vue.component('tags-input', VoerroTagsInput)
|
55
|
-
|
56
|
-
export default {
|
57
|
-
props: ['spec', 'name', 'item'],
|
58
|
-
components: {
|
59
|
-
VoerroTagsInput
|
60
|
-
},
|
61
|
-
data() {
|
62
|
-
return {
|
63
|
-
object: this.item || {}
|
64
|
-
}
|
65
|
-
},
|
66
|
-
// beforeMount() {
|
67
|
-
// // console.log('DefaultInput', this.object, this.spec.default)
|
68
|
-
// // this.object[this.name] = this.object[this.name] || this.spec.default
|
69
|
-
// },
|
70
|
-
// created() {
|
71
|
-
// console.log('DefaultInput', this, this.spec, this.name, this.item)
|
72
|
-
// },
|
73
|
-
methods: {
|
74
|
-
tagArrayToObject(tags) {
|
75
|
-
return tags.reduce((acc, cur, i) => {
|
76
|
-
acc[cur] = cur
|
77
|
-
return acc
|
78
|
-
}, {})
|
79
|
-
}
|
80
|
-
}
|
81
|
-
}
|
82
|
-
</script>
|