Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-11 19:18:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Testing with variables

Browse Source
This commit is contained in:
Dennis Eichhorn 2018-12-26 17:15:17 +01:00
parent e972e53476
commit 9a8f85de5d
15 changed files with 551 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
_vars.scss
View File

@ -1,43 +1,54 @@
/* Global */
$font-stack: arial, serif;
$font-color: #000;
$font-size: 1em;
$reverse-font-color: #fff;
$font-size: 1rem;
$background-color: #fff;
$background-color: #e7ebf3;
$link-color: #fff;
$link-decoration: none;
$link-hover-color: #fff;
$link-hover-decoration: none;
$default-border: $default-border;
$default-border-color: #000;
$default-border-radius: $default-border-radius;
$default-padding: 5px;
/* Content Container */
$content-container-padding: 5px;
$content-container-color: #fff;
$content-container-padding: $default-padding;
$content-container-color: $reverse-font-color;
/* Content box */
$content-box-background-color: #fff;
$content-box-border-color: #000;
$content-box-margin: 5px;
$content-box-padding: 5px;
$content-box-font-size: 1em;
$content-box-font-color: #000;
$content-box-background-color: $background-color;
$content-box-border-color: $default-border-color;
$content-box-margin: $default-padding;
$content-box-padding: $default-padding;
$content-box-font-size: $font-size;
$content-box-font-color: $font-color;
$content-border-color: #b7b7b7;
$content-borderlight-color: #dddddd;
$content-background-color: #f5f5ff;
/* Navigation */
$nav-top-background-color: #000;
$nav-top-font-color: #fff;
$nav-top-font-color: $reverse-font-color;
$nav-top-padding: 3px;
$nav-side-background-color: #000;
$nav-side-font-color: #fff;
$nav-side-padding: 3px;
$nav-side-background-color: $nav-top-background-color;
$nav-side-font-color: $nav-top-font-color;
$nav-side-padding: $nav-top-padding;
$nav-main-background-color: #000;
$nav-main-font-color: #fff;
$nav-main-padding: 3px;
$nav-main-background-color: $nav-side-background-color;
$nav-main-font-color: $nav-side-font-color;
$nav-main-padding: $nav-top-padding;
$nav-contentside-background-color: #000;
$nav-contentside-font-color: #fff;
$nav-contentside-padding: 3px;
$nav-contentside-background-color: $nav-side-background-color;
$nav-contentside-font-color: $nav-side-font-color;
$nav-contentside-padding: $nav-top-padding;
/* Colors */
$red: #f00;
@ -49,7 +60,96 @@ $black: #000;
$pink: #f0f;
$purple: #7D26CD;
$content-border-color: #b7b7b7;
$content-borderlight-color: #dddddd;
$background-color: #e7ebf3;
$content-background-color: #f5f5ff;
/* Accordion */
$accordion-margin-top-bottom: 10px;
$accordion-margin-left-right: 30px;
$accordion-border-size: $default-border;
$accordion-border-color: $default-border-color;
// Label
$accordion-padding-top-bottom: $default-padding;
$accordion-padding-left-right: 20px;
$accordion-font-size: $font-size;
$accordion-inactive-color-start: #e0e3eb;
$accordion-inactive-color-end: #f5f5ff;
$accordion-inactive-background: #f5f5ff;
$accordion-inactive-foreground: #777;
$accordion-active-color-start: #fff;
$accordion-active-color-end: #fff;
$accordion-active-background: $content-box-background-color;
$accordion-active-foreground: $font-color;
$accordion-hover-color-start: #fff;
$accordion-hover-color-end: #fff;
$accordion-hover-background: $content-box-background-color;
$accordion-border-radius: $default-border-radius;
// Content
$accordion-padding: 10px;
/* Log */
$log-padding: $default-padding;
$log-margin: 5px;
$log-border: 2px;
/* Blockquote */
$blockquote-padding: 10px;
$blockquote-background: $content-box-background-color;
$blockquote-border: $default-border;
$blockquote-border-color: $default-border-color;
$blockquote-border-radius: $default-border-radius;
/* Breadcrumbs */
$breadcrumb-font-size: 12px;
$breadcrumb-padding: 10px;
$breadcrumb-border: $default-border;
$breadcrumb-border-radius: $default-border-radius;
$breadcrumb-border-color: $default-border-color;
$breadcrumb-inactive-background: $content-background-color;
$breadcrumb-active-background: $content-box-background-color;
/* Button */
$button-border: $default-border;
$button-border-color: $default-border-color;
$button-background: #f1f1f1;
$button-active-background: #d6d6d6;
$button-font-size: 0.9rem;
$button-height: 2rem;
$button-min-width: 70px;
$button-padding: $default-padding;
// Breadcrumb buttons
$button-crumb-font-size: 12px;
$button-crumb-background: #f5f5ff;
$button-crumb-active-background: $content-box-background-color;
$button-crumb-padding: 10px;
/* Canvas */
$canvas-background: $content-box-background-color;
$canvas-border: $default-border;
$canvas-border-color: $default-border-color;
/* Article */
$article-background: $content-box-background-color;
$article-padding: $default-padding;
/* Form */
$form-label-size: 0.9rem;
/* Icon */
$icon-font-color: #fff;
$icon-font-size: 0.9rem;
/* Img */
$img-padding: $default-padding;
$img-border: $default-border;
$img-border-color: $default-border-color;
$img-background: $content-box-background-color;
$img-border-radius: $default-border-radius;

