From 10c7079331a8fd7eae0038ab795a5172c3296956 Mon Sep 17 00:00:00 2001 From: Jakub Korupczynski Date: Thu, 26 Jan 2017 10:02:58 +0000 Subject: [PATCH 1/2] Fixes #58 Added updateOptions parameter and deprecate register-as for ember.js 2 In ember.js 2.4 there is no targetObject available and we cannot set it. Instead of this we can now pass an attribute to the component that is observed and when we send to it array of changes it will run those changes on existing Full Calendar element. For ember 2.4 and older we can use register-as, but for ember.js 2.0 to 2.4 there will be a message that this method has been deprecated. --- README.md | 37 ++++++++++++++++-------- addon/components/full-calendar.js | 47 +++++++++++++++++++++++++++++-- package.json | 2 +- 3 files changed, 72 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 923f60e..c83f200 100644 --- a/README.md +++ b/README.md @@ -21,31 +21,46 @@ ember g full-calendar }} ``` -### Actions +### Dynamic updates -To send actions to the calendar, register it with the controller. +To dynamically change calendars option please use the updateOptions attribute. +This attribute is an array of options that needs to be changed. + +```javascript +[ + {optionName: 'someOption', value: 'someValue'}, + {optionName: 'someAnotherOption', value: 'someAnotherValue'} +] +``` + +When the attribute will change from null to something it will run a function inside the component to update Full Calendar and then set back the updateOptions to null. + +For example: ```handlebars // app/templates/application.hbs {{ full-calendar events=events - register-as="accessToFullCalendar" + updateOptions=optionsToUpdate }} ``` ```javascript // app/controllers/application.js -export default Ember.Controller.extend({ - accessToFullCalendar: null, - actions: { - prev: function() { - this.get('accessToFullCalendar').send('prev'); - } - } -}); +this.set('optionsToUpdate', [{optionName: "height", value: 800}]); ``` +After setting optionsToUpdate as above it will send to Full Calendar: + +```javascript +component.$().fullCalendar('option', 'height', 800); +``` + +Any option allowed for Full Calendar dynamic change can be set this way. + +The previous way was to use register-as attribute to be able to access the component in the controller, but this has been deprecated as it will not work in the newer versions of ember.js. + ### Callbacks ```handlebars diff --git a/addon/components/full-calendar.js b/addon/components/full-calendar.js index b6096ca..7fd39b1 100644 --- a/addon/components/full-calendar.js +++ b/addon/components/full-calendar.js @@ -73,6 +73,39 @@ export default Component.extend({ // Selecting selectable: false, + // Update options array is used to change Full Calendar parameters after it was rendered. + // It consist of objects with optionName and value properties. + // + // This object is being observed and after a change FullCalendar function is run on existing Full Calendar. + // + // For Example: + // this.set('updateOptions', [{optionName: "height", value: 700}]); + // + // Will run function: + // fullCalendar('optionName', 'height', 700); + // + // After options has been updated the updateOptions attribute is set as null again. + updateOptions: null, + + // + // Observes and processes updateOptions. + updateOptionsObserver: Ember.observer('updateOptions', function() { + + let updateOptions = this.get('updateOptions'); + const component = this; + + if (updateOptions === null || updateOptions.get('length') === 0) { + return; + } + + updateOptions.forEach(function(option) { + component.$().fullCalendar('option', option.optionName, option.value); + }); + + this.set('updateOptions', null); + + }), + updateEvents: observer('events.[]', function() { var fullCalendarElement = this.$(); fullCalendarElement.fullCalendar('removeEvents'); @@ -82,9 +115,19 @@ export default Component.extend({ /** * Register this component to parent controller. We need this to be able to send actions from outside. + * */ didReceiveAttrs: function() { - this.set('targetObject.' + this.get('register-as'), this); + + if (this.get('register-as') !== null && parseInt(Ember.VERSION.split('.')[0]) >= 2) { + Ember.Logger.warn('DEPRECATION from ember-cli-full-calendar addon.' + + 'register-as has been depracated and will not work with ember.js 2.8 or newer.' + + 'Please use updateOptions instead.'); + } + + if (typeof this.get('targetObject') !== 'undefined' && this.get('targetObject') !== null) { + this.set('targetObject.' + this.get('register-as'), this); + } }, didInsertElement() { @@ -215,7 +258,7 @@ export default Component.extend({ // Day Rendering dayRender: (date, element, view) => { - this.sendAction('dayRender', date, element); + this.sendAction('dayRender', date, element, view); }, // Dragging & Resizing diff --git a/package.json b/package.json index a8c6085..bdab24e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-cli-full-calendar", - "version": "0.1.4", + "version": "0.1.5", "description": "An Ember wrapper for jQuery FullCalendar.", "directories": { "doc": "doc", From 1282fe657c88391d4f4775d4ba606a82294da120 Mon Sep 17 00:00:00 2001 From: Jakub Korupczynski Date: Tue, 14 Feb 2017 16:26:03 +0000 Subject: [PATCH 2/2] Deprecation message was visible all the time. It should be only visible when register-as is set. --- addon/components/full-calendar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/addon/components/full-calendar.js b/addon/components/full-calendar.js index 7fd39b1..47a2680 100644 --- a/addon/components/full-calendar.js +++ b/addon/components/full-calendar.js @@ -119,7 +119,8 @@ export default Component.extend({ */ didReceiveAttrs: function() { - if (this.get('register-as') !== null && parseInt(Ember.VERSION.split('.')[0]) >= 2) { + let register = this.get('register-as'); + if (register !== null && typeof register !== "undefined" && parseInt(Ember.VERSION.split('.')[0]) >= 2) { Ember.Logger.warn('DEPRECATION from ember-cli-full-calendar addon.' + 'register-as has been depracated and will not work with ember.js 2.8 or newer.' + 'Please use updateOptions instead.');