progress: set the position explicitly

Since the position of circle type progress is fixed to right of list,
user can't set the position of progress.
This patch support that user can set the position explicitly.

Change-Id: I46be3aaeac0f87500f0a81d5c23a5139b5397231

diff --git a/demos/tizen-winsets/widgets/progressbar.html b/demos/tizen-winsets/widgets/progressbar.html
index fdb04d1..8b8777f 100644 (file)
--- a/demos/tizen-winsets/widgets/progressbar.html
+++ b/demos/tizen-winsets/widgets/progressbar.html
@@ -13,7 +13,7 @@
 
                        <li data-role="list-divider">Progress ~ing</li>
                        <li id="progressingTest" >
-                               <div data-role="progress" data-style="circle" id="progressing"></div>
+                               <div data-role="progress" data-style="circle" id="progressing" style="right:10px"></div>
                                Loading..
                        </li>
                </ul>

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.progress.less b/src/themes/tizen/common/jquery.mobile.tizen.progress.less
index f68c42b..a63129a 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.tizen.progress.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.progress.less
@@ -14,8 +14,10 @@
 
 .ui-progress-container-circle {
        position: absolute;
-       right: 13 * @unit_base;
-       top: 25%;
+}
+
+.ui-li .ui-progress-container-circle {
+       top: 22%;
 }
 
 .ui-progress-circle {

diff --git a/src/widgets/progress/js/jquery.mobile.tizen.progress.js b/src/widgets/progress/js/jquery.mobile.tizen.progress.js
index 36889ea..f9d52d2 100755 (executable)
--- a/src/widgets/progress/js/jquery.mobile.tizen.progress.js
+++ b/src/widgets/progress/js/jquery.mobile.tizen.progress.js
@@ -166,23 +166,19 @@
                        }
 
                        if ( style == "circle" ) {
-                               _html = '<div class="ui-progress-container-circle">' +
-                                               '<div class="ui-progress-circle"></div>' +
-                                       '</div>';
+                               $( this.element ).addClass("ui-progress-container-circle");
+
+                               _html = '<div class="ui-progress-circle"></div>';
                        } else if ( style === "pending" ) {
-                               _html = '<div class="ui-progressbar">' +
-                                               '<div class="ui-progressbar-bg">' +
-                                                       '<div class="ui-progress-pending"></div>' +
-                                               '</div">' +
+                               $( this.element ).addClass("ui-progressbar");
+
+                               _html = '<div class="ui-progressbar-bg">' +
+                                               '<div class="ui-progress-pending"></div>' +
                                        '</div>';
                        }
 
                        this.html = $( _html );
 
-                       if ( style === "pending" ) {
-                               this.html.wrap('<div class="ui-progress-bg"></div>');
-                       }
-
                        runningClass = "ui-progress-" + style + "-running";
 
                        $.extend( this, {