Drawer

Wearable Drawer component provides drawer UX in wearable device.
The drawer component is a panel that the application's sub layout on the left or right edge of the screen.
This component is hidden most of the time, but user can be opened as swipe gesture from the edge of the screen or click the element that is added event handler, handler has drawer.open() method.

Note
This component is supported since 2.3.
We recommend you to make a handler element. Because if you don't set the handler, handler is set to page element automatically.
Nevertheless, if you really want to make the page element as handler, you should be careful of data-drag-edge or dragEdge option value.
Because default value of data-drag-edge or dragEdge option is set to '1' - which means that the whole area of page element becomes drawable handler.

Table of Contents

  1. How to create Drawer
  2. Options
  3. HTML Example with Options
  4. Drawer state
  5. Methods
    1. setDragHandler
    2. transition
    3. open
    4. close
    5. getState

How to create Drawer

To use Drawer component in your app, you need to declare "Drawer Handler(such as button)" and "Drawer Body(component)".
Please refer following example.

Note
If you used the drawer handler, you must implement style code of handler. We don't provide default handler style as framework level, but we provide custom style example in 'style.css'.

HTML

<div id="moreoptionsPage" class="ui-page">
   <header class="ui-header ui-has-more">
      <h2 class="ui-title">Drawer</h2>
      <button class="ui-more ui-icon-overflow">Drawer</button>
   </header>
   <div class="ui-content content-padding">
      Drawer
   </div>

   <!--Circle Profile-->
   <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moretionsPage" data-position="right"
        data-enable="true" data-drag-edge="1">
      <div id="moreoptionsSectionChanger" class="ui-section-changer">
         <div>
            <seciont>
               <button class="option-button">1</button> 
            </seciont>
            <seciont>
               <button class="option-button">2</button> 
            </seciont>
            <seciont>
               <button class="option-button">3</button> 
            </seciont>
         </div>
      </div>
   </div>
</div>

JavaScript

(function()
{
   var page = document.querySelector("#moreoptionsPage"),
       popup = page.querySelector("#moreoptionsPopup"),
       drawer = page.querySelector("#moreoptionsDrawer"),
       handler = page.querySelector(".ui-more");

   page.addEventListener("pagebeforeshow", function()
   {
      var popupWidget;

      tau.helper.DrawerMoreStyle.create(drawer, {handler: ".ui-more",});            
   }); 
})();

CSS

#moreoptionsDrawer
{
   display: none;
}
@media all and (-tizen-geometric-shape: circle)
{
   #moreoptionsDrawer
   {
      display: block;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 100%;
   } 
   #moreoptionsPopup
   {
      display: none;
   }   
   .sections,
   .options
   {
      text-align: center;
   } 
   .option-button
   {
      width: 158px;
      height: 158px;
      background-color: #a4a4a4;
      position: relative;
      left: 50%;
      transform: translate3d(-50%, -50%, 0); 
      top: 50%;
      border-radius: 50%;
      border: none;
      text-align: center;
      line-height: 158px;
      -webkit-appearance: none;
   }   
}

Options

Option Input type Default value Description
drawerTarget string ".ui-page" Drawer appended target. Value type is CSS selector type.
position "left" | "right" "left" Set the drawer position.
If you set the value is "left", drawer appear from left side.
If you set the value is "right", drawer appear from right side.
enable boolean true Enable drawer component.
dragEdge number 1 Set the area on TARGET element to activate the drawer component.
The value is based on ratio, so you should set the value between 0.0 and 1.0.
This area has dependency on the position value such as 'right' or 'left'.
For example, if you set the value to '0.5' and position was set to 'left', the area to activate the drawer component is set to the left half side of the TARGET element.
If you don't set the handler, TARGET element is set to the element which is selected as Target option value.
However, if you set the handler, this option value is set to '1'.

HTML Example with Options

Drawer positioning

You can declare to 'position' option as below method. 
<div class="ui-drawer" data-position="left" id="leftdrawer">

