rich-texarea.js ➔ ??? - Code Metrics - Inspection of "Merge pull request #80 from AdFabConnect/type_rich..." - AdFabConnect/abejs - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( 395a8a...5b5be3 )

by greg

created 2016-12-14 15:38 UTC

rich-texarea.js ➔ ??? B

↳ Parent: src/server/public/abejs/scripts/utils/rich-texarea.js

Complexity

Conditions	2
Paths	2

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	8
Bugs	4	Features	0

Metric	Value
cc	2
c	8
b	4
f	0
nc	2
nop	5
dl	0
loc	24
rs	8.9713

1 Function

Rating	Name	Duplication	Size	Complexity
A	rich-texarea.js ➔ ... ➔ ???	0	3	1

/*global window, document, wysiwyg */

export default class RichTexarea {

  constructor(wrapper, color, link, image, smiley) {
    this.color = color
    this.link = link
    this.image = image
    this.smiley = smiley
    this.wrapper = wrapper
    this.textarea = wrapper.querySelector('.form-rich')
    this.btns = this.wrapper.querySelectorAll('.wysiwyg-toolbar-icon')
    
    if (this.textarea.getAttribute('disabled') !== 'disabled') {
      this.textEditor = wysiwyg({
        element: this.textarea,
        onKeyUp: () => {
          this.setHTML()
        },
        hijackContextmenu: false
      })

      this._action = this.action.bind(this)
      Array.prototype.forEach.call(this.btns, (btn) => {
        btn.addEventListener('click', this._action)
      })
    }
  }

  setHTML() {
    this.textarea.innerHTML = this.textEditor.getHTML()
    var evt = document.createEvent('KeyboardEvent')
    evt.initKeyboardEvent('keyup', true, true, window, 0, 0, 0, 0, 0, 'e'.charCodeAt(0)) 
    this.textarea.dispatchEvent(evt)
  }

  _replaceSelectionWithHtml(html) {
    if(document.activeElement.getAttribute('contenteditable') != null) {
      var range
      if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0)
        range.deleteContents()
        var div = document.createElement('div')
        div.innerHTML = html
        var frag = document.createDocumentFragment(), child
        while ( (child = div.firstChild) ) {
          frag.appendChild(child)
        }
        range.insertNode(frag)
      } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange()
        html = (node.nodeType == 3) ? node.data : node.outerHTML

