gallery: bind create event

[platform/framework/web/web-ui-fw.git] / src / widgets / gallery / js / jquery.mobile.tizen.gallery.js

diff --git a/src/widgets/gallery/js/jquery.mobile.tizen.gallery.js b/src/widgets/gallery/js/jquery.mobile.tizen.gallery.js
old mode 100755 (executable)
new mode 100644 (file)
index 901925e..9015904
--- a/src/widgets/gallery/js/jquery.mobile.tizen.gallery.js
+++ b/src/widgets/gallery/js/jquery.mobile.tizen.gallery.js
@@ -37,6 +37,9 @@
  *  add(file): add the image (parameter: url of iamge)
  *  remove(index): remove the image (parameter: index of image)
  *  refresh(index): refresh the widget, should be called after add or remove. (parameter: start index)
+ *  empty: remove all of images from the gallery
+ *  length: get length of images
+ *  value(index): get or set current index of gallery (parameter: index of image)
  *
  * Events
  *
@@ -67,7 +70,7 @@
 
  /**
        @class Gallery
-       The image slider widget shows images in a gallery on the screen. <br/><br/> To add an image slider widget to the application, use the following code:
+       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:
 
                <div data-role="gallery" id="gallery" data-vertical-align="middle" data-index="3">
                        <img src="01.jpg">
@@ -89,25 +92,47 @@
 */
 /**
        @method add
-       The add method is used to add an image to the image slider. The image_file attribute defines the image file URL.
+       The add method is used to add an image to the gallery. The image_file attribute defines the image file URL.
 
                <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
                $("#gallery").gallery('add', [image_file]);
 */
 /**
        @method remove
-       The remove method is used to delete an image from the image slider. The image_index attribute defines the index of the image to be deleted.
+       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.
 
                <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
                $("#gallery").gallery('remove', [image_index]);
 */
 /**
        @method refresh
-       The refresh method is used to refresh the image slider. This method must be called after adding images to the image slider.
+       The refresh method is used to refresh the gallery. This method must be called after adding images to the gallery.
 
                <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
                $("#gallery").gallery('refresh');
 */
+/**
+       @method empty
+       The empty method is used to remove all of images from the gallery.
+
+               <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
+               $("#gallery").gallery('empty');
+*/
+/**
+       @method length
+       The length method is used to get length of images.
+
+               <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
+               length = $("#gallery").gallery('length');
+*/
+/**
+       @method value
+       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.
+
+               <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
+               value = $("#gallery").gallery('value');
+               $("#gallery").gallery('value', [image_index]);
+*/
 (function ( $, window, undefined ) {
        $.widget( "tizen.gallery", $.mobile.widget, {
                options: {
@@ -130,7 +155,6 @@
                align_type: null,
                direction: 1,
                container: null,
-               loader: [],
 
                _resize: function ( index ) {
                        var img = this.images[index],
@@ -160,7 +184,7 @@
                        var img = this.images[index],
                                img_top = 0;
 
-                       if ( !obj) {
+                       if ( !obj ) {
                                return;
                        }
                        if ( !obj.length ) {
@@ -183,9 +207,21 @@
                                processing = function () {
                                        self._resize( index );
                                        self._align( index, obj );
+                               },
+                               loading = function () {
+                                       if ( self.images[index] === undefined ) {
+                                               return;
+                                       }
+
+                                       if ( !self.images[index].height() ) {
+                                               setTimeout( loading, 10 );
+                                               return;
+                                       }
+
+                                       processing();
                                };
 
-                       if ( !obj) {
+                       if ( !obj ) {
                                return;
                        }
                        if ( !obj.length ) {
@@ -194,6 +230,9 @@
                        if ( index < 0 ) {
                                return;
                        }
+                       if ( !this.images.length ) {
+                               return;
+                       }
                        if ( index >= this.images.length ) {
                                return;
                        }
@@ -201,22 +240,11 @@
                        obj.css( "display", "block" );
                        obj.append( this.images[index] );
 
-                       if ( this.images[index].height() ) {
-                               processing();
-                       } else {
-                               this.loader[index] = setInterval( function () {
-                                       if ( !self.images[index].height() ) {
-                                               return;
-                                       }
-
-                                       processing();
-                                       clearInterval( self.loader[index] );
-                               }, 10);
-                       }
+                       loading();
                },
 
                _detach: function ( index, obj ) {
-                       if ( !obj) {
+                       if ( !obj ) {
                                return;
                        }
                        if ( !obj.length ) {
@@ -232,8 +260,14 @@
                        obj.css( "display", "none" );
                        this.images[index].removeAttr("style");
                        this.images[index].detach();
+               },
 
-                       clearInterval( this.loader[index] );
+               _detach_all: function () {
+                       var i;
+
+                       for ( i = 0; i < this.images.length; i++ ) {
+                               this.images[i].detach();
+                       }
                },
 
                _drag: function ( _x ) {
@@ -439,6 +473,10 @@
                },
 
                show: function () {
+                       if ( !this.images.length ) {
+                               return;
+                       }
+
                        this._show();
                        this._add_event();
                },
@@ -489,9 +527,7 @@
                                i++;
                        }
 
-                       for ( i = 0; i < this.images.length; i++ ) {
-                               this.images[i].detach();
-                       }
+                       this._detach_all();
 
                        index = parseInt( $( this.element ).jqmData( 'index' ), 10 );
                        if ( !index ) {
@@ -528,6 +564,8 @@
                                this.container.append( bg_html );
                                this.images.push( temp_img );
                        }
+
+                       this._detach_all();
                },
 
                refresh: function ( start_index ) {
@@ -548,6 +586,8 @@
                        this.index = start_index;
 
                        this._show();
+
+                       return this.index;
                },
 
                add: function ( file ) {
@@ -616,11 +656,28 @@
 
                        this.images.splice( index, 1 );
                        temp_img.detach();
+               },
+
+               empty: function () {
+                       this.images.splice( 0, this.images.length );
+                       this.container.find('.ui-gallery-bg').detach();
+               },
+
+               length: function () {
+                       return this.images.length;
+               },
+
+               value: function ( index ) {
+                       if ( index === undefined ) {
+                               return this.index;
+                       }
+
+                       this.refresh( index );
                }
        }); /* End of widget */
 
        // auto self-init widgets
-       $( document ).bind( "pagecreate", function ( e ) {
+       $( document ).bind( "pagecreate create", function ( e ) {
                $( e.target ).find( ":jqmData(role='gallery')" ).gallery();
        });