Skip to content
This repository has been archived by the owner on Sep 8, 2020. It is now read-only.

exposure and binding #13

Closed
wants to merge 8 commits into from
Closed

exposure and binding #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5e97132
bindings and adding controll
yourilima Apr 9, 2013
9b3f45b
semicolons
yourilima Apr 9, 2013
8b1c585
test fixes
yourilima Apr 11, 2013
ef353d2
backward compatibility
yourilima Apr 11, 2013
c4647a0
function name fix
yourilima Apr 11, 2013
c4a7c68
interface object to hide the actual fullcalendar object
yourilima Apr 11, 2013
b67c36b
changed the calendar object to be provided by a factory
yourilima Apr 11, 2013
23775da
calendar attribute now optional
yourilima Apr 11, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions demo/calendarDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function CalendarCtrl($scope) {
callback(events);
};
/* alert on eventClick */
$scope.addEventOnClick = function( date, allDay, jsEvent, view ){
$scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
$scope.$apply(function(){
$scope.alertMessage = ('Day Clicked ' + date);
});
Expand Down Expand Up @@ -93,4 +93,4 @@ function CalendarCtrl($scope) {
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
}
/* EOF */
/* EOF */
4 changes: 2 additions & 2 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<script src="http://code.angularjs.org/1.0.4/angular.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui.github.com/master/lib/calendar/fullcalendar.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/gcal.js"></script>
<script src="https://raw.github.com/angular-ui/ui-calendar/master/src/calendar.js"></script>
<script src="https://raw.github.com/yourilima/ui-calendar/master/src/calendar.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you dont need to change this because it would check it in tothe head of the repo. What I do is just take the whole calendar model and put it in the calendarDemo.js file while im deving on the calendar. I just comment this line out until im ready to commit.

<script src="calendarDemo.js"></script>
</head>
<body data-spy="scroll">
Expand Down Expand Up @@ -82,7 +82,7 @@ <h3>Why?</h3>
<button class="btn btn-info" ng-click="addRemoveEventSource(eventSources,eventSource)">Toggle an event source</button>
</div>
</div>
<div class="calendar" ng-model="eventSources" ui-calendar="uiConfig.calendar"></div>
<div class="calendar" ng-model="eventSources" calendar="myCalendar"config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
</div>
</div>
</div>
Expand Down
57 changes: 44 additions & 13 deletions src/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,44 @@

angular.module('ui.calendar', [])
.constant('uiCalendarConfig', {})
.directive('uiCalendar', ['uiCalendarConfig', '$parse', function(uiCalendarConfig) {
.factory('Calendar',function(){
return function(elem){
var calendar = elem;//this will become the fullcalendar object when loaded
var call = function(call,args){//interface to fullcalendars functions
return calendar.fullCalendar(call,args);
};
this.test = 'works';
this.refetchEvents = function(){//refetchEvents... this way an interface can be made to all functionality and add more controll.
return call('refetchEvents');
};
this.init = function(options){//the creation of the fullcalendar.
return call(options);
};
this.fullCalendar = function(call,args){//backwards compatibility
return call(call,args);
};
};
})
.directive('uiCalendar', ['uiCalendarConfig', 'Calendar' , '$parse', function(uiCalendarConfig,Calendar) {
uiCalendarConfig = uiCalendarConfig || {};
//returns calendar
return {
require: 'ngModel',
scope: true,
scope: {ngModel:'=',config:'='},
restrict: 'A',
link: function(scope, elm, attrs) {
var sources = scope.$eval(attrs.ngModel);
var calendar = elm.html('');
controller:function($scope,$element){
},
link: function(scope, elm, attrs,calCtrl) {
var sources = scope.ngModel;//scope.$eval(attrs.ngModel);
scope.destroy = function(){
if(attrs.calendar){
scope.calendar = scope.$parent[attrs.calendar] = new Calendar(elm.html(''));
}else{
scope.calendar = new Calendar(elm.html(''));
}
};
scope.destroy();
//scope.calendar = elm.html('');
var eventsFingerprint = function() {
var fpn = "";
angular.forEach(sources, function(events) {
Expand All @@ -36,11 +64,14 @@ angular.module('ui.calendar', [])
});
return fpn;
};

var options = { eventSources: sources };
angular.extend(options, uiCalendarConfig, attrs.uiCalendar ? scope.$eval(attrs.uiCalendar) : {});
calendar.fullCalendar(options);

scope.init = function(){
var options = { eventSources: sources };
// not sure which would be more convenient
//angular.extend(options, uiCalendarConfig, scope.config ? scope.config : {});
angular.extend(options, uiCalendarConfig, attrs.uiCalendar ? scope.$parent.$eval(attrs.uiCalendar) : {});
scope.calendar.init(options);
};
scope.init();
// Track changes in array by assigning numeric ids to each element and watching the scope for changes in those ids
var changeTracker = function(array) {
var self;
Expand Down Expand Up @@ -102,13 +133,13 @@ angular.module('ui.calendar', [])
var sourcesTracker = changeTracker(sources);
sourcesTracker.subscribe(scope);
sourcesTracker.onAdded = function(source) {
calendar.fullCalendar('addEventSource', source);
scope.calendar.addEventSource(source);
};
sourcesTracker.onRemoved = function(source) {
calendar.fullCalendar('removeEventSource', source);
scope.calendar.removeEventSource(source);
};
scope.$watch(eventsFingerprint, function() {
calendar.fullCalendar('refetchEvents');
scope.calendar.refetchEvents();
});
}
};
Expand Down
25 changes: 13 additions & 12 deletions test/calendar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,44 +80,44 @@ describe('uiCalendar', function () {
/* test the calendar's events length */
it('should excpect to load 4 events to scope', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
expect($.fn.fullCalendar.mostRecentCall.args[0].eventSources[0].length).toBe(4);
});
/* test to check the title of the first event. */
it('should excpect to be All Day Event', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
expect($.fn.fullCalendar.mostRecentCall.args[0].eventSources[0][0].title).toBe('All Day Event');
});
/* test to make sure the event has a url assigned to it. */
it('should expect the url to = http://www.angularjs.org', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
expect($.fn.fullCalendar.mostRecentCall.args[0].eventSources[0][0].url).toBe('http://www.angularjs.org');
expect($.fn.fullCalendar.mostRecentCall.args[0].eventSources[1][0].url).toBe('http://www.atlantacarlocksmith.com');
});
/* test the 3rd events' allDay field. */
it('should expect the fourth Events all Day field to equal true', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
expect($.fn.fullCalendar.mostRecentCall.args[0].eventSources[0][3].allDay).toNotBe(false);
});
/* Tests the height of the calendar. */
it('should expect the calendar attribute height to be 200', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
expect($.fn.fullCalendar.mostRecentCall.args[0].height).toEqual(200);
});
/* Tests the weekends boolean of the calendar. */
it('should expect the calendar attribute weekends to be false', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
expect($.fn.fullCalendar.mostRecentCall.args[0].weekends).toEqual(false);
});
/* Test to make sure that when an event is added to the calendar everything is updated with the new event. */
it('should expect the scopes events to increase by 2', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
expect($.fn.fullCalendar.mostRecentCall.args[0].eventSources[0].length).toEqual(4);
scope.addChild(scope.events);
scope.addChild(scope.events);
Expand All @@ -126,7 +126,7 @@ describe('uiCalendar', function () {
/* Test to make sure the calendar is updating itself on changes to events length. */
it('should expect the calendar to update itself with new events', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
var clientEventsLength = $.fn.fullCalendar.mostRecentCall.args[0].eventSources[0].length;
expect(clientEventsLength).toEqual(4);
//remove an event from the scope.
Expand All @@ -143,15 +143,15 @@ describe('uiCalendar', function () {
header: {center: 'title'}
}
};
$compile('<div ui-calendar="uiConfig2.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig2.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
expect($.fn.fullCalendar.mostRecentCall.args[0].hasOwnProperty('header')).toEqual(true);
var header = $.fn.fullCalendar.mostRecentCall.args[0].header;
expect(header).toEqual({center: 'title'});
});
/* Test to see if calendar is watching all eventSources for changes. */
it('should update the calendar if any eventSource array contains a delta', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
var clientEventsLength = $.fn.fullCalendar.mostRecentCall.args[0].eventSources[0].length;
var clientEventsLength2 = $.fn.fullCalendar.mostRecentCall.args[0].eventSources[1].length;
expect(clientEventsLength).toEqual(4);
Expand All @@ -170,7 +170,7 @@ describe('uiCalendar', function () {
/* Test to see if calendar is updating when a new eventSource is added. */
it('should update the calendar if an eventSource is Added', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources"></div>')(scope);
var clientEventSources = $.fn.fullCalendar.mostRecentCall.args[0].eventSources.length;
expect(clientEventSources).toEqual(2);
//add new source to calendar
Expand All @@ -186,7 +186,7 @@ describe('uiCalendar', function () {
/* Test to see if calendar is updating when an eventSource replaces another with an equal length. */
it('should update the calendar if an eventSource has same length as prior eventSource', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources" equals-tracker="equalsTracker"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" calendar="myCalendar" ng-model="eventSources" equals-tracker="equalsTracker"></div>')(scope);
var clientEventSources = $.fn.fullCalendar.mostRecentCall.args[0].eventSources;
var clientEventsLength = $.fn.fullCalendar.mostRecentCall.args[0].eventSources[0].length;
expect(clientEventsLength).toEqual(4);
Expand All @@ -206,6 +206,7 @@ describe('uiCalendar', function () {
expect(clientEventsLength).toEqual(3);

});


});

Expand Down