Scal v0.2 Pre-release. Comments please.
Some major revisions are coming for scal. Enough that I am incrementing the version from 0.1 to 0.2. (I know, gasps all around)
The latest version of scal cleans up the code tremendously. We have Ian Tyndall to thank for the vast majority of these changes. Thomas Walpole also contributed some great prototype knowledge to the early development of this version.
Props aside, when you start cleaning up messy code, you end up finding a lot of ways to do things better. That’s a nice way of saying that Ian’s trimmed the fat from scal. 
The latest version of scal is not 100% backwards compatible with the old version. In fact, you may wonder if there is anything left of the old scal when you look under the hood.
That said, I know many people have built custom styles for scal. This is the one area where everything ought to work as before (though there are two minor changes to the main css file to deal with cell border issues).
Changes
Here is a brief summary of the upcoming changes. It is not exhaustive. New documentation is being written along with samples and a nice unit test suite.
CSS:
Removed border for dayselected classes (scal and googleblue). That’s it.
Properties:
selecteddate – Replaced/merged with currentdate (this was always a bit confusing, the docs even say so)
Public Methods:
buildCalendar – No longer needed. Instantiating the scal class now builds the calendar.
getCalendar – Redundant function.
openCalendar – Replaced by toggleCalendar
closeCalendar – Ditto
showCalendar – Ditto, plus it was a bit redundant
Private Methods:
prevmonth – Replaced by _switchMonth (up/down)
nextmonth – Replaced by _switchMonth (up/down)
Methods Untouched:
setCurrentDate(date)
updateDayValue(week,day,value)
Download
While in pre-release, scal v0.2 is only available here as a zip archive. This includes the new unit tests along with the scal code and styles. Please feel free to post comments here about the latest version.
[From Parissa Eggleston via email]
Whoops. Here is scal v2.0 in action:
http://www.fieldguidetoprogrammers.com/versions/scal_0.2/
I haven’t had a chance to dive into the code, but here are my observations on the API changes:
1) If openCalendar() and closeCalendar() are to be replaced with toggleCalendar(), an accessor method for determining current state would be in order. Something like isOpen() so I can write code like: if ( !cal.isOpen() ) cal.toggleCalendar().
2) If the change I suggest in #1 is made, it would be easy to provide backwards compatibility, which is always advisable if possible and un-crufty. Something like:
openCalendar: function() { if ( !this.isOpen() ) this.toggleCalendar(); },
closeCalendar: function() { if ( this.isOpen() ) this.toggleCalendar(); },
3) In further support of backwards compatibility, you could define buildCalendar() and showCalendar() as “do-nothing” functions, just so that existing client code won’t break. I’m not as sold on this as I am on #2, though.
4) There is a definite behavioral bug in the JS/CSS interaction. If you switch to the iscal or iphonic styles, then click _directly_ on one of the day numbers, only the inner container of the number gets highlighted, as opposed to the entire day cell. Clicking on whitespace in the cell gets the desired result. I have verified that this was not the case in scal 1.0.
Props on the code cleanup!
You know, I _could_ have suggested a fix for #4 instead of just wanking ;->
Change this line:
event.target.addClassName(’dayselected’);
to:
event.target.up( ‘daybox’ ).addClassName( ‘dayselected’ );
Great points, Andrew.
#1 – good addition. Though this is also available by looking at “scalobject”.element.visible. A convenience handle would be helpful.
On #2, that’s exactly what I did when I started QA on the changes. It might be good to keep those functions in for legacy reasons.
I noticed #4 this morning too.
I also noticed a little weirdness when doing QA on IE6 under XP, which I didn’t see in Firefox (or under Safari on my Mac).
!
Andrew, I agree with Jamie on points 1 & 2.
1 – you have control of the element containing scal.
So, you could write something similar to this:
if($(’samplecal’).visible()) { cal.toggleCalendar(); }
2 – If we get enough responses for the backwards compatibility, we’ll work something in for the meantime. But after awhile, I feel that we need to move forward regardless.
4 – Thanks for the fix on the behavioral bug, I’ll be applying it soon.
Thanks for all the comments!
Hi Ian,
To start off with: great work! I love good prototype code…
1) IMHO, your proposition is less than desirable because of the violation of encapsulation. It forces client code to understand the internal operation of the “cal” object – which means that if the internal implementation of “cal” changes, client code will have to change as well.
It also forces the client to understand that when I call toggleCalendar(), my original element is the one whose visibility is being toggled. What if scal were actually wrapping up my element in a new one (call it elementWrapper), and toggling the visibility of elementWrapper? Client code should _not_ have to understand the implementation of scal – that’s the point of encapsulation.
Besides, it’s easy: ;->
isOpen: function() { return this.element.visible(); },
2) I’m not sure what more effort needs to be done to provide the backward compatibility; I provided the two lines of code in my original comment. So, with a total of three lines of code, which are already written, you could maintain encapsulation _and_ provide backward compatibility… With a total of 5 lines of code you could even include the do-nothing functions I recommended in item #3. Toss ‘em in there, can it hurt? ;->
4) Sure thing! I hope the fix works; I sure didn’t test it…
Jamie,
Do we want to add the “today” styling in this release? You said in your iPhone post that you planned to do so…
I think the following lick of code would do the trick (in _buildDay, towards the end).
if ( day.valueOf() == (new Date()).valueOf() )
{ cell.addClassName( ‘today’ );
}
There would of course be the work of adding the .today style to your css styles; I would happily contribute the version for the iphonic style.
Yes, the “today” style is definitely something we should add. Especially as it’s a simple one.
The “today” functionality is in SVN, thanks!
What revision are y’all at? When I do an “svn update”, it tells me I am at revision 22 – but my scal.js is _nothing_ like the one you have up at
http://www.fieldguidetoprogrammers.com/versions/scal_0.2/
I don’t see the “today” stylings, or even the toggleCalendar() method!
I’ve branched out the pre-release, you can see it here:
http://scaljs.googlecode.com/svn/branches/ian/
Ian’s changes have not been merged with the trunk. They are in /branches/ian
Claro.
Thanks, gentlemen.
I noted the encapsulation/backwards-compat changes as well.
Thanks, Ian!
Howdy gents,
I have “today” done for the iphonic style. It looks like this:
.iphonic .today{
color: #ffffff;
background-color: rgb( 115, 135, 165 );
}
It should be inserted right above “.iphonic .dayselected” in scal.css. I could check it in myself, but I wasn’t sure Ian wanted me running rampant in his branch!
The placement of the style is important; otherwise, the today style trounces on the dayselected style when today is also the selected day.
Thanks, Andrew.
Btw, I’ve archived v0.1 in /branches/v0.1 and put Ian’s most recent work in /branches/v0.2.
I made a little tweak to the html test pages, dropping the root path for css/js includes so the whole version could be dropped into _any_ directory.
Also, I added a overflow:auto to iscal .dayboxvalue. I will add your .today change, Andrew.
Once this is done, I will merge the v0.2 branch into the trunk. I think the trunk should reflect the current working version since it is so different from v0.1.
trunk is now on latest v0.2 code
More changes are coming to the planner functionality/creation, so stay tuned!
Planner has been updated!
I kept backwards compat with updateDayValue & setPlannerValue.
New Modifications for these functions:
– accept one more optional param which is the class of the event planned (defaults to dayboxevent)
– accept an array of values, so multiple events can take place on the same day
– return the affected element
Check the planner_test to see how scal is initiated with the planner array.
Also, make note that I’ve provided a commented example in scaltester_new on how to provide language translations.
Wow, what a massive amount of progress!
When I do an “svn update” on the trunk, and open scaltester_new.html, I get a JavaScript error, though:
this.planner._update is not a function
Line 171, scal.js
Andrew,
I’m still working out of my branch… I’m going to leave the merging up to Jamie.
Hi guys. I’ve merged the js changes from Ian’s branch into the trunk.
I’ve made a small change to scaltester_new.html, moving the builder panels below the scal instance. I didn’t notice this on my laptop (which is widescreen) but at 1024×468 there was some nasty overlap. You can see this live at:
http://www.fieldguidetoprogrammers.com/versions/scal_0.2/
Also, I noticed a bug with the weekday start option. The buildhead function does not take the week start day into account. I’m going to mess with it a bit and see if I can fix it.
Got it. Trunk is updated. (scal.js and scaltester_new.html)
$A(Date.prototype.daynames.sortBy(function(s,i){i+=this.options.weekdaystart;
if(i>6){i-=7;}
return i;
}.bind(this))).each(function(day,i) {
var cell = new Element('div',{'class':'cal_day_name_'+ i});
cell.addClassName('daybox').addClassName('dayboxname').
update(day.substr(0,this.options.dayheadlength));
if(i == 6) { cell.addClassName('endweek'); }
weekbox.insert(cell);
}.bind(this));
I try to build a calendar for January with this line :
cal1 = new scal(’calender1′,update1,{year:2007,month:1,day:3,titleformat:’mmmm yyyy’,closebutton:’X',dayheadlength:2});
But I always get a calender for November (2007). If I browse through the months there is January displayed correctly, but I can’t instantiate with January.
Can you help me ?
Greets
Hi Pug.
Yep. That is a bug in v0.1. If you change line 154 to read:
if (month != 0 || day != 1){
instead of:
if (month != 0 && day != 1){
Your set will work correctly. I am going to update this on the live site.
Thanks for your quick reply.
Sorry I forgot to mention the version.
I downloaded the v0.2 zip. I also tried the svn version.
My line 154 reads completely different, like this:
var buildWeek = function(day) {
Greets
Hi, Pug.
I didn’t realize that bug was still in v0.2. Looks like I’ve got another unittest to add!
The problem is in line 66 (and line 67 too for day). I’ve made a few adjustments and uploaded the corrected code to svn, and the demo on this site. The ZIP archive also reflects this change.
Thanks!
Hi, jamiegrove.
checked out svn and problem solved. Thank you very much for your quick help an keep up the good work.
Greets
Pug,
I’ve added unit tests to my branch for this, thx!
Version 0.2 is now available at:
http://scal.fieldguidetoprogrammers.com