mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 11:18:39 +00:00
playing with variables
This commit is contained in:
parent
9a8f85de5d
commit
7d9542f5fc
57
_vars.scss
57
_vars.scss
|
|
@ -3,18 +3,18 @@ $font-stack: arial, serif;
|
|||
$font-color: #000;
|
||||
$reverse-font-color: #fff;
|
||||
$font-size: 1rem;
|
||||
$font-size-smaller: 0.9rem;
|
||||
|
||||
$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: 1px;
|
||||
$default-border-color: #000;
|
||||
$default-border-radius: $default-border-radius;
|
||||
$default-border-radius: 3px;
|
||||
$default-padding: 5px;
|
||||
|
||||
/* Content Container */
|
||||
|
|
@ -23,6 +23,7 @@ $content-container-color: $reverse-font-color;
|
|||
|
||||
/* Content box */
|
||||
$content-box-background-color: $background-color;
|
||||
$content-box-border: $default-border;
|
||||
$content-box-border-color: $default-border-color;
|
||||
$content-box-margin: $default-padding;
|
||||
$content-box-padding: $default-padding;
|
||||
|
|
@ -115,12 +116,21 @@ $breadcrumb-border-color: $default-border-color;
|
|||
$breadcrumb-inactive-background: $content-background-color;
|
||||
$breadcrumb-active-background: $content-box-background-color;
|
||||
|
||||
/* Input */
|
||||
$input-border: $default-border;
|
||||
$input-border-color: $default-border-color;
|
||||
$input-invalid-border-color: #b85450;
|
||||
$input-background: $background-color;
|
||||
$input-font-size: $font-size;
|
||||
$input-color: $font-color;
|
||||
$input-placeholder-color: #cfcfcf;
|
||||
|
||||
/* Button */
|
||||
$button-border: $default-border;
|
||||
$button-border-color: $default-border-color;
|
||||
$button-background: #f1f1f1;
|
||||
$button-active-background: #d6d6d6;
|
||||
$button-font-size: 0.9rem;
|
||||
$button-font-size: $font-size-smaller;
|
||||
$button-height: 2rem;
|
||||
$button-min-width: 70px;
|
||||
$button-padding: $default-padding;
|
||||
|
|
@ -139,17 +149,48 @@ $canvas-border-color: $default-border-color;
|
|||
/* Article */
|
||||
$article-background: $content-box-background-color;
|
||||
$article-padding: $default-padding;
|
||||
$article-link-color: #8ea4ff;
|
||||
|
||||
$article-table-border: $default-border;
|
||||
$article-table-border-color: #999;
|
||||
$article-even-background: #eee;
|
||||
|
||||
/* Form */
|
||||
$form-label-size: 0.9rem;
|
||||
$form-label-size: $font-size-smaller;
|
||||
|
||||
/* Icon */
|
||||
$icon-font-color: #fff;
|
||||
$icon-font-size: 0.9rem;
|
||||
$icon-font-color: $reverse-font-color;
|
||||
$icon-font-size: $font-size-smaller;
|
||||
|
||||
/* 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;
|
||||
$img-border-radius: $default-border-radius;
|
||||
|
||||
/* list */
|
||||
$list-padding: $default-padding;
|
||||
$list-background: $background-color;
|
||||
|
||||
$list-border-radius: $default-border-radius;
|
||||
$list-border: $default-border;
|
||||
$list-border-color: $default-border-color;
|
||||
|
||||
/* pagination */
|
||||
$pagination-border-radius: $default-border-radius;
|
||||
$pagination-active-color: $reverse-font-color;
|
||||
$pagination-active-background: #353535;
|
||||
|
||||
/* pre */
|
||||
$pre-background: $background-color;
|
||||
$pre-border-radius: $default-border-radius;
|
||||
$pre-border: $default-border;
|
||||
$pre-border-color: $default-border-color;
|
||||
$pre-padding: $default-padding;
|
||||
|
||||
/* tag */
|
||||
$tag-border: $default-border;
|
||||
$tag-border-color: $default-border-color;
|
||||
$tag-color: $reverse-font-color;
|
||||
$tag-font-size: 0.7rem;
|
||||
17
article.scss
17
article.scss
|
|
@ -5,6 +5,15 @@ article {
|
|||
padding: $article-padding;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: $article-link-color;
|
||||
border-bottom: 1px dotted $article-link-color;
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
|
@ -27,15 +36,15 @@ article {
|
|||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #999;
|
||||
border: $article-table-border solid $article-table-border-color;
|
||||
|
||||
th, td {
|
||||
padding: 5px;
|
||||
border: 1px solid #999;
|
||||
border: $article-table-border solid $article-table-border-color;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background: #eee;
|
||||
background: $article-even-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@ ul {
|
|||
}
|
||||
|
||||
input, select, textarea, .textarea {
|
||||
box-sizing: border-box;
|
||||
@include box-sizing(border-box);
|
||||
appearance: none;
|
||||
box-shadow: none;
|
||||
|
||||
|
|
|
|||
10
default.scss
10
default.scss
|
|
@ -11,14 +11,14 @@ body {
|
|||
}
|
||||
|
||||
pre {
|
||||
background: #fff;
|
||||
@include border-radius(3px);
|
||||
border: 1px solid $content-border-color;
|
||||
padding: 5px;
|
||||
background: $pre-background;
|
||||
@include border-radius($pre-border-radius);
|
||||
border: $pre-border solid $pre-border-color;
|
||||
padding: $pre-padding;
|
||||
overflow-x: scroll;
|
||||
counter-reset: line;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
|
|
|||
64
input.scss
64
input.scss
|
|
@ -1,7 +1,7 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
input, select, textarea, .textarea {
|
||||
border: 1px solid $content-border-color;
|
||||
border: $input-border solid $input-border-color;
|
||||
}
|
||||
|
||||
progress {
|
||||
|
|
@ -21,16 +21,16 @@ input[type="email"],
|
|||
input[type="date"],
|
||||
input[type="number"],
|
||||
input[type="datetime-local"] {
|
||||
box-sizing: border-box;
|
||||
color: #454545;
|
||||
background: #fff;
|
||||
@include box-sizing(border-box);
|
||||
color: $input-color;
|
||||
background: $input-background;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
min-width: 70px;
|
||||
max-width: 100%;
|
||||
padding: 7px;
|
||||
font-size: 0.9rem;
|
||||
border: solid 1px #dcdcdc;
|
||||
font-size: $input-font-size;
|
||||
border: $input-border solid $input-border-color;
|
||||
transition: background 0.3s, border 0.3s;
|
||||
box-shadow: inset 1px 1px 4px -2px #c5c5c5;
|
||||
|
||||
|
|
@ -53,17 +53,17 @@ option {
|
|||
}
|
||||
|
||||
input[type="file"] {
|
||||
border: solid 1px #dcdcdc;
|
||||
border: solid $input-font-size $input-background;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: #454545;
|
||||
color: $input-color;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #cfcfcf;
|
||||
opacity: 1;
|
||||
color: $input-placeholder-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input::placeholder, textarea {
|
||||
|
|
@ -72,7 +72,7 @@ input::placeholder, textarea {
|
|||
|
||||
input:invalid {
|
||||
transition: all 0.5s;
|
||||
border: 1px solid #b85450;
|
||||
border-color: $input-invalid-border-color;
|
||||
}
|
||||
|
||||
textarea, .textarea {
|
||||
|
|
@ -118,13 +118,13 @@ input[type="range"] {
|
|||
button {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
background: $input-background;
|
||||
height: 2rem;
|
||||
font-size: 1rem;
|
||||
font-size: $input-font-size;
|
||||
min-width: 40px;
|
||||
border-left: solid 1px #dcdcdc;
|
||||
border-top: solid 1px #dcdcdc;
|
||||
border-bottom: solid 1px #dcdcdc;
|
||||
border-left: solid $input-font-size $input-background;
|
||||
border-top: solid $input-font-size $input-background;
|
||||
border-bottom: solid $input-font-size $input-background;
|
||||
border-right: none;
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -134,7 +134,7 @@ input[type="range"] {
|
|||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
background: $input-background;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -145,7 +145,7 @@ input[type="range"] {
|
|||
|
||||
input {
|
||||
@include box-sizing(border-box);
|
||||
font-size: 1em;
|
||||
font-size: $input-font-size;
|
||||
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
|
@ -154,32 +154,6 @@ input[type="range"] {
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:hover .content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select.plain {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
|
|
|
|||
22
layout.scss
22
layout.scss
|
|
@ -1,16 +1,16 @@
|
|||
@import "color";
|
||||
|
||||
.ipt-wrap {
|
||||
display: table;
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.ipt-first {
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
}
|
||||
.ipt-first {
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.ipt-second {
|
||||
padding-left: 5px;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
.ipt-second {
|
||||
padding-left: 5px;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,3 @@
|
|||
article a {
|
||||
color: #8ea4ff;
|
||||
border-bottom: 1px dotted #8ea4ff;
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.unseen {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
48
list.scss
48
list.scss
|
|
@ -1,22 +1,10 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
ul.default li {
|
||||
margin: 5px 0 5px 0;
|
||||
|
||||
&:first-child {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.boxed {
|
||||
background: #fff;
|
||||
padding: 5px;
|
||||
@include border-radius(3px);
|
||||
border: 1px solid $content-border-color;
|
||||
background: $list-background;
|
||||
padding: $list-padding;
|
||||
@include border-radius($list-border-radius);
|
||||
border: $list-border solid $list-border-color;
|
||||
|
||||
li {
|
||||
margin: 5px 0 5px 0;
|
||||
|
|
@ -33,33 +21,5 @@ ul.boxed {
|
|||
|
||||
ul.h-list li {
|
||||
display: inline-block;
|
||||
|
||||
margin: 5px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.bullet-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
td:first-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 30px;
|
||||
background: #ccc;
|
||||
display: inline-block;
|
||||
|
||||
&.active {
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
}
|
||||
|
||||
.active, a:hover, a:active {
|
||||
color: #ffffff;
|
||||
background: #353535;
|
||||
color: $pagination-active-color;
|
||||
background: $pagination-active-background;
|
||||
@include box-shadow-out(#e8e8e8);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
.meter {
|
||||
height: 20px; /* Can be anything */
|
||||
height: 20px; /* Can be anything */
|
||||
position: relative;
|
||||
background: none !important;
|
||||
|
||||
|
|
|
|||
33
section.scss
33
section.scss
|
|
@ -19,31 +19,16 @@
|
|||
|
||||
section.box {
|
||||
@include box-shadow-bottom(#f1f1f1);
|
||||
border: 1px solid $content-border-color;
|
||||
background: #fff;
|
||||
border: $content-box-border solid $content-box-border-color;
|
||||
background: $content-box-background-color;
|
||||
|
||||
&.orange {
|
||||
border-top: 3px solid #FBA026;
|
||||
}
|
||||
|
||||
&.red {
|
||||
border-top: 3px solid #B8312F;
|
||||
}
|
||||
|
||||
&.green {
|
||||
border-top: 3px solid #41A85F;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
border-top: 3px solid #2C82C9;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
border-top: 3px solid #553982;
|
||||
}
|
||||
|
||||
&.darkblue {
|
||||
border-top: 3px solid #2969B0;
|
||||
@each $tuple in
|
||||
'orange' #FBA026, 'red' #B8312F, 'green' #41A85F,
|
||||
'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 {
|
||||
&.#{nth($tuple, 1)} {
|
||||
background: #{nth($tuple, 2)};
|
||||
border-top: 3px solid #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
36
size.scss
36
size.scss
|
|
@ -1,33 +1,9 @@
|
|||
.wf-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wf-80 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.wf-20 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.wf-50 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.wf-33 {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.wf-25 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.wf-75 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.wf-66 {
|
||||
width: 66.66%;
|
||||
@each $tuple in
|
||||
'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%,
|
||||
'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% {
|
||||
.#{nth($tuple, 1)} {
|
||||
width: #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
|
|
|
|||
34
table.scss
34
table.scss
|
|
@ -19,33 +19,13 @@ table .sort-asc, table .sort-desc {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
&.red {
|
||||
caption, thead {
|
||||
background: #B8312F;
|
||||
}
|
||||
}
|
||||
|
||||
&.orange {
|
||||
caption, thead {
|
||||
background: #FBA026;
|
||||
}
|
||||
}
|
||||
|
||||
&.green {
|
||||
caption, thead {
|
||||
background: #41A85F;
|
||||
}
|
||||
}
|
||||
|
||||
&.blue {
|
||||
caption, thead {
|
||||
background: #2C82C9;
|
||||
}
|
||||
}
|
||||
|
||||
&.white {
|
||||
caption, thead {
|
||||
background: #fff;
|
||||
@each $tuple in
|
||||
'orange' #FBA026, 'red' #B8312F, 'green' #41A85F, 'white' #fff,
|
||||
'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 {
|
||||
&.#{nth($tuple, 1)} {
|
||||
caption, thead {
|
||||
background: #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
6
tag.scss
6
tag.scss
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
.tag {
|
||||
cursor: pointer;
|
||||
border: 1px solid $content-border-color;
|
||||
border: $tag-border solid $tag-border-color;
|
||||
padding: 5px 10px 5px 10px;
|
||||
font-size: 0.7rem;
|
||||
color: #fff;
|
||||
font-size: $tag-font-size;
|
||||
color: $tag-color;
|
||||
display: inline-block;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="http://127.0.0.1/cssOMS/tests/">
|
||||
<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">
|
||||
|
|
@ -84,7 +85,7 @@
|
|||
<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>
|
||||
<script src="load.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 900px; padding: 20px; border: 1px solid #ff000000;" class="center">
|
||||
|
|
@ -420,17 +421,27 @@
|
|||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput">
|
||||
<div class="advancedInput" id="input1">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input type="text" emptyAfterSelect=true>
|
||||
<input 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>
|
||||
<template id="rowElement"></template>
|
||||
<div class="dropdown" isActive="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>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tags" isActive=true>
|
||||
<template id="tagElement"></template>
|
||||
<div class="tags" isActive="true">
|
||||
<template id="tagElement">
|
||||
<span data-tpl-value="/name/0" data-tpl-name="/name/0" class="badge"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
|
|
|
|||
28
tests/app.htm
Normal file
28
tests/app.htm
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<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>
|
||||
|
|
@ -42,18 +42,6 @@
|
|||
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 ()
|
||||
|
|
@ -127,4 +115,57 @@ 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)
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user