AdFabConnect /
abejs
| Conditions | 23 |
| Paths | 240 |
| Total Lines | 215 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 3 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like printInput.js ➔ printInput often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | import sourceAutocomplete from './sourceAutocomplete' |
||
| 12 | export default function printInput () { |
||
| 13 | var params = arguments[0] |
||
| 14 | params = abeExtend.hooks.instance.trigger('beforeEditorInput', params) |
||
| 15 | var desc = params.desc + ((params.required) ? ' *' : '') |
||
| 16 | |||
| 17 | var res = `<div class="form-group"> |
||
| 18 | <label class="control-label" for="${params.key}" |
||
| 19 | ${(params.type.indexOf('text_link') > -1) ? 'data-for-link="' + params.key + '"' : ''} > |
||
| 20 | ${desc} |
||
| 21 | </label>` |
||
| 22 | var disabled = '' |
||
| 23 | |||
| 24 | if(!params.placeholder) { |
||
| 25 | params.placeholder = '' |
||
| 26 | } |
||
| 27 | |||
| 28 | if(params.value == null) { |
||
| 29 | params.value = '' |
||
| 30 | } |
||
| 31 | |||
| 32 | if(typeof params.value === 'string') params.value = params.value.replace(/\"/g, '"') |
||
|
|
|||
| 33 | |||
| 34 | var inputClass = 'form-control form-abe' |
||
| 35 | var commonParams = `id="${params.key}" |
||
| 36 | data-id="${params.key}" |
||
| 37 | value="${params.value}" |
||
| 38 | maxlength="${params['max-length']}" |
||
| 39 | reload="${params.reload}" |
||
| 40 | tabIndex="${params.order}" |
||
| 41 | data-required="${params.required}" |
||
| 42 | data-display="${params.display}" |
||
| 43 | data-visible="${params.visible}" |
||
| 44 | data-autocomplete="${params.autocomplete}" |
||
| 45 | placeholder="${params.placeholder}"` |
||
| 46 | |||
| 47 | if(params.source != null) { |
||
| 48 | commonParams = `id="${params.key}" |
||
| 49 | data-id="${params.key}" |
||
| 50 | data-maxlength="${params['max-length']}" |
||
| 51 | reload="${params.reload}" |
||
| 52 | tabIndex="${params.order}" |
||
| 53 | data-required="${params.required}" |
||
| 54 | data-display="${params.display}" |
||
| 55 | data-visible="${params.visible}" |
||
| 56 | data-autocomplete="${params.autocomplete}" |
||
| 57 | placeholder="${params.placeholder}"` |
||
| 58 | |||
| 59 | var multiple = '' |
||
| 60 | disabled = '' |
||
| 61 | if(params['max-length'] || (params['max-length'] > 1 && params.source.length > 0)) { |
||
| 62 | multiple = 'multiple' |
||
| 63 | } |
||
| 64 | if(params.source.length <= 0) { |
||
| 65 | disabled = 'disabled' |
||
| 66 | } |
||
| 67 | |||
| 68 | var lastValues |
||
| 69 | if(params.autocomplete != null && params.autocomplete === 'true') { |
||
| 70 | if(params.source.indexOf('http') === 0) { |
||
| 71 | lastValues = params.source |
||
| 72 | }else { |
||
| 73 | lastValues = JSON.stringify(params.source).replace(/\'/g, '"e;') |
||
| 74 | } |
||
| 75 | res += '<div class="autocomplete-result-wrapper">' |
||
| 76 | if(params.autocomplete != null && params.autocomplete === 'true') { |
||
| 77 | res += `<div class="autocomplete-refresh" value='' |
||
| 78 | data-autocomplete-refresh="true" |
||
| 79 | data-autocomplete-refresh-sourcestring="${params.sourceString}" |
||
| 80 | data-autocomplete-refresh-prefill-quantity="${params['prefill-quantity']}" |
||
| 81 | data-autocomplete-refresh-key="${params.key}" |
||
| 82 | data-autocomplete-data-display="${params.display}" |
||
| 83 | > |
||
| 84 | <span class="glyphicon glyphicon-refresh"></span> |
||
| 85 | </div>` |
||
| 86 | } |
||
| 87 | Array.prototype.forEach.call(params.value, (val) => { |
||
| 88 | res += sourceAutocomplete(val, params) |
||
| 89 | }) |
||
| 90 | res += '</div>' |
||
| 91 | res += `<input value="" autocomplete="off" data-value='${lastValues}' type="text" ${disabled} ${commonParams} class="${inputClass}" />` |
||
| 92 | }else { |
||
| 93 | lastValues = JSON.stringify(params.value).replace(/\'/g, '"e;') |
||
| 94 | res += `<select ${multiple} ${disabled} ${commonParams} class="${inputClass}" |
||
| 95 | last-values='${lastValues}'> |
||
| 96 | <option value=''></option>` |
||
| 97 | |||
| 98 | if(typeof params.source === 'object' && Object.prototype.toString.call(params.source) === '[object Array]') { |
||
| 99 | Array.prototype.forEach.call(params.source, (val) => { |
||
| 100 | res += sourceOption(val, params) |
||
| 101 | }) |
||
| 102 | |||
| 103 | }else { |
||
| 104 | res += sourceOption(params.source, params) |
||
| 105 | } |
||
| 106 | |||
| 107 | res += '</select>' |
||
| 108 | |||
| 109 | } |
||
| 110 | }else if (params.type.indexOf('rich') >= 0){ |
||
| 111 | commonParams = `id="${params.key}" |
||
| 112 | data-id="${params.key}" |
||
| 113 | maxlength="${params['max-length']}" |
||
| 114 | reload="${params.reload}" |
||
| 115 | tabIndex="${params.order}" |
||
| 116 | data-required="${params.required}" |
||
| 117 | data-display="${params.display}" |
||
| 118 | data-visible="${params.visible}" |
||
| 119 | data-autocomplete="${params.autocomplete}" |
||
| 120 | placeholder="${params.placeholder}"` |
||
| 121 | |||
| 122 | res += `<div class="wysiwyg-container rich"> |
||
| 123 | <div class="wysiwyg-toolbar wysiwyg-toolbar-top"> |
||
| 124 | <a class="wysiwyg-toolbar-icon" href="#" title="Bold (Ctrl+B)" hotkey="b" data-action="bold" data-param=""> |
||
| 125 | <span class="glyphicon glyphicon-bold"></span> |
||
| 126 | </a> |
||
| 127 | <a class="wysiwyg-toolbar-icon" href="#" title="Italic (Ctrl+I)" hotkey="i" data-action="italic" data-param=""> |
||
| 128 | <span class="glyphicon glyphicon-italic"></span> |
||
| 129 | </a> |
||
| 130 | <a class="wysiwyg-toolbar-icon" href="#" title="Underline (Ctrl+U)" hotkey="u" data-action="underline" data-param=""> |
||
| 131 | <span class="glyphicon underline">U</span> |
||
| 132 | </a> |
||
| 133 | <a class="wysiwyg-toolbar-icon" href="#" title="Text color" data-action="forecolor" data-param="" data-popup="color"> |
||
| 134 | <span class="glyphicon glyphicon-text-color"></span> |
||
| 135 | </a> |
||
| 136 | <a class="wysiwyg-toolbar-icon" href="#" title="Background color" data-action="highlight" data-param="" data-popup="color"> |
||
| 137 | <span class="glyphicon glyphicon-text-background"></span> |
||
| 138 | </a> |
||
| 139 | <a class="wysiwyg-toolbar-icon" href="#" title="Left" data-action="align" data-param="left"> |
||
| 140 | <span class="glyphicon glyphicon-object-align-left"></span> |
||
| 141 | </a> |
||
| 142 | <a class="wysiwyg-toolbar-icon" href="#" title="Center" data-action="align" data-param="center"> |
||
| 143 | <span class="glyphicon glyphicon-object-align-vertical"></span> |
||
| 144 | </a> |
||
| 145 | <a class="wysiwyg-toolbar-icon" href="#" title="Right" data-action="align" data-param="right"> |
||
| 146 | <span class="glyphicon glyphicon-object-align-right"></span> |
||
| 147 | </a> |
||
| 148 | <a class="wysiwyg-toolbar-icon" href="#" title="Justify" data-action="justify" data-param="justify"> |
||
| 149 | <span class="glyphicon glyphicon-menu-hamburger"></span> |
||
| 150 | </a> |
||
| 151 | <a class="wysiwyg-toolbar-icon" href="#" title="Subscript" data-action="subscript" data-param=""> |
||
| 152 | <span class="glyphicon glyphicon-subscript"></span> |
||
| 153 | </a> |
||
| 154 | <a class="wysiwyg-toolbar-icon" href="#" title="Superscript" data-action="superscript" data-param=""> |
||
| 155 | <span class="glyphicon glyphicon-superscript"></span> |
||
| 156 | </a> |
||
| 157 | <a class="wysiwyg-toolbar-icon" href="#" title="Indent" data-action="indent" data-param=""> |
||
| 158 | <span class="glyphicon glyphicon-triangle-right"></span> |
||
| 159 | </a> |
||
| 160 | <a class="wysiwyg-toolbar-icon" href="#" title="Outdent" data-action="indent" data-param="outdent"> |
||
| 161 | <span class="glyphicon glyphicon-triangle-left"></span> |
||
| 162 | </a> |
||
| 163 | <a class="wysiwyg-toolbar-icon" href="#" title="Unordered list" data-action="insertList" data-param=""> |
||
| 164 | <span class="glyphicon glyphicon-th-list"></span> |
||
| 165 | </a> |
||
| 166 | <a class="wysiwyg-toolbar-icon" href="#" title="Remove format" data-action="removeFormat" data-param=""> |
||
| 167 | <span class="glyphicon glyphicon-remove"></span> |
||
| 168 | </a> |
||
| 169 | <a class="wysiwyg-toolbar-icon" href="#" title="Add link" data-action="insertLink" data-popup="link" data-param=""> |
||
| 170 | <span class="glyphicon glyphicon-link"></span> |
||
| 171 | </a> |
||
| 172 | <a class="wysiwyg-toolbar-icon" href="#" title="Code style" data-action="code" data-param=""> |
||
| 173 | <span class="glyphicon glyphicon-console"></span> |
||
| 174 | </a> |
||
| 175 | </div> |
||
| 176 | <textarea class="${inputClass} form-rich" |
||
| 177 | ${commonParams} |
||
| 178 | rows="4">${params.value}</textarea> |
||
| 179 | </div>` |
||
| 180 | } |
||
| 181 | else if (params.type.indexOf('file') >= 0){ |
||
| 182 | res += `<input class="form-control" ${commonParams} name="${params.key}" type="file" /> |
||
| 183 | <span class="percent"></span> |
||
| 184 | <input type="text" ${commonParams} class="${inputClass} hidden" />` |
||
| 185 | } |
||
| 186 | else if (params.type.indexOf('textarea') >= 0){ |
||
| 187 | res += `<textarea class="${inputClass}" ${commonParams} rows="4">${params.value}</textarea>` |
||
| 188 | } |
||
| 189 | else if (params.type.indexOf('link') >= 0){ |
||
| 190 | res += `<div class="input-group"> |
||
| 191 | <div class="input-group-addon link"> |
||
| 192 | <span class="glyphicon glyphicon-link" aria-hidden="true"></span> |
||
| 193 | </div> |
||
| 194 | <input type="text" ${commonParams} class="${inputClass}" /> |
||
| 195 | </div>` |
||
| 196 | } |
||
| 197 | else if (params.type.indexOf('image') >= 0){ |
||
| 198 | res += `<div class="input-group img-upload"> |
||
| 199 | <div class="input-group-addon image"> |
||
| 200 | <span class="glyphicon glyphicon-picture" aria-hidden="true"></span> |
||
| 201 | </div> |
||
| 202 | <input type="text" ${commonParams} class="${inputClass} image-input" /> |
||
| 203 | <div class="upload-wrapper"> |
||
| 204 | <input class="form-control" ${commonParams} name="${params.key}" type="file" title="upload an image"/> |
||
| 205 | <span class="percent"> |
||
| 206 | <span class="glyphicon glyphicon-upload" aria-hidden="true"></span> |
||
| 207 | </span> |
||
| 208 | </div> |
||
| 209 | </div> |
||
| 210 | <div class="input-error"></div>` |
||
| 211 | } |
||
| 212 | else { |
||
| 213 | res += `<div class="input-group"> |
||
| 214 | <div class="input-group-addon"> |
||
| 215 | <span class="glyphicon glyphicon-font" aria-hidden="true"></span> |
||
| 216 | </div> |
||
| 217 | <input type="text" ${commonParams} class="${inputClass}" /> |
||
| 218 | </div>` |
||
| 219 | } |
||
| 220 | |||
| 221 | res += '</div>' |
||
| 222 | |||
| 223 | res = abeExtend.hooks.instance.trigger('afterEditorInput', res, params) |
||
| 224 | |||
| 225 | return res |
||
| 226 | } |
||
| 227 |
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 you or someone else later decides to put another statement in, only the first statement will be executed.
In this case the statement
b = 42will always be executed, while the logging statement will be executed conditionally.ensures that the proper code will be executed conditionally no matter how many statements are added or removed.