symphonycms /
symphony-2
| Conditions | 1 |
| Paths | 2 |
| Total Lines | 302 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 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:
| 1 | /** |
||
| 5 | (function($, Symphony, moment) { |
||
| 6 | 'use strict'; |
||
| 7 | |||
| 8 | /** |
||
| 9 | * Symphony calendar interface. |
||
| 10 | */ |
||
| 11 | Symphony.Interface.Calendar = function() { |
||
| 12 | var template = '<div class="calendar"><nav><a class="clndr-previous-button">previous</a><div class="switch"><ul class="months"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><ul class="years"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><a class="clndr-next-button">next</a></nav><table><thead><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr></thead><tbody><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr></tbody></table></div>', |
||
| 13 | context, calendar, storage, format, datetime, clndr; |
||
| 14 | |||
| 15 | var init = function(element) { |
||
| 16 | context = $(element); |
||
| 17 | calendar = context.find('.calendar'); |
||
| 18 | storage = context.find('input'); |
||
| 19 | format = calendar.attr('data-format'); |
||
| 20 | |||
| 21 | // Don't continue to build the calendar if we don't have a format |
||
| 22 | // to work with. RE: #2306 |
||
| 23 | if(format === undefined) { |
||
| 24 | disable(calendar); |
||
| 25 | return; |
||
| 26 | } |
||
| 27 | |||
| 28 | // Set locale |
||
| 29 | moment.locale(Symphony.Elements.html.attr('lang')); |
||
| 30 | |||
| 31 | // Create calendar |
||
| 32 | storeDate(); |
||
| 33 | prepareTemplate(); |
||
| 34 | create(); |
||
| 35 | |||
| 36 | /** |
||
| 37 | * Events |
||
| 38 | * |
||
| 39 | * Use `mousedown` instead of `click` event in order to prevent |
||
| 40 | * conflicts with suggestions and other core plugins. |
||
| 41 | */ |
||
| 42 | |||
| 43 | // Switch sheets |
||
| 44 | calendar.on('mousedown.calendar', 'a, .clndr', function(event) { |
||
| 45 | event.stopPropagation(); |
||
| 46 | event.preventDefault(); |
||
| 47 | }); |
||
| 48 | calendar.on('mousedown.calendar', '.switch', switchSheet); |
||
| 49 | calendar.on('mousedown.calendar', '.months li', switchMonth); |
||
| 50 | calendar.on('mousedown.calendar', '.years li', switchYear); |
||
| 51 | |||
| 52 | // Handle current date |
||
| 53 | storage.on('focus.calendar', focusDate); |
||
| 54 | storage.on('input.calendar', updateDate); |
||
| 55 | }; |
||
| 56 | |||
| 57 | /*------------------------------------------------------------------------- |
||
| 58 | Event handling |
||
| 59 | -------------------------------------------------------------------------*/ |
||
| 60 | |||
| 61 | /** |
||
| 62 | * Switch sheets. |
||
| 63 | * |
||
| 64 | * @param Event event |
||
| 65 | * The click event |
||
| 66 | */ |
||
| 67 | var switchSheet = function(event) { |
||
| 68 | var selector; |
||
| 69 | |||
| 70 | event.stopPropagation(); |
||
| 71 | event.preventDefault(); |
||
| 72 | |||
| 73 | selector = calendar.find('.switch'); |
||
| 74 | selector.addClass('select'); |
||
| 75 | |||
| 76 | // Close selector |
||
| 77 | Symphony.Elements.body.on('click.calendar', function(event) { |
||
| 78 | var target = $(event.target); |
||
| 79 | |||
| 80 | if(!target.parents('.switch').length) { |
||
| 81 | selector.removeClass('select'); |
||
| 82 | Symphony.Elements.body.off('click.calendar'); |
||
| 83 | } |
||
| 84 | }); |
||
| 85 | }; |
||
| 86 | |||
| 87 | /** |
||
| 88 | * Switch months. |
||
| 89 | * |
||
| 90 | * @param Event event |
||
| 91 | * The click event |
||
| 92 | */ |
||
| 93 | var switchMonth = function(event) { |
||
| 94 | event.preventDefault(); |
||
| 95 | clndr.setMonth(event.target.textContent); |
||
| 96 | }; |
||
| 97 | |||
| 98 | /** |
||
| 99 | * Switch year. |
||
| 100 | * |
||
| 101 | * @param Event event |
||
| 102 | * The click event |
||
| 103 | */ |
||
| 104 | var switchYear = function(event) { |
||
| 105 | event.preventDefault(); |
||
| 106 | clndr.setYear(event.target.textContent); |
||
| 107 | }; |
||
| 108 | |||
| 109 | /** |
||
| 110 | * Focus current date. |
||
| 111 | */ |
||
| 112 | var focusDate = function() { |
||
| 113 | clndr.setMonth(datetime.get('month')); |
||
| 114 | clndr.setYear(datetime.get('year')); |
||
| 115 | }; |
||
| 116 | |||
| 117 | /** |
||
| 118 | * Set current date to active in calendar view. |
||
| 119 | */ |
||
| 120 | var updateDate = function() { |
||
| 121 | storeDate(); |
||
| 122 | focusDate(); |
||
| 123 | }; |
||
| 124 | |||
| 125 | /*------------------------------------------------------------------------- |
||
| 126 | Calendar |
||
| 127 | -------------------------------------------------------------------------*/ |
||
| 128 | |||
| 129 | /** |
||
| 130 | * Create CLNDR instance. |
||
| 131 | */ |
||
| 132 | var create = function() { |
||
| 133 | clndr = calendar.clndr({ |
||
| 134 | startWithMonth: datetime, |
||
| 135 | showAdjacentMonths: true, |
||
| 136 | adjacentDaysChangeMonth: true, |
||
| 137 | forceSixRows: true, |
||
| 138 | render: render, |
||
| 139 | clickEvents: { |
||
| 140 | click: select |
||
| 141 | } |
||
| 142 | }); |
||
| 143 | }; |
||
| 144 | |||
| 145 | /** |
||
| 146 | * Render calendar sheet. |
||
| 147 | * |
||
| 148 | * @param object data |
||
| 149 | * The CLDNR data object |
||
| 150 | */ |
||
| 151 | var render = function(data) { |
||
| 152 | var sheet = template.clone(), |
||
| 153 | month = moment().month(data.month).get('month'); |
||
| 154 | |||
| 155 | sheet = renderTitles(sheet, data); |
||
| 156 | sheet = renderMonths(sheet, data, month); |
||
| 157 | sheet = renderYears(sheet, data); |
||
| 158 | sheet = renderDays(sheet, data); |
||
| 159 | |||
| 160 | return sheet.html(); |
||
| 161 | }; |
||
| 162 | |||
| 163 | /** |
||
| 164 | * Render week day titles. |
||
| 165 | */ |
||
| 166 | var renderTitles = function(sheet, data) { |
||
| 167 | sheet.find('thead td').each(function(index) { |
||
| 168 | this.textContent = data.daysOfTheWeek[index]; |
||
| 169 | }); |
||
| 170 | |||
| 171 | return sheet; |
||
| 172 | }; |
||
| 173 | |||
| 174 | /** |
||
| 175 | * Render month selector. |
||
| 176 | * |
||
| 177 | * @param jQuery sheet |
||
| 178 | * The calendar sheet jQuery object |
||
| 179 | * @param object data |
||
| 180 | * The CLNDR data object |
||
| 181 | * @param integer month |
||
| 182 | * The current month |
||
| 183 | */ |
||
| 184 | var renderMonths = function(sheet, data, month) { |
||
| 185 | sheet.find('.months li').each(function(index) { |
||
| 186 | this.textContent = moment().month(month - 6 + index).format('MMMM'); |
||
| 187 | }); |
||
| 188 | |||
| 189 | return sheet; |
||
| 190 | }; |
||
| 191 | |||
| 192 | /** |
||
| 193 | * Render year selector. |
||
| 194 | * |
||
| 195 | * @param jQuery sheet |
||
| 196 | * The calendar sheet jQuery object |
||
| 197 | * @param object data |
||
| 198 | * The CLNDR data object |
||
| 199 | */ |
||
| 200 | var renderYears = function(sheet, data) { |
||
| 201 | sheet.find('.years li').each(function(index) { |
||
| 202 | this.textContent = data.year - 6 + index; |
||
| 203 | }); |
||
| 204 | |||
| 205 | return sheet; |
||
| 206 | }; |
||
| 207 | |||
| 208 | /** |
||
| 209 | * Render day in calendar sheet. |
||
| 210 | * |
||
| 211 | * @param jQuery sheet |
||
| 212 | * The calendar sheet jQuery object |
||
| 213 | * @param object data |
||
| 214 | * The CLNDR data object |
||
| 215 | */ |
||
| 216 | var renderDays = function(sheet, data) { |
||
| 217 | sheet.find('tbody td span').each(function(index) { |
||
| 218 | var date = data.days[index]; |
||
| 219 | |||
| 220 | this.textContent = date.day; |
||
| 221 | this.setAttribute('class', date.classes); |
||
| 222 | |||
| 223 | if(date.date.isSame(datetime, 'day')) { |
||
| 224 | this.classList.add('active'); |
||
| 225 | } |
||
| 226 | }); |
||
| 227 | |||
| 228 | return sheet; |
||
| 229 | }; |
||
| 230 | |||
| 231 | /** |
||
| 232 | * Select day in calendar. |
||
| 233 | * |
||
| 234 | * @param object day |
||
| 235 | * The CLNDR day object |
||
| 236 | */ |
||
| 237 | var select = function(day) { |
||
| 238 | var date = day.date; |
||
| 239 | |||
| 240 | datetime.set('year', date.year()); |
||
| 241 | datetime.set('month', date.month()); |
||
| 242 | datetime.set('date', date.date()); |
||
| 243 | |||
| 244 | storage.val(datetime.format(format)); |
||
| 245 | |||
| 246 | calendar.find('.active').removeClass('active'); |
||
| 247 | day.element.classList.add('active'); |
||
| 248 | }; |
||
| 249 | |||
| 250 | /** |
||
| 251 | * Store current date. |
||
| 252 | */ |
||
| 253 | var storeDate = function() { |
||
| 254 | var date = storage.val(); |
||
| 255 | |||
| 256 | if(date) { |
||
| 257 | datetime = moment(date, format); |
||
| 258 | } |
||
| 259 | else { |
||
| 260 | datetime = moment({hour: 0, minute: 0, seconds: 0}); |
||
| 261 | } |
||
| 262 | }; |
||
| 263 | |||
| 264 | /*------------------------------------------------------------------------- |
||
| 265 | Utilities |
||
| 266 | -------------------------------------------------------------------------*/ |
||
| 267 | |||
| 268 | /** |
||
| 269 | * Load calendar template and add week day titles. |
||
| 270 | */ |
||
| 271 | var prepareTemplate = function() { |
||
| 272 | template = $(template); |
||
| 273 | }; |
||
| 274 | |||
| 275 | /** |
||
| 276 | * Disable calendar. |
||
| 277 | */ |
||
| 278 | var disable = function(calendar) { |
||
| 279 | var message = Symphony.Language.get('The Symphony calendar widget has been disabled because your system date format is currently not supported. Try one of the following instead or disable the calendar in the field settings:'), |
||
| 280 | date = Symphony.Context.get('datetime'), |
||
| 281 | suggestions = []; |
||
| 282 | |||
| 283 | // Hide calendar |
||
| 284 | calendar.addClass('hidden'); |
||
| 285 | |||
| 286 | // Suggest supported date formats |
||
| 287 | $.each(date.formats, function(phpFormat, momentFormat) { |
||
| 288 | var zero = ''; |
||
| 289 | |||
| 290 | if(phpFormat.indexOf('j') !== -1 && phpFormat.indexOf('n') !== -1) { |
||
| 291 | zero = ' – ' + Symphony.Language.get('no leading zero'); |
||
| 292 | } |
||
| 293 | |||
| 294 | suggestions.push(' - ' + phpFormat + ' (' + moment().format(momentFormat) + zero + ')'); |
||
| 295 | }); |
||
| 296 | |||
| 297 | console.info(message + '\n\n' + suggestions.join('\n')); |
||
| 298 | }; |
||
| 299 | |||
| 300 | // API |
||
| 301 | return { |
||
| 302 | init: init |
||
| 303 | }; |
||
| 304 | }; |
||
| 305 | |||
| 306 | })(window.jQuery, window.Symphony, window.moment); |
||
| 307 |