28
accordion.scss
View File

@ -1,15 +1,15 @@
@import "_mixins", "_vars";
.ac-container{
margin: 10px auto 30px auto;
margin: $accordion-margin-top-bottom auto $accordion-margin-left-right auto;
text-align: left;
> input {
display: none;
&:checked + label {
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
color: #000;
@include gradient-top-bottom($accordion-active-color-start, 0, $accordion-active-color-end, 100, $accordion-active-background);
color: $accordion-active-foreground;
+ section {
display: inherit;
@ -23,30 +23,30 @@
label {
display: block;
padding: 5px 20px;
padding: $accordion-padding-top-bottom $accordion-padding-left-right;
position: relative;
z-index: 20;
margin-top: -1px;
cursor: pointer;
color: #777;
font-size: 1em;
border: 1px solid $content-border-color;
@include border-radius(3px);
@include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
color: $accordion-inactive-foreground;
font-size: $accordion-font-size;
border: $accordion-border-size solid $accordion-border-color;
@include border-radius($accordion-border-radius);
@include gradient-top-bottom($accordion-inactive-color-start, 0, $accordion-inactive-color-end, 100, $accordion-inactive-background);
&:hover {
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
@include gradient-top-bottom($accordion-hover-color-start, 0, $accordion-hover-color-end, 100, $accordion-hover-background);
}
}
> section {
background: $content-background-color;
background: $content-box-background-color;
overflow: hidden;
height: auto;
position: relative;
z-index: 10;
border-left: 1px solid $content-border-color;
border-right: 1px solid $content-border-color;
padding: 10px;
border-left: $accordion-border-size solid $accordion-border-color;
border-right: $accordion-border-size solid $accordion-border-color;
padding: $accordion-padding;
}
}

8
alert.scss
View File

@ -1,6 +1,8 @@
@import "_mixins", "_vars";
.log-msg {
padding: 5px;
margin: 5px;
padding: $log-padding;
margin: $log-margin;
}
@each $tuple in
@ -10,7 +12,7 @@
'info' #b6d2ff #85b0ee #4865a5 {
.log-msg-status-#{nth($tuple, 1)} {
background: #{nth($tuple, 2)};
border: 2px solid #{nth($tuple, 3)};
border: $log-border solid #{nth($tuple, 3)};
color: #{nth($tuple, 4)};
}
}

41
article.scss Normal file
View File

@ -0,0 +1,41 @@
@import "_mixins", "_vars";
article {
background: $article-background;
padding: $article-padding;
margin: 0;
p {
line-height: 1.5em;
}
ol, ul {
margin-left: 30px;
}
ul {
list-style: disc;
}
blockquote {
margin: 10px 0 10px 0;
p:last-child {
margin-bottom: 0;
}
}
table {
border-collapse: collapse;
border: 1px solid #999;
th, td {
padding: 5px;
border: 1px solid #999;
}
tr:nth-child(2n) {
background: #eee;
}
}
}

8
blockquote.scss
View File

@ -1,9 +1,9 @@
@import "_mixins", "_vars";
blockquote {
border: 1px solid $content-borderlight-color;
background: #ffffff;
padding: 10px;
border: $blockquote-border solid $blockquote-border-color;
background: $blockquote-background;
padding: $blockquote-padding;
@include box-sizing(border-box);
@include border-radius(3px);
@include border-radius($blockquote-border-radius);
}

20
breadcrumb.scss
View File

@ -3,12 +3,12 @@
.crumbs-1 {
list-style: none;
overflow: hidden;
font-size: 12px;
font-size: $breadcrumb-font-size;
li {
background: $content-background-color;
border: 1px solid $content-border-color;
padding: 10px 10px 10px 20px;
background: $breadcrumb-inactive-background;
border: $breadcrumb-border solid $breadcrumb-border-color;
padding: $breadcrumb-padding;
position: relative;
display: block;
float: left;
@ -18,7 +18,7 @@
@include box-shadow-out(#ffffff);
&:first-child {
@include border-left-radius(3px);
@include border-left-radius($breadcrumb-border-radius);
}
&:not(.last):after, &:before {
@ -28,7 +28,7 @@
height: 0;
border-top: 18px solid transparent;
border-bottom: 17px solid transparent;
border-left: 14px solid $content-background-color;
border-left: 14px solid $breadcrumb-border-color;
position: absolute;
top: 50%;
margin-top: -18px;
@ -40,8 +40,8 @@
}
&:before {
border-left-color: $content-border-color;
margin-left: 1px;
border-left-color: $breadcrumb-border-color;
margin-left: $breadcrumb-border;
z-index: 1;
}
@ -52,7 +52,7 @@
.last {
padding-right: 20px;
@include border-right-radius(3px);
@include border-right-radius($breadcrumb-border-radius);
&:before {
border: none;
@ -64,6 +64,6 @@
}
.active, li:hover {
background: #ffffff;
background: $breadcrumb-active-background;
}
}

34
button.scss
View File

@ -5,18 +5,18 @@
}
button, input[type="submit"], input[type="button"], a.button {
border: 1px solid $content-border-color;
border: $button-border solid $button-border-color;
cursor: pointer;
text-shadow: 1px 1px 1px #ffffff;
min-width: 70px;
height: 2rem;
font-size: 0.9rem;
background: #f1f1f1;
min-width: $button-min-width;
height: $button-height;
font-size: $button-font-size;
background: $button-background;
@include box-shadow-out(#ffffff);
&:hover, :active {
text-shadow: -1px -1px 1px #ffffff;
background: #d6d6d6;
background: $button-active-background;
}
}
@ -50,10 +50,10 @@ ul.btns {
font-size: 12px;
li {
background: $content-background-color;
border-left: 1px solid $content-border-color;
border-top: 1px solid $content-border-color;
border-bottom: 1px solid $content-border-color;
background: $button-crumb-background;
border-left: $button-border solid $button-border-color;
border-top: $button-border solid $button-border-color;
border-bottom: $button-border solid $button-border-color;
float: left;
text-shadow: -1px -1px 1px #ffffff;
cursor: pointer;
@ -61,18 +61,18 @@ ul.btns {
@include box-shadow-out(#ffffff);
&:last-child {
border-right: 1px solid $content-border-color;
border-right: $button-border solid $button-border-color;
}
&:before {
border-left-color: $content-border-color;
border-left-color: $button-border-color;
margin-left: 1px;
}
}
a {
display: block;
padding: 10px;
padding: $button-crumb-padding;
}
.active {
@ -80,18 +80,18 @@ ul.btns {
}
.active, li:hover {
background: #ffffff;
background: $button-crumb-active-background;
}
}
button.simple {
background: $content-background-color;
border: 1px solid $content-border-color;
background: $button-background;
border: $button-border solid $button-border-color;
text-shadow: -1px -1px 1px #ffffff;
padding: 5px;
min-width: 40px;
&:hover {
background: #ffffff;
background: $button-background;
}
}

4
canvas.scss
View File

@ -1,7 +1,7 @@
@import "_mixins", "_vars";
canvas {
background: #fff;
border: 1px solid #000;
background: $canvas-background;
border: $canvas-border solid $canvas-border-color;
user-select: none;
}

42
default.scss
View File

@ -3,7 +3,7 @@
body {
background: $background-color;
font-family: Open Sans, sans-serif;
font-size: 0.9em;
font-size: $font-size;
}
.clear {
@ -35,43 +35,3 @@ pre {
}
}
}
article {
background: #fff;
padding: 5px;
margin: 0;
p {
line-height: 1.5em;
}
ol, ul {
margin-left: 30px;
}
ul {
list-style: disc;
}
blockquote {
margin: 10px 0 10px 0;
p:last-child {
margin-bottom: 0;
}
}
table {
border-collapse: collapse;
border: 1px solid #999;
th, td {
padding: 5px;
border: 1px solid #999;
}
tr:nth-child(2n) {
background: #eee;
}
}
}

13
form.scss
View File

@ -15,7 +15,7 @@ form {
}
label {
font-size: 0.9em;
font-size: $form-label-size;
color: #878787;
text-shadow: -1px -1px 1px #ffffff;
}
@ -24,21 +24,12 @@ form {
margin-left: 3px;
}
.inputPrefix {
border-left: 1px solid $content-border-color;
border-top: 1px solid $content-border-color;
border-bottom: 1px solid $content-border-color;
line-height: 2em;
height: 100%;
background: #bebebe;
}
.layout td+td {
padding-left: 5px;
}
.list {
font-size: 0.9em;
font-size: $form-label-size;
td {
white-space: nowrap;

12
icon.scss
View File

@ -1,5 +1,7 @@
@import "_mixins", "_vars";
.infoIcon {
width: .9rem;
width: $icon-font-size;
text-align: center;
vertical-align: middle;
position: relative;
@ -11,13 +13,13 @@
position: absolute;
right: -.55rem;
top: -.45rem;
width: .9rem;
height: .9rem;
line-height: .9rem;
width: $icon-font-size;
height: $icon-font-size;
line-height: $icon-font-size;
border-radius: 50%;
text-align: center;
color: #fff;
color: $icon-font-color;
background: rgba(209, 96, 89, 1);
}
}

20
image.scss
View File

@ -2,24 +2,24 @@
img {
&.frame-1 {
padding: 5px;
background: $content-background-color;
border: 1px solid $content-border-color;
padding: $img-padding;
background: $img-background;
border: $img-border solid $img-border-color;
@include box-shadow-out(#ffffff);
@include border-radius(3px);
@include border-radius($img-border-radius);
}
&.frame-2 {
border: 1px solid $content-border-color;
background: $content-background-color;
border: $img-border solid $img-border-color;
background: $img-background;
}
&.frame-3 {
padding: 5px;
background: #ffffff;
border: 1px solid $content-border-color;
padding: $img-padding;
background: $img-background;
border: $img-border solid $img-border-color;
@include box-shadow-out(#ffffff);
@include border-radius(3px);
@include border-radius($img-border-radius);
}
}

2
styles.scss
View File

@ -1,3 +1,3 @@
@import "_vars", "clean", "_mixins", "default", "color", "size", "transformation", "alignment", "visibility", "animate", "grid";
@import "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "main", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "main", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
@import "media";

184
tests/StandardElements.htm
View File

@ -1,8 +1,90 @@
<html>
<head>
<meta charset="utf-8">
<title>Style Test</title>
<link rel="stylesheet" type="text/css" href="/Resources/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/cssOMS/styles.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/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="../../Web/Backend/ServiceWorker.js"></script>
</head>
<body>
<div style="width: 900px; padding: 20px; border: 1px solid #ff000000;" class="center">
@ -206,10 +288,11 @@
</section>
<h1>Form</h1>
<h2>Default</h2>
<section class="box wf-100">
<section class="inner center">
<form>
<table class="layout">
<table class="layout wf-100">
<tr>
<td colspan="2"><label>Placeholder</label></td>
<tr>
@ -328,6 +411,105 @@
</section>
</section>
<h2>Input</h2>
<section class="box wf-100">
<section class="inner center">
<form>
<table class="layout wf-100">
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
<tr>
<td colspan="2">
<div class="advancedInput">
<div class="inputOuter">
<div class="inputbackground">
<input type="text" emptyAfterSelect=true>
</div>
</div>
<div class="dropdown" isActive=true>
<template id="rowElement"></template>
</div>
<div class="tags" isActive=true>
<template id="tagElement"></template>
</div>
</div>
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
<tr>
<td colspan="2"><label>Input+Autocomplete</label></td>
<tr>
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
</table>
</form>
</section>
</section>
<h2>To List</h2>
<section class="box wf-100">
<section class="inner center">
<form>
<table class="layout wf-100">
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
<tr>
<td colspan="2">
<div class="advancedInput">
<div class="inputOuter">
<div class="inputbackground">
<input type="text" emptyAfterSelect=true>
</div>
</div>
<div class="dropdown" isActive=true>
<template id="rowElement"></template>
</div>
<div class="tags" isActive=true>
<template id="tagElement"></template>
</div>
</div>
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
<tr>
<td colspan="2"><label>Input+Autocomplete</label></td>
<tr>
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
</table>
</form>
</section>
</section>
<h2>Dropdown</h2>
<section class="box wf-100">
<section class="inner center">
<form>
<table class="layout wf-100">
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
<tr>
<td colspan="2">
<div class="advancedInput">
<div class="inputOuter">
<div class="inputbackground">
<input type="text" emptyAfterSelect=true>
</div>
</div>
<div class="dropdown" isActive=true>
<template id="rowElement"></template>
</div>
<div class="tags" isActive=true>
<template id="tagElement"></template>
</div>
</div>
<tr>
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
<tr>
<td colspan="2"><label>Input+Autocomplete</label></td>
<tr>
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
</table>
</form>
</section>
</section>
<h1>Navigation</h1>
<h2>Content</h2>
<section class="wf-100">

130
tests/load.js Normal file
View File

@ -0,0 +1,130 @@
(function (jsOMS)
{
"use strict";
jsOMS.Application = class {
constructor ()
{
jsOMS.Autoloader.initPreloaded();
this.logger = jsOMS.Log.Logger.getInstance();
window.logger = this.logger;
this.cacheManager = new jsOMS.DataStorage.CacheManager();
this.storageManager = new jsOMS.DataStorage.StorageManager();
this.eventManager = new jsOMS.Event.EventManager();
this.responseManager = new jsOMS.Message.Response.ResponseManager();
this.dispatcher = new jsOMS.Dispatcher.Dispatcher();
this.assetManager = new jsOMS.Asset.AssetManager();
this.acountManager = new jsOMS.Account.AccountManager();
this.uiManager = new jsOMS.UI.UIManager(this);
this.inputManager = new jsOMS.UI.Input.InputManager(this);
this.moduleManager = new jsOMS.Module.ModuleManager(this);
this.readManager = new jsOMS.UI.Input.Voice.ReadManager();
this.voiceManager = new jsOMS.UI.Input.Voice.VoiceManager(this);
this.notifyManager = new jsOMS.Message.Notification.NotificationManager();
this.request = new jsOMS.Uri.Http(window.location.href);
this.request.setRootPath(
jsOMS.Uri.Http.parseUrl(
document.getElementsByTagName('base')[0].href
).path
);
this.setResponseMessages();
this.setActions();
this.setKeyboardActions();
this.setMouseActions();
this.setVoiceActions();
jsOMS.Uri.UriFactory.setupUriBuilder(this.request);
jsOMS.Uri.UriFactory.setQuery('/lang', window.location.href.substr(this.request.getBase().length).split('/')[0]);
this.uiManager.bind();
this.setupServiceWorker();
};
setupServiceWorker ()
{
/** global: navigator */
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/Web/Backend/ServiceWorker.js', {scope: this.request.getBase()}).catch(function (e)
{
jsOMS.Log.Logger.instance.warning('ServiceWorker registration failed.');
});
}
};
setResponseMessages ()
{
/** global: RESPONSE_EVENTS */
for(let key in RESPONSE_EVENTS) {
if(RESPONSE_EVENTS.hasOwnProperty(key)) {
this.responseManager.add(key, RESPONSE_EVENTS[key]);
}
}
};
setActions ()
{
/** global: ACTION_EVENTS */
for(let key in ACTION_EVENTS) {
if(ACTION_EVENTS.hasOwnProperty(key)) {
this.uiManager.getActionManager().add(key, ACTION_EVENTS[key]);
}
}
};
setKeyboardActions ()
{
/** global: KEYBOARD_EVENTS */
let length = KEYBOARD_EVENTS.length;
for(let i = 0; i < length; i++) {
this.inputManager.getKeyboardManager().add(
KEYBOARD_EVENTS[i]['element'],
KEYBOARD_EVENTS[i]['keys'],
KEYBOARD_EVENTS[i]['callback']
);
}
};
setMouseActions ()
{
/** global: MOUSE_EVENTS */
let length = MOUSE_EVENTS.length;
for(let i = 0; i < length; i++) {
this.inputManager.getMouseManager().add(
MOUSE_EVENTS[i]['element'],
MOUSE_EVENTS[i]['type'],
MOUSE_EVENTS[i]['button'],
MOUSE_EVENTS[i]['callback'],
MOUSE_EVENTS[i]['exact']
);
}
};
setVoiceActions ()
{
/** global: VOICE_EVENTS */
for(let key in VOICE_EVENTS) {
if(VOICE_EVENTS.hasOwnProperty(key)) {
this.voiceManager.add(key, VOICE_EVENTS[key]);
}
}
this.voiceManager.setup();
this.voiceManager.start();
};
}
}(window.jsOMS = window.jsOMS || {}));
jsOMS.ready(function ()
{
"use strict";
/** global: jsOMS */
window.omsApp = new jsOMS.Application();
});