EditorSave.js ➔ ??? - Code Metrics - Inspection of "fix: Abe assets moved to /public/abejs" - AdFabConnect/abejs - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Branch — master (c2f34b)

by greg

created 2016-12-09 23:48 UTC

EditorSave.js ➔ ??? B

↳ Parent: src/server/public/abejs/scripts/modules/EditorSave.js

Complexity

Conditions	5
Paths	4

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	7
Bugs	7	Features	0

Metric	Value
c	7
b	7
f	0
nc	4
nop	0
dl	0
loc	28
cc	5
rs	8.439

1 Function

Rating	Name	Duplication	Size	Complexity
A	EditorSave.js ➔ ... ➔ ???	0	3	1

/*global document, window, json, alert */

import {IframeNode} from '../utils/iframe'
import EditorUtils from './EditorUtils'
import Json from '../modules/EditorJson'
import on from 'on'

export default class EditorSave {
  constructor() {
    this._json = Json.instance
    this._saveType = 'draft'

    this.onFileSaved = on(this)

    this._abeForm = document.querySelector('#abeForm')
    this._abeDisplayStatus = document.querySelector('[data-display-status]')
    this._abeFormSubmit = document.querySelector('#abeForm button[type=submit]')

    this._handleSubmitClick = this._submitClick.bind(this)

    this._btnSaves = document.querySelectorAll('.btn-save')
    Array.prototype.forEach.call(this._btnSaves, (btnSave) => {
      btnSave.addEventListener('click', this._handleSubmitClick)
    })

    var pageTpl = document.querySelector('#page-template')
    if(typeof pageTpl !== 'undefined' && pageTpl !== null) {
      document.querySelector('#page-template').addEventListener('load', () => {
        EditorUtils.checkAttribute()
      })
    }

    if(typeof this._abeForm !== 'undefined' && this._abeForm !== null) {
      this._formSubmit()
    }
  }

