fix(TAU): modify some code snippet

Change-Id: I24df561afd3c73f172582d2c4767714f7251c9a4
Signed-off-by: Heeju Joo <heeju.joo@samsung.com>

diff --git a/org.tizen.ui.practices/html/index.htm b/org.tizen.ui.practices/html/index.htm
index d2bd035..4875f88 100644 (file)
--- a/org.tizen.ui.practices/html/index.htm
+++ b/org.tizen.ui.practices/html/index.htm
@@ -34,6 +34,8 @@
                                <li><a href="web/tau/notepad_w.htm">Creating a Notepad UI Application</a></li>
                                <li><a href="web/tau/circular_ui_ww.htm">Applications for Circular UI</a>
                                        <ul>
+                                               <li><a href="web/tau/scrollbar_ww.htm">Using the Circle-shaped Scroll Bar</a></li>
+                                               <li><a href="web/tau/tau_rotary_ww.htm">Handling Rotary Event</a></li>
                                                <li><a href="web/tau/helper_ww.htm">Using the Helper Script</a></li>
                                                <li><a href="web/tau/list_ww.htm">Creating Snap Lists</a></li>  
                                                <li><a href="web/tau/header_ww.htm">Creating Expandable Headers</a></li>

diff --git a/org.tizen.ui.practices/html/web/tau/tau_rotary_ww.htm b/org.tizen.ui.practices/html/web/tau/tau_rotary_ww.htm
index 7bf5d45..93dd026 100644 (file)
--- a/org.tizen.ui.practices/html/web/tau/tau_rotary_ww.htm
+++ b/org.tizen.ui.practices/html/web/tau/tau_rotary_ww.htm
@@ -83,7 +83,7 @@ You can implement some rotary dependent behaviors with following example code.</
 &nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;TAU&nbsp;Basic&lt;/h2&gt;
 &nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&nbsp;content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=&quot;#popup&quot;&nbsp;data-rel=&quot;popup&quot;&gt;Open&nbsp;Popup&lt;/a&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Fill&nbsp;contents&nbsp;--&gt;
 &nbsp;&nbsp;&nbsp;&lt;/div&gt;
@@ -106,21 +106,21 @@ You can implement some rotary dependent behaviors with following example code.</
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;popupshow&quot;,&nbsp;function&nbsp;popupOpenHandler(e)&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;popup&nbsp;=&nbsp;e.target,&nbsp;&nbsp;&nbsp;//&nbsp;popup&nbsp;element
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller&nbsp;=&nbsp;popup.querySelector(&quot;.ui-popup-wrapper&quot;),&nbsp;&nbsp;&nbsp;//&nbsp;element&nbsp;that&nbsp;has&nbsp;scroll
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;rotary&nbsp;event&nbsp;handler
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotaryEventHandler&nbsp;=&nbsp;function(e)&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e.detail.direction&nbsp;===&nbsp;&quot;CW&quot;)&nbsp;{&nbsp;//&nbsp;Right&nbsp;direction
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller.scrollTop&nbsp;+=&nbsp;SCROLL_STEP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(e.detail.direction&nbsp;===&nbsp;&quot;CCW&quot;)&nbsp;{&nbsp;//&nbsp;Left&nbsp;direction
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller.scrollTop&nbsp;-=&nbsp;SCROLL_STEP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;register&nbsp;rotary&nbsp;event&nbsp;when&nbsp;popup&nbsp;is&nbsp;shown.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller&nbsp;=&nbsp;popup.querySelector(&quot;.ui-popup-wrapper&quot;),&nbsp;&nbsp;&nbsp;//&nbsp;element&nbsp;that&nbsp;has&nbsp;scroll
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;rotary&nbsp;event&nbsp;handler
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotaryEventHandler&nbsp;=&nbsp;function(e)&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e.detail.direction&nbsp;===&nbsp;&quot;CW&quot;)&nbsp;{&nbsp;//&nbsp;Right&nbsp;direction
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller.scrollTop&nbsp;+=&nbsp;SCROLL_STEP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(e.detail.direction&nbsp;===&nbsp;&quot;CCW&quot;)&nbsp;{&nbsp;//&nbsp;Left&nbsp;direction
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller.scrollTop&nbsp;-=&nbsp;SCROLL_STEP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;register&nbsp;rotary&nbsp;event
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;,&nbsp;rotaryEventHandler,&nbsp;false);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;unregister&nbsp;rotary&nbsp;event&nbsp;when&nbsp;popup&nbsp;is&nbsp;hidden
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;unregister&nbsp;rotary&nbsp;event
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup.addEventListener(&quot;popuphide&quot;,&nbsp;function&nbsp;popupHideHandler()&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup.removeEventListener(&quot;popuphide&quot;,&nbsp;popupHideHandler,&nbsp;false);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;,&nbsp;rotaryEventHandler,&nbsp;false);
@@ -140,10 +140,10 @@ You can implement some rotary dependent behaviors with following example code.</
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;register&nbsp;rotary&nbsp;event&nbsp;when&nbsp;popup&nbsp;is&nbsp;shown.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;register&nbsp;rotary&nbsp;event
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;,&nbsp;rotaryEventHandler,&nbsp;false);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;unregister&nbsp;rotary&nbsp;event&nbsp;when&nbsp;popup&nbsp;is&nbsp;hidden
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;unregister&nbsp;rotary&nbsp;event
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforehide&quot;,&nbsp;function&nbsp;pageHideHanlder()&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pagebeforehide&quot;,&nbsp;pageHideHanlder,&nbsp;false);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;,&nbsp;rotaryEventHandler,&nbsp;false);

diff --git a/org.tizen.ui.practices/index.xml b/org.tizen.ui.practices/index.xml
index 6fd0385..54d0d2c 100644 (file)
--- a/org.tizen.ui.practices/index.xml
+++ b/org.tizen.ui.practices/index.xml
@@ -12,6 +12,8 @@
                <topic href="html/web/tau/ui_component_w.htm" label="UI Components"></topic>
                <topic href="html/web/tau/notepad_w.htm" label="Creating a Notepad UI Application"></topic>
                <topic href="html/web/tau/circular_ui_ww.htm" label="Applications for Circular UI">
+                       <topic href="web/tau/scrollbar_ww.htm" label="Using the Circle-shaped Scroll Bar"></topic>
+                       <topic href="web/tau/tau_rotary_ww.htm" label="Handling Rotary Event"></topic>
                        <topic href="html/web/tau/helper_ww.htm" label="Using the Helper Script"></topic>
                        <topic href="html/web/tau/list_ww.htm" label="Creating Snap Lists"></topic>
                        <topic href="html/web/tau/header_ww.htm" label="Creating Expandable Headers"></topic>