1 /* ***************************************************************************
2 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
4 * Permission is hereby granted, free of charge, to any person obtaining a
5 * copy of this software and associated documentation files (the "Software"),
6 * to deal in the Software without restriction, including without limitation
7 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
8 * and/or sell copies of the Software, and to permit persons to whom the
9 * Software is furnished to do so, subject to the following conditions:
11 * The above copyright notice and this permission notice shall be included in
12 * all copies or substantial portions of the Software.
14 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
20 * DEALINGS IN THE SOFTWARE.
21 * ***************************************************************************
23 * Author: Minkyu Kang <mk7.kang@samsung.com>
31 * data-role: set to 'gallery'
32 * data-index: start index
33 * data-vertical-align: set to top or middle or bottom.
37 * add(file): add the image (parameter: url of iamge)
38 * remove(index): remove the image (parameter: index of image)
39 * refresh(index): refresh the widget, should be called after add or remove. (parameter: start index)
40 * empty: remove all of images from the gallery
41 * length: get length of images
42 * value(index): get or set current index of gallery (parameter: index of image)
50 * <div data-role="gallery" id="gallery" data-index="3" data-vertical-align="middle">
59 * $('#gallery-add').bind('vmouseup', function ( e ) {
60 * $('#gallery').gallery('add', '9.jpg');
61 * $('#gallery').gallery('add', '10.jpg');
62 * $('#gallery').gallery('refresh');
65 * $('#gallery-del').bind('vmouseup', function ( e ) {
66 * $('#gallery').gallery('remove');
73 The gallery widget shows images in a gallery on the screen. <br/><br/> To add an gallery widget to the application, use the following code:
75 <div data-role="gallery" id="gallery" data-vertical-align="middle" data-index="3">
84 @property {Integer} data-index
85 Defines the index number of the first image in the gallery.
86 <br/>The default value is 0.
89 @property {String} data-vertical-align
90 Defines the image alignment. The alignment options are top, middle, and bottom.
91 <br/>The default value is top.
95 The add method is used to add an image to the gallery. The image_file attribute defines the image file URL.
97 <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
98 $("#gallery").gallery('add', [image_file]);
102 The remove method is used to delete an image from the gallery. The image_index attribute defines the index of the image to be deleted. If not set removes current image.
104 <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
105 $("#gallery").gallery('remove', [image_index]);
109 The refresh method is used to refresh the gallery. This method must be called after adding images to the gallery.
111 <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
112 $("#gallery").gallery('refresh');
116 The empty method is used to remove all of images from the gallery.
118 <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
119 $("#gallery").gallery('empty');
123 The length method is used to get length of images.
125 <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
126 length = $("#gallery").gallery('length');
130 The value method is used to get or set current index of gallery. The image_index attribute defines the index of the image to be set. If not get current index.
132 <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
133 value = $("#gallery").gallery('value');
134 $("#gallery").gallery('value', [image_index]);
136 (function ( $, window, undefined ) {
137 $.widget( "tizen.gallery", $.mobile.widget, {
159 _resize: function ( index ) {
160 var img = this.images[index],
161 width = this.images[index].width(),
162 height = this.images[index].height(),
165 img_max_width = this.max_width - margin,
166 img_max_height = this.max_height - margin;
168 ratio = height / width;
170 if ( width > img_max_width ) {
171 img.width( img_max_width );
172 img.height( img_max_width * ratio );
175 height = img.height();
177 if ( height > img_max_height ) {
178 img.height( img_max_height );
179 img.width( img_max_height / ratio );
183 _align: function ( index, obj ) {
184 var img = this.images[index],
194 if ( this.align_type == "middle" ) {
195 img_top = ( this.max_height - img.height() ) / 2;
196 } else if ( this.align_type == "bottom" ) {
197 img_top = this.max_height - img.height();
202 obj.css( 'top', img_top + 'px' );
205 _attach: function ( index, obj ) {
207 processing = function () {
208 self._resize( index );
209 self._align( index, obj );
211 loading = function () {
212 if ( self.images[index] === undefined ) {
216 if ( !self.images[index].height() ) {
217 setTimeout( loading, 10 );
233 if ( !this.images.length ) {
236 if ( index >= this.images.length ) {
240 obj.css( "display", "block" );
241 obj.append( this.images[index] );
246 _detach: function ( index, obj ) {
256 if ( index >= this.images.length ) {
260 obj.css( "display", "none" );
261 this.images[index].removeAttr("style");
262 this.images[index].detach();
265 _detach_all: function () {
268 for ( i = 0; i < this.images.length; i++ ) {
269 this.images[i].detach();
273 _drag: function ( _x ) {
277 if ( !this.dragging ) {
281 if ( this.options.flicking === false ) {
282 delta = this.org_x - _x;
285 if ( delta < 0 && !this.prev_img.length ) {
289 if ( delta > 0 && !this.next_img.length ) {
294 coord_x = _x - this.org_x;
296 this.cur_img.css( 'left', coord_x + 'px' );
297 if ( this.next_img.length ) {
298 this.next_img.css( 'left', coord_x + this.window_width + 'px' );
300 if ( this.prev_img.length ) {
301 this.prev_img.css( 'left', coord_x - this.window_width + 'px' );
305 _move: function ( _x ) {
306 var delta = this.org_x - _x,
317 flip = delta < ( this.max_width * 0.45 ) ? 0 : 1;
319 flip = -delta < ( this.max_width * 0.45 ) ? 0 : 1;
323 drag_time = Date.now() - this.org_time;
325 if ( Math.abs( delta ) / drag_time > 1 ) {
331 if ( delta > 0 && this.next_img.length ) {
333 this._detach( this.index - 1, this.prev_img );
335 this.prev_img = this.cur_img;
336 this.cur_img = this.next_img;
337 this.next_img = this.next_img.next();
341 if ( this.next_img.length ) {
342 this.next_img.css( 'left', this.window_width + 'px' );
343 this._attach( this.index + 1, this.next_img );
348 } else if ( delta < 0 && this.prev_img.length ) {
350 this._detach( this.index + 1, this.next_img );
352 this.next_img = this.cur_img;
353 this.cur_img = this.prev_img;
354 this.prev_img = this.prev_img.prev();
358 if ( this.prev_img.length ) {
359 this.prev_img.css( 'left', -this.window_width + 'px' );
360 this._attach( this.index - 1, this.prev_img );
367 sec = this.options.duration;
372 setTimeout( function () {
376 this.cur_img.animate( { left: 0 }, sec );
377 if ( this.next_img.length ) {
378 this.next_img.animate( { left: this.window_width }, sec );
380 if ( this.prev_img.length ) {
381 this.prev_img.animate( { left: -this.window_width }, sec );
385 _add_event: function () {
389 this.container.bind( 'vmousemove', function ( e ) {
395 if ( !self.dragging ) {
399 self._drag( e.pageX );
402 this.container.bind( 'vmousedown', function ( e ) {
409 self.dragging = true;
411 self.org_x = e.pageX;
413 self.org_time = Date.now();
416 this.container.bind( 'vmouseup', function ( e ) {
421 self.dragging = false;
423 self._move( e.pageX );
426 this.container.bind( 'vmouseout', function ( e ) {
430 if ( !self.dragging ) {
434 if ( ( e.pageX < 20 ) ||
435 ( e.pageX > ( self.max_width - 20 ) ) ) {
436 self._move( e.pageX );
437 self.dragging = false;
442 _del_event: function () {
443 this.container.unbind( 'vmousemove' );
444 this.container.unbind( 'vmousedown' );
445 this.container.unbind( 'vmouseup' );
446 this.container.unbind( 'vmouseout' );
451 this.window_width = $( window ).width();
452 this.max_width = this._get_width();
453 this.max_height = this._get_height();
454 this.container.css( 'height', this.max_height );
456 this.cur_img = $( 'div' ).find( '.ui-gallery-bg:eq(' + this.index + ')' );
457 this.prev_img = this.cur_img.prev();
458 this.next_img = this.cur_img.next();
460 this._attach( this.index - 1, this.prev_img );
461 this._attach( this.index, this.cur_img );
462 this._attach( this.index + 1, this.next_img );
464 if ( this.prev_img.length ) {
465 this.prev_img.css( 'left', -this.window_width + 'px' );
468 this.cur_img.css( 'left', '0px' );
470 if ( this.next_img.length ) {
471 this.next_img.css( 'left', this.window_width + 'px' );
476 if ( !this.images.length ) {
485 this._detach( this.index - 1, this.prev_img );
486 this._detach( this.index, this.cur_img );
487 this._detach( this.index + 1, this.next_img );
495 _get_width: function () {
496 return $( this.element ).width();
499 _get_height: function () {
500 var $page = $( this.element ).parentsUntil( 'ui-page' ),
501 $content = $page.children( '.ui-content' ),
502 header_h = $page.children( '.ui-header' ).outerHeight() || 0,
503 footer_h = $page.children( '.ui-footer' ).outerHeight() || 0,
504 padding = parseFloat( $content.css( 'padding-top' ) )
505 + parseFloat( $content.css( 'padding-bottom' ) ),
506 content_h = $( window ).height() - header_h - footer_h - padding;
511 _create: function () {
517 $( this.element ).wrapInner( '<div class="ui-gallery"></div>' );
518 $( this.element ).find( 'img' ).wrap( '<div class="ui-gallery-bg"></div>' );
520 this.container = $( this.element ).find('.ui-gallery');
522 temp_img = $( 'div' ).find( '.ui-gallery-bg:first' );
524 while ( temp_img.length ) {
525 this.images[i] = temp_img.find( 'img' );
526 temp_img = temp_img.next();
532 index = parseInt( $( this.element ).jqmData( 'index' ), 10 );
539 if ( index >= this.images.length ) {
540 index = this.images.length - 1;
545 this.align_type = $( this.element ).jqmData( 'vertical-align' );
547 $( window ).bind( 'resize', function () {
552 _update: function () {
557 while ( this.images_hold.length ) {
558 image_file = this.images_hold.shift();
560 bg_html = $( '<div class="ui-gallery-bg"></div>' );
561 temp_img = $( '<img src="' + image_file + '"></div>' );
563 bg_html.append( temp_img );
564 this.container.append( bg_html );
565 this.images.push( temp_img );
571 refresh: function ( start_index ) {
576 if ( start_index === undefined ) {
577 start_index = this.index;
579 if ( start_index < 0 ) {
582 if ( start_index >= this.images.length ) {
583 start_index = this.images.length - 1;
586 this.index = start_index;
593 add: function ( file ) {
594 this.images_hold.push( file );
597 remove: function ( index ) {
600 if ( index === undefined ) {
604 if ( index < 0 || index >= this.images.length ) {
608 if ( index == this.index ) {
609 temp_img = this.cur_img;
611 if ( this.index == 0 ) {
613 } else if ( this.index == this.images.length - 1 ) {
617 if ( this.direction < 0 ) {
618 this.cur_img = this.prev_img;
619 this.prev_img = this.prev_img.prev();
620 if ( this.prev_img.length ) {
621 this.prev_img.css( 'left', -this.window_width );
622 this._attach( index - 2, this.prev_img );
626 this.cur_img = this.next_img;
627 this.next_img = this.next_img.next();
628 if ( this.next_img.length ) {
629 this.next_img.css( 'left', this.window_width );
630 this._attach( index + 2, this.next_img );
634 this.cur_img.animate( { left: 0 }, this.options.duration );
636 } else if ( index == this.index - 1 ) {
637 temp_img = this.prev_img;
638 this.prev_img = this.prev_img.prev();
639 if ( this.prev_img.length ) {
640 this.prev_img.css( 'left', -this.window_width );
641 this._attach( index - 1, this.prev_img );
645 } else if ( index == this.index + 1 ) {
646 temp_img = this.next_img;
647 this.next_img = this.next_img.next();
648 if ( this.next_img.length ) {
649 this.next_img.css( 'left', this.window_width );
650 this._attach( index + 1, this.next_img );
654 temp_img = $( 'div' ).find( '.ui-gallery-bg:eq(' + index + ')' );
657 this.images.splice( index, 1 );
662 this.images.splice( 0, this.images.length );
663 this.container.find('.ui-gallery-bg').detach();
666 length: function () {
667 return this.images.length;
670 value: function ( index ) {
671 if ( index === undefined ) {
675 this.refresh( index );
677 }); /* End of widget */
679 // auto self-init widgets
680 $( document ).bind( "pagecreate create", function ( e ) {
681 $( e.target ).find( ":jqmData(role='gallery')" ).gallery();
684 $( document ).bind( "pageshow", function ( e ) {
685 $( e.target ).find( ":jqmData(role='gallery')" ).gallery( 'show' );
688 $( document ).bind( "pagebeforehide", function ( e ) {
689 $( e.target ).find( ":jqmData(role='gallery')" ).gallery( 'hide' );