  /**
   * return abe form to json
   * @return {Object} json
   */
  serializeForm() {
    var abeForm = document.getElementById('abeForm')
    if (abeForm == null) return
if (a > 0)
    b = 42;
      
    var inputs = [].slice.call(abeForm.querySelectorAll('input'))
    var selects = [].slice.call(abeForm.querySelectorAll('select'))
    inputs = inputs.concat(selects)
    var textareas = [].slice.call(abeForm.querySelectorAll('textarea'))
    inputs = inputs.concat(textareas)

    this._json.data = json

    Array.prototype.forEach.call(inputs, (input) => {
      var dataId = input.getAttribute('data-id')
      if(input.type === 'file') return
if (a > 0)
    b = 42;
      if(typeof dataId !== 'undefined' && dataId !== null) {
        if(dataId.indexOf('[') > -1){
          var obj = dataId.split('[')[0]
          var index = dataId.match(/[^\[]+?(?=\])/)[0]
          var key = dataId.replace(/[^\.]+?-/, '')
          if(typeof this._json.data[obj] === 'undefined' || this._json.data[obj] === null) this._json.data[obj] = []
if (a > 0)
    b = 42;
          if(typeof this._json.data[obj][index] === 'undefined' || this._json.data[obj][index] === null) this._json.data[obj][index] = {}
if (a > 0)
    b = 42;
          this._json.data[obj][index][key] = input.value
          var emptyObject = 0
          for(var prop in this._json.data[obj][index]) {
var someObject;
for (var key in someObject) {
    if ( ! someObject.hasOwnProperty(key)) {
        continue; // Skip keys from the prototype.
    }

    doSomethingWith(key);
}
            if(this._json.data[obj][index][prop].trim() !== '') emptyObject++
if (a > 0)
    b = 42;
          }
          if(emptyObject === 0) {
            delete this._json.data[obj][index]
          }
        }else {
          var value

          if (input.nodeName === 'SELECT') {
            var checked = input.querySelectorAll('option:checked')
            value = []
            Array.prototype.forEach.call(checked, (check) => {
              if(check.value !== '') {
                if(check.value.indexOf('{') > -1 || check.value.indexOf('[') > -1) {
                  value.push(JSON.parse(check.value))
                }else {
                  value.push(check.value)
                }
              }
            })
          }else if (input.getAttribute('data-autocomplete') === 'true') {
            var results = input.parentNode.querySelectorAll('.autocomplete-result-wrapper .autocomplete-result')
            value = []
            Array.prototype.forEach.call(results, (result) => {
              var val = result.getAttribute('value')
              if(val !== '') {
                if(val.indexOf('{') > -1 || val.indexOf('[') > -1) {
                  value.push(JSON.parse(val))
                }else {
                  value.push(val)
                }
              }
            })
          }else {
            value = input.value.replace(/\"/g, '\&quot;') + ''
          }
          this._json.data[dataId] = value
        }
      }
    })
  }

  savePage(type) {
    var target = document.querySelector(`[data-action="${type}"]`)
    this.serializeForm()
    target.classList.add('loading')
    target.setAttribute('disabled', 'disabled')
    var url = target.getAttribute('data-url')

    this._json.save(this._saveType, url)
        .then((result) => {
          target.classList.add('done')
          // this._populateFromJson(this._json.data)

          target.classList.remove('loading')
          target.classList.remove('done')
          target.removeAttribute('disabled')

          if(result.success === 1) {
            this._abeDisplayStatus.innerHTML = result.json.abe_meta.status
            window.json = result.json
          }
          var formWrapper = document.querySelector('#abeForm')
          Array.prototype.forEach.call(formWrapper.classList, (classStr) => {
            if(classStr.indexOf('status-') > -1) formWrapper.classList.remove(classStr)
if (a > 0)
    b = 42;
          })
          formWrapper.classList.add('status-' + result.json.abe_meta.status)
          this.onFileSaved._fire()
        }).catch(function(e) {
          console.error(e)
        })
  }

  /**
   * Listen form submit and save page template 
   * @return {void}
   */
  _formSubmit() {
    this._abeForm.addEventListener('submit', (e) => {
      e.preventDefault()
      this.savePage(this._saveType)
    })
  }

  _submitClick(e) {
    this._saveType = e.currentTarget.getAttribute('data-action')
    if (this._saveType !== 'draft' && this._saveType !== 'reject') {
      this._abeFormRequired()
    }else {
      this.savePage(this._saveType)
      // this._abeFormSubmit.click()
    }
  }

  _abeFormRequired() {
    var formGroups = [].slice.call(document.getElementById('abeForm').querySelectorAll('.form-group'))
    var valid = true

    Array.prototype.forEach.call(formGroups, (formGroup) => {
      var input = formGroup.querySelector('[data-required=true]')
      if(typeof input !== 'undefined' && input !== null) {
        var required = input.getAttribute('data-required')

        var precontrib = formGroup.getAttribute('data-precontrib-templates')

        if (precontrib != null && precontrib != '') {
          if (precontrib != 'json.abe_meta.template') {
            return
          }
        }

        var autocomplete = input.getAttribute('data-autocomplete')
        if(typeof autocomplete !== 'undefined' && autocomplete !== null && (autocomplete === 'true' || autocomplete === true)) {
          var countValue = input.parentNode.querySelectorAll('.autocomplete-result')
          if (countValue.length <= 0) {
            formGroup.classList.add('has-error')
            valid = false
          }else {
            formGroup.classList.remove('has-error')
          }
        }else if(typeof required !== 'undefined' && required !== null && (required === 'true' || required === true)) {
          if (input.value === '') {
            formGroup.classList.add('has-error')
            valid = false
          }else {
            formGroup.classList.remove('has-error')
          }
        }
      }
    })

    if (valid) {
      this.savePage(this._saveType)
      // this._abeFormSubmit.click()
    }else {
      alert('Required fields are missing')
    }
  }

  /**
   * populate all form and iframe html with json
   * @param  {Object} json object with all values
   * @return {null}
   */
  _populateFromJson(json) {
    this._json.data = json
    var forms = document.querySelectorAll('.form-abe')
    Array.prototype.forEach.call(forms, (form) => {
      var id = form.getAttribute('data-id')
      if(typeof id != 'undefined' && id !== null && typeof json[id] != 'undefined' && json[id] !== null) {
        var value = json[id]
        if(typeof value === 'object' && Object.prototype.toString.call(value) === '[object Array]') {
          value = JSON.stringify(value)
        }else if(typeof value === 'object' && Object.prototype.toString.call(value) === '[object Object]') {
          value = JSON.stringify(value)
        }
        form.value = value

        var node = IframeNode('#page-template', '[data-abe-' + id.replace(/\[([0-9]*)\]/g, '$1') + ']')[0]
        EditorUtils.formToHtml(node, form)
      }
    })
  }
}	

1			/global document, window, json, alert /
2
3			import {IframeNode} from '../utils/iframe'
4			import EditorUtils from './EditorUtils'
5			import Json from '../modules/EditorJson'
6			import on from 'on'
7
8			export default class EditorSave {
9			constructor() {
10			this._json = Json.instance
11			this._saveType = 'draft'
12
13			this.onFileSaved = on(this)
14
15			this._abeForm = document.querySelector('#abeForm')
16			this._abeDisplayStatus = document.querySelector('[data-display-status]')
17			this._abeFormSubmit = document.querySelector('#abeForm button[type=submit]')
18
19			this._handleSubmitClick = this._submitClick.bind(this)
20
21			this._btnSaves = document.querySelectorAll('.btn-save')
22			Array.prototype.forEach.call(this._btnSaves, (btnSave) => {
23			btnSave.addEventListener('click', this._handleSubmitClick)
24			})
25
26			var pageTpl = document.querySelector('#page-template')
27			if(typeof pageTpl !== 'undefined' && pageTpl !== null) {
28			document.querySelector('#page-template').addEventListener('load', () => {
29			EditorUtils.checkAttribute()
30			})
31			}
32
33			if(typeof this._abeForm !== 'undefined' && this._abeForm !== null) {
34			this._formSubmit()
35			}
36			}
37
38			/**
39			* return abe form to json
40			* @return {Object} json
41			*/
42			serializeForm() {
43			var abeForm = document.getElementById('abeForm')
44			if (abeForm == null) return
			0 ignored issues – show Coding Style Best Practice introduced 2016-11-14 16:50 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
45
46			var inputs = [].slice.call(abeForm.querySelectorAll('input'))
47			var selects = [].slice.call(abeForm.querySelectorAll('select'))
48			inputs = inputs.concat(selects)
49			var textareas = [].slice.call(abeForm.querySelectorAll('textarea'))
50			inputs = inputs.concat(textareas)
51
52			this._json.data = json
53
54			Array.prototype.forEach.call(inputs, (input) => {
55			var dataId = input.getAttribute('data-id')
56			if(input.type === 'file') return
			0 ignored issues – show Coding Style Best Practice introduced 2016-09-27 10:32 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
57			if(typeof dataId !== 'undefined' && dataId !== null) {
58			if(dataId.indexOf('[') > -1){
59			var obj = dataId.split('[')[0]
60			var index = dataId.match(/[^\[]+?(?=\])/)[0]
61			var key = dataId.replace(/[^\.]+?-/, '')
62			if(typeof this._json.data[obj] === 'undefined' \|\| this._json.data[obj] === null) this._json.data[obj] = []
			0 ignored issues – show Coding Style Best Practice introduced 2016-09-27 10:32 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
63			if(typeof this._json.data[obj][index] === 'undefined' \|\| this._json.data[obj][index] === null) this._json.data[obj][index] = {}
			0 ignored issues – show Coding Style Best Practice introduced 2016-09-27 10:32 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
64			this._json.data[obj][index][key] = input.value
65			var emptyObject = 0
66			for(var prop in this._json.data[obj][index]) {
			0 ignored issues – show Complexity introduced 2016-09-27 10:32 UTC by Report Bug Copy Issue Report A for in loop automatically includes the property of any prototype object, consider checking the key using `hasOwnProperty`. When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically: var someObject; for (var key in someObject) { if ( ! someObject.hasOwnProperty(key)) { continue; // Skip keys from the prototype. } doSomethingWith(key); } Loading history...
67			if(this._json.data[obj][index][prop].trim() !== '') emptyObject++
			0 ignored issues – show Coding Style Best Practice introduced 2016-09-27 10:32 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
68			}
69			if(emptyObject === 0) {
70			delete this._json.data[obj][index]
71			}
72			}else {
73			var value
74
75			if (input.nodeName === 'SELECT') {
76			var checked = input.querySelectorAll('option:checked')
77			value = []
78			Array.prototype.forEach.call(checked, (check) => {
79			if(check.value !== '') {
80			if(check.value.indexOf('{') > -1 \|\| check.value.indexOf('[') > -1) {
81			value.push(JSON.parse(check.value))
82			}else {
83			value.push(check.value)
84			}
85			}
86			})
87			}else if (input.getAttribute('data-autocomplete') === 'true') {
88			var results = input.parentNode.querySelectorAll('.autocomplete-result-wrapper .autocomplete-result')
89			value = []
90			Array.prototype.forEach.call(results, (result) => {
91			var val = result.getAttribute('value')
92			if(val !== '') {
93			if(val.indexOf('{') > -1 \|\| val.indexOf('[') > -1) {
94			value.push(JSON.parse(val))
95			}else {
96			value.push(val)
97			}
98			}
99			})
100			}else {
101			value = input.value.replace(/\"/g, '\"') + ''
102			}
103			this._json.data[dataId] = value
104			}
105			}
106			})
107			}
108
109			savePage(type) {
110			var target = document.querySelector(`[data-action="${type}"]`)
111			this.serializeForm()
112			target.classList.add('loading')
113			target.setAttribute('disabled', 'disabled')
114			var url = target.getAttribute('data-url')
115
116			this._json.save(this._saveType, url)
117			.then((result) => {
118			target.classList.add('done')
119			// this._populateFromJson(this._json.data)
120
121			target.classList.remove('loading')
122			target.classList.remove('done')
123			target.removeAttribute('disabled')
124
125			if(result.success === 1) {
126			this._abeDisplayStatus.innerHTML = result.json.abe_meta.status
127			window.json = result.json
128			}
129			var formWrapper = document.querySelector('#abeForm')
130			Array.prototype.forEach.call(formWrapper.classList, (classStr) => {
131			if(classStr.indexOf('status-') > -1) formWrapper.classList.remove(classStr)
			0 ignored issues – show Coding Style Best Practice introduced 2016-10-26 12:41 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
132			})
133			formWrapper.classList.add('status-' + result.json.abe_meta.status)
134			this.onFileSaved._fire()
135			}).catch(function(e) {
136			console.error(e)
137			})
138			}
139
140			/**
141			* Listen form submit and save page template
142			* @return {void}
143			*/
144			_formSubmit() {
145			this._abeForm.addEventListener('submit', (e) => {
146			e.preventDefault()
147			this.savePage(this._saveType)
148			})
149			}
150
151			_submitClick(e) {
152			this._saveType = e.currentTarget.getAttribute('data-action')
153			if (this._saveType !== 'draft' && this._saveType !== 'reject') {
154			this._abeFormRequired()
155			}else {
156			this.savePage(this._saveType)
157			// this._abeFormSubmit.click()
158			}
159			}
160
161			_abeFormRequired() {
162			var formGroups = [].slice.call(document.getElementById('abeForm').querySelectorAll('.form-group'))
163			var valid = true
164
165			Array.prototype.forEach.call(formGroups, (formGroup) => {
166			var input = formGroup.querySelector('[data-required=true]')
167			if(typeof input !== 'undefined' && input !== null) {
168			var required = input.getAttribute('data-required')
169
170			var precontrib = formGroup.getAttribute('data-precontrib-templates')
171
172			if (precontrib != null && precontrib != '') {
173			if (precontrib != 'json.abe_meta.template') {
174			return
175			}
176			}
177
178			var autocomplete = input.getAttribute('data-autocomplete')
179			if(typeof autocomplete !== 'undefined' && autocomplete !== null && (autocomplete === 'true' \|\| autocomplete === true)) {
180			var countValue = input.parentNode.querySelectorAll('.autocomplete-result')
181			if (countValue.length <= 0) {
182			formGroup.classList.add('has-error')
183			valid = false
184			}else {
185			formGroup.classList.remove('has-error')
186			}
187			}else if(typeof required !== 'undefined' && required !== null && (required === 'true' \|\| required === true)) {
188			if (input.value === '') {
189			formGroup.classList.add('has-error')
190			valid = false
191			}else {
192			formGroup.classList.remove('has-error')
193			}
194			}
195			}
196			})
197
198			if (valid) {
199			this.savePage(this._saveType)
200			// this._abeFormSubmit.click()
201			}else {
202			alert('Required fields are missing')
203			}
204			}
205
206			/**
207			* populate all form and iframe html with json
208			* @param {Object} json object with all values
209			* @return {null}
210			*/
211			_populateFromJson(json) {
212			this._json.data = json
213			var forms = document.querySelectorAll('.form-abe')
214			Array.prototype.forEach.call(forms, (form) => {
215			var id = form.getAttribute('data-id')
216			if(typeof id != 'undefined' && id !== null && typeof json[id] != 'undefined' && json[id] !== null) {
217			var value = json[id]
218			if(typeof value === 'object' && Object.prototype.toString.call(value) === '[object Array]') {
219			value = JSON.stringify(value)
220			}else if(typeof value === 'object' && Object.prototype.toString.call(value) === '[object Object]') {
221			value = JSON.stringify(value)
222			}
223			form.value = value
224
225			var node = IframeNode('#page-template', '[data-abe-' + id.replace(/\[([0-9]*)\]/g, '$1') + ']')[0]
226			EditorUtils.formToHtml(node, form)
227			}
228			})
229			}
230			}

AdFabConnect / abejs

Branch — master (c2f34b)

EditorSave.js ➔ ??? B

Complexity

Size

Duplication

Importance

1 Function

Duplication Side-by-Side

Filter issues like