Updates.

README.md

@@ -1,6 +1,6 @@
 # Alice
 
-[Alice](http://) (A Lightweight Independent CSS Engine) - is a highly focused JavaScript/CSS3 library for generating high-quality, high-end visual effects.
+[Alice](http://) (A Lightweight Independent CSS Engine) is a micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects.
 
 This library and the sample code is Open Source under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0.html).
 

change.log

@@ -0,0 +1,22 @@
+==============================================================================
+Alice
+Change Log
+==============================================================================
+
+0.1 (Build 20110817-1050)
+
+    - Initial check-in to Git.
+
+0.1 (Build 20110819-1300)
+
+    - Added this "change.log" file.
+    - Added project information to the main page (index.html).
+    - Removed unused files/folders: catface.png, css3buttons, and
+      michenriksen-css3buttons-1d544a4.zip.
+    - Updated text for copyright line.
+    - Removed "social" icons and replaced them with "cards" in the Wobble and
+      Spring demos.
+    - Added a speed setting to the Spring demo.
+    - Changed rotate demo to make the cards open and close continuously.
+    - Removed debugging comments.
+    - Re-enabled the overspin in the Cube demo.

config.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="0.1.19" rim:header="RIM-Widget:rim/widget">
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="0.1.21" rim:header="RIM-Widget:rim/widget">
     <name>Alice</name>
     <description>Alice (A Lightweight Independent CSS Engine)</description>
     <author rim:copyright="2011">Research In Motion Limited</author>

credits.json

@@ -165,60 +165,6 @@ var groups = [
             }
         ]
     },
