symphonycms /
symphony-2
| Total Complexity | 44 |
| Complexity/F | 2.32 |
| Lines of Code | 263 |
| Function Count | 19 |
| Duplicated Lines | 163 |
| Ratio | 61.98 % |
| Changes | 0 | ||
Duplicate code is one of the most pungent code smells. A rule that is often used is to re-structure code once it is duplicated in three or more places.
Common duplication problems, and corresponding solutions are:
Complex classes like symphony/assets/js/src/symphony.drawer.js 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 | /** |
||
| 5 | (function($, Symphony) { |
||
| 6 | 'use strict'; |
||
| 7 | |||
| 8 | /** |
||
| 9 | * Drawers are hidden areas in the backend that are used to |
||
| 10 | * display additional content on request. There are three different |
||
| 11 | * types of drawers: horizontal, vertical left and vertical right. |
||
| 12 | * |
||
| 13 | * @name $.symphonyDrawer |
||
| 14 | * @class |
||
| 15 | * |
||
| 16 | * @param {Object} options An object specifying containing the attributes specified below |
||
| 17 | * @param {Integer} [options.verticalWidth=300] Width of the vertical drawers |
||
| 18 | * @param {String} [options.speed='fast'] Animation speed |
||
| 19 | * |
||
| 20 | * @example |
||
| 21 | |||
| 22 | $('.drawer').symphonyDrawer(); |
||
| 23 | */ |
||
| 24 | $.fn.symphonyDrawer = function(options) { |
||
| 25 | var objects = this, |
||
| 26 | wrapper = $('#wrapper'), |
||
| 27 | contents = $('#contents'), |
||
| 28 | form = contents.find('> form'), |
||
| 29 | settings = { |
||
| 30 | verticalWidth: 300, |
||
| 31 | speed: 'fast' |
||
| 32 | }; |
||
| 33 | |||
| 34 | $.extend(settings, options); |
||
| 35 | |||
| 36 | /*------------------------------------------------------------------------- |
||
| 37 | Events |
||
| 38 | -------------------------------------------------------------------------*/ |
||
| 39 | |||
| 40 | // Expand drawer |
||
| 41 | View Code Duplication | objects.on('expand.drawer', function expand(event, speed, stay) { |
|
|
Duplication
introduced
by
|
|||
| 42 | var drawer = $(this), |
||
| 43 | position = drawer.data('position'), |
||
| 44 | buttons = $('.button.drawer'), |
||
| 45 | button = buttons.filter('[href="#' + drawer.attr('id') + '"]'), |
||
| 46 | samePositionButtons = buttons.filter('.' + position), |
||
| 47 | context = drawer.data('context') ? '.' + drawer.data('context') : '', |
||
| 48 | height = getHeight(); |
||
| 49 | |||
| 50 | drawer.trigger('expandstart.drawer'); |
||
| 51 | |||
| 52 | speed = (typeof speed === 'undefined' ? settings.speed : speed); |
||
| 53 | stay = (typeof stay === 'undefined' ? false : true); |
||
| 54 | |||
| 55 | // update button state |
||
| 56 | samePositionButtons.removeClass('selected'); |
||
| 57 | |||
| 58 | // Close opened drawers from same region |
||
| 59 | $('.drawer.' + position).filter(function() { |
||
| 60 | return $(this).data('open'); |
||
| 61 | }).trigger('collapse.drawer', [speed, true]); |
||
| 62 | |||
| 63 | if (position === 'vertical-left') { |
||
| 64 | drawer.css({ |
||
| 65 | width: 0, |
||
| 66 | height: height, |
||
| 67 | display: 'block' |
||
| 68 | }) |
||
| 69 | .animate({ |
||
| 70 | width: settings.verticalWidth |
||
| 71 | }, { |
||
| 72 | duration: speed, |
||
| 73 | step: function(now){ |
||
| 74 | form.css('margin-left', now + 1); // +1px right border |
||
| 75 | }, |
||
| 76 | complete: function() { |
||
| 77 | form.css('margin-left', settings.verticalWidth + 1); // +1px right border |
||
| 78 | drawer.trigger('expandstop.drawer'); |
||
| 79 | } |
||
| 80 | }); |
||
| 81 | } |
||
| 82 | else if (position === 'vertical-right') { |
||
| 83 | drawer.css({ |
||
| 84 | width: 0, |
||
| 85 | height: height, |
||
| 86 | display: 'block' |
||
| 87 | }) |
||
| 88 | .animate({ |
||
| 89 | width: settings.verticalWidth |
||
| 90 | }, { |
||
| 91 | duration: speed, |
||
| 92 | step: function(now){ |
||
| 93 | form.css('margin-right', now + 1); // +1px left border |
||
| 94 | }, |
||
| 95 | complete: function() { |
||
| 96 | form.css('margin-right', settings.verticalWidth + 1); // +1px right border |
||
| 97 | drawer.trigger('expandstop.drawer'); |
||
| 98 | } |
||
| 99 | }); |
||
| 100 | } |
||
| 101 | else if (position === 'horizontal') { |
||
| 102 | drawer.animate({ |
||
| 103 | height: 'show' |
||
| 104 | }, { |
||
| 105 | duration: speed, |
||
| 106 | complete: function() { |
||
| 107 | drawer.trigger('expandstop.drawer'); |
||
| 108 | } |
||
| 109 | }); |
||
| 110 | } |
||
| 111 | |||
| 112 | button.addClass('selected'); |
||
| 113 | |||
| 114 | // store state |
||
| 115 | if(Symphony.Support.localStorage === true) { |
||
| 116 | // Put in a try/catch incase we exceed storage space |
||
| 117 | try { |
||
| 118 | window.localStorage['symphony.drawer.' + drawer.attr('id') + context] = 'opened'; |
||
| 119 | } |
||
| 120 | catch(e) { |
||
| 121 | window.onerror(e.message); |
||
| 122 | } |
||
| 123 | } |
||
| 124 | |||
| 125 | wrapper.addClass('drawer-' + position); |
||
| 126 | drawer.data('open', true); |
||
| 127 | }); |
||
| 128 | |||
| 129 | // Collapse drawer |
||
| 130 | View Code Duplication | objects.on('collapse.drawer', function collapse(event, speed, stay) { |
|
| 131 | var drawer = $(this), |
||
| 132 | position = drawer.data('position'), |
||
| 133 | buttons = $('.button.drawer'), |
||
| 134 | button = buttons.filter('[href="#' + drawer.attr('id') + '"]'), |
||
| 135 | context = drawer.data('context') ? '.' + drawer.data('context') : ''; |
||
| 136 | |||
| 137 | drawer.trigger('collapsestart.drawer'); |
||
| 138 | |||
| 139 | speed = (typeof speed === 'undefined' ? settings.speed : speed); |
||
| 140 | stay = (typeof stay === 'undefined' ? false : true); |
||
| 141 | |||
| 142 | // update button state |
||
| 143 | button.removeClass('selected'); |
||
| 144 | |||
| 145 | if (position === 'vertical-left') { |
||
| 146 | drawer.animate({ |
||
| 147 | width: 0 |
||
| 148 | }, { |
||
| 149 | duration: speed, |
||
| 150 | step: function(now){ |
||
| 151 | if (!stay) { |
||
| 152 | form.css('margin-left', now); |
||
| 153 | } |
||
| 154 | }, |
||
| 155 | complete: function() { |
||
| 156 | drawer.css({ |
||
| 157 | display: 'none' |
||
| 158 | }) |
||
| 159 | .trigger('collapsestop.drawer'); |
||
| 160 | } |
||
| 161 | }); |
||
| 162 | } |
||
| 163 | else if (position === 'vertical-right') { |
||
| 164 | drawer.animate({ |
||
| 165 | width: 0 |
||
| 166 | }, { |
||
| 167 | duration: speed, |
||
| 168 | step: function(now){ |
||
| 169 | if (!stay) { |
||
| 170 | form.css('margin-right', now); |
||
| 171 | } |
||
| 172 | }, |
||
| 173 | complete: function() { |
||
| 174 | drawer.css({ |
||
| 175 | display: 'none' |
||
| 176 | }) |
||
| 177 | .trigger('collapsestop.drawer'); |
||
| 178 | } |
||
| 179 | }); |
||
| 180 | } |
||
| 181 | else if (position === 'horizontal') { |
||
| 182 | drawer.animate({ |
||
| 183 | height: 'hide' |
||
| 184 | }, { |
||
| 185 | duration: speed, |
||
| 186 | complete: function() { |
||
| 187 | drawer.trigger('collapsestop.drawer'); |
||
| 188 | } |
||
| 189 | }); |
||
| 190 | } |
||
| 191 | |||
| 192 | // store state |
||
| 193 | if(Symphony.Support.localStorage === true) { |
||
| 194 | // Put in a try/catch incase we exceed storage space |
||
| 195 | try { |
||
| 196 | window.localStorage['symphony.drawer.' + drawer.attr('id') + context] = 'closed'; |
||
| 197 | } |
||
| 198 | catch(e) { |
||
| 199 | window.onerror(e.message); |
||
| 200 | } |
||
| 201 | } |
||
| 202 | |||
| 203 | wrapper.removeClass('drawer-' + position); |
||
| 204 | drawer.data('open', false); |
||
| 205 | }); |
||
| 206 | |||
| 207 | // Resize drawers |
||
| 208 | $(window).on('resize.drawer load.drawer', function() { |
||
| 209 | var height = getHeight(); |
||
| 210 | objects.filter('.vertical-left, .vertical-right').css('height', height); |
||
| 211 | }); |
||
| 212 | |||
| 213 | /*------------------------------------------------------------------------- |
||
| 214 | Utilities |
||
| 215 | -------------------------------------------------------------------------*/ |
||
| 216 | |||
| 217 | var getHeight = function() { |
||
| 218 | var height = Math.max(window.innerHeight - contents[0].offsetTop - 1, contents[0].clientHeight); |
||
| 219 | |||
| 220 | return height; |
||
| 221 | }; |
||
| 222 | |||
| 223 | /*------------------------------------------------------------------------- |
||
| 224 | Initialisation |
||
| 225 | -------------------------------------------------------------------------*/ |
||
| 226 | |||
| 227 | objects.each(function drawers() { |
||
| 228 | var drawer = $(this), |
||
| 229 | button = $('.button.drawer[href="#' + drawer.attr('id') + '"]'), |
||
| 230 | context = drawer.data('context') ? '.' + drawer.data('context') : '', |
||
| 231 | storedState; |
||
| 232 | |||
| 233 | // Initial state |
||
| 234 | if (drawer.data('default-state') === 'opened') { |
||
| 235 | drawer.data('open', true); |
||
| 236 | } |
||
| 237 | // Restore state |
||
| 238 | if (Symphony.Support.localStorage === true) { |
||
| 239 | storedState = window.localStorage['symphony.drawer.' + drawer.attr('id') + context]; |
||
| 240 | if (storedState === 'opened') { |
||
| 241 | drawer.data('open', true); |
||
| 242 | } |
||
| 243 | else if (storedState === 'closed') { |
||
| 244 | drawer.data('open', false); |
||
| 245 | } |
||
| 246 | } |
||
| 247 | |||
| 248 | // Click event for the related button |
||
| 249 | button.on('click.drawer', function(event) { |
||
| 250 | event.preventDefault(); |
||
| 251 | drawer.trigger(!drawer.data('open') ? 'expand.drawer': 'collapse.drawer'); |
||
| 252 | }); |
||
| 253 | |||
| 254 | // Initially opened drawers |
||
| 255 | if (drawer.data('open')) { |
||
| 256 | drawer.trigger('expand.drawer', [0]); |
||
| 257 | } else { |
||
| 258 | drawer.trigger('collapse.drawer', [0, true]); |
||
| 259 | } |
||
| 260 | }); |
||
| 261 | |||
| 262 | /*-----------------------------------------------------------------------*/ |
||
| 263 | |||
| 264 | return objects; |
||
| 265 | }; |
||
| 266 | |||
| 267 | })(window.jQuery, window.Symphony); |
||
| 268 |
Loading history...
