Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-11 11:18:39 +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 */ /* Global */
$font-stack: arial, serif; $font-stack: arial, serif;
$font-color: #000; $font-color: #000;
$font-size: 1em; $reverse-font-color: #fff;
$font-size: 1rem;
$background-color: #fff; $background-color: #fff;
$background-color: #e7ebf3;
$link-color: #fff; $link-color: #fff;
$link-decoration: none; $link-decoration: none;
$link-hover-color: #fff; $link-hover-color: #fff;
$link-hover-decoration: none; $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 */
$content-container-padding: 5px; $content-container-padding: $default-padding;
$content-container-color: #fff; $content-container-color: $reverse-font-color;
/* Content box */ /* Content box */
$content-box-background-color: #fff; $content-box-background-color: $background-color;
$content-box-border-color: #000; $content-box-border-color: $default-border-color;
$content-box-margin: 5px; $content-box-margin: $default-padding;
$content-box-padding: 5px; $content-box-padding: $default-padding;
$content-box-font-size: 1em; $content-box-font-size: $font-size;
$content-box-font-color: #000; $content-box-font-color: $font-color;
$content-border-color: #b7b7b7;
$content-borderlight-color: #dddddd;
$content-background-color: #f5f5ff;
/* Navigation */ /* Navigation */
$nav-top-background-color: #000; $nav-top-background-color: #000;
$nav-top-font-color: #fff; $nav-top-font-color: $reverse-font-color;
$nav-top-padding: 3px; $nav-top-padding: 3px;
$nav-side-background-color: #000; $nav-side-background-color: $nav-top-background-color;
$nav-side-font-color: #fff; $nav-side-font-color: $nav-top-font-color;
$nav-side-padding: 3px; $nav-side-padding: $nav-top-padding;
$nav-main-background-color: #000; $nav-main-background-color: $nav-side-background-color;
$nav-main-font-color: #fff; $nav-main-font-color: $nav-side-font-color;
$nav-main-padding: 3px; $nav-main-padding: $nav-top-padding;
$nav-contentside-background-color: #000; $nav-contentside-background-color: $nav-side-background-color;
$nav-contentside-font-color: #fff; $nav-contentside-font-color: $nav-side-font-color;
$nav-contentside-padding: 3px; $nav-contentside-padding: $nav-top-padding;
/* Colors */ /* Colors */
$red: #f00; $red: #f00;
@ -49,7 +60,96 @@ $black: #000;
$pink: #f0f; $pink: #f0f;
$purple: #7D26CD; $purple: #7D26CD;
$content-border-color: #b7b7b7; /* Accordion */
$content-borderlight-color: #dddddd; $accordion-margin-top-bottom: 10px;
$background-color: #e7ebf3; $accordion-margin-left-right: 30px;
$content-background-color: #f5f5ff;
$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"; @import "_mixins", "_vars";
.ac-container{ .ac-container{
margin: 10px auto 30px auto; margin: $accordion-margin-top-bottom auto $accordion-margin-left-right auto;
text-align: left; text-align: left;
> input { > input {
display: none; display: none;
&:checked + label { &:checked + label {
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff); @include gradient-top-bottom($accordion-active-color-start, 0, $accordion-active-color-end, 100, $accordion-active-background);
color: #000; color: $accordion-active-foreground;
+ section { + section {
display: inherit; display: inherit;
@ -23,30 +23,30 @@
label { label {
display: block; display: block;
padding: 5px 20px; padding: $accordion-padding-top-bottom $accordion-padding-left-right;
position: relative; position: relative;
z-index: 20; z-index: 20;
margin-top: -1px; margin-top: -1px;
cursor: pointer; cursor: pointer;
color: #777; color: $accordion-inactive-foreground;
font-size: 1em; font-size: $accordion-font-size;
border: 1px solid $content-border-color; border: $accordion-border-size solid $accordion-border-color;
@include border-radius(3px); @include border-radius($accordion-border-radius);
@include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color); @include gradient-top-bottom($accordion-inactive-color-start, 0, $accordion-inactive-color-end, 100, $accordion-inactive-background);
&:hover { &: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 { > section {
background: $content-background-color; background: $content-box-background-color;
overflow: hidden; overflow: hidden;
height: auto; height: auto;
position: relative; position: relative;
z-index: 10; z-index: 10;
border-left: 1px solid $content-border-color; border-left: $accordion-border-size solid $accordion-border-color;
border-right: 1px solid $content-border-color; border-right: $accordion-border-size solid $accordion-border-color;
padding: 10px; padding: $accordion-padding;
} }
} }

8
alert.scss
View File

@ -1,6 +1,8 @@
@import "_mixins", "_vars";
.log-msg { .log-msg {
padding: 5px; padding: $log-padding;
margin: 5px; margin: $log-margin;
} }
@each $tuple in @each $tuple in
@ -10,7 +12,7 @@
'info' #b6d2ff #85b0ee #4865a5 { 'info' #b6d2ff #85b0ee #4865a5 {
.log-msg-status-#{nth($tuple, 1)} { .log-msg-status-#{nth($tuple, 1)} {
background: #{nth($tuple, 2)}; background: #{nth($tuple, 2)};
border: 2px solid #{nth($tuple, 3)}; border: $log-border solid #{nth($tuple, 3)};
color: #{nth($tuple, 4)}; 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"; @import "_mixins", "_vars";
blockquote { blockquote {
border: 1px solid $content-borderlight-color; border: $blockquote-border solid $blockquote-border-color;
background: #ffffff; background: $blockquote-background;
padding: 10px; padding: $blockquote-padding;
@include box-sizing(border-box); @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 { .crumbs-1 {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: $breadcrumb-font-size;
li { li {
background: $content-background-color; background: $breadcrumb-inactive-background;
border: 1px solid $content-border-color; border: $breadcrumb-border solid $breadcrumb-border-color;
padding: 10px 10px 10px 20px; padding: $breadcrumb-padding;
position: relative; position: relative;
display: block; display: block;
float: left; float: left;
@ -18,7 +18,7 @@
@include box-shadow-out(#ffffff); @include box-shadow-out(#ffffff);
&:first-child { &:first-child {
@include border-left-radius(3px); @include border-left-radius($breadcrumb-border-radius);
} }
&:not(.last):after, &:before { &:not(.last):after, &:before {
@ -28,7 +28,7 @@
height: 0; height: 0;
border-top: 18px solid transparent; border-top: 18px solid transparent;
border-bottom: 17px solid transparent; border-bottom: 17px solid transparent;
border-left: 14px solid $content-background-color; border-left: 14px solid $breadcrumb-border-color;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -18px; margin-top: -18px;
@ -40,8 +40,8 @@
} }
&:before { &:before {
border-left-color: $content-border-color; border-left-color: $breadcrumb-border-color;
margin-left: 1px; margin-left: $breadcrumb-border;
z-index: 1; z-index: 1;
} }
@ -52,7 +52,7 @@
.last { .last {
padding-right: 20px; padding-right: 20px;
@include border-right-radius(3px); @include border-right-radius($breadcrumb-border-radius);
&:before { &:before {
border: none; border: none;
@ -64,6 +64,6 @@
} }
.active, li:hover { .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 { button, input[type="submit"], input[type="button"], a.button {
border: 1px solid $content-border-color; border: $button-border solid $button-border-color;
cursor: pointer; cursor: pointer;
text-shadow: 1px 1px 1px #ffffff; text-shadow: 1px 1px 1px #ffffff;
min-width: 70px; min-width: $button-min-width;
height: 2rem; height: $button-height;
font-size: 0.9rem; font-size: $button-font-size;
background: #f1f1f1; background: $button-background;
@include box-shadow-out(#ffffff); @include box-shadow-out(#ffffff);
&:hover, :active { &:hover, :active {
text-shadow: -1px -1px 1px #ffffff; text-shadow: -1px -1px 1px #ffffff;
background: #d6d6d6; background: $button-active-background;
} }
} }
@ -50,10 +50,10 @@ ul.btns {
font-size: 12px; font-size: 12px;
li { li {
background: $content-background-color; background: $button-crumb-background;
border-left: 1px solid $content-border-color; border-left: $button-border solid $button-border-color;
border-top: 1px solid $content-border-color; border-top: $button-border solid $button-border-color;
border-bottom: 1px solid $content-border-color; border-bottom: $button-border solid $button-border-color;
float: left; float: left;
text-shadow: -1px -1px 1px #ffffff; text-shadow: -1px -1px 1px #ffffff;
cursor: pointer; cursor: pointer;
@ -61,18 +61,18 @@ ul.btns {
@include box-shadow-out(#ffffff); @include box-shadow-out(#ffffff);
&:last-child { &:last-child {
border-right: 1px solid $content-border-color; border-right: $button-border solid $button-border-color;
} }
&:before { &:before {
border-left-color: $content-border-color; border-left-color: $button-border-color;
margin-left: 1px; margin-left: 1px;
} }
} }
a { a {
display: block; display: block;
padding: 10px; padding: $button-crumb-padding;
} }
.active { .active {
@ -80,18 +80,18 @@ ul.btns {
} }
.active, li:hover { .active, li:hover {
background: #ffffff; background: $button-crumb-active-background;
} }
} }
button.simple { button.simple {
background: $content-background-color; background: $button-background;
border: 1px solid $content-border-color; border: $button-border solid $button-border-color;
text-shadow: -1px -1px 1px #ffffff; text-shadow: -1px -1px 1px #ffffff;
padding: 5px; padding: 5px;
min-width: 40px; min-width: 40px;
&:hover { &:hover {
background: #ffffff; background: $button-background;
} }
} }

4
canvas.scss
View File

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

44
default.scss
View File

@ -3,7 +3,7 @@
body { body {
background: $background-color; background: $background-color;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
font-size: 0.9em; font-size: $font-size;
} }
.clear { .clear {
@ -34,44 +34,4 @@ pre {
width: 30px; width: 30px;
} }
} }
} }
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 { label {
font-size: 0.9em; font-size: $form-label-size;
color: #878787; color: #878787;
text-shadow: -1px -1px 1px #ffffff; text-shadow: -1px -1px 1px #ffffff;
} }
@ -24,21 +24,12 @@ form {
margin-left: 3px; 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 { .layout td+td {
padding-left: 5px; padding-left: 5px;
} }
.list { .list {
font-size: 0.9em; font-size: $form-label-size;
td { td {
white-space: nowrap; white-space: nowrap;

12
icon.scss
View File

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

20
image.scss
View File

@ -2,24 +2,24 @@
img { img {
&.frame-1 { &.frame-1 {
padding: 5px; padding: $img-padding;
background: $content-background-color; background: $img-background;
border: 1px solid $content-border-color; border: $img-border solid $img-border-color;
@include box-shadow-out(#ffffff); @include box-shadow-out(#ffffff);
@include border-radius(3px); @include border-radius($img-border-radius);
} }
&.frame-2 { &.frame-2 {
border: 1px solid $content-border-color; border: $img-border solid $img-border-color;
background: $content-background-color; background: $img-background;
} }
&.frame-3 { &.frame-3 {
padding: 5px; padding: $img-padding;
background: #ffffff; background: $img-background;
border: 1px solid $content-border-color; border: $img-border solid $img-border-color;
@include box-shadow-out(#ffffff); @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 "_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"; @import "media";

184
tests/StandardElements.htm
View File

@ -1,8 +1,90 @@
<html> <html>
<head> <head>
<meta charset="utf-8">
<title>Style Test</title> <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="/Resources/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/cssOMS/styles.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> </head>
<body> <body>
<div style="width: 900px; padding: 20px; border: 1px solid #ff000000;" class="center"> <div style="width: 900px; padding: 20px; border: 1px solid #ff000000;" class="center">
@ -206,10 +288,11 @@
</section> </section>
<h1>Form</h1> <h1>Form</h1>
<h2>Default</h2>
<section class="box wf-100"> <section class="box wf-100">
<section class="inner center"> <section class="inner center">
<form> <form>
<table class="layout"> <table class="layout wf-100">
<tr> <tr>
<td colspan="2"><label>Placeholder</label></td> <td colspan="2"><label>Placeholder</label></td>
<tr> <tr>
@ -328,6 +411,105 @@
</section> </section>
</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> <h1>Navigation</h1>
<h2>Content</h2> <h2>Content</h2>
<section class="wf-100"> <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();
});