-    {
-        path   : "demos/common/images/social",
-        license: "MIT and GPL 3.0",
-        source : "Elegant Themes",
-        url    : "http://www.elegantthemes.com/blog/resources/free-social-media-icon-set",
-        credit : "",
-        width  : 64,
-        height : 64,
-
-        items: [
-            { filename: "aim.png" },
-            { filename: "ask.png" },
-            { filename: "bebo.png" },
-            { filename: "blinklist.png" },
-            { filename: "blogger.png" },
-            { filename: "buzz.png" },
-            { filename: "delicious.png" },
-            { filename: "deviantart.png" },
-            { filename: "digg.png" },
-            { filename: "diigo.png" },
-            { filename: "evernote.png" },
-            { filename: "facebook.png" },
-            { filename: "flickr.png" },
-            { filename: "friendfeed.png" },
-            { filename: "friendster.png" },
-            { filename: "furl.png" },
-            { filename: "google.png" },
-            { filename: "lastfm.png" },
-            { filename: "linkedin.png" },
-            { filename: "livejournal.png" },
-            { filename: "mixx.png" },
-            { filename: "myspace.png" },
-            { filename: "netvibes.png" },
-            { filename: "newsvine.png" },
-            { filename: "orkut.png" },
-            { filename: "plaxo.png" },
-            { filename: "plurk.png" },
-            { filename: "posterous.png" },
-            { filename: "reddit.png" },
-            { filename: "rss.png" },
-            { filename: "shoutwire.png" },
-            { filename: "spurl.png" },
-            { filename: "squidoo.png" },
-            { filename: "stumbleupon.png" },
-            { filename: "technorati.png" },
-            { filename: "tumblr.png" },
-            { filename: "twitter.png" },
-            { filename: "vimeo.png" },
-            { filename: "wordpress.png" },
-            { filename: "xanga.png" },
-            { filename: "yahoo.png" },
-            { filename: "youtube.png" }
-        ]
-    },
     {
         path   : "demos/common/videos",
         license: "Public Domain",
@@ -298,15 +244,6 @@ var groups = [
                 width   : 48,
                 height  : 48
             },
-            {
-                filename: "catface.png",
-                desc    : "Cat face",
-                source  : "Clker",
-                url     : "http://www.clker.com/clipart-cat-face-features.html",
-                license : "Public Domain",
-                width   : 96,
-                height  : 96
-            },
             {
                 filename: "close_icon.png",
                 desc    : "Close icon",

default.css

@@ -111,7 +111,7 @@ pre {
     font-style: italic;
 }
 
-/* GitHub-style button */
+/* Big button */
 
 a.button.big, button.big {
     font-size: 16px;
@@ -152,7 +152,7 @@ a.button, button {
     padding: 5px;
     font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
     text-decoration: none;
-    background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat;
+    background-color: #ECECEC;
     white-space: nowrap;
     overflow: visible;
     cursor: pointer;

demos.html

@@ -35,12 +35,7 @@
             <div id="card1" class="card-edge">
                 <div>
                     <h1>Alice Demos</h1>
-                    <p><b><a href="index.html">Alice</a></b> <i>(<u>A</u> <u>L</u>ightweight <u>I</u>ndependent <u>C</u>SS <u>E</u>ngine)</i> - is a highly focused JavaScript/CSS3 library for generating high-quality, high-end visual effects.</p>
-<!--
-                    <p>It's goal is to give developers a tool for creating visually rich web content that takes advantage of hardware-accelerated features in CSS3. By combining 3D with some physics and randomness, Alice is aiming at creating more "organic" effects.</p>
-                    <p>The library will be cross-platform so it will work on WebKit-based browsers for desktops, tablets, and handhelds. Alice is also framework-independent so it can be used with or without other libraries like jQuery, Sencha, Dojo, etc. Alice was designed for ease-of-use so it uses a declarative-style of "one-line" code.</p>
--->
-                    <p>Here are some examples...</p>
+                    <p><b><a href="index.html">Alice</a></b> <i>(<u>A</u> <u>L</u>ightweight <u>I</u>ndependent <u>C</u>SS <u>E</u>ngine)</i> is a micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects.</p>
                 </div>
 
                 <div>
@@ -283,7 +278,7 @@ <h2>Experimental</h2>
             </code>
         </pre>
 -->
-        <div class="fineprint"><p>Copyright &copy; 2011 Research In Motion Limited &bull; <a href="license.txt">License</a> &bull; <a href="credits.html">Credits</a></p></div>
+        <div class="fineprint"><p>Copyright (c) 2011 Research In Motion Limited. &bull; <a href="license.txt">License</a> &bull; <a href="credits.html">Credits</a></p></div>
 
         <!-- Syntax Highlighting -->
 <!--

demos/bounce.html

@@ -169,16 +169,13 @@ <h3>Login</h3>
          * Start the animation effect.
          */
         app.startAnimation = function () {
-            //console.info('startAnimation:');
-
             for (var i = 0; i < app.icons.length; i++) {
                 w = parseInt(document.getElementById(app.icons[i].id).style.width, 10);
                 h = parseInt(document.getElementById(app.icons[i].id).style.height, 10);
 
                 var originx = w * document.getElementById('origin-x').value / 100;
                 var originy = h * document.getElementById('origin-y').value / 100;
                 var origin = originx + 'px ' + originy + 'px';
-                //console.debug('origin = ' + origin);
 
                 // apply effect
                 alice.bounce({
@@ -199,8 +196,6 @@ <h3>Login</h3>
          * Stop the animation effect.
          */
         app.stopAnimation = function () {
-            //console.info('stopAnimation:');
-
             var closeIcon, elem, s;
             for (var i = 0; i < app.icons.length; i++) {
 
@@ -227,8 +222,6 @@ <h3>Login</h3>
          * Change scale value.
          */
         app.changeScale = function (elem) {
-            //console.info('changeScale: ' + elem.value);
-
             document.getElementById('scale').value = elem.value;
 
             // set randomness
@@ -239,7 +232,6 @@ <h3>Login</h3>
 
             // calculate a scale
             var s = (parseFloat(document.getElementById('scale_val').value / 100) + parseFloat(document.getElementById('scale_val').value / 100) * r);
-            //console.debug('s=' + s);
 
             // adjust rule
             var styleSheet, cssRule;
@@ -272,7 +264,6 @@ <h3>Login</h3>
          * Change angle value.
          */
         app.changeAngle = function (elem) {
-            //console.info('changeAngle: ' + elem.value);
 
             document.getElementById('angle').value = elem.value;
 
@@ -284,7 +275,6 @@ <h3>Login</h3>
 
             // calculate an angle
             var a = Math.round(parseFloat(document.getElementById('angle_val').value) + parseFloat(document.getElementById('angle_val').value) * r);
-            //console.debug('a=' + a);
 
             // adjust rule
             var styleSheet, cssRule;
@@ -296,7 +286,6 @@ <h3>Login</h3>
                     if (cssRule.type === window.CSSRule.WEBKIT_KEYFRAMES_RULE && cssRule.name == 'alice-bounce-shadow') {
                         //cssRule.findRule('0%').style.webkitTransform = 'rotate(' + a + 'deg)';
                         cssRule.findRule('100%').style.webkitTransform = 'rotate(-' + a + 'deg)';
-                        //console.warn(cssRule);
                         break;
                     }
                 }
@@ -360,7 +349,6 @@ <h3>Login</h3>
          * Change origin (anchor point) value.
          */
         app.updateOrigin = function (elem) {
-            //console.debug(elem);
             var x, y;
 
             switch (elem.value) {

demos/carousel.js

@@ -68,7 +68,6 @@ Carousel3D.prototype.modify = function () {
             figureElem;
 
         for (var h = (numFigures + 1); h <= (numFigures + numNeeded); h++) {
-            //console.log('Adding panel ' + h);
             figureElem = document.createElement('figure');
             figureElem.innerHTML = h;
             this.element.appendChild(figureElem);
@@ -88,7 +87,6 @@ Carousel3D.prototype.modify = function () {
     for (i = 0; i < this.panelCount; i++) {
         panel = this.element.children[i];
         panel.id = 'carousel-' + i;
-        //console.log(panel);
 
         panel.addEventListener('mouseover', function (e) {
             var wkt;
@@ -98,7 +96,6 @@ Carousel3D.prototype.modify = function () {
             else {
                 wkt = this.style['-webkit-transform'] + ' scale(1.3)';
             }
-            //console.log(wkt);
 
             this.style['-webkit-transform'] = wkt;
             this.style['-webkit-box-shadow'] = '10px 10px 10px rgba(0,0,0,.6)';
@@ -107,7 +104,6 @@ Carousel3D.prototype.modify = function () {
 
         panel.addEventListener('mouseout', function (e) {
             var wkt = this.style['-webkit-transform'].replace(scalePatt, '');
-            //console.log(wkt);
 
             this.style['-webkit-transform'] = wkt;
             this.style['-webkit-box-shadow'] = '';
@@ -141,7 +137,6 @@ Carousel3D.prototype.transform = function () {
 //----------------------------------------------------------------------------
 
 function getStockQuote() {
-    //console.info('getStockQuote:');
     var xhr;
     if (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest();
@@ -152,7 +147,6 @@ function getStockQuote() {
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {
             var json = JSON.parse(xhr.responseText);
-            //console.log(json);
 
             var html = '';
             html += '<table border="0" cellpadding="3" cellspacing="0">';
@@ -172,7 +166,6 @@ function getStockQuote() {
 }
 
 function getWeather() {
-    //console.info('getWeather:');
     var xhr;
     if (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest();
@@ -183,7 +176,6 @@ function getWeather() {
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {
             var json = JSON.parse(xhr.responseText);
-            //console.log(json);
 
             var html = '';
             html += '<table border="0" cellpadding="3" cellspacing="0">';
@@ -247,7 +239,6 @@ var init = function () {
             ev = parseInt(event.target.value, 10);
 
         if (carousel.panelCount != ev) {
-            //console.log(mn + ' <= ' + ev + ' <= ' + mx);
             if (mn <= ev && ev <= mx) {
                 carousel.panelCount = ev;
                 panelCountInput.value = ev;
@@ -261,7 +252,6 @@ var init = function () {
     }, false);
 
     perspectiveInput.addEventListener('change', function () {
-        //console.log(event.target.value);
         perspectiveValue.value = event.target.value;
         document.getElementById('container').style['-webkit-perspective'] = event.target.value;
     }, false);
@@ -313,14 +303,3 @@ function handleKeys(e) {
 
 window.addEventListener('DOMContentLoaded', init, false);
 window.addEventListener('keypress', handleKeys, false);
-
-/*
-var w1 = Math.round(window.innerWidth * 0.46875), h1 = Math.round(w1 * .75),
-    w2 = Math.round(window.innerWidth * 0.609375), h2 = Math.round(w2 * .75),
-    scale = (w2 / w1).toFixed(2);
-
-console.log('(w, h) = ' + window.innerWidth + ', ' + window.innerHeight);
-console.log('(w1, h1) = ' + w1 + ', ' + h1);
-console.log('(w2, h2) = ' + w2 + ', ' + h2);
-console.log('(scale) = ' + scale);
-*/

demos/common/images/photos/license.txt

@@ -1 +1,3 @@
-License: Public Domain
+License: Not Copyrighted
+
+http://www.nasa.gov/multimedia/guidelines/index.html