function range(param, options){
var defaultValue = options.defaultValue || 0
var value = getValue(read(param), defaultValue)
var formatter = formatters[options.format] || formatters.default
var widthStyle = widthPercent(formatter.size(value))
var classes = []
if (options.large){
classes.push('-large')
}
if (options.full){
classes.push('-full')
}
if (options.flex){
if (options.flex === 'small'){
classes.push('-flexSmall')
} else {
classes.push('-flex')
}
}
if (options.pull){
classes.push('-pull')
}
var style = options.width ? {'flex-basis': options.width + 'px'} : {}
var slider = h('div.slider', {
tabIndex: '0',
'draggable': true,
'ev-dragstart': cancelEvent(),
'ev-mousedown': MouseDragEvent(drag, {
param: param,
formatter: formatter,
defaultValue: defaultValue
}),
'ev-dblclick': send(dblclickHandler, {
param: param,
defaultValue: defaultValue
})
},[
h('div', {style: widthStyle}),
h('span.value', formatter.display(value)),
h('span.title', options.title)
])
return h('RangeParam', {
className: classes.join(' '),
style: style
}, slider)
}
function range (param, options) {
var defaultValue = options.defaultValue || 0
var formatter = formatters[options.format] || formatters.default
var value = computed([param, defaultValue], function (value, defaultValue) {
value = getValue(value)
return value == null ? defaultValue : value
})
var widthStyle = computed([value], v => (Math.round(Math.min(1, Math.max(formatter.size(v), 0)) * 1000) / 10) + '%')
var displayValue = computed([value], v => formatter.display(v))
var classes = getClasses(options)
var style = options.width ? {'flex-basis': options.width + 'px'} : {}
var slider = h('div.slider', {
tabIndex: '0',
'draggable': true,
'ev-dragstart': cancelEvent(),
'ev-mousedown': MouseDragEvent(drag, {
param: param,
formatter: formatter,
defaultValue: defaultValue
}),
'ev-dblclick': send(dblclickHandler, {
param: param,
defaultValue: defaultValue
})
}, [
h('div', {style: { width: widthStyle }}),
h('span.value', displayValue),
h('span.title', options.title)
])
return h('RangeParam', {
className: classes.join(' '),
style: style
}, slider)
}
module.exports = function (node) {
var offset = node.offset || QueryParam(node, 'offset')
var gain = node.amp || QueryParam(node, 'amp')
var startOffset = computed(offset, o => o && o[0] || 0)
var endOffset = computed(offset, o => (o && o[1] != null) ? o[1] : 1)
var gainValue = computed([gain, 1], getValue)
var range = computed([endOffset, startOffset], subtract)
return h('SampleTrimmer', {
draggable: true,
'ev-dragstart': DomEvent(dragStart, node),
'ev-dragover': DomEvent(dragOver, node),
'ev-dragleave': DomEvent(dragLeave, node),
'ev-drop': DomEvent(drop, node)
}, [
svg('svg WaveView', {
'viewBox': '0 0 500 400',
'preserveAspectRatio': 'none'
}, [
svg('path.wave', {
style: {
fill: '#AAA'
},
hooks: [
WaveHook(node, gainValue, 500, 400)
]
}),
svg('rect.section', {
x: computed([startOffset, 500], multiply), y: 0,
width: computed([range, 500], multiply),
height: 400,
style: {
fill: 'rgba(142, 255, 126, 0.38)'
}
}),
slicesSvg(node.slices, 500, 400),
svg('path.baseline', {
d: 'M0,200 L500,200',
style: {
strokeWidth: 2,
stroke: '#AAA'
}
})
]),
h('input.start', {
draggable: true,
'ev-dragstart': cancelEvent(),
type: 'range',
min: 0, max: 1,
step: 0.00125,
'ev-input': DomEvent(handleChange, IndexParam(offset, 0, parseNumber)),
hooks: [
ValueHook(startOffset)
]
}),
h('input.end', {
draggable: true,
'ev-dragstart': cancelEvent(),
type: 'range',
min: 0, max: 1,
step: 0.00125,
'ev-input': DomEvent(handleChange, IndexParam(offset, 1, parseNumber)),
hooks: [
ValueHook(endOffset)
]
})
])
}
module.exports = function(node){
var data = read(node) || {}
var offset = QueryParam(node, 'offset')
var startOffset = data.offset && data.offset[0] || 0
var endOffset = (data.offset && data.offset[1] != null) ? data.offset[1] : 1
var gainValue = getValue(data.gain, 1)
var range = endOffset - startOffset
return h('SampleTrimmer', {
draggable: true,
'ev-dragstart': cancelEvent(),
'ev-dragover': DragEvent(dragOver, node),
'ev-dragleave': DragEvent(dragLeave, node),
'ev-drop': DragEvent(drop, node)
},[
svg('svg WaveView', {
'viewBox': '0 0 500 400',
'preserveAspectRatio': 'none'
}, [
svg('path.wave', {
style: {
fill: '#AAA'
},
'ev-hook': WaveHook(node, 500, 400)
}),
svg('rect.section', {
x: startOffset * 500, y: 0,
width: range * 500,
height: 400,
style: {
fill: 'rgba(142, 255, 126, 0.38)'
}
}),
svg('path.baseline', {
d: 'M0,200 L500,200',
style: {
strokeWidth:2,
stroke: '#AAA'
}
})
]),
h('input.start', {
type: 'range',
value: new ValueHook(startOffset),
min: 0, max: 1,
step: 0.00125,
'ev-input': ValueEvent(handleChange, 'value', IndexParam(offset, 0))
}),
h('input.end', {
type: 'range',
value: new ValueHook(endOffset),
min: 0, max: 1,
step: 0.00125,
'ev-input': ValueEvent(handleChange, 'value', IndexParam(offset, 1))
})
])
}