Fix animations in JavaScript mesh API examples
[platform/core/uifw/dali-toolkit.git] / node-addon / examples / item-view.js
1  var window= {
2            x:0,
3            y:0,
4            width:1920,
5            height: 1080,
6            transparent: false,
7            name:'itemview-example'
8  };
9
10  var viewMode={
11        'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
12        'stereoBase': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
13  };
14
15  var options= {
16     'window': window,
17     'viewMode': viewMode,
18  }
19
20 //desktop
21 //var dali = require('../build/Release/dali')( options );
22
23 //target
24 var dali = require('dali')( options );
25
26 var items = [];
27 var button;
28 var stageSize;
29
30 var itemView;
31 var itemFactory;
32
33 var currentLayoutIndex = 0;
34 var totalItemCount = 100;
35
36 var imageDir = "./images/";
37
38 var daliApp = {};
39
40 daliApp.createItemView = function() {
41
42   // Create item view data
43   var itemViewData = [];
44   for (var itemId = 0; itemId < totalItemCount; itemId++)
45   {
46     var data = {};
47     data["template"] = "template-item-list"; // Create items initially with list template
48     data["icon_path"] = imageDir + "icon-" + itemId % 3 + ".png";
49     data["title_text"] = "Item " + itemId;
50     itemViewData[itemId] = data;
51   }
52
53   // Create item factory and set the data
54   itemFactory = new dali.ItemFactory();
55   itemFactory.jsonTemplateFile = "./scripts/item-template.json";
56   itemFactory.data = itemViewData;
57
58   // Create item view
59   stageSize = dali.stage.getSize();
60   itemView = new dali.Control("ItemView", itemFactory);
61   itemView.size = [stageSize.x, stageSize.y, 0.0];
62   itemView.parentOrigin = dali.CENTER_LEFT;
63   itemView.anchorPoint = dali.CENTER_LEFT;
64   itemView.refreshInterval = 4.0;
65
66   // Add item view to the stage
67   dali.stage.add( itemView );
68
69   // Create scroll bar for item view
70   var scrollBar = new dali.Control("ScrollBar");
71   scrollBar.parentOrigin = dali.TOP_RIGHT;
72   scrollBar.anchorPoint = dali.TOP_RIGHT;
73   scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
74   scrollBar.heightResizePolicy = "FILL_TO_PARENT";
75   itemView.add(scrollBar);
76
77   // Add the list and grid layouts
78   itemView.addLayout(dali.ITEM_LAYOUT_LIST); // layout index 0
79   itemView.addLayout(dali.ITEM_LAYOUT_GRID); // layout index 1
80
81   // Set custom item size for list layout
82   itemView.setItemSize(0, [stageSize.x, stageSize.y * 0.1, 0.0]);
83
84   // Set custom item size for grid layout
85   var layoutMargin = 120;
86   itemView.setItemSize(1, [(stageSize.x - layoutMargin) / 4, stageSize.y * 0.2, 0.0]);
87
88   // Activate the list layout
89   itemView.activateLayout(0, itemView.size);
90
91   // Create button for layout switching
92   button = new dali.Control("PushButton");
93   button.size = [100.0, 60.0, 0.0];
94   button.position = [-20.0, 20.0, 0.0];
95   button.parentOrigin = dali.TOP_RIGHT;
96   button.anchorPoint = dali.TOP_RIGHT;
97   button.labelText = "Switch";
98   dali.stage.add( button );
99
100   // Connect a signal callback to button pressed signal
101   button.on("pressed", daliApp.buttonPressedEvent);
102 }
103
104 daliApp.buttonPressedEvent = function( button ) {
105
106   // Calculate the layout index for the next layout to switch to
107   currentLayoutIndex++;
108   currentLayoutIndex = currentLayoutIndex % itemView.getLayoutCount();
109
110   // Activate the next layout
111   itemView.activateLayout(currentLayoutIndex, [stageSize.x, stageSize.y, 0.0], 0.0);
112
113   // Change the item template in item view data as we want to change the layout of the items
114   var data = itemFactory.data;
115   for (var itemId = 0; itemId < totalItemCount; itemId++)
116   {
117     if(currentLayoutIndex == 0)
118     {
119       // List layout
120       data[itemId]["template"] = "template-item-list"; // Create items with list template
121     }
122     else
123     {
124       // Grid layout
125       data[itemId]["template"] = "template-item-grid"; // Create items with grid template
126     }
127   }
128   itemFactory.data = data;
129 }
130
131 function startup()
132 {
133   daliApp.init();
134 }
135
136 daliApp.init = function()
137 {
138   daliApp.createItemView();
139 }
140
141 startup();
142