Bonjour,
J’essaie de faire un widget de type action/slider basé sur le modèle du core « Value ». J’ai repris le code de cmd.action.slider.value.html que j’ai modifié légèrement, en insérant du CSS, notamment pour modifier la couleur du texte.
<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-template="value" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<input class="myin" type="number" min="#minValue#" max="#maxValue#" value="#state#" step="1" id="sliderInput#id#">
<template>
<div>color : rgb(20,20,20) ({{Couleur d'arrière plan}})</div>
<div>step : 0.5 ({{Pas utilisé pour le changement de valeur}})</div>
<div>noslider : 1 ({{Ne pas afficher le slider}})</div>
</template>
<style>
.myin{
color: #ff0000 !important;
width:138px!important;
height:25px!important;
border-radius : 11px!important;
font-size : 20px!important;
font-weight: Bold!important;
background-color:#c0c0c0!important;
background: radial-gradient(at center, #C0C0C0, #808080)!important;
/*position:absolute;
left: 50%;
transform: translate(-50%,-20px);*/
}
</style>
<script>
var $inputNumber#id# = $('#sliderInput#id#')
var step#id# = 1
var spinTimer#id# = null
if ($.issetWidgetOptParam('#step#', 'step')) {
step#id# = parseFloat('#step#')
$inputNumber#id#.attr('step', step#id#)
}
$('#sliderInput#id#').spinner({
icons: { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n"},
stop: function(event, ui) {
if (event.currentTarget.id != 'sliderInput#id#') {
clearTimeout(spinTimer#id#)
spinTimer#id# = setTimeout(function() {
$inputNumber#id#.trigger('change')
}, 1000)
}
}
})
if ('#noslider#' != '1') {
var mySlider#id# = $.createWidgetSlider({
sliderDiv: document.getElementById('widget_slider#id#'),
state: ('#state#' == '') ? #minValue# : '#state#',
min: #minValue#,
max: #maxValue#,
step: step#id#,
tooltips: false
})
if ($.issetWidgetOptParam('#color#', 'color')) {
$(mySlider#id#.target).find('.noUi-handle').style('background', '#color#', 'important')
$(mySlider#id#.target).find('.noUi-connect').style('background', '#color#', 'important')
}
mySlider#id#.on('update', function(values, handle) {
var value = values[handle].replace('#unite#', '').trim()
if (values[handle]) {
if (parseInt(value) == parseFloat(value)) {
$inputNumber#id#.val(parseInt(value))
} else {
$inputNumber#id#.val(parseFloat(value))
}
}
})
mySlider#id#.on('change', function(values, handle) {
jeedom.cmd.execute({id: '#id#', value: {slider: values[handle].replace('#unite#', '').trim()}})
})
}
$inputNumber#id#.on('focusout', function(event) {
clearTimeout(spinTimer#id#)
if ($(this).attr('value') == $(this).attr('aria-valuenow')) return false
if ('#noslider#' != '1') mySlider#id#.set(this.value)
jeedom.cmd.execute({id: '#id#', value: {slider: this.value}})
})
$inputNumber#id#.on('change', function(event) {
if ('#noslider#' != '1') mySlider#id#.set(this.value)
jeedom.cmd.execute({id: '#id#', value: {slider: this.value}})
})
jeedom.cmd.update['#id#'] = function(_options) {
$inputNumber#id#.val(_options.display_value).attr('value', _options.display_value).attr('aria-valuenow', _options.display_value)
if ('#noslider#' != '1') mySlider#id#.set(_options.display_value)
}
</script>
</div>
Alors le style attendu s’applique bien pour tous les paramètre, sauf « width » et « color » qui ne sont pas pris en compte. J’imagine qu’il y a une autre classe qui s’applique mais je ne vois pas comment changer la couleur du texte et la largeur du widget.
Quelqu’un aurait une idée ?
Merci
