Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Slider: visual properties #261

Merged
merged 9 commits into from
Jan 27, 2022
Prev Previous commit
Next Next commit
Designer Components: update slider component
  • Loading branch information
s-cork committed Jan 27, 2022
commit f79653cbefd03bbb3fa46b2a6690e6a807328887
7 changes: 7 additions & 0 deletions js/designer_components/DesignerComponent.ts
Original file line number Diff line number Diff line change
@@ -5,6 +5,8 @@ interface Window {
Sk: any;
}

const HASUNITS = /[a-zA-Z%]/g

/**
* To create a designer class that supports dynamically updating the design view
* subclass from DesignerComponent
@@ -239,6 +241,11 @@ export class DesignerComponent {
return color;
}

public getCssLength(len?: string) {
len ??= "";
return ("" + len).match(HASUNITS) ? len : len + "px";
}

/** helper method for clearing a domnode that will be reinstantiated during an update */
public clearElement(el: HTMLElement) {
while (el.firstElementChild) {
17 changes: 13 additions & 4 deletions js/designer_components/DesignerSlider.ts
Original file line number Diff line number Diff line change
@@ -14,6 +14,9 @@ interface Formatter {
from: (value: string) => number | false;
}

const BACKGROUND = "--slider-background";
const BAR_HEIGHT = "--slider-height";
const HANDLE_SIZE = "--slider-handle-size";
export class DesignerSlider extends DesignerComponent {
static defaults = {
start: [20, 80],
@@ -25,9 +28,10 @@ export class DesignerSlider extends DesignerComponent {
};
static links = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.css"];
static scripts = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.js"];
static css = `.anvil-container-overflow,.anvil-panel-col{overflow:visible}.anvil-slider-container{padding:10px 0;min-height:50px}
.anvil-slider-container.has-pips{padding-bottom:40px}.noUi-connect{background:var(--primary)}
.noUi-horizontal .noUi-handle{width:34px;height:34px;right:-17px;top:-10px;border-radius:50%}.noUi-handle::after,.noUi-handle::before{content:none}`;
static css = `.anvil-slider-container{padding:10px 0}.anvil-slider-container.has-pips{padding-bottom:40px}
.anvil-container-overflow,.anvil-panel-col{overflow:visible}.noUi-connect{background:var(${BACKGROUND})}
.noUi-horizontal{height:var(${BAR_HEIGHT})}.noUi-horizontal .noUi-handle{width:var(${HANDLE_SIZE});height:var(${HANDLE_SIZE});right:calc(var(${HANDLE_SIZE}) / -2);top:calc((-2px + var(${BAR_HEIGHT}) - var(${HANDLE_SIZE}))/2);border-radius:50%}
.noUi-handle::after,.noUi-handle::before{content:none}`;
static init() {
super.init(".anvil-slider", "anvil-slider-container");
}
@@ -119,9 +123,14 @@ export class DesignerSlider extends DesignerComponent {
if (this.slider.firstElementChild) {
this.slider.removeChild(this.slider.firstElementChild);
}
this.domNode.style.setProperty("--primary", this.getColor(props.color, true));
this.domNode.style.setProperty(BACKGROUND, this.getColor(props.color, true));
this.updateSpacing(props);
this.updateVisible(props);
this.updateRole(props);
const barHeight = this.getCssLength(props.bar_height || 18);
const handleSize = this.getCssLength(props.handle_size || 34);
this.domNode.style.setProperty(BAR_HEIGHT, barHeight);
this.domNode.style.setProperty(HANDLE_SIZE, handleSize);
props.enabled ? this.slider.removeAttribute("disabled") : this.slider.setAttribute("disabled", "");
noUiSlider.create(this.slider, props);
} catch (e) {
22 changes: 18 additions & 4 deletions js/designer_components/bundle.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// DesignerComponent.ts
var HASUNITS = /[a-zA-Z%]/g;
var DesignerComponent = class {
constructor(domNode, pyComponent, el) {
this.domNode = domNode;
@@ -137,6 +138,10 @@ var DesignerComponent = class {
}
return color;
}
getCssLength(len) {
len ??= "";
return ("" + len).match(HASUNITS) ? len : len + "px";
}
clearElement(el) {
while (el.firstElementChild) {
el.removeChild(el.firstElementChild);
@@ -241,6 +246,9 @@ DesignerQuill.links = ["//cdn.quilljs.com/1.3.6/quill.snow.css", "//cdn.quilljs.
DesignerQuill.scripts = ["//cdn.quilljs.com/1.3.6/quill.min.js"];

// DesignerSlider.ts
var BACKGROUND = "--slider-background";
var BAR_HEIGHT = "--slider-height";
var HANDLE_SIZE = "--slider-handle-size";
var DesignerSlider = class extends DesignerComponent {
static init() {
super.init(".anvil-slider", "anvil-slider-container");
@@ -325,9 +333,14 @@ var DesignerSlider = class extends DesignerComponent {
if (this.slider.firstElementChild) {
this.slider.removeChild(this.slider.firstElementChild);
}
this.domNode.style.setProperty("--primary", this.getColor(props.color, true));
this.domNode.style.setProperty(BACKGROUND, this.getColor(props.color, true));
this.updateSpacing(props);
this.updateVisible(props);
this.updateRole(props);
const barHeight = this.getCssLength(props.bar_height || 18);
const handleSize = this.getCssLength(props.handle_size || 34);
this.domNode.style.setProperty(BAR_HEIGHT, barHeight);
this.domNode.style.setProperty(HANDLE_SIZE, handleSize);
props.enabled ? this.slider.removeAttribute("disabled") : this.slider.setAttribute("disabled", "");
noUiSlider.create(this.slider, props);
} catch (e) {
@@ -355,9 +368,10 @@ DesignerSlider.defaults = {
};
DesignerSlider.links = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.css"];
DesignerSlider.scripts = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.js"];
DesignerSlider.css = `.anvil-container-overflow,.anvil-panel-col{overflow:visible}.anvil-slider-container{padding:10px 0;min-height:50px}
.anvil-slider-container.has-pips{padding-bottom:40px}.noUi-connect{background:var(--primary)}
.noUi-horizontal .noUi-handle{width:34px;height:34px;right:-17px;top:-10px;border-radius:50%}.noUi-handle::after,.noUi-handle::before{content:none}`;
DesignerSlider.css = `.anvil-slider-container{padding:10px 0}.anvil-slider-container.has-pips{padding-bottom:40px}
.anvil-container-overflow,.anvil-panel-col{overflow:visible}.noUi-connect{background:var(${BACKGROUND})}
.noUi-horizontal{height:var(${BAR_HEIGHT})}.noUi-horizontal .noUi-handle{width:var(${HANDLE_SIZE});height:var(${HANDLE_SIZE});right:calc(var(${HANDLE_SIZE}) / -2);top:calc((-2px + var(${BAR_HEIGHT}) - var(${HANDLE_SIZE}))/2);border-radius:50%}
.noUi-handle::after,.noUi-handle::before{content:none}`;

// DesignerSwitch.ts
var DesignerSwitch = class extends DesignerComponent {
Loading