Drawer targeting

You can declare to 'drawerTarget' option as below method. 
<div class="ui-drawer" data-drawer-target="#drawerPage">

Drawer enable

You can declare to 'enable' option as below method. 
<div class="ui-drawer" data-enable="true">

Drawer drag gesture starting area

You can declare to 'enable' option as below method. 
<div class="ui-drawer" data-drag-edge="1">

Drawer state

Drawer has four state type.

  • "closed" - Drawer closed state.
  • "opened" - Drawer opened state.
  • "sliding" - Drawer is sliding state. This state does not mean that will operate open or close.
  • "settling" - drawer is settling state. 'Settle' means open or close status. So, this state means that drawer is animating for opened or closed state.

You can get those states from getState() method.

Methods

Summary

Method Description 
setDragHandler(Element element)

Set Drawer drag handler.
If developer use handler, drag event is bound at handler only.

 
transition(Integer position)

Transition Drawer.
This method use only positive integer number.

 
open()

Open Drawer.

 
close()

Close Drawer.

 
String getState()

Get state of Drawer.
setDragHandler

Set Drawer drag handler.
If developer use handler, drag event is bound at handler only.

setDragHandler(Element element)

Running example in pure JavaScript:

<!--Drawer handlers-->
<a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left"
     data-enable="true" data-drag-edge="1">
   <header class="ui-header">
      <h2 class="ui-title">Left Drawer</h2>
   </header>
   <div id="leftClose" class="ui-content">
      <p>Click Close</p>
   </div>
</div>
<script>
   var handler = document.getElementById("leftDrawerHandler"),
       drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));

   drawer.setDragHandler(handler);
</script>

Parameters:

Parameter Type Required / optional Default value Description
element Element required

Return value:

No Return Value
transition

Transition Drawer.
This method use only positive integer number.

transition(Integer position)

Running example in pure JavaScript:
<a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left"
     data-enable="true" data-drag-edge="1">
   <header class="ui-header">
      <h2 class="ui-title">Left Drawer</h2>
   </header>
   <div id="leftClose" class="ui-content">
      <p>Click Close</p>
   </div>
</div>
<script>
   var handler = document.getElementById("leftDrawerHandler"),
       drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
   drawer.Transition(60);
</script>

Parameters:

Parameter Type Required / optional Default value Description
position Integer required

Return value:

No Return Value
open

Open Drawer.

open()

Running example in pure JavaScript:
<!--Drawer handlers-->
<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left"
     data-enable="true" data-drag-edge="1">
   <header class="ui-header">
      <h2 class="ui-title">Left Drawer</h2>
   </header>
   <div id="leftClose" class="ui-content">
      <p>Click Close</p>
   </div>
</div>
<script>
   var handler = document.getElementById("leftDrawerHandler"),
       drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));

   drawer.open();
</script>

Return value:

No Return Value
close

Close Drawer.

close()

Running example in pure JavaScript:
<!--Drawer handlers-->
<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left"
     data-enable="true" data-drag-edge="1">
   <header class="ui-header">
      <h2 class="ui-title">Left Drawer</h2>
   </header>
   <div id="leftClose" class="ui-content">
      <p>Click Close</p>
   </div>
</div>
<script>
   var handler = document.getElementById("leftDrawerHandler"),
       drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));

   drawer.close();
</script>

Return value:

No Return Value
getState

Get state of Drawer.

String getState()

Running example in pure JavaScript:
<!--Drawer handlers-->
<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left"
     data-enable="true" data-drag-edge="1">
   <header class="ui-header">
      <h2 class="ui-title">Left Drawer</h2>
   </header>
   <div id="leftClose" class="ui-content">
      <p>Click Close</p>
   </div>
</div>
<script>
   var handler = document.getElementById("leftDrawerHandler"),
       drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")),
       state;

   state = drawer.getState();
</script>

Return value:

Type Description
String Drawer state {"closed"|"opened"|"sliding"|"settling"}