UNPKG

5.76 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6</head>
7
8<script src="https://unpkg.com/pejava.js@1.0.7/projects/app_js/dist/index.js"></script>
9<script>
10 document.addEventListener("app", function (e) {
11 application(e.detail);
12 })
13</script>
14
15<script>
16 function application(app) {
17 let menu = createMenuContainer(app);
18 app.push(menu);
19 }
20 function createMenuContainer(app) {
21 let container = new Container({
22 title: "Menu",
23 description: "some comment",
24 className: "menu-bar"
25 });
26
27 let menu = new Menu({
28 list: [
29 new Item({title: "News", value: "container_news"}),
30 new Item({title: "Settings", value: "container_settings"}),
31 new Item({title: "Info", value: "container_info"}),
32 ]
33 });
34
35 menu.listen("onSelect", function(action) {
36 // action.target - it is variable "menu";
37 // action.target.active() - selected Item object
38 openContainer(app, action.target.active().value());
39 }, true); // sure - need to apply this handler on phase "after changes"
40 container.push(menu);
41 return container;
42 }
43
44 function createNewsContainer() {
45 let container = new Container({
46 title: "News",
47 description: "News today",
48 children: [
49 new Container({
50 title: "News 1",
51 description: "Important news",
52 className: "padding",
53 children: [
54 new Txt("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cumque cupiditate dolore, doloremque doloribus, enim et eum harum ipsam laudantium minus mollitia nesciunt quae quisquam soluta tenetur voluptatibus. Labore, quidem.")
55 ]
56 }),
57 new Container({
58 title: "News 2",
59 description: "Just a news",
60 className: "padding",
61 children: [
62 new Txt("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cumque cupiditate dolore, doloremque doloribus, enim et eum harum ipsam laudantium minus mollitia nesciunt quae quisquam soluta tenetur voluptatibus. Labore, quidem.")
63 ]
64 }),
65 new Container({
66 title: "News 3",
67 description: "Not a news",
68 className: "padding",
69 children: [
70 new Txt("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cumque cupiditate dolore, doloremque doloribus, enim et eum harum ipsam laudantium minus mollitia nesciunt quae quisquam soluta tenetur voluptatibus. Labore, quidem.")
71 ]
72 }),
73 new Box({
74 children: [new Img("https://picsum.photos/150/100")],
75 className: "padding margin"
76 })
77 ]
78 });
79 return container;
80 }
81 function createSettingsContainer() {
82 let container = new Container({
83 title: "Settings",
84 description: "Private settings",
85 className: "padding",
86 });
87 container.push(new Input({ // index 0
88 title: "Autoreply in (sec)",
89 value: "10",
90 type: "number",
91 comment: "You can define timeout for autoreply in seconds. Value '0' is disabled",
92 name: "autoreply"
93 }));
94 container.push(new Select({ // index 1
95 title: "Autoreply from",
96 list: [
97 new Item({title: "System", value: "0"}),
98 new Item({title: "From you (some@email.com)", value: "1"}),
99 ],
100 value: "1", // default value
101 name: "from"
102 }));
103
104 let btn = container.push(new Button({
105 label: "Save",
106 className: "accent"
107 }));
108
109 btn.listen("onClick", function(action) {
110 container.popup(new Box({
111 children: [
112 new Preloader(),
113 new Txt("Ajax request: " + JSON.stringify(container.data())),
114 ]
115 }), true); // <- now popup possible to close by click on BG
116 });
117
118 let btn_reset = container.push(new Button({
119 label: "Reset"
120 }));
121 btn_reset.listen("onClick", function(action) {
122 container.get(0).value("10");
123 container.get(1).value("1");
124 });
125
126
127 return container
128 }
129
130 function createInfoContainer() {
131 return new Txt({
132 html: "<b>Even</b> Txt can be a container"
133 });
134 }
135
136 function openContainer(app, name) {
137 app.length(1);
138 switch (name) {
139 case "container_news":
140 app.push(createNewsContainer());
141 break;
142 case "container_settings":
143 app.push(createSettingsContainer());
144 break;
145 case "container_info":
146 app.push(createInfoContainer());
147 break;
148 default:
149 break;
150 }
151
152 // forgot to add this ...
153 if (app.length() > 1 && app.last().buttons) { // Only Containers has app.last().buttons
154 let btn = new Button({className: "icon icon-remove"});
155 btn.listen("onClick", function (action) {
156 app.length(1);
157 });
158 app.last().buttons(new Fields({children: [btn]}));
159 }
160 }
161</script>
162<body>
163 <div id="root"></div>
164</body>
165</html>
166