* Toggle-Buttons for Component Remote Control (#677) * Update remote.js * Handle Component Updates individually * Avoid unnecessary updates Co-authored-by: brindosch <edeltraud70@gmx.de>
This commit is contained in:
LordGrey
GitHub
parent
9e149308f4
commit
9472860868
|
|
@ -18,7 +18,7 @@
|
|||
performTranslation();
|
||||
|
||||
var si = sysInfo.hyperion;
|
||||
var libs = { "Bootstrap 3": "http://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "JSON-Editor": "http://jeremydorn.com/json-editor/", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "http://mm.onokumus.com/index.html", "download.js": "http://danml.com/download.html", "gijgo": "http://gijgo.com/" };
|
||||
var libs = { "Bootstrap 3": "http://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "Bootstrap Toggle": "https://www.bootstraptoggle.com/", "JSON-Editor": "http://jeremydorn.com/json-editor/", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "http://mm.onokumus.com/index.html", "download.js": "http://danml.com/download.html", "gijgo": "http://gijgo.com/" };
|
||||
var libh = "";
|
||||
var lang = [];
|
||||
var dcount = 0;
|
||||
|
|
@ -86,4 +86,4 @@
|
|||
});
|
||||
|
||||
removeOverlay();
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
/*! ========================================================================
|
||||
* Bootstrap Toggle: bootstrap-toggle.css v2.2.0
|
||||
* http://www.bootstraptoggle.com
|
||||
* ========================================================================
|
||||
* Copyright 2014 Min Hur, The New York Times Company
|
||||
* Licensed under MIT
|
||||
* ======================================================================== */
|
||||
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
|
||||
.toggle{position:relative;overflow:hidden}
|
||||
.toggle input[type=checkbox]{display:none}
|
||||
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
|
||||
.toggle.off .toggle-group{left:-100%}
|
||||
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
|
||||
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
|
||||
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
|
||||
.toggle.btn{min-width:59px;min-height:34px}
|
||||
.toggle-on.btn{padding-right:24px}
|
||||
.toggle-off.btn{padding-left:24px}
|
||||
.toggle.btn-lg{min-width:79px;min-height:45px}
|
||||
.toggle-on.btn-lg{padding-right:31px}
|
||||
.toggle-off.btn-lg{padding-left:31px}
|
||||
.toggle-handle.btn-lg{width:40px}
|
||||
.toggle.btn-sm{min-width:50px;min-height:30px}
|
||||
.toggle-on.btn-sm{padding-right:20px}
|
||||
.toggle-off.btn-sm{padding-left:20px}
|
||||
.toggle.btn-xs{min-width:35px;min-height:22px}
|
||||
.toggle-on.btn-xs{padding-right:12px}
|
||||
.toggle-off.btn-xs{padding-left:12px}
|
||||
|
|
@ -12,7 +12,6 @@ body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15
|
|||
body{
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.btn{margin: 2px 0;}
|
||||
/*
|
||||
#page-wrapper a[target=_blank]::after {
|
||||
content:"\f08e";
|
||||
|
|
@ -217,6 +216,8 @@ table label{margin:0}
|
|||
}
|
||||
|
||||
/*simple ripple effect for li a and btn*/
|
||||
/* Breaks Bootstrap toggle; position: relative */
|
||||
/*
|
||||
.btn, li a{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -264,6 +265,7 @@ li a:active:after {
|
|||
opacity: .2;
|
||||
transition: 0s;
|
||||
}
|
||||
*/
|
||||
|
||||
/*Bootstrap callouts*/
|
||||
.bs-callout {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
|
||||
<!-- Colorpicker -->
|
||||
<script src="js/lib/bootstrap-colorpicker.min.js"></script>
|
||||
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
||||
|
||||
<!-- BS Notfiy -->
|
||||
<script src="js/lib/bootstrap-notify.min.js"></script>
|
||||
|
|
@ -54,6 +53,11 @@
|
|||
|
||||
<!-- Bootstrap Core CSS -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
||||
|
||||
<!-- BSToggle -->
|
||||
<script src="js/lib/bootstrap-toggle.min.js"></script>
|
||||
<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
|
||||
|
||||
<!-- MetisMenu CSS -->
|
||||
<link href="css/metisMenu.css" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@ $(document).ready(function () {
|
|||
}
|
||||
});
|
||||
// notify the update
|
||||
$(window.hyperion).trigger("components-updated");
|
||||
$(window.hyperion).trigger("components-updated", event.response.data);
|
||||
});
|
||||
|
||||
$(window.hyperion).on("cmd-instance-update", function (event) {
|
||||
|
|
@ -307,4 +307,4 @@ $("#btn_darkmode").off().on("click",function(e){
|
|||
location.reload();
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$(document).ready(function() {
|
||||
performTranslation();
|
||||
performTranslation();
|
||||
|
||||
var oldEffects = [];
|
||||
var cpcolor = '#B500FF';
|
||||
|
|
@ -203,7 +203,7 @@ $(document).ready(function() {
|
|||
}
|
||||
}
|
||||
|
||||
function updateComponents()
|
||||
function initComponents()
|
||||
{
|
||||
var components = window.comps;
|
||||
var hyperionEnabled = true;
|
||||
|
|
@ -214,32 +214,77 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
// create buttons
|
||||
$('#componentsbutton').html("");
|
||||
for (var idx=0; idx<components.length;idx++)
|
||||
for (const comp of components)
|
||||
{
|
||||
if(components[idx].name == "ALL")
|
||||
if(comp.name === "ALL")
|
||||
continue;
|
||||
|
||||
var enable_style = (components[idx].enabled? "btn-success" : "btn-danger");
|
||||
var enable_icon = (components[idx].enabled? "fa-play" : "fa-stop");
|
||||
var comp_name = components[idx].name;
|
||||
var comp_btn_id = "comp_btn_"+comp_name;
|
||||
var comp_goff = hyperionEnabled? "enabled" : "disabled";
|
||||
const enable_style = (comp.enabled? "checked" : "");
|
||||
const comp_btn_id = "comp_btn_"+comp.name;
|
||||
|
||||
// create btn if not there
|
||||
if ($("#"+comp_btn_id).length == 0)
|
||||
if ($("#"+comp_btn_id).length === 0)
|
||||
{
|
||||
var d='<span style="display:block;margin:3px"><button type="button" '+comp_goff+' id="'+comp_btn_id+'" class="btn '+enable_style
|
||||
+'" onclick="requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)
|
||||
+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+$.i18n('general_comp_'+components[idx].name)+'</span>';
|
||||
var d='<span style="display:block;margin:3px">'
|
||||
+'<input id="'+comp_btn_id+'"'+enable_style+' type="checkbox"'
|
||||
+'data-toggle="toggle" data-onstyle="success" data-on="'+$.i18n('general_btn_on')+'" data-off="'+$.i18n('general_btn_off')+'">'
|
||||
+' <label>'+$.i18n('general_comp_'+comp.name)+'</label>'
|
||||
+'</span>';
|
||||
|
||||
$('#componentsbutton').append(d);
|
||||
$(`#${comp_btn_id}`).bootstrapToggle();
|
||||
$(`#${comp_btn_id}`).bootstrapToggle(hyperionEnabled ? "enable" : "disable")
|
||||
$(`#${comp_btn_id}`).change(e => {
|
||||
requestSetComponentState(e.currentTarget.id.split('_').pop(), e.currentTarget.checked)
|
||||
//console.log(e.currentTarget.checked)
|
||||
});
|
||||
}
|
||||
else // already create, update state
|
||||
}
|
||||
}
|
||||
|
||||
function updateComponent( component )
|
||||
{
|
||||
if (component.name == "ALL")
|
||||
{
|
||||
var components = window.comps;
|
||||
|
||||
hyperionEnabled = component.enabled
|
||||
for (const comp of components)
|
||||
{
|
||||
setClassByBool( $('#'+comp_btn_id) , components[idx].enabled, "btn-danger", "btn-success" );
|
||||
setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop" , "fa-play" );
|
||||
$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')').attr(comp_goff);
|
||||
|
||||
if(comp.name === "ALL")
|
||||
continue;
|
||||
|
||||
const comp_btn_id = "comp_btn_"+comp.name;
|
||||
|
||||
if ( !hyperionEnabled )
|
||||
{
|
||||
$(`#${comp_btn_id}`).bootstrapToggle('off');
|
||||
$(`#${comp_btn_id}`).bootstrapToggle("disable");
|
||||
}
|
||||
else
|
||||
{
|
||||
$(`#${comp_btn_id}`).bootstrapToggle("enable");
|
||||
if ( comp.enabled !== $(`#${comp_btn_id}`).prop("checked") )
|
||||
{
|
||||
$(`#${comp_btn_id}`).bootstrapToggle().prop('checked', comp.enabled).change();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
const comp_btn_id = "comp_btn_"+component.name;
|
||||
|
||||
//console.log ("updateComponent: ", component.name, "Current Checked: ", $(`#${comp_btn_id}`).prop("checked"), "New Checked: ", component.enabled, );
|
||||
|
||||
// In case Buttons were disabled before, status may be different to component status
|
||||
if ( component.enabled != $(`#${comp_btn_id}`).prop("checked") )
|
||||
{
|
||||
// console.log ("Update status to Checked = ", component.enabled);
|
||||
if ( component.enabled )
|
||||
$(`#${comp_btn_id}`).bootstrapToggle("on");
|
||||
else
|
||||
$(`#${comp_btn_id}`).bootstrapToggle("off");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -345,14 +390,18 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
//force first update
|
||||
updateComponents();
|
||||
initComponents();
|
||||
updateInputSelect();
|
||||
updateLedMapping();
|
||||
updateVideoMode();
|
||||
updateEffectlist();
|
||||
|
||||
// interval updates
|
||||
$(window.hyperion).on("components-updated",updateComponents);
|
||||
|
||||
$(window.hyperion).on('components-updated', function(e, comp){
|
||||
//console.log ("components-updated", e, comp);
|
||||
updateComponent (comp);
|
||||
});
|
||||
|
||||
$(window.hyperion).on("cmd-priorities-update", function(event){
|
||||
window.serverInfo.priorities = event.response.data.priorities;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
/*! ========================================================================
|
||||
* Bootstrap Toggle: bootstrap-toggle.js v2.2.0
|
||||
* http://www.bootstraptoggle.com
|
||||
* ========================================================================
|
||||
* Copyright 2014 Min Hur, The New York Times Company
|
||||
* Licensed under MIT
|
||||
* ======================================================================== */
|
||||
+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
|
||||
//# sourceMappingURL=bootstrap-toggle.min.js.map
|
||||
Loading…
Reference in New Issue