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 |
|
37 |
|
38 | openContainer(app, action.target.active().value());
|
39 | }, true);
|
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({
|
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({
|
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",
|
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);
|
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 |
|
153 | if (app.length() > 1 && 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 |
|