Improve ui tests

This commit is contained in:
Dennis Eichhorn 2019-01-11 21:14:23 +01:00
parent 7d9542f5fc
commit 485a4717e9
27 changed files with 1384 additions and 95 deletions

View File

@ -21,6 +21,7 @@
@include border-left-radius($breadcrumb-border-radius);
}
// todo: maybe replace .last with :last-child
&:not(.last):after, &:before {
content:" ";
display: block;

View File

@ -7,11 +7,15 @@ img {
border: $img-border solid $img-border-color;
@include box-shadow-out(#ffffff);
@include border-radius($img-border-radius);
box-sizing: border-box;
width: 100%;
}
&.frame-2 {
border: $img-border solid $img-border-color;
background: $img-background;
box-sizing: border-box;
width: 100%;
}
&.frame-3 {
@ -20,6 +24,8 @@ img {
border: $img-border solid $img-border-color;
@include box-shadow-out(#ffffff);
@include border-radius($img-border-radius);
box-sizing: border-box;
width: 100%;
}
}

View File

@ -3565,9 +3565,13 @@ img.frame-1 {
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
width: 100%;
box-sizing: border-box;
background-clip: padding-box; }
img.frame-2 {
border: 1px solid #b7b7b7;
box-sizing: border-box;
width: 100%;
background: #f5f5ff; }
img.frame-3 {
padding: 5px;
@ -3580,6 +3584,8 @@ img.frame-3 {
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
width: 100%;
background-clip: padding-box; }
@keyframes slidy {
@ -4729,7 +4735,7 @@ section > h2 {
/* Content box */
/* Navigation */
/* Colors */
table:not([id]) .sort-asc, table:not([id]) .sort-desc {
table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
display: none; }
table .sort-asc, table .sort-desc {

View File

@ -1,6 +1,6 @@
@import "_mixins", "_vars";
table:not([id]) .sort-asc, table:not([id]) .sort-desc {
table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
display: none;
}

View File

@ -424,23 +424,28 @@
<div class="advancedInput" id="input1">
<div class="inputOuter">
<div class="inputbackground">
<input class="inputClass" id="inputId" type="text" emptyAfterSelect="true" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
<input autocomplete="off" class="inputClass" id="inputId" type="text" emptyAfterSelect="true" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
</div>
</div>
<div class="dropdown" isActive="true">
<div class="dropdown" data-active="true">
<table>
<template id="rowElement" class="rowTemplate">
<tr>
<td data-tpl-value="/id" data-tpl-name="/id" data-value="">s</td>
<td data-tpl-value="/name/0" data-tpl-name="/name/0"></td>
<td data-tpl-value="/email" data-tpl-name="/eamil"></td>
</tr>
</template>
<tbody>
<template id="rowElement" class="rowTemplate">
<tr tabindex="-1">
<td data-tpl-value="/id" data-tpl-name="/id" data-value="">s</td>
<td data-tpl-value="/name/0" data-tpl-name="/name/0"></td>
<td data-tpl-value="/email" data-tpl-name="/eamil"></td>
</tr>
</template>
</tbody>
</table>
</div>
<div class="tags" isActive="true">
<template id="tagElement">
<span data-tpl-value="/name/0" data-tpl-name="/name/0" class="badge"></span>
<div class="tags" data-active="true">
<template id="tagElement" class="tagTemplate">
<span data-tpl-value="/name/0" class="badge">
<i data-tpl-name="/name/0"></i>
<i data-tpl-name="/email"></i>
</span>
</template>
</div>
</div>

View File

@ -1,28 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<title>Style Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
</header>
<nav>
<ul>
<li></li>
</ul>
</nav>
<main>
<section>
<form></form>
</section>
<section>
<article>
<h1>Title H1</h1>
</article>
</section>
</main>
</body>
</html>

105
tests/app/article.php Normal file
View File

@ -0,0 +1,105 @@
<div class="row">
<div class="col-xs-12">
<section class="box">
<article>
<h1>Ordered List</h1>
<ol>
<li>one</li>
<li>two</li>
</ol>
<p>repeating numbers:</p>
<ol>
<li>one</li>
<li>two</li>
</ol>
<p>large numbers:</p>
<ol start="123">
<li>one</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>li</li>
<li>li</li>
</ul>
<p>mixed markers:</p>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<h3>Code</h3>
<p>a <code>code span</code></p>
<p><code>this is also a codespan</code> trailing text</p>
<p><code>and look at this one!</code></p>
<p>single backtick in a code span: <code>`</code></p>
<p>backtick-delimited string in a code span: <code>`foo`</code></p>
<p><code>sth `` sth</code></p>
<h4>Code</h4>
<pre><code>&lt;?php
$message = 'fenced code block';
echo $message;</code></pre>
<pre><code>tilde</code></pre>
<pre><code class="language-php">echo 'language identifier';</code></pre>
<h5>Table</h5>
<table>
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title</td>
<td>Col2 Title</td>
<td>Col3 Title</td>
<td>Col4 Title</td>
</tr>
</thead>
<tbody>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
</table>
<h6>Headline6</h6>
<h7>Content</h7>
<p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
<a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
Nulla facilisi. Nunc eu lobortis tellus.</p>
<blockquote>This is a blockquote</blockquote>
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
</article>
</section>
</div>
</div>

59
tests/app/boxes.php Normal file
View File

@ -0,0 +1,59 @@
<div class="row">
<div class="col-xs-6">
<section class="box red wf-100">
<header><h1>Header</h1></header>
<div class="inner">
&nbsp;
</div>
</section>
</div>
<div class="col-xs-6">
<section class="box blue wf-100">
<header><h1>Header</h1></header>
<div class="inner">
&nbsp;
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box green wf-100">
<header><h1>Header</h1></header>
<div class="inner">
&nbsp;
</div>
</section>
</div>
<div class="col-xs-6">
<section class="box darkblue wf-100">
<header><h1>Header</h1></header>
<div class="inner">
&nbsp;
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box orange wf-100">
<header><h1>Header</h1></header>
<div class="inner">
&nbsp;
</div>
</section>
</div>
<div class="col-xs-6">
<section class="box purple wf-100">
<header><h1>Header</h1></header>
<div class="inner">
&nbsp;
</div>
</section>
</div>
</div>

24
tests/app/breadcrumbs.php Normal file
View File

@ -0,0 +1,24 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="box">
<ul class="crumbs-1">
<li><a>One</a></li>
<li><a>Two</a></li>
<li class="active"><a>Three</a></li>
<li><a>Four</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="box">
<ul class="crumbs-1">
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a></li>
<li class="last active"><a>Five</a></li>
</ul>
</div>
</div>
</div>

44
tests/app/buttons.php Normal file
View File

@ -0,0 +1,44 @@
<div class="row">
<div class="col-xs-12">
<div class="box">
<ul class="btns">
<li><a href="">One</a>
<li><a href="" class="active">Two</a>
<li><a href="">Three</a>
<li><a href="">Four</a>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<button>Test Button</button>
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
<button class="red">Test Button</button>
<button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
<button class="green">Test Button</button>
<button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
<button class="blue">Test Button</button>
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<section class="box wf-100">
<div class="inner">
<button>Test Button</button>
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
<button class="red">Test Button</button>
<button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
<button class="green">Test Button</button>
<button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
<button class="blue">Test Button</button>
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
</div>
</section>
</div>
</div>

0
tests/app/calendar.php Normal file
View File

0
tests/app/charts.php Normal file
View File

0
tests/app/editor.php Normal file
View File

309
tests/app/forms.php Normal file
View File

@ -0,0 +1,309 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="box wf-100">
<header><h1>Default</h1></header>
<div class="inner">
<form>
<table class="layout wf-100">
<tr>
<td colspan="2"><label>Placeholder</label></td>
<tr>
<td colspan="2"><input type="text" placeholder="&#61447; User">
<tr>
<td colspan="2"><label>Input+Button+Required</label></td>
<tr>
<td colspan="2">
<div class="ipt-wrap">
<div class="ipt-first"><input type="text" required></div>
<div class="ipt-second"><input type="submit" value="Text"></div>
</div>
<tr>
<td colspan="2"><label>Password</label></td>
<tr>
<td colspan="2"><input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" placeholder="&#xf023; Pa55w0rd?">
<tr>
<td colspan="2"><label>Datalist</label></td>
<tr>
<td colspan="2"><input list="test" type="text">
<datalist id="test">
<option>Chrome</option>
<option>IE</option>
<option>Opera</option>
<option>Safari</option>
<option>Firefox</option>
</datalist>
</td>
<tr>
<tr>
<td colspan="2"><label>Special</label></td>
<tr>
<td colspan="2"><span class="input"><button><i class="fa fa-pencil"></i></button><input type="text"></span></td>
<tr>
<td colspan="2"><label>Number</label></td>
<tr>
<td colspan="2"><input type="number" step="any" min="0"></td>
<tr>
<td><label>Label1</label></td>
<td><label>Pattern Validation</label>
<tr>
<td><input type="text"></td>
<td><input type="text" pattern="[a-zA-Z]" required>
<tr>
<td colspan="2"><label>Localtime</label></td>
<tr>
<td colspan="2"><input type="datetime-local">
<tr>
<td><label>Localtime</label></td>
<td><label>Localtime</label>
<tr>
<td><input type="datetime-local"></td>
<td><input type="datetime-local">
<tr>
<td><label>Checkbox</label></td>
<td><label>Radio</label></td>
<tr>
<td><span class="check"><input type="checkbox" checked>Check</span>
<td><span class="radio"><input type="radio" name="test">Radio</span>
<tr>
<td><span class="check"><input type="checkbox">Check</span>
<td><span class="radio"><input type="radio" name="test" checked>Radio</span>
<tr>
<td></td>
<td><span class="radio"><input type="radio" name="test">Radio</span>
<tr>
<td><label>Option</label></td>
<tr>
<td colspan="2"><select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<tr>
<td><label multiple>Multiselect</label></td>
<tr>
<td colspan="2"><select multiple>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<tr>
<td><label>Option Default</label></td>
<td><label>Select Selected</label>
<tr>
<td>
<select>
<option disabled selected>Select something</option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</td>
<td>
<select>
<option>Option1</option>
<option selected>Option2</option>
<option>Option3</option>
</select>
<tr>
<td colspan="2"><label>Textarea</label></td>
<tr>
<td colspan="2"><textarea></textarea>
<tr>
<td colspan="2"><input type="submit" value="Submit"> <input type="submit" value="Cancel"> <button type="submit">SButton</button>
</table>
</form>
</div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="box wf-100">
<header><h1>Custom</h1></header>
<div class="inner">
<form>
<table class="layout wf-100">
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Remote</label></td>
<tr>
<td colspan="2">
<div class="advancedInput" id="input1">
<div class="inputOuter">
<div class="inputbackground">
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
</div>
</div>
<div id="input1-dropdown" class="dropdown" data-active="true">
<table id="a1" class="table red">
<thead>
<tr>
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<tbody>
<template id="input1-rowElement" class="rowTemplate">
<tr tabindex="-1">
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
<td data-tpl-text="/email"></td>
</tr>
</template>
</tbody>
</table>
</div>
<div id="input1-tags" class="tags" data-limit="1" data-active="true">
<template id="input1-tagTemplate">
<span data-tpl-value="/id" data-value="" data-uuid="" class="tag red">
<i class="fa fa-times" data-remove=""></i>
<i data-tpl-text="/name/0"></i>,
<i data-tpl-text="/email"></i>
</span>
</template>
</div>
</div>
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Local</label></td>
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown+Table+Remote</label></td>
<tr>
<td colspan="2">
<div class="advancedInput" id="input2">
<div class="inputOuter">
<div class="inputbackground">
<input autocomplete="off" class="input" id="inputId2" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId2}">
</div>
</div>
<div id="input2-dropdown" class="dropdown" data-active="true">
<table id="a1" class="table red">
<thead>
<tr>
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<tbody>
<template id="input2-rowElement" class="rowTemplate">
<tr tabindex="-1">
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
<td data-tpl-text="/email"></td>
</tr>
</template>
</tbody>
</table>
</div>
<table class="table red">
<thead>
<tr>
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<tbody id="input2-tags" class="tags" data-limit="0" data-active="true">
<template id="input2-tagTemplate">
<tr data-tpl-value="/id" data-value="" data-uuid="">
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
<td data-tpl-text="/email"></td>
</tr>
</template>
</table>
</div>
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
<tr>
<td colspan="2"><label>Multiple Input+Autocomplete+External Table</label></td>
<tr>
<td colspan="2">
<div class="advancedInput" id="input4">
<div class="inputOuter">
<div class="inputbackground">
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
</div>
</div>
</div>
<div id="input4-dropdown" class="dropdown" data-active="true">
<table id="a1" class="table red">
<thead>
<tr>
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<tbody>
<template id="input4-rowElement" class="rowTemplate">
<tr tabindex="-1">
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
<td data-tpl-text="/email"></td>
</tr>
</template>
</tbody>
</table>
</div>
<table class="table red">
<thead>
<tr>
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<tbody id="input4-tags" class="tags" data-limit="0" data-active="true">
<template id="input4-tagTemplate">
<tr data-tpl-value="/id" data-value="" data-uuid="">
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
<td data-tpl-text="/email"></td>
</tr>
</template>
</table>
<tr>
<td colspan="2"><label>Simple remote autocomplete</label></td>
<tr>
<td colspan="2">
<div class="advancedInput" id="input3">
<div class="inputOuter">
<div class="inputbackground">
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
</div>
</div>
<div id="input3-dropdown" class="dropdown" data-active="true">
<table id="a1" class="table red">
<thead>
<tr>
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<tbody>
<template id="input3-rowElement" class="rowTemplate">
<tr tabindex="-1">
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
<td data-tpl-text="/email"></td>
</tr>
</template>
</tbody>
</table>
</div>
<div id="input3-tags" class="tags" data-limit="1" data-active="false"></div>
</div>
<tr>
<td colspan="2"><label>Fancy Dropdown</label></td>
<tr>
<td colspan="2"><label>Fancy Multiple Dropdown</label></td>
<tr>
<td colspan="2"><label>Fancy Calendar</label></td>
<tr>
<td colspan="2"><label>Fancy Time</label></td>
<tr>
<td colspan="2"><label>Fancy Range Start/End</label></td>
<tr>
<td colspan="2"><label>Fancy Range End</label></td>
</table>
</form>
</div>
</section>
</div>
</div>
<script>
const loginRequest = new jsOMS.Message.Request.Request('http://127.0.0.1/en/api/login', 'POST', 'json');
loginRequest.setData({user: 'admin', pass: 'orange'});
loginRequest.send();
</script>

123
tests/app/grid.php Normal file
View File

@ -0,0 +1,123 @@
<div class="row">
<div class="col-xs-12">
<section class="box wf-100">&nbsp;</section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-6">
<section class="box wf-100">&nbsp;</section>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-4">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-4">
<section class="box wf-100">&nbsp;</section>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-3">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-3">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-3">
<section class="box wf-100">&nbsp;</section>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-3">
<section class="box wf-100">&nbsp;</section>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-4">
<section class="box wf-100">&nbsp;</section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-3">
<section class="box wf-100">&nbsp;</section>
</div>
<div class="col-xs-3">
<section class="box wf-100">&nbsp;</section>
</div>
</div>
<section class="box wf-100 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-50 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-50 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-33 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-33 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-33 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-75 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-66 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-33 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-50 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section>
</section>
<section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section>
</section>

27
tests/app/images.php Normal file
View File

@ -0,0 +1,27 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<img data-lazyload="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2">
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-3">
</div>
</div>
</div>

192
tests/app/index.php Normal file
View File

@ -0,0 +1,192 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<base href="http://127.0.0.1/cssOMS/tests/app/">
<title>Style Test</title>
<link rel="stylesheet" type="text/css" href="../../styles.css">
<link rel="stylesheet" type="text/css" href="../../../Web/Backend/css/backend-small.css">
<link rel="stylesheet" type="text/css" href="../../../Web/Backend/css/backend.css">
<link rel="stylesheet" type="text/css" href="../../../Resources/fontawesome/css/font-awesome.min.css">
<script src="../../../jsOMS/Utils/oLib.js"></script>
<script src="../../../jsOMS/Asset/AssetManager.js"></script>
<script src="../../../jsOMS/Autoloader.js"></script>
<script src="../../../jsOMS/Account/AccountType.js"></script>
<script src="../../../jsOMS/Account/AccountManager.js"></script>
<script src="../../../jsOMS/Uri/Http.js"></script>
<script src="../../../jsOMS/Uri/UriFactory.js"></script>
<script src="../../../jsOMS/DataStorage/CacheManager.js"></script>
<script src="../../../jsOMS/DataStorage/LocalStorage.js"></script>
<script src="../../../jsOMS/DataStorage/StorageManager.js"></script>
<script src="../../../jsOMS/Event/EventManager.js"></script>
<script src="../../../jsOMS/Message/Request/BrowserType.js"></script>
<script src="../../../jsOMS/Message/Request/OSType.js"></script>
<script src="../../../jsOMS/Message/Request/RequestMethod.js"></script>
<script src="../../../jsOMS/Message/Request/RequestType.js"></script>
<script src="../../../jsOMS/Message/Request/Request.js"></script>
<script src="../../../jsOMS/UI/ActionManager.js"></script>
<script src="../../../jsOMS/Message/Response/ResponseType.js"></script>
<script src="../../../jsOMS/Message/Response/ResponseManager.js"></script>
<script src="../../../jsOMS/Message/Response/Response.js"></script>
<script src="../../../jsOMS/Message/Notification/App/AppNotification.js"></script>
<script src="../../../jsOMS/Message/Notification/Browser/BrowserNotification.js"></script>
<script src="../../../jsOMS/Message/Notification/NotificationType.js"></script>
<script src="../../../jsOMS/Message/Notification/NotificationLevel.js"></script>
<script src="../../../jsOMS/Message/Notification/NotificationManager.js"></script>
<script src="../../../jsOMS/Message/Notification/NotificationMessage.js"></script>
<script src="../../../jsOMS/Module/ModuleFactory.js"></script>
<script src="../../../jsOMS/Module/ModuleManager.js"></script>
<script src="../../../jsOMS/Dispatcher/Dispatcher.js"></script>
<script src="../../../jsOMS/Log/Logger.js"></script>
<script src="../../../jsOMS/Log/LogLevel.js"></script>
<script src="../../../jsOMS/UI/Component/Form.js"></script>
<script src="../../../jsOMS/UI/Component/Table.js"></script>
<script src="../../../jsOMS/UI/Input/InputManager.js"></script>
<script src="../../../jsOMS/UI/Input/Keyboard/KeyboardManager.js"></script>
<script src="../../../jsOMS/UI/Input/Mouse/ClickType.js"></script>
<script src="../../../jsOMS/UI/Input/Mouse/EventType.js"></script>
<script src="../../../jsOMS/UI/Input/Mouse/MouseManager.js"></script>
<script src="../../../jsOMS/UI/Input/Touch/TouchManager.js"></script>
<script src="../../../jsOMS/UI/Input/Voice/VoiceManager.js"></script>
<script src="../../../jsOMS/UI/Input/Voice/ReadManager.js"></script>
<script src="../../../jsOMS/UI/Input/Voice/SpeechManager.js"></script>
<script src="../../../jsOMS/UI/Component/Tab.js"></script>
<script src="../../../jsOMS/UI/Component/AdvancedInput.js"></script>
<script src="../../../jsOMS/UI/Loader.js"></script>
<script src="../../../jsOMS/UI/DragNDrop.js"></script>
<script src="../../../jsOMS/UI/GeneralUI.js"></script>
<script src="../../../jsOMS/UI/UIManager.js"></script>
<script src="../../../jsOMS/Views/FormView.js"></script>
<script src="../../../jsOMS/Views/TableView.js"></script>
<script src="../../../jsOMS/Utils/Parser/Markdown.js"></script>
<script src="../../../jsOMS/Model/Message/DomActionType.js"></script>
<script src="../../../jsOMS/Model/Message/DomAction.js"></script>
<script src="../../../jsOMS/Model/Message/FormValidation.js"></script>
<script src="../../../jsOMS/Model/Message/NotifyType.js"></script>
<script src="../../../jsOMS/Model/Message/Notify.js"></script>
<script src="../../../jsOMS/Model/Message/Redirect.js"></script>
<script src="../../../jsOMS/Model/Message/Reload.js"></script>
<script src="../../../jsOMS/Model/Action/Message/Request.js"></script>
<script src="../../../jsOMS/Model/Action/Message/Log.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Popup.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Remove.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Show.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Hide.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Focus.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Datalist/Clear.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Datalist/Append.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Table/Clear.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/Table/Append.js"></script>
<script src="../../../jsOMS/Model/Action/Utils/Timer.js"></script>
<script src="../../../jsOMS/Model/Action/Validate/Keypress.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/SetValue.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/RemoveValue.js"></script>
<script src="../../../jsOMS/Model/Action/Dom/GetValue.js"></script>
<script src="../../../Web/Backend/js/config.js"></script>
<script src="../../../Web/Backend/js/global/ActionEvents.js"></script>
<script src="../../../Web/Backend/js/global/KeyboardEvents.js"></script>
<script src="../../../Web/Backend/js/global/MouseEvents.js"></script>
<script src="../../../Web/Backend/js/global/ResponseEvents.js"></script>
<script src="../../../Web/Backend/js/global/TouchEvents.js"></script>
<script src="../../../Web/Backend/js/global/VoiceEvents.js"></script>
<script src="../load.js"></script>
</head>
<body>
<header>
<div id="bar-s">
<ul id="t-nav" role="navigation">
<li>
<a href="/en/backend/calendar/dashboard?id=Admin">
<i class="fa fa-calendar infoIcon"></i> Calendar
</a>
</li>
<li>
<a href="/en/backend/task/dashboard?id=Admin">
<i class="fa fa-bolt infoIcon"><span class="badge">99</span></i> Tasks
</a>
</li>
<li>
<a href="/en/api/logout?id=Admin">
<i class="fa fa-power-off infoIcon"></i> Logout
</a>
</li>
</ul>
</div>
<div id="bar-b">
<span class="vC" id="ham-trigger">
<label for="nav-trigger"><i class="fa fa-bars"></i></label>
</span>
<span class="vC" id="logo" itemscope itemtype="http://schema.org/Organization">
<select class="plain" id="unit-selector" name="unit" data-action='[{"listener": "change", "action": [{"key": 1, "type": "redirect", "uri": "{%}&u={#unit-selector}", "target": "self"}]}]' title="Unit selector">
<option value="" selected>Organization Name</option>
</select>
</span>
<span class="vC" id="s-bar" role="search">
<span><input id="iSearchBox" name="search" type="text" autofocus="autofocus"></span>
<input type="submit" id="iSearchButton" name="searchButton" value="Search">
</span>
<span class="vC" id="u-box">
<a href="">
<span>AccountName</span>
<img alt="" data-lazyload="../../../Web/Backend/img/user_default_6.png">
</a>
</span>
</div>
</header>
<div id="out">
<ul id="nav-side" class="nav" role="navigation">
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
HTML Tests
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
</li>
<li><a href="?page=forms">Forms</a></li>
<li><a href="?page=article">Articles</a></li>
<li><a href="?page=buttons">Buttons</a></li>
<li><a href="?page=tags">Tags</a></li>
<li><a href="?page=boxes">Boxes</a></li>
<li><a href="?page=images">Images</a></li>
<li><a href="?page=sliders">Sliders</a></li>
<li><a href="?page=loaders">Loaders</a></li>
<li><a href="?page=grid">Grid</a></li>
<li><a href="?page=tabs">Tabs</a></li>
<li><a href="?page=breadcrumbs">Breadcrumbs</a></li>
<li><a href="?page=tables">Tables</a></li>
<li><a href="?page=popups">Popups</a></li>
<li><a href="?page=notifications">Notifications</a></li>
<li><a href="?page=editor">Editor</a></li>
<li><a href="?page=calender">Calendar</a></li>
<li><a href="?page=navigations">Navigations</a></li>
</ul>
</li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
JS Tests
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
</li>
<li><a href="?page=charts">Charts</a></li>
<li><a href="?page=3d">3D</a></li>
<li><a href="?page=lazyload">Lazyload</a></li>
<li><a href="?page=actions">Actions</a></li>
</ul>
</li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" checked>
<main>
<?php include __DIR__ . '/' . \str_replace('.', '', ($_GET['page'] ?? 'welcome')) . '.php'; ?>
</main>
</div>
</body>
</html>

19
tests/app/loaders.php Normal file
View File

@ -0,0 +1,19 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="box wf-100">
<div class="spinner-1"></div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="box wf-100">
<div class="meter blue">
<div class="spinner-2">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</section>
</div>
</div>

17
tests/app/navigations.php Normal file
View File

@ -0,0 +1,17 @@
<div class="row">
<div class="col-xs-12">
<ul class="nav-top" role="navigation">
<li><a>About</a></li>
<li>
<a>Portfolio</a>
<ul>
<li><a>Web Design</a></li>
<li><a>Web Development</a></li>
<li><a>Illustrations</a></li>
</ul>
</li>
<li><a>Blog</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</div>

View File

@ -0,0 +1,61 @@
<div class="row">
<div class="col-xs-12">
<section class="box wf-100">
<header><h1>App Notifications</h1></header>
<div class="inner">
<button id="okButton">OK Message</button>
<button id="infoButton">Info Message</button>
<button id="warningButton">Warning Message</button>
<button id="errorButton">Error Message</button>
</div>
</section>
</div>
</div>
<template id="app-message">
<div class="log-msg" style="z-index: 11; position: absolute; margin: 0 auto; right: 1%; top: 1%;">
<h1 class="log-msg-title"></h1>
<div class="log-msg-content"></div>
</div>
</template>
<script>
document.getElementById('okButton').addEventListener('click', function() {
window.omsApp.notifyManager.send(
new jsOMS.Message.Notification.NotificationMessage(
'ok',
'Some Title',
'This is a message content.'
), jsOMS.Message.Notification.NotificationType.APP_NOTIFICATION
);
});
document.getElementById('infoButton').addEventListener('click', function() {
window.omsApp.notifyManager.send(
new jsOMS.Message.Notification.NotificationMessage(
'info',
'Some Title',
'This is a message content.'
), jsOMS.Message.Notification.NotificationType.APP_NOTIFICATION
);
});
document.getElementById('warningButton').addEventListener('click', function() {
window.omsApp.notifyManager.send(
new jsOMS.Message.Notification.NotificationMessage(
'warning',
'Some Title',
'This is a message content.'
), jsOMS.Message.Notification.NotificationType.APP_NOTIFICATION
);
});
document.getElementById('errorButton').addEventListener('click', function() {
window.omsApp.notifyManager.send(
new jsOMS.Message.Notification.NotificationMessage(
'error',
'Some Title',
'This is a message content.'
), jsOMS.Message.Notification.NotificationType.APP_NOTIFICATION
);
});
</script>

0
tests/app/popups.php Normal file
View File

46
tests/app/sliders.php Normal file
View File

@ -0,0 +1,46 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="box">
<div class="slider-1">
<figure>
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" alt="">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
</figure>
</div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="box wf-100">
<div class="slider-2">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
</div>
</section>
</div>
</div>

192
tests/app/tables.php Normal file
View File

@ -0,0 +1,192 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<table class="table green" id="table1">
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>Col2</td>
<td>Col1</td>
<td>Col4</td>
<td>Col3</td>
</tr>
<tr>
<td>Col4</td>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col2</td>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<table class="table blue" id="table2">
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>Col3</td>
<td>Col4</td>
<td>Col2</td>
<td>Col1</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col4</td>
<td>Col3</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col4</td>
<td>Col2</td>
<td>Col1</td>
<td>Col3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box wf-100">
<table class="table red">
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title</td>
<td>Col2 Title</td>
<td>Col3 Title</td>
<td>Col4 Title</td>
</tr>
</thead>
<tbody>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

94
tests/app/tabs.php Normal file
View File

@ -0,0 +1,94 @@
<div class="row">
<div class="col-xs-12">
<div class="box wf-100">
<div class="tabular tabview">
<ul class="tab-links">
<li><label for="c-tab-1">TAAAB</label></li>
<li class="active"><label for="c-tab-2">TAAAB</label></li>
</ul>
<div class="tab-content">
<input type="radio" id="c-tab-1" name="tabular-1" checked>
<div class="tab">
Test content
</div>
<input type="radio" id="c-tab-2" name="tabular-1">
<div class="tab tab-2">
<p>Test content 2</p><p>asdf</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box wf-100">
<div class="tabular-2 tabview">
<ul class="tab-links">
<li><label for="c-tab2-1">TAAAB</label></li>
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
</ul>
<div class="tab-content">
<input type="radio" id="c-tab2-1" name="tabular-2" checked>
<div class="tab">
Test content
</div>
<input type="radio" id="c-tab2-2" name="tabular-2">
<div class="tab tab-2">
<p>Test content 2</p><p>asdf</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box ac-container wf-100">
<input type="checkbox" name="About us" id="ac-1">
<label for="ac-1">About us</label>
<section>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
that show to the people who make shows, and on the strength of that one show they decide if
they're going to make more shows.</p>
</section>
<input type="checkbox" name="About us" id="ac-2">
<label for="ac-2">How we work</label>
<section>
<p>Like you, I used to think the world was this great place where everybody lived by the same
standards I did, then some kid with a nail showed me I was living in his world, a world where
chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if
you're not willing to play by his rules, then you're gonna have to pay the price. </p>
</section>
<input type="checkbox" name="About us" id="ac-3" checked>
<label for="ac-3">References</label>
<section>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
killed the world once and got a taste for murder. After the avalanche, it took us a week to
climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
doesn't hold a candle to man. </p>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
killed the world once and got a taste for murder. After the avalanche, it took us a week to
climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
doesn't hold a candle to man. </p>
</section>
<input type="checkbox" name="About us" id="ac-4">
<label for="ac-4">Contact us</label>
<section>
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
the future when the spacecraft encounters a black hole does the computer call it an 'unknown
entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
deductive logic. </p>
</section>
</div>
</div>
</div>

39
tests/app/tags.php Normal file
View File

@ -0,0 +1,39 @@
<div class="row">
<div class="col-xs-12">
<div class="box">
<span class="tag green">Test Tag</span>
<span class="tag red">Test Tag</span>
<span class="tag blue">Test Tag</span>
<span class="tag orange">Test Tag</span>
<span class="tag lightblue">Test Tag</span>
<span class="tag yellow">Test Tag</span>
<span class="tag purple">Test Tag</span>
<span class="tag pink">Test Tag</span>
<span class="tag grey">Test Tag</span>
<span class="tag darkred">Test Tag</span>
<span class="tag darkgreen">Test Tag</span>
<span class="tag darkblue">Test Tag</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<section class="box wf-100">
<div class="inner">
<span class="tag green">Test Tag</span>
<span class="tag red">Test Tag</span>
<span class="tag blue">Test Tag</span>
<span class="tag orange">Test Tag</span>
<span class="tag lightblue">Test Tag</span>
<span class="tag yellow">Test Tag</span>
<span class="tag purple">Test Tag</span>
<span class="tag pink">Test Tag</span>
<span class="tag grey">Test Tag</span>
<span class="tag darkred">Test Tag</span>
<span class="tag darkgreen">Test Tag</span>
<span class="tag darkblue">Test Tag</span>
</div>
</section>
</div>
</div>

1
tests/app/welcome.php Normal file
View File

@ -0,0 +1 @@
Test welcome page

View File

@ -115,57 +115,4 @@ jsOMS.ready(function ()
/** global: jsOMS */
window.omsApp = new jsOMS.Application();
const inputElement = document.getElementById('input1');
const dataList = inputElement.getElementsByClassName('dropdown')[0].getElementsByTagName('table')[0];
const dataTpl = inputElement.getElementsByClassName('rowTemplate')[0];
const src = inputElement.getElementsByClassName('inputClass')[0].getAttribute('data-src');
document.getElementById('inputId').addEventListener('keyup', function(e) {
if (typeof src !== 'undefined' && src !== '') {
while (dataList.firstChild) {
dataList.removeChild(dataList.firstChild);
}
const request = new jsOMS.Message.Request.Request(src);
request.setSuccess(function (data) {
data = JSON.parse(data.response);
const dataLength = data.length;
console.table(data);
for(let i = 0; i < dataLength; ++i) {
const newRow = dataTpl.content.cloneNode(true);
const fields = newRow.querySelectorAll('[data-tpl-value]');
const fieldLength = fields.length;
for (let j = 0; j < fieldLength; ++j) {
console.log(jsOMS.getArray(fields[j].getAttribute('data-tpl-value'), data[i]));
fields[j].appendChild(document.createTextNode(jsOMS.getArray(fields[j].getAttribute('data-tpl-name'), data[i])));
}
dataList.appendChild(newRow);
}
});
request.send();
}
// check if data-src is available
// if yes load data with delay of x ms
// if dropdown active
// put data into dropdown
// select highest fit
// with enter/tab the text is completed
// if tags is true
// move selected to tag
// if emptyafter select is true
// remove content from input field
// else
// autocomplete text based on selecteion
// else put directly into input field and/or tag list depending on settings
// if not check drop down for search results/data and do similar tasks as above
// .... reorder ... currently strucuture sux!
// the dropdown should be a table because the data might be in tables (e.g. first name, second name, address etc. for a result)
});
});