|
@@ -0,0 +1,106 @@
|
|
|
+<?php
|
|
|
+if(!$contentData || !isset($contentData['text']) || !isset($contentData['was_confirmed'])) {
|
|
|
+ $contentData = [
|
|
|
+ "text" => '',
|
|
|
+ "was_confirmed" => false,
|
|
|
+ "note_uid" => (@$note ? $note->uid : ''),
|
|
|
+ ];
|
|
|
+}
|
|
|
+
|
|
|
+$formID = rand(0, 100000);
|
|
|
+?>
|
|
|
+<div id="ccMay21Section">
|
|
|
+ <input type="hidden" name="data" value="{{json_encode($contentData)}}">
|
|
|
+ <div class="border-right border-left">
|
|
|
+ <textarea class="form-group mb-2">{{$contentData['text']}}</textarea>
|
|
|
+ </div>
|
|
|
+ <label class="d-flex align-items-center my-3">
|
|
|
+ <input type="checkbox" v-model="data.was_confirmed" {{$contentData['was_confirmed'] ? 'checked' : ''}} class="my-0 mr-2">
|
|
|
+ <span>Confirm</span>
|
|
|
+ </label>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ (function() {
|
|
|
+ function init() {
|
|
|
+ window.clientCCMay21App = new Vue({
|
|
|
+ el: '#ccMay21Section',
|
|
|
+ data: {
|
|
|
+ data: <?= json_encode($contentData) ?>
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ this.initRTE();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $data: {
|
|
|
+ handler: function(val, oldVal) {
|
|
|
+ $(this.$el).closest('#ccMay21Section').find('[name="data"]').val(JSON.stringify({
|
|
|
+ text: this.data.text,
|
|
|
+ was_confirmed: this.data.was_confirmed,
|
|
|
+ note_uid: '{{(@$note ? $note->uid : '')}}',
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cleanArray: function(_source) {
|
|
|
+ let plItems = [], plObject = {};
|
|
|
+ for (let x=0; x<_source.length; x++) {
|
|
|
+ plObject = {};
|
|
|
+ for (let y in _source[x]) {
|
|
|
+ if(_source[x].hasOwnProperty(y)) {
|
|
|
+ plObject[y] = _source[x][y];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ plItems.push(plObject);
|
|
|
+ }
|
|
|
+ return plItems;
|
|
|
+ },
|
|
|
+ initRTE: function() {
|
|
|
+ let self = this;
|
|
|
+ $('#ccMay21Section textarea').each(function() {
|
|
|
+
|
|
|
+ $(this).wrap(
|
|
|
+ $('<div class="rte-holder"/>')
|
|
|
+ .attr('data-shortcuts', '')
|
|
|
+ );
|
|
|
+
|
|
|
+ // give a unique id to this editor instance
|
|
|
+ var editorID = Math.ceil(Math.random() * 99999);
|
|
|
+
|
|
|
+ $('<div data-editor-id="' + editorID + '" data-field="' + this.name + '"/>')
|
|
|
+ .html(this.value)
|
|
|
+ .insertBefore(this);
|
|
|
+
|
|
|
+ $(this).remove();
|
|
|
+
|
|
|
+ var qe = new Quill('[data-editor-id="' + editorID + '"]', {
|
|
|
+ theme: 'snow',
|
|
|
+ modules: stagQuillConfig
|
|
|
+ });
|
|
|
+
|
|
|
+ var toolbar = $(qe.container).prev('.ql-toolbar');
|
|
|
+
|
|
|
+ // add button for new shortcut
|
|
|
+ var newSCButton = $('<button type="button" tabindex="-1" ' +
|
|
|
+ 'class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
|
|
|
+ 'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
|
|
|
+ toolbar.append(newSCButton);
|
|
|
+
|
|
|
+ qe.on('text-change', function() {
|
|
|
+ self.data.text = qe.root.innerHTML;
|
|
|
+ });
|
|
|
+
|
|
|
+ $(qe.container)
|
|
|
+ .find('.ql-editor[contenteditable]')
|
|
|
+ .attr('data-editor-id', editorID)
|
|
|
+ .attr('with-shortcuts', 1);
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ addMCInitializer('client-ccMay21', init, '#ccMay21Section');
|
|
|
+ })();
|
|
|
+</script>
|