Skip to content

Commit

Permalink
linting
Browse files Browse the repository at this point in the history
  • Loading branch information
@bengarvey
bengarvey committed Nov 11, 2024
1 parent ba22d56 commit d649759
Show file tree
Hide file tree
Showing 6 changed files with 946 additions and 183 deletions.
35 changes: 34 additions & 1 deletion js/bootstrap.min.js
View file

Large diffs are not rendered by default.

262 changes: 114 additions & 148 deletions js/d3.slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,153 +6,133 @@
*/

d3.slider = function module() {
"use strict";

// Public variables width default settings
var min = 0,
max = 100,
step = 1,
animate = true,
orientation = "horizontal",
axis = false,
margin = 50,
value,
div,
scale;
let min = 0;
let max = 100;
let step = 1;
let animate = true;
let orientation = 'horizontal';
let axis = false;
let margin = 50;
let value;
let div;
let scale;

// Private variables
var axisScale,
dispatch = d3.dispatch("slide"),
formatPercent = d3.format(".2%"),
tickFormat = d3.format(".0"),
sliderLength;
let axisScale;
const dispatch = d3.dispatch('slide');
const formatPercent = d3.format('.2%');
const tickFormat = d3.format('.0');
let sliderLength;

function slider(selection) {
selection.each(function() {

selection.each(function () {
// Create scale if not defined by user
if (!scale) {
scale = d3.scale.linear().domain([min, max]);
}
}

// Start value
value = value || scale.domain()[0];
value = value || scale.domain()[0];

// DIV container
div = d3.select(this).classed("d3-slider d3-slider-" + orientation, true);
div = d3.select(this).classed(`d3-slider d3-slider-${orientation}`, true);

var drag = d3.behavior.drag();
const drag = d3.behavior.drag();

// Slider handle
var handle = div.append("a")
.classed("d3-slider-handle", true)
.attr("xlink:href", "#")
.on("click", stopPropagation)
.call(drag);
const handle = div.append('a')
.classed('d3-slider-handle', true)
.attr('xlink:href', '#')
.on('click', stopPropagation)
.call(drag);

// Horizontal slider
if (orientation === "horizontal") {


div.on("click", onClickHorizontal);
drag.on("drag", onDragHorizontal);
handle.style("left", formatPercent(scale(value)));
sliderLength = parseInt(div.style("width"), 10);

if (orientation === 'horizontal') {
div.on('click', onClickHorizontal);
drag.on('drag', onDragHorizontal);
handle.style('left', formatPercent(scale(value)));
sliderLength = parseInt(div.style('width'), 10);
} else { // Vertical

div.on("click", onClickVertical);
drag.on("drag", onDragVertical);
handle.style("bottom", formatPercent(scale(value)));
sliderLength = parseInt(div.style("height"), 10);

div.on('click', onClickVertical);
drag.on('drag', onDragVertical);
handle.style('bottom', formatPercent(scale(value)));
sliderLength = parseInt(div.style('height'), 10);
}

if (axis) {
createAxis(div);
}


function createAxis(dom) {

// Create axis if not defined by user
if (typeof axis === "boolean") {

if (typeof axis === 'boolean') {
axis = d3.svg.axis()
.ticks(Math.round(sliderLength / 100))
.tickFormat(tickFormat)
.orient((orientation === "horizontal") ? "bottom" : "right");

}
.ticks(Math.round(sliderLength / 100))
.tickFormat(tickFormat)
.orient((orientation === 'horizontal') ? 'bottom' : 'right');
}

// Copy slider scale to move from percentages to pixels
axisScale = scale.copy().range([0, sliderLength]);
axis.scale(axisScale);
axis.scale(axisScale);

// Create SVG axis container
var svg = dom.append("svg")
.classed("d3-slider-axis d3-slider-axis-" + axis.orient(), true)
.on("click", stopPropagation);
// Create SVG axis container
const svg = dom.append('svg')
.classed(`d3-slider-axis d3-slider-axis-${axis.orient()}`, true)
.on('click', stopPropagation);

var g = svg.append("g");
const g = svg.append('g');

// Horizontal axis
if (orientation === "horizontal") {

svg.style("left", -margin);
if (orientation === 'horizontal') {
svg.style('left', -margin);

svg.attr({
width: sliderLength + margin * 2,
height: margin
});
svg.attr({
width: sliderLength + margin * 2,
height: margin,
});

if (axis.orient() === "top") {
svg.style("top", -margin);
g.attr("transform", "translate(" + margin + "," + margin + ")")
if (axis.orient() === 'top') {
svg.style('top', -margin);
g.attr('transform', `translate(${margin},${margin})`);
} else { // bottom
g.attr("transform", "translate(" + margin + ",0)")
g.attr('transform', `translate(${margin},0)`);
}

} else { // Vertical

svg.style("top", -margin);

svg.attr({
width: margin,
height: sliderLength + margin * 2
});

if (axis.orient() === "left") {
svg.style("left", -margin);
g.attr("transform", "translate(" + margin + "," + margin + ")")
} else { // right
g.attr("transform", "translate(" + 0 + "," + margin + ")")
svg.style('top', -margin);

svg.attr({
width: margin,
height: sliderLength + margin * 2,
});

if (axis.orient() === 'left') {
svg.style('left', -margin);
g.attr('transform', `translate(${margin},${margin})`);
} else { // right
g.attr('transform', `translate(${0},${margin})`);
}

}

g.call(axis);

g.call(axis);
}


// Move slider handle on click/drag
function moveHandle(pos, val) {
var newValue = 0;
if (typeof val != 'undefined') {
let newValue = 0;
if (typeof val !== 'undefined') {
newValue = val;
}
else {
} else {
newValue = stepValue(scale.invert(pos / sliderLength));
}

if (value !== newValue) {
var oldPos = formatPercent(scale(stepValue(value))),
newPos = formatPercent(scale(stepValue(newValue))),
position = (orientation === "horizontal") ? "left" : "bottom";

const oldPos = formatPercent(scale(stepValue(value)));
const newPos = formatPercent(scale(stepValue(newValue)));
const position = (orientation === 'horizontal') ? 'left' : 'bottom';

var from = val;
let from = val;
if (d3.event != null) {
from = d3.event.sourceEvent || d3.event;
}
Expand All @@ -161,38 +141,32 @@ d3.slider = function module() {

if (animate) {
handle.transition()
.styleTween(position, function() { return d3.interpolate(oldPos, newPos); })
.duration((typeof animate === "number") ? animate : 250);
.styleTween(position, () => d3.interpolate(oldPos, newPos))
.duration((typeof animate === 'number') ? animate : 250);
} else {
handle.style(position, newPos);
handle.style(position, newPos);
}
}

}


// Calculate nearest step value
function stepValue(val) {

var valModStep = (val - scale.domain()[0]) % step,
alignValue = val - valModStep;
const valModStep = (val - scale.domain()[0]) % step;
let alignValue = val - valModStep;

if (Math.abs(valModStep) * 2 >= step) {
alignValue += (valModStep > 0) ? step : -step;
}

return alignValue;

}


function onClickHorizontal(val) {
var from = val;
if (d3.event != null) {
from = d3.event.offsetX || d3.event.layerX;
}
moveHandle(from, val);

let from = val;
if (d3.event != null) {
from = d3.event.offsetX || d3.event.layerX;
}
moveHandle(from, val);
}

function onClickVertical(val) {
Expand All @@ -207,86 +181,78 @@ d3.slider = function module() {

function onDragVertical() {
moveHandle(sliderLength - Math.max(0, Math.min(sliderLength, d3.event.y)));
}
}

function stopPropagation() {
d3.event.stopPropagation();
}

});

}
}

// Getter/setter functions
slider.min = function(_) {
slider.min = function (_) {
if (!arguments.length) return min;
min = _;
return slider;
}
};

slider.max = function(_) {
slider.max = function (_) {
if (!arguments.length) return max;
max = _;
return slider;
}
};

slider.step = function(_) {
slider.step = function (_) {
if (!arguments.length) return step;
step = _;
return slider;
}
};

slider.animate = function(_) {
slider.animate = function (_) {
if (!arguments.length) return animate;
animate = _;
return slider;
}
};

slider.orientation = function(_) {
slider.orientation = function (_) {
if (!arguments.length) return orientation;
orientation = _;
return slider;
}
};

slider.axis = function(_) {
slider.axis = function (_) {
if (!arguments.length) return axis;
axis = _;
return slider;
}
};

slider.margin = function(_) {
slider.margin = function (_) {
if (!arguments.length) return margin;
margin = _;
return slider;
}
};

slider.value = function(_) {
slider.value = function (_) {
if (!arguments.length) return value;
value = _;
return slider;
}
};

slider.scale = function(_) {
slider.scale = function (_) {
if (!arguments.length) return scale;
scale = _;
return slider;
}
};

slider.slide_to = function(newValue) {
if(newValue > max)
newValue = max;
else if(newValue < min)
newValue = min;
slider.slide_to = function (newValue) {
if (newValue > max) newValue = max;
else if (newValue < min) newValue = min;


//div = d3.select('#timeline');
div.on("click")(newValue);
}
// div = d3.select('#timeline');
div.on('click')(newValue);
};

d3.rebind(slider, dispatch, "on");
d3.rebind(slider, dispatch, 'on');

return slider;

}


};
604 changes: 603 additions & 1 deletion js/d3.v7.9.min.js
View file

Large diffs are not rendered by default.

184 changes: 181 additions & 3 deletions js/jquery-1.11.0.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit d649759

Please sign in to comment.