Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

autoscroll and focus

Browse Source
This commit is contained in:
=
2020-06-15 16:37:40 +02:00
parent d482a7551b
commit 579fa79bb6
8 changed files with 77 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/setup.less
+1
View File
@@ -105,6 +105,7 @@
flex: 1;
.borded_label {
cursor: pointer;
min-width: 100px;
height: 60px;
border-radius: 40px;
Thermo.Active/wwwroot/assets/styles/style.css
+1
View File
@@ -90,6 +90,7 @@
flex: 1;
}
.setup .modal section.body section article .svg-area .borded_label {
cursor: pointer;
min-width: 100px;
height: 60px;
border-radius: 40px;
Thermo.Active/wwwroot/src/app_modules_thermo/components/index.ts
+14 -1
View File
@@ -7,4 +7,17 @@ export default {
numeric,
slider,
keyboard
}
}
Vue.directive('focusOn', {
bind: function (el: HTMLElement, binding) {
el.addEventListener('click', (ev) => {
let element = document.getElementById(binding.expression) as HTMLElement;
if (element) {
element.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
element.focus();
}
})
}
})
Thermo.Active/wwwroot/src/app_modules_thermo/components/numeric.ts
+3
View File
@@ -12,6 +12,9 @@ export default class Numeric extends Vue {
// get Value() { return this.value; }
// set Value(v) { this.$emit("input", v); }
@Prop({ default: null })
id: string;
@Prop()
min: number;
Thermo.Active/wwwroot/src/app_modules_thermo/components/numeric.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="numeric">
<input type="number" v-model.number="value.valueAct" @focus="onFocus" @blur="onBlur" />
<input type="number" v-model.number="value.valueAct" @focus="onFocus" @blur="onBlur" :id="id" />
<span v-if="value.unitMeasure">{{unitMeasure}}</span>
</div>
</template>
Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/stampoSVG.ts
+8 -2
View File
@@ -5,6 +5,12 @@ import { Prop } from 'vue-property-decorator';
@Component({})
export default class StampoSVG extends Vue {
@Prop({})
recipe:Recipe.IRecipe;
@Prop({})
recipe: Recipe.IRecipe;
select(name) {
let element = document.getElementsByName(name)[0] as HTMLElement;
element.scrollIntoView();
element.focus();
}
}
Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/stampoSVG.vue
+48 -48
View File
@@ -1,63 +1,63 @@
<template>
<div class="svg-area">
<img src="assets/svg/disegno-stampo.svg" />
<div class="borded_label" id="quota1">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_dim_x.valueAct}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota2">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_dim_y.valueAct}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota3">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_max_height.valueAct}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota4">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_base_height.valueAct}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota5">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_min_height.valueAct}}</span>
<small>mm</small>
</div>
</div>
</div>
<div class="svg-area">
<img src="assets/svg/disegno-stampo.svg" />
<div class="borded_label" id="quota1" v-focus-on="general_sizes_mould_dim_x">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_dim_x.valueAct}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota2">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_dim_y.valueAct}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota3">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_max_height.valueAct}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota4">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_base_height.valueAct}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota5">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.general_sizes_mould_min_height.valueAct}}</span>
<small>mm</small>
</div>
</div>
</div>
</template>
<style scoped>
#quota1 {
top: 490px;
left: 190px;
top: 490px;
left: 190px;
}
#quota2 {
top: 520px;
left: 930px;
top: 520px;
left: 930px;
}
#quota3 {
top: 100px;
left: 90px;
top: 100px;
left: 90px;
}
#quota4 {
top: 280px;
left: 10px;
top: 280px;
left: 10px;
}
#quota5 {
top: 300px;
left: 1110px;
top: 300px;
left: 1110px;
}
</style>
<script lang="ts" src="./stampoSVG.ts"></script>
Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/stampo.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="body" v-if="recipe">
<div class="input-area">
<label>{{'general_sizes_mould_dim_x' | localize('Dimensione X')}}</label>
<numeric v-model="recipe.general_sizes_mould_dim_x" />
<numeric v-model="recipe.general_sizes_mould_dim_x" id="general_sizes_mould_dim_x" />
</div>
<slider v-model="recipe.general_sizes_mould_dim_x"></slider>