projects / platform / framework / web / web-ui-fw.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 387b67c)
gallery: adds support new APIs
authorMinkyu Kang <mk7.kang@samsung.com>
Thu, 3 Jan 2013 11:35:54 +0000 (20:35 +0900)
committerYoumin Ha <youmin.ha@samsung.com>
Fri, 11 Jan 2013 08:40:54 +0000 (17:40 +0900)
This patch add following APIs.
empty: remove all of images from the gallery
length: get length of images
value: get current index

Change-Id: I6854cf1afaf0f219e8c8542fb5edd6dd7b55de63

demos/tizen-winsets/main.js patch | blob | history
demos/tizen-winsets/widgets/gallery.html patch | blob | history
src/widgets/gallery/js/jquery.mobile.tizen.gallery.js patch | blob | history

diff --git a/demos/tizen-winsets/main.js b/demos/tizen-winsets/main.js
index c81be57..a34d1fb 100755 (executable)
--- a/demos/tizen-winsets/main.js
+++ b/demos/tizen-winsets/main.js
@@ -75,6 +75,23 @@ $( document ).bind("pagecreate", function () {
                $('#notification').notification('icon', './test/icon01.png');
        });
 
+       $('#gallery-demo').bind('pageshow', function () {
+               $('#gallery').gallery('add', './test/01.jpg');
+               $('#gallery').gallery('add', './test/02.jpg');
+               $('#gallery').gallery('add', './test/03.jpg');
+               $('#gallery').gallery('add', './test/04.jpg');
+               $('#gallery').gallery('add', './test/05.jpg');
+               $('#gallery').gallery('add', './test/06.jpg');
+               $('#gallery').gallery('add', './test/07.jpg');
+               $('#gallery').gallery('add', './test/08.jpg');
+               $('#gallery').gallery('add', './test/09.jpg');
+               $('#gallery').gallery('refresh', 3);
+       });
+
+       $('#gallery-demo').bind('pagebeforehide', function () {
+               $('#gallery').gallery('empty');
+       });
+
        $('#gallery-add').bind('vmouseup', function ( e ) {
                $('#gallery').gallery('add', './test/10.jpg');
                $('#gallery').gallery('add', './test/11.jpg');
diff --git a/demos/tizen-winsets/widgets/gallery.html b/demos/tizen-winsets/widgets/gallery.html
index d42e444..481d10e 100755 (executable)
--- a/demos/tizen-winsets/widgets/gallery.html
+++ b/demos/tizen-winsets/widgets/gallery.html
@@ -1,19 +1,10 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="gallery-demo" data-add-back-btn="true">
        <div data-role="header" data-position="fixed">
                <h1>Gallery</h1>
        </div>
        <div data-role="content" data-scroll="none">
-               <div data-role="gallery" id="gallery" data-index="3" data-vertical-align="middle">
-                       <img src="./test/01.jpg">
-                       <img src="./test/02.jpg">
-                       <img src="./test/03.jpg">
-                       <img src="./test/04.jpg">
-                       <img src="./test/05.jpg">
-                       <img src="./test/06.jpg">
-                       <img src="./test/07.jpg">
-                       <img src="./test/08.jpg">
-                       <img src="./test/09.jpg">
+               <div data-role="gallery" id="gallery" data-vertical-align="middle">
                </div>
        </div> <!-- /content -->
        <div data-role="footer"data-position ="fixed">
diff --git a/src/widgets/gallery/js/jquery.mobile.tizen.gallery.js b/src/widgets/gallery/js/jquery.mobile.tizen.gallery.js
index 901925e..9c9937f 100755 (executable)
--- 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: get current index of gallery
  *
  * 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,46 @@
 */
 /**
        @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 current index of gallery.
+
+               <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
+               value = $("#gallery").gallery('value');
+*/
 (function ( $, window, undefined ) {
        $.widget( "tizen.gallery", $.mobile.widget, {
                options: {
@@ -160,7 +184,7 @@
                        var img = this.images[index],
                                img_top = 0;
 
-                       if ( !obj) {
+                       if ( !obj ) {
                                return;
                        }
                        if ( !obj.length ) {
@@ -185,7 +209,7 @@
                                        self._align( index, obj );
                                };
 
-                       if ( !obj) {
+                       if ( !obj ) {
                                return;
                        }
                        if ( !obj.length ) {
@@ -216,7 +240,7 @@
                },
 
                _detach: function ( index, obj ) {
-                       if ( !obj) {
+                       if ( !obj ) {
                                return;
                        }
                        if ( !obj.length ) {
@@ -236,6 +260,14 @@
                        clearInterval( this.loader[index] );
                },
 
+               _detach_all: function () {
+                       var i;
+
+                       for ( i = 0; i < this.images.length; i++ ) {
+                               this.images[i].detach();
+                       }
+               },
+
                _drag: function ( _x ) {
                        var delta,
                                coord_x;
@@ -489,9 +521,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 +558,8 @@
                                this.container.append( bg_html );
                                this.images.push( temp_img );
                        }
+
+                       this._detach_all();
                },
 
                refresh: function ( start_index ) {
@@ -548,6 +580,8 @@
                        this.index = start_index;
 
                        this._show();
+
+                       return this.index;
                },
 
                add: function ( file ) {
@@ -616,6 +650,19 @@
 
                        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 () {
+                       return this.index;
                }
        }); /* End of widget */
 
@@ -624,7 +671,7 @@
                $( e.target ).find( ":jqmData(role='gallery')" ).gallery();
        });
 
-       $( document ).bind( "pageshow", function ( e ) {
+       $( document ).bind( "pagebeforeshow", function ( e ) {
                $( e.target ).find( ":jqmData(role='gallery')" ).gallery( 'show' );
        });
 
Domain: Web Framework / Uncategorized;