Adding Photos Example

davglass · May 5, 2009 · 01e7876 · 01e7876
1 parent 25d6539
commit 01e7876
Show file tree

Hide file tree

Showing 12 changed files with 323 additions and 0 deletions.
diff --git a/code/example1.html b/code/example1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <title>Example</title>
+    <style type="text/css" media="screen">
+        p, h2 {
+            margin: 1em;
+        }
+	</style>
+</head>
+<body>
+<div id="doc3" class="yui-t7">
+    <div id="hd"><h1 id="header">Example</h1></div>
+    <div id="bd">
+        Here
+    </div>
+    <div id="ft">&nbsp;</div>
+</div>
+<!--script src="http://github.com/yui/yui3/raw/master/build/yui/yui-min.js"></script-->
+<script src="../../3.x/build/yui/yui-min.js"></script>
+<script>
+    YUI({
+        //base: 'http://github.com/yui/yui3/raw/master/build/',
+        base: '../../3.x/build/',
+        combo: false
+    }).use('node', function(Y) {
+        Y.on('delegate', function(e) {
+            console.log(e.target);
+            //alert('Clicked: ' + e.target.get('innerHTML'));
+        }, document, 'click', '*');
+        /*
+        Y.get('#bd').set('style.backgroundColor', 'red').appendChild(Y.Node.create('<p>Foo Bar</p>'));
+        Y.get('#bd').appendChild(Y.Node.create('<ul><li>item 1</li><li>item 2</li></ul>'));
+        Y.on('delegate', function(e) {
+            alert('Clicked: ' + e.target.get('innerHTML'));
+        }, '#bd ul', 'click', 'li');
+        console.log(Y.get('#bd ul'));
+        Y.get('#bd ul').appendChild(Y.Node.create('<li>item 3</li><li>item 4</li>'));
+        */
+    });
+</script>
+</body>
+</html>
diff --git a/code/photos/css/bar.gif b/code/photos/css/bar.gif
diff --git a/code/photos/css/countBadge.png b/code/photos/css/countBadge.png
diff --git a/code/photos/css/folder.png b/code/photos/css/folder.png
diff --git a/code/photos/css/folder_open.png b/code/photos/css/folder_open.png
diff --git a/code/photos/css/photo.png b/code/photos/css/photo.png
diff --git a/code/photos/css/photos.css b/code/photos/css/photos.css
@@ -0,0 +1,104 @@
+#yui-main .yui-g ul {
+    display: block;
+    width: 100%;
+    min-height: 200px;
+    overflow: auto;
+}
+#yui-main .yui-g ul.loading {
+    background-image: url(bar.gif);
+    background-repeat: no-repeat;
+    background-position: 40% 40%;
+}
+#yui-main .yui-g ul li {
+    float: left;
+    margin: 1em;
+}
+#yui-main .yui-g ul li img {
+    border: 3px solid black;
+}
+#yui-main .yui-g ul li.loading img {
+    border: none;
+}
+#yui-main .yui-g ul li.loading {
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+}
+#yui-main .yui-g ul li img {
+    width: 100%;
+}
+#yui-main .yui-g ul li img.selected {
+    border: 3px solid #426FD9;
+}
+#yui-main .yui-g ul:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
+.yui-dd-proxy {
+    background-image: url( countBadge.png );
+    background-repeat: no-repeat;
+    color: white;
+    font-weight: bold;
+}
+.yui-dd-proxy span {
+    display: block;
+    margin-top: 4px;
+}
+#photoList li a {
+    display: block;
+    background-image: url( folder.png );
+    background-repeat: no-repeat;
+    background-position: 1px 3px;
+    padding: 3px;
+    padding-left: 23px;
+    margin: 5px;
+    border: 1px solid #ccc;
+    text-decoration: none;
+    color: black;
+}
+#photoList li a span {
+    padding-left: 3px;
+    font-size: 80%;
+    color: #333;
+}
+#photoList li a:hover {
+    background-color: #B3D4FF;
+}
+#photoList li.selected a {
+    background-color: #B3D4FF;
+    font-weight: bold;
+}
+#photoList li.all a {
+    background-image: url(photo.png);
+}
+#photoList li.yui-dd-drop-over a {
+    border-color: black;
+    background-image: url( folder_open.png );
+}
+#bd .yui-b p {
+    margin: 1em;
+}
+.yui-skin-sam #ft .yui-slider-rail-x {
+    background-position: 0 8px;
+}
+.yui-skin-sam #ft strong,
+.yui-skin-sam #ft em {
+    float: right;
+    background-image: url(thumbnail.png);
+    display: block;
+    height: 32px;
+    width: 32px;
+    background-repeat: no-repeat;
+    background-position: 8px 8px;
+}
+.yui-skin-sam #ft strong {
+    background-image: url(thumbnail_large.png);
+    background-position: 0 0;
+}
+.yui-skin-sam #ft .horiz_slider {
+    float: right;
+    margin: 5px 5px 0;
+    padding: 0 5px;
+}
+#yui-main .yui-g ul li.hidden {
+    display: none;
+}
+
+
diff --git a/code/photos/css/sprite.png b/code/photos/css/sprite.png
diff --git a/code/photos/css/thumbnail.png b/code/photos/css/thumbnail.png
diff --git a/code/photos/css/thumbnail_large.png b/code/photos/css/thumbnail_large.png
diff --git a/code/photos/index.html b/code/photos/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <title>Photo Browser</title>
+    <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
+    <link rel="stylesheet" href="css/photos.css" type="text/css">
+</head>
+<body class="yui-skin-sam">
+<div id="doc3" class="yui-t1">
+    <div id="bd">
+        <div id="yui-main">
+	        <div class="yui-b">
+                <div class="yui-g">
+                    <ul>
+                    </ul>
+	            </div>
+            </div>
+	    </div>
+	    <div class="yui-b">
+            <ul id="photoList">
+                <li class="all selected"><a href="#">All Photos</a></li>
+                <li id="a_1"><a href="#">Album #1<span>(0)</span></a></li>
+                <li id="a_2"><a href="#">Album #2<span>(0)</span></a></li>
+                <li id="a_3"><a href="#">Album #3<span>(0)</span></a></li>
+                <li id="a_4"><a href="#">Album #4<span>(0)</span></a></li>
+            </ul>
+            <p>Click and drag a photo to an album above. You can also Shift + Click to select and drag multiple photos.</p>
+            <p>Click on an album to view the photos that you added.</p>
+            <p>You can also use the slider at the bottom to adjust the size of the image to help fit them on your screen.</p>
+        </div>
+    </div>
+    <div id="ft"><strong></strong><div class="horiz_slider"></div><em></em></div>
+</div>
+<!--script src="http://github.com/yui/yui3/raw/master/build/yui/yui-min.js"></script-->
+<script src="../../../3.x/build/yui/yui-min.js"></script>
+<script src="../../../yui-yql/yql-min.js"></script>
+<script src="photos.js"></script>
+</body>
+</html>
diff --git a/code/photos/photos.js b/code/photos/photos.js
@@ -0,0 +1,137 @@
+YUI({
+    //base: 'http://github.com/yui/yui3/raw/master/build/',
+    base: '../../../3.x/build/',
+    combo: false
+}).use('node', 'anim', 'dd', 'yql', 'slider', 'stylesheet', function(Y) {
+    //Get a reference to the wrapper to use later and add a loading class to it.
+    var wrapper = Y.get('#yui-main .yui-g ul').addClass('loading');
+    //Set it's height to the height of the viewport so we can scroll it.
+    wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px');
+    //Make the YQL query.
+    new Y.yql('select * from flickr.photos.search(50) where user_id = "94309252@N00"', function(e) {
+        if (e.query) {
+            var photos = e.query.results.photo;
+            //Walk the returned photos array
+            Y.each(photos, function(v, k) {
+                //Create our URL
+                var url = 'http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_m.jpg',
+                    //Create the image and the LI
+                    img = Y.Node.create('<li class="loading"><img src="' + url + '"></li>'),
+                    //Get the image from the LI
+                    fc = img.get('firstChild');
+                //Append the li to the wrapper
+                wrapper.appendChild(img);
+                //This little hack moves the tall images to the bottom of the list
+                //So they float better ;)
+                fc.on('load', function() {
+                    //Is the height longer than the width?
+                    var c = ((this.get('height') > this.get('width')) ? 'tall' : 'wide');
+                    this.addClass(c);
+                    if (c === 'tall') {
+                        //Love it to the end of the list.
+                        this.get('parentNode.parentNode').removeChild(this.get('parentNode'));
+                        wrapper.appendChild(this.get('parentNode'));
+                    }
+                    this.get('parentNode').removeClass('loading');
+                });
+            });
+            //Get all the newly added li's
+            wrapper.queryAll('li').each(function(node) {
+                //Plugin the Drag plugin
+                node.plug(Y.plugin.Drag, {
+                    offsetNode: false
+                });
+                //Plug the Proxy into the DD object
+                node.dd.plug(Y.plugin.DDProxy, {
+                    resizeFrame: false,
+                    moveOnEnd: false,
+                    borderStyle: 'none'
+                });
+            });
+            //Create and render the slider
+            var sl = new Y.Slider({
+                railSize: '200px', value: 20, max: 70, min: 5,
+                thumbImage: Y.config.base+'/slider/assets/skins/sam/thumb-classic-x.png'
+            }).render('.horiz_slider');
+            //Listen for the change
+            sl.after('valueChange',function (e) {
+                //Insert a dynamic stylesheet rule:
+                var sheet = new Y.StyleSheet('image_slider');
+                sheet.set('#yui-main .yui-g ul li', {
+                    width: e.newVal + '%'
+                });
+            });
+            //Remove the DDM as a bubble target..
+            sl._dd.removeTarget(Y.DD.DDM);
+            //Remove the wrappers loading class
+            wrapper.removeClass('loading');
+        }
+    });
+    //Listen for all mouseup's on the document (selecting/deselecting images)
+    Y.on('delegate', function(e) {
+        if (!e.shiftKey) {
+            //No shift key
+            wrapper.queryAll('img.selected').removeClass('selected');
+        }
+        if (e.target.test('#yui-main .yui-g ul li img')) {
+            e.target.addClass('selected');
+        }
+    }, document, 'mouseup', '*');
+    //Listen for all clicks on the '#photoList li' selector
+    Y.on('delegate', function(e) {
+        //Prevent the click
+        e.halt();
+        //Add some css
+        e.target.get('parentNode').queryAll('li').removeClass('selected');
+        e.target.addClass('selected');
+        if (e.target.hasClass('all')) {
+            wrapper.queryAll('li').removeClass('hidden');
+        } else {
+            var c = e.target.get('id');
+            wrapper.queryAll('li').addClass('hidden');
+            wrapper.queryAll('li.' + c).removeClass('hidden');
+        }
+    }, document, 'click', '#photoList li');
+    //On drag start, get all the selected elements
+    //Add the count to the proxy element and offset it to the cursor.
+    Y.DD.DDM.on('drag:start', function(e) {
+        var count = wrapper.queryAll('img.selected').size();
+        e.target.get('dragNode').setStyles({
+            height: '25px', width: '25px'
+        }).set('innerHTML', '<span>' + count + '</span>');
+        e.target.deltaXY = [25, 5];
+    });
+    //We dropped on a drop target
+    Y.DD.DDM.on('drag:drophit', function(e) {
+        //get the images that are selected.
+        var imgs = wrapper.queryAll('img.selected'),
+            toXY = e.drop.get('node').getXY();
+        imgs.each(function(node) {
+            //Clone the image, position it on top of the original and animate it to the drop target
+            node.get('parentNode').addClass(e.drop.get('node').get('id'));
+            var n = node.cloneNode().set('id', '').setStyle('position', 'absolute');
+            Y.get('body').appendChild(n);
+            n.setXY(node.getXY());
+            new Y.Anim({
+                node: n,
+                to: {
+                    height: 20, width: 20, opacity: 0,
+                    top: toXY[1], left: toXY[0]
+                },
+                from: {
+                    width: node.get('offsetWidth'),
+                    height: node.get('offsetHeight')
+                },
+                duration: 1.5
+            }).run();
+        });
+        var count = wrapper.queryAll('li.' + e.drop.get('node').get('id')).size();
+        e.drop.get('node').query('span').set('innerHTML', '(' + count + ')');
+    });
+    //Add drop support to the albums
+    Y.all('#photoList li').each(function(node) {
+        if (!node.hasClass('all')) {
+            node.plug(Y.plugin.Drop);
+        }
+    });
+});