        range.pasteHTML(html)
      }
    }
    else {
      this.wrapper.querySelector('[contenteditable]').focus()
      this._replaceSelectionWithHtml(html)
    }
  }

  action(e) {
    this.el = e.target
    if(this.el.tagName.toLowerCase() === 'span') this.el = this.el.parentNode
if (a > 0)
    b = 42;

    this.action = this.el.getAttribute('data-action')
    this.popup = this.el.getAttribute('data-popup')
    this.param = this.el.getAttribute('data-param')
    if(typeof this.popup !== 'undefined' && this.popup !== null){
      var off
      switch(this.popup){

      case 'color':
        off = this.color.onColor((color) => {
          if(color !== null) {
            this.textEditor[this.action](color)
            this.setHTML()
          }
          off()
        })
        this.color.show(this.el)
        break
      case 'link':
        var html = this.textEditor.getHTML()
        this._replaceSelectionWithHtml(`<a href="[LINK]" target="[TARGET]" rel="[REL]">${window.getSelection().toString()}</a>`)
        off = this.link.onLink((obj) => {
          if(obj.link !== null) {
            html = this.textEditor.getHTML().replace('[LINK]', obj.link)
            if(obj.target)    html = html.replace(/\[TARGET\]/, '_blank')
if (a > 0)
    b = 42;
            else              html = html.replace(/target=\"\[TARGET\]\"/, '')
            if(obj.noFollow)  html = html.replace(/\[REL\]/, 'nofollow')
if (a > 0)
    b = 42;
            else              html = html.replace(/rel=\"\[REL\]\"/, '')
            this.textEditor.setHTML(html)
          }
          else this.textEditor.setHTML(html)
if (a > 0)
    b = 42;
          this.setHTML()
          off()
        })
        this.link.show(this.el)
        break
        case 'image':
          var html = this.textEditor.getHTML()

          this._replaceSelectionWithHtml(`${window.getSelection().toString()}[MEDIA]`)
          off = this.image.onImg((obj) => {
            if(obj.image.indexOf('.mp4') > 0){
              html = this.textEditor.getHTML().replace('[MEDIA]', `<video controls><source src="${obj.image}" type="video/mp4"></source></video>`)
            }
            else{
              this.textEditor[this.action](obj.image) 
              html = this.textEditor.getHTML().replace('[MEDIA]', '')
            }
            this.textEditor.setHTML(html)
            this.setHTML()
            off()
          })
          this.image.show(this.el)
          break
        case 'smiley':
          var html = this.textEditor.getHTML()

          off = this.smiley.onSmiley((obj) => {
            this._replaceSelectionWithHtml(obj)
            this.textEditor.setHTML(this.textEditor.getHTML())
            this.setHTML()
            off()
          })
          this.smiley.show(this.el)
          break
      }
    }
    else if(this.action === 'code'){
      this._replaceSelectionWithHtml(`<pre><code>${window.getSelection().toString()}</code></pre>`)
      this.textEditor.setHTML(this.textEditor.getHTML())
      this.setHTML()
    }
    else{
      this.textEditor[this.action](this.param)
      this.setHTML()
    }

  }

}


1			/global window, document, wysiwyg /
2
3			export default class RichTexarea {
4
5			constructor(wrapper, color, link, image, smiley) {
6			this.color = color
7			this.link = link
8			this.image = image
9			this.smiley = smiley
10			this.wrapper = wrapper
11			this.textarea = wrapper.querySelector('.form-rich')
12			this.btns = this.wrapper.querySelectorAll('.wysiwyg-toolbar-icon')
13
14			if (this.textarea.getAttribute('disabled') !== 'disabled') {
15			this.textEditor = wysiwyg({
16			element: this.textarea,
17			onKeyUp: () => {
18			this.setHTML()
19			},
20			hijackContextmenu: false
21			})
22
23			this._action = this.action.bind(this)
24			Array.prototype.forEach.call(this.btns, (btn) => {
25			btn.addEventListener('click', this._action)
26			})
27			}
28			}
29
30			setHTML() {
31			this.textarea.innerHTML = this.textEditor.getHTML()
32			var evt = document.createEvent('KeyboardEvent')
33			evt.initKeyboardEvent('keyup', true, true, window, 0, 0, 0, 0, 0, 'e'.charCodeAt(0))
34			this.textarea.dispatchEvent(evt)
35			}
36
37			_replaceSelectionWithHtml(html) {
38			if(document.activeElement.getAttribute('contenteditable') != null) {
39			var range
40			if (window.getSelection && window.getSelection().getRangeAt) {
41			range = window.getSelection().getRangeAt(0)
42			range.deleteContents()
43			var div = document.createElement('div')
44			div.innerHTML = html
45			var frag = document.createDocumentFragment(), child
46			while ( (child = div.firstChild) ) {
47			frag.appendChild(child)
48			}
49			range.insertNode(frag)
50			} else if (document.selection && document.selection.createRange) {
51			range = document.selection.createRange()
52			html = (node.nodeType == 3) ? node.data : node.outerHTML
			0 ignored issues – show Bug introduced 2016-09-27 10:32 UTC by Report Bug Copy Issue Report The variable `node` seems to be never declared. If this is a global, consider adding a `/** global: node */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
53			range.pasteHTML(html)
54			}
55			}
56			else {
57			this.wrapper.querySelector('[contenteditable]').focus()
58			this._replaceSelectionWithHtml(html)
59			}
60			}
61
62			action(e) {
63			this.el = e.target
64			if(this.el.tagName.toLowerCase() === 'span') this.el = this.el.parentNode
			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...
65
66			this.action = this.el.getAttribute('data-action')
67			this.popup = this.el.getAttribute('data-popup')
68			this.param = this.el.getAttribute('data-param')
69			if(typeof this.popup !== 'undefined' && this.popup !== null){
70			var off
71			switch(this.popup){
			0 ignored issues – show Coding Style introduced 2016-09-27 10:32 UTC by Report Bug Copy Issue Report As per coding-style, `switch` statements should have a `default` case. Loading history...
72			case 'color':
73			off = this.color.onColor((color) => {
74			if(color !== null) {
75			this.textEditor[this.action](color)
76			this.setHTML()
77			}
78			off()
79			})
80			this.color.show(this.el)
81			break
82			case 'link':
83			var html = this.textEditor.getHTML()
84			this._replaceSelectionWithHtml(`<a href="[LINK]" target="[TARGET]" rel="[REL]">${window.getSelection().toString()}</a>`)
85			off = this.link.onLink((obj) => {
86			if(obj.link !== null) {
87			html = this.textEditor.getHTML().replace('[LINK]', obj.link)
88			if(obj.target) html = html.replace(/\[TARGET\]/, '_blank')
			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...
89			else html = html.replace(/target=\"\[TARGET\]\"/, '')
90			if(obj.noFollow) html = html.replace(/\[REL\]/, 'nofollow')
			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...
91			else html = html.replace(/rel=\"\[REL\]\"/, '')
92			this.textEditor.setHTML(html)
93			}
94			else this.textEditor.setHTML(html)
			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...
95			this.setHTML()
96			off()
97			})
98			this.link.show(this.el)
99			break
100			case 'image':
101			var html = this.textEditor.getHTML()
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2016-12-14 13:31 UTC by Report Bug Copy Issue Report The variable `html` already seems to be declared on line `83`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history...
102			this._replaceSelectionWithHtml(`${window.getSelection().toString()}[MEDIA]`)
103			off = this.image.onImg((obj) => {
104			if(obj.image.indexOf('.mp4') > 0){
105			html = this.textEditor.getHTML().replace('[MEDIA]', `<video controls><source src="${obj.image}" type="video/mp4"></source></video>`)
106			}
107			else{
108			this.textEditor[this.action](obj.image)
109			html = this.textEditor.getHTML().replace('[MEDIA]', '')
110			}
111			this.textEditor.setHTML(html)
112			this.setHTML()
113			off()
114			})
115			this.image.show(this.el)
116			break
117			case 'smiley':
118			var html = this.textEditor.getHTML()
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2016-12-14 13:31 UTC by Report Bug Copy Issue Report The variable `html` already seems to be declared on line `83`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history...
119			off = this.smiley.onSmiley((obj) => {
120			this._replaceSelectionWithHtml(obj)
121			this.textEditor.setHTML(this.textEditor.getHTML())
122			this.setHTML()
123			off()
124			})
125			this.smiley.show(this.el)
126			break
127			}
128			}
129			else if(this.action === 'code'){
130			this._replaceSelectionWithHtml(`<pre><code>${window.getSelection().toString()}</code></pre>`)
131			this.textEditor.setHTML(this.textEditor.getHTML())
132			this.setHTML()
133			}
134			else{
135			this.textEditor[this.action](this.param)
136			this.setHTML()
137			}
138
139			}
140
141			}
142

AdFabConnect / abejs

Push — master ( 395a8a...5b5be3 )

rich-texarea.js ➔ ??? B

Complexity

Size

Duplication

Importance

1 Function

Duplication Side-by-Side

Filter issues like