← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/dd/photo-browser-example.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/dd/photo-browser-example.html
1
 
<!DOCTYPE html>
2
 
<html lang="en" class="yui3-loading">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Photo Browser</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.2/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
7
 
    <link rel="stylesheet" type="text/css" href="../assets/dd/photos/photos.css">    
8
 
    <script src="../../build/yui/yui-min.js"></script>
9
 
</head>
10
 
<body class="yui3-skin-sam">
11
 
 
12
 
 
13
 
<div id="doc3" class="yui-t1">
14
 
    <div id="bd">
15
 
        <div id="yui-main">
16
 
                <div class="yui-b">
17
 
                <div class="yui-g">
18
 
                    <ul>
19
 
                    </ul>
20
 
                    </div>
21
 
            </div>
22
 
            </div>
23
 
            <div class="yui-b">
24
 
            <ul id="photoList">
25
 
                <li class="all selected"><a href="#">All Photos</a></li>
26
 
                <li id="a_1"><a href="#">Album #1<span>(0)</span></a></li>
27
 
                <li id="a_2"><a href="#">Album #2<span>(0)</span></a></li>
28
 
                <li id="a_3"><a href="#">Album #3<span>(0)</span></a></li>
29
 
                <li id="a_4"><a href="#">Album #4<span>(0)</span></a></li>
30
 
            </ul>
31
 
            <p>Click and drag a photo to an album above. You can also Shift + Click to select and drag multiple photos.</p>
32
 
            <p>Click on an album to view the photos that you added.</p>
33
 
            <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>
34
 
        </div>
35
 
    </div>
36
 
    <div id="ft" class="loading"><strong></strong><div class="horiz_slider"></div><em></em></div>
37
 
</div>
38
 
 
39
 
 
40
 
<script>
41
 
YUI().use('yql', 'node', 'anim', 'dd', 'dd-plugin', 'dd-drop-plugin', 'slider', 'stylesheet', 'event-delegate', function(Y) {
42
 
    //Get a reference to the wrapper to use later and add a loading class to it.
43
 
    var wrapper = Y.one('#yui-main .yui-g ul').addClass('loading');
44
 
    //Set it's height to the height of the viewport so we can scroll it.
45
 
    wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px');
46
 
    Y.on('windowresize', function() { wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px'); });
47
 
    //Make the YQL query.
48
 
    Y.YQL('SELECT * FROM flickr.photos.search(100) WHERE (text="yuiconf") AND (safe_search = 1) AND (media = "photos") AND (api_key = "1895311ec0d2e23431a6407f3e8dffcc")', function(e) {
49
 
        if (e.query && e.query.results) {
50
 
            var photos = e.query.results.photo;
51
 
            //Walk the returned photos array
52
 
            Y.each(photos, function(v, k) {
53
 
                //Create our URL
54
 
                var url = 'http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_m.jpg',
55
 
                    //Create the image and the LI
56
 
                    li = Y.Node.create('<li class="loading"><img src="' + url + '" title="' + v.title + '"></li>'),
57
 
                    //Get the image from the LI
58
 
                    img = li.get('firstChild');
59
 
                //Append the li to the wrapper
60
 
                wrapper.appendChild(li);
61
 
                //This little hack moves the tall images to the bottom of the list
62
 
                //So they float better ;)
63
 
                img.on('load', function() {
64
 
                    //Is the height longer than the width?
65
 
                    var c = ((this.get('height') > this.get('width')) ? 'tall' : 'wide');
66
 
                    this.addClass(c);
67
 
                    if (c === 'tall') {
68
 
                        //Move it to the end of the list.
69
 
                        this.get('parentNode.parentNode').removeChild(this.get('parentNode'));
70
 
                        wrapper.appendChild(this.get('parentNode'));
71
 
                    }
72
 
                    this.get('parentNode').removeClass('loading');
73
 
                });
74
 
            });
75
 
            //Get all the newly added li's
76
 
            wrapper.all('li').each(function(node) {
77
 
                //Plugin the Drag plugin
78
 
                this.plug(Y.Plugin.Drag, {
79
 
                    offsetNode: false
80
 
                });
81
 
                //Plug the Proxy into the DD object
82
 
                this.dd.plug(Y.Plugin.DDProxy, {
83
 
                    resizeFrame: false,
84
 
                    moveOnEnd: false,
85
 
                    borderStyle: 'none'
86
 
                });
87
 
            });
88
 
            //Create and render the slider
89
 
            var sl = new Y.Slider({
90
 
                length: '200px', value: 40, max: 70, min: 5
91
 
            }).render('.horiz_slider');
92
 
            //Listen for the change
93
 
            sl.after('valueChange',function (e) {
94
 
                //Insert a dynamic stylesheet rule:
95
 
                var sheet = new Y.StyleSheet('image_slider');
96
 
                sheet.set('#yui-main .yui-g ul li', {
97
 
                    width: (e.newVal / 2) + '%'
98
 
                });
99
 
            });
100
 
            //Remove the DDM as a bubble target..
101
 
            sl._dd.removeTarget(Y.DD.DDM);
102
 
            //Remove the wrappers loading class
103
 
            wrapper.removeClass('loading');
104
 
            Y.one('#ft').removeClass('loading');
105
 
        }
106
 
    });
107
 
    //Listen for all mouseup's on the document (selecting/deselecting images)
108
 
    Y.delegate('mouseup', function(e) {
109
 
        if (!e.shiftKey) {
110
 
            //No shift key - remove all selected images
111
 
            wrapper.all('img.selected').removeClass('selected');
112
 
        }
113
 
        //Check if the target is an image and select it.
114
 
        if (e.target.test('#yui-main .yui-g ul li img')) {
115
 
            e.target.addClass('selected');
116
 
        }
117
 
    }, document, '*');
118
 
 
119
 
    //Listen for all clicks on the '#photoList li' selector
120
 
    Y.delegate('click', function(e) {
121
 
        //Prevent the click
122
 
        e.halt();
123
 
        //Remove all the selected items
124
 
        e.currentTarget.get('parentNode').all('li.selected').removeClass('selected');
125
 
        //Add the selected class to the one that one clicked
126
 
        e.currentTarget.addClass('selected');
127
 
        //The "All Photos" link was clicked
128
 
        if (e.currentTarget.hasClass('all')) {
129
 
            //Remove all the hidden classes
130
 
            wrapper.all('li').removeClass('hidden');
131
 
        } else {
132
 
            //Another "album" was clicked, get it's id
133
 
            var c = e.currentTarget.get('id');
134
 
            //Hide all items by adding the hidden class
135
 
            wrapper.all('li').addClass('hidden');
136
 
            //Now, find all the items with the class name the same as the album id
137
 
            //and remove the hidden class
138
 
            wrapper.all('li.' + c).removeClass('hidden');
139
 
        }
140
 
    }, document, '#photoList li');
141
 
 
142
 
    //Stop the drag with the escape key
143
 
    Y.one(document).on('keyup', function(e) {
144
 
        //The escape key was pressed
145
 
        if ((e.keyCode === 27) || (e.charCode === 27)) {
146
 
            //We have an active Drag
147
 
            if (Y.DD.DDM.activeDrag) {
148
 
                //Stop the drag
149
 
                Y.DD.DDM.activeDrag.stopDrag();
150
 
            }
151
 
        }
152
 
    });
153
 
    //On the drag:mouseDown add the selected class
154
 
    Y.DD.DDM.on('drag:mouseDown', function(e) {
155
 
        var img = e.target.get('node').one('img');
156
 
        //If it's a gesture event, then we need to act differently
157
 
        if (Y.DD.Drag.START_EVENT.indexOf('gesture') === 0) {
158
 
            if (img.hasClass('selected')) {
159
 
                img.removeClass('selected');
160
 
            } else {
161
 
                img.addClass('selected');
162
 
            }
163
 
        } else {
164
 
            img.removeClass('selected');
165
 
        }
166
 
    });
167
 
    //On drag start, get all the selected elements
168
 
    //Add the count to the proxy element and offset it to the cursor.
169
 
    Y.DD.DDM.on('drag:start', function(e) {
170
 
        var img = e.target.get('node').one('img').addClass('selected');
171
 
        //How many items are selected
172
 
        var count = wrapper.all('img.selected').size();
173
 
        //Set the style on the proxy node
174
 
        e.target.get('dragNode').setStyles({
175
 
            height: '25px', width: '25px'
176
 
        }).set('innerHTML', '<span>' + count + '</span>');
177
 
        //Offset the dragNode
178
 
        e.target.deltaXY = [25, 5];
179
 
    });
180
 
    //We dropped on a drop target
181
 
    Y.DD.DDM.on('drag:drophit', function(e) {
182
 
        //get the images that are selected.
183
 
        var imgs = wrapper.all('img.selected'),
184
 
            //The xy position of the item we dropped on
185
 
            toXY = e.drop.get('node').getXY();
186
 
        
187
 
        imgs.each(function(node) {
188
 
            //Clone the image, position it on top of the original and animate it to the drop target
189
 
            node.get('parentNode').addClass(e.drop.get('node').get('id'));
190
 
            var n = node.cloneNode().set('id', '').setStyle('position', 'absolute');
191
 
            Y.one('body').appendChild(n);
192
 
            n.setXY(node.getXY());
193
 
            new Y.Anim({
194
 
                node: n,
195
 
                to: {
196
 
                    height: 20, width: 20, opacity: 0,
197
 
                    top: toXY[1], left: toXY[0]
198
 
                },
199
 
                from: {
200
 
                    width: node.get('offsetWidth'),
201
 
                    height: node.get('offsetHeight')
202
 
                },
203
 
                duration: .5
204
 
            }).run();
205
 
        });
206
 
        //Update the count
207
 
        var count = wrapper.all('li.' + e.drop.get('node').get('id')).size();
208
 
        e.drop.get('node').one('span').set('innerHTML', '(' + count + ')');
209
 
    });
210
 
    //Add drop support to the albums
211
 
    Y.all('#photoList li').each(function(node) {
212
 
        if (!node.hasClass('all')) {
213
 
            //make all albums Drop Targets except the all photos.
214
 
            node.plug(Y.Plugin.Drop);
215
 
        }
216
 
    });
217
 
});
218
 
 
219
 
 
220
 
</script>
221
 
 
222
 
 
223
 
</body>
224
 
</html>