Component: OptionsContainerComponent

Options Container Component that will generate options and compare from module options

created :
  • Get `options` from `this.getOptions` async function that call server GET route to get current user saved options
mounted :
  • Attach emit listener **on** for `customCodeEditor:getOptions` to `this.updateOptions`
beforeDestroy :
  • Attach emit listener **off** for `customCodeEditor:getOptions` to `this.updateOptions`
render :
  • Only render when `this.editor` & `this.optionsTypes` is available

Members

Props

innerreadonlypropcache Array.<Object> components/OptionsContainer.vue, line 47

Cache Storage

innerreadonlypropeditor aceEditor components/OptionsContainer.vue, line 55

Ace Editor JS

innerreadonlypropoptionsTypes optionsTypes components/OptionsContainer.vue, line 39

Default Options Types

innerreadonlypropsearch String components/OptionsContainer.vue, line 62

Search input

Data

inneroptions Object components/OptionsContainer.vue, line 79

To grab modified custom-code-editor module for editor options

inneroriginalOptions Object components/OptionsContainer.vue, line 75

To store original options

innertitleClick Object.<Boolean> components/OptionsContainer.vue, line 83

Title Click Check

Methods

innerbuttonOptionsClick(e) components/OptionsContainer.vue, line 205

Trigger emits

Parameters:
Name Type Description
e HTMLEvent

HTML Event Listener

asyncinnerdeleteOptions() → {Object} components/OptionsContainer.vue, line 181 

// Example object returns
{
     status: 'success',
     message: 'Success delete options!'
}
Returns:
Object

Returns status delete options

inneremitOptions(value) components/OptionsContainer.vue, line 1003

Emit Events to $root by check the input.type

Parameters:
Name Type Description
value Object

Grab Options Value

asyncinnergetOptions() → {Object} components/OptionsContainer.vue, line 127 

// Example object returns
{
     status: 'success',
     message: '{"cursorStyle": true}'
}
// Example empty object returns
{
     status: 'empty',
     message: '{}'
}
Returns:
Object
  • options object to override editor options

innerloopOptions(myOptions, h) → {Vue.VNode} components/OptionsContainer.vue, line 844

Loop function to loop with current save options and init with optionsInput() function

Parameters:
Name Type Description
myOptions Object

Object of editor options that either saved from user options or default value
h Vue.VNode

Vue render function
Returns:
Vue.VNode

Returns

    element that are grouped all the lists in the children

inneroptionsInputs(object, type, editor, h) → {Vue.VNode} components/OptionsContainer.vue, line 481

Init Options Lists and append to List Header

Parameters:
Name Type Description
object Object

Object of optionsTypes merge with saveValue
type String

Either slider, dropdownArray, dropdownObject or checkbox
editor aceEditor

Ace JS Editor
h Vue.VNode

Vue render function
Returns:
Vue.VNode

Returns Lists of options in a category

asyncinnersaveOptions(copyOptions) → {Object} components/OptionsContainer.vue, line 154 

// Example object returns
{
     status: 'success',
     message: 'Options saved!'
}
Parameters:
Name Type Description
copyOptions Object

Grab options object from modified options container and save it to current user logged in
Returns:
Object

Returns status from server

innerupdateOptions(e) components/OptionsContainer.vue, line 1107

Update Options whenever other similar OptionsContainer is modified

Parameters:
Name Type Description
e Event

Vue Event Emitter
Fires:

Events

customCodeEditor:getOptions components/OptionsContainer.vue, line 1012 

// This function emits on input type `select`
this.$root.$emit('customCodeEditor:getOptions', {
customCodeEditor: {
         field: this.$parent.field.name,
         input: input,
         name: input.name,
         value: value.toString(),
         action: button.className.replace('-options', '').trim(),
         options: allCopy,
         button: button
     }
});

customCodeEditor:getOptions components/OptionsContainer.vue, line 1043 

// This function emits on input type `range`
this.$root.$emit('customCodeEditor:getOptions', {
customCodeEditor: {
         field: this.$parent.field.name,
         input: input,
         name: input.name,
         value: parseFloat(input.value),
         action: button.className.replace('-options', '').trim(),
         options: allCopy,
         button: button
     }
});

customCodeEditor:getOptions components/OptionsContainer.vue, line 1074 

// This function emits on input type `checkbox`
this.$root.$emit('customCodeEditor:getOptions', {
customCodeEditor: {
         field: this.$parent.field.name,
         input: input,
         name: input.name,
         value: input.checked,
         action: button.className.replace('-options', '').trim(),
         options: allCopy,
         button: button
     }
});