mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-01-31 19:02:59 +01:00
Split slider out to a separate file
This commit is contained in:
s1341
parent
748b38f9d6
commit
788a59bfa4
2 changed files with 171 additions and 162 deletions
|
|
@ -24,167 +24,7 @@
|
|||
// Timeslider controller would probably be more appropriate.
|
||||
var _ = require('./underscore');
|
||||
var padmodals = require('./pad_modals').padmodals;
|
||||
require("./jquery.class");
|
||||
|
||||
/**
|
||||
* A class for anything which can be hung off of the slider bar.
|
||||
* I.e. this is for the handle, or saved-revisions (stars).
|
||||
* TODO:
|
||||
* - handle mousedowns/clicks
|
||||
* - handle drags
|
||||
*/
|
||||
$.Class("SliderHandleUI",
|
||||
{//statics
|
||||
},
|
||||
{//instance
|
||||
/**
|
||||
* Construct the SliderHandle.
|
||||
* @param {SliderUI} slider The slider from which this handle will be hung.
|
||||
* @param {Number} position The initial position for this handle.
|
||||
*/
|
||||
init: function (slider, value, type) {
|
||||
console.log("New SliderHandle(%d, %s)", value, type);
|
||||
this.slider = slider;
|
||||
this.value = value;
|
||||
//create the element:
|
||||
this.element = $("<div class='ui-slider-handle'></div>");
|
||||
if (type === "")
|
||||
type = "handle";
|
||||
this.element.addClass("ui-slider-handle-" + type);
|
||||
this._mouseInit();
|
||||
},
|
||||
_mouseInit: function () {
|
||||
this.element.on("mousedown.sliderhandle", null, this, function(event) {
|
||||
console.log("sliderhandleui - mousedown")
|
||||
})
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
SliderHandleUI("SliderSavedRevisionUI",
|
||||
{//statics
|
||||
},
|
||||
{//instance
|
||||
init: function(slider, revision) {
|
||||
this._super(slider, revision.revNum, 'star');
|
||||
this.revision = revision;
|
||||
},
|
||||
_mouseInit: function () {
|
||||
this.element.on("mousedown.sliderhandle", null, this, function(event) {
|
||||
console.log("SliderSavedRevisionUI - mousedown")
|
||||
})
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
//TODO:
|
||||
// - window resizing is currently broken!
|
||||
// - keyboard events
|
||||
$.Class("SliderUI",
|
||||
{//statics
|
||||
defaults: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
}
|
||||
},
|
||||
{//instance
|
||||
init: function (element, options) {
|
||||
this.options = $.extend({}, this.defaults, options);
|
||||
this.element = element;
|
||||
this.current_value = "value" in this.options ? this.options.value : 0;
|
||||
this.handles = [];
|
||||
this.attachHandle(new SliderHandleUI(this, this._current_value, 'handle'));
|
||||
this._mouseInit();
|
||||
|
||||
// handle window resize
|
||||
var _this = this;
|
||||
$(window).resize(function() {
|
||||
_this.render();
|
||||
});
|
||||
},
|
||||
_getStep: function () {
|
||||
return (this.element.width()) / (this.options.max * 1.0);
|
||||
},
|
||||
render: function () {
|
||||
for(var h in this.handles) {
|
||||
handle = this.handles[h];
|
||||
handle.element.css('left', (handle.value * this._getStep()) );
|
||||
}
|
||||
},
|
||||
// this internal version of _setValue should only be used to render
|
||||
// when the handle changes position as a result of UI events handled
|
||||
// by this slider.
|
||||
_setValue: function (value) {
|
||||
if (value < 0)
|
||||
value = 0;
|
||||
if (value > this.options.max)
|
||||
value = this.options.max;
|
||||
this.handles[0].value = value;
|
||||
this.current_value = value;
|
||||
this.render();
|
||||
},
|
||||
// this 'public' version of _setValue also triggers a change event
|
||||
setValue: function(value) {
|
||||
this._setValue(value);
|
||||
this._trigger("change", value);
|
||||
},
|
||||
setMax: function (max) {
|
||||
this.options.max = max;
|
||||
this.render();
|
||||
},
|
||||
attachHandle: function (handle) {
|
||||
this.handles.push(handle);
|
||||
this.element.append(handle.element);
|
||||
this.current_value = this.handles[0].value;
|
||||
return handle;
|
||||
},
|
||||
_trigger: function (eventname, value) {
|
||||
//TODO: implement trigger
|
||||
console.log("triggering event: ", eventname);
|
||||
if (eventname in this.options) {
|
||||
this.options[eventname](value);
|
||||
}
|
||||
},
|
||||
_mouseInit: function () {
|
||||
// handle all mouse events for the slider and handles right here
|
||||
var _this = this;
|
||||
this.element.on("mousedown.slider", function (event) {
|
||||
if (event.target == _this.element[0] || $(event.target).hasClass("ui-slider-handle")) {
|
||||
// the click is on the slider bar itself.
|
||||
var start_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
|
||||
console.log("sliderbar mousedown, value:", start_value);
|
||||
if (_this.current_value != start_value)
|
||||
_this._setValue(start_value);
|
||||
|
||||
$(document).on("mousemove.slider", function (event) {
|
||||
var current_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
|
||||
console.log("sliderbar mousemove, value:", current_value);
|
||||
// don't change the value if it hasn't actually changed!
|
||||
if (_this.current_value != current_value) {
|
||||
_this._setValue(current_value);
|
||||
_this._trigger("slide", current_value);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("mouseup.slider", function (event) {
|
||||
// make sure to get rid of the handlers on document,
|
||||
// we don't need them after this 'slide' session is done.
|
||||
$(document).off("mouseup.slider mousemove.slider");
|
||||
var end_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
|
||||
console.log("sliderbar mouseup, value:", end_value);
|
||||
// always change the value at mouseup
|
||||
_this._setValue(end_value);
|
||||
_this._trigger("change", end_value);
|
||||
|
||||
});
|
||||
} else {
|
||||
console.log("We shouldn't be here!")
|
||||
console.log(event.target);
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
);
|
||||
var sliderui = require('./sliderui');
|
||||
|
||||
$.Class("RevisionSlider",
|
||||
{//statics
|
||||
|
|
@ -230,7 +70,7 @@ $.Class("RevisionSlider",
|
|||
loadSavedRevisionHandles: function () {
|
||||
for (var r in this.timeslider.savedRevisions) {
|
||||
var rev = this.timeslider.savedRevisions[r];
|
||||
this.slider.attachHandle(new SliderSavedRevisionUI(this, rev));
|
||||
this.slider.createHandle(rev.revNum, "star");
|
||||
};
|
||||
},
|
||||
goToRevision: function (revNum) {
|
||||
|
|
|
|||
169
src/static/js/sliderui.js
Normal file
169
src/static/js/sliderui.js
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
/**
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
require("./jquery.class");
|
||||
|
||||
/**
|
||||
* This is an implementation of a (very) simple Slider UI.
|
||||
*
|
||||
* Create a slider by doing:
|
||||
* slider = new SliderUI(sliderbar_element, options);
|
||||
* sliderbar_element should be a jquery wraper of the element which will serve as
|
||||
* the bar on which the handles will be hung.
|
||||
* optionalions is an optional dictionary which currently supports the following:
|
||||
* value = the initial value for the default handle (default: 0)
|
||||
* max = the maximum value for the slider (default: 100)
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* A class for anything which can be hung off of the slider bar.
|
||||
* I.e. this is for the handle, or saved-revisions (stars).
|
||||
*/
|
||||
$.Class("SliderHandleUI",
|
||||
{//statics
|
||||
},
|
||||
{//instance
|
||||
/**
|
||||
* Construct the SliderHandle.
|
||||
* @param {SliderUI} slider The slider from which this handle will be hung.
|
||||
* @param {Number} position The initial position for this handle.
|
||||
*/
|
||||
init: function (slider, value, type) {
|
||||
console.log("New SliderHandle(%d, %s)", value, type);
|
||||
this.slider = slider;
|
||||
this.value = value;
|
||||
//create the element:
|
||||
this.element = $("<div class='ui-slider-handle'></div>");
|
||||
if (type === "")
|
||||
type = "handle";
|
||||
this.element.addClass("ui-slider-handle-" + type);
|
||||
this._mouseInit();
|
||||
},
|
||||
_mouseInit: function () {
|
||||
this.element.on("mousedown.sliderhandle", null, this, function(event) {
|
||||
console.log("sliderhandleui - mousedown")
|
||||
})
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
//TODO:
|
||||
// - window resizing is currently broken!
|
||||
// - keyboard events
|
||||
$.Class("SliderUI",
|
||||
{//statics
|
||||
defaults: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
{//instance
|
||||
init: function (element, options) {
|
||||
this.options = $.extend({}, this.defaults, options);
|
||||
this.element = element;
|
||||
this.current_value = this.options.value;
|
||||
this.handles = [];
|
||||
this.createHandle(this.current_value, 'handle');
|
||||
this._mouseInit();
|
||||
|
||||
// handle window resize
|
||||
var _this = this;
|
||||
$(window).resize(function() {
|
||||
_this.render();
|
||||
});
|
||||
},
|
||||
_getStep: function () {
|
||||
return (this.element.width()) / (this.options.max * 1.0);
|
||||
},
|
||||
render: function () {
|
||||
for(var h in this.handles) {
|
||||
handle = this.handles[h];
|
||||
handle.element.css('left', (handle.value * this._getStep()) );
|
||||
}
|
||||
},
|
||||
// this internal version of _setValue should only be used to render
|
||||
// when the handle changes position as a result of UI events handled
|
||||
// by this slider.
|
||||
_setValue: function (value) {
|
||||
if (value < 0)
|
||||
value = 0;
|
||||
if (value > this.options.max)
|
||||
value = this.options.max;
|
||||
this.handles[0].value = value;
|
||||
this.current_value = value;
|
||||
this.render();
|
||||
},
|
||||
// this 'public' version of _setValue also triggers a change event
|
||||
setValue: function(value) {
|
||||
this._setValue(value);
|
||||
this._trigger("change", value);
|
||||
},
|
||||
setMax: function (max) {
|
||||
this.options.max = max;
|
||||
this.render();
|
||||
},
|
||||
createHandle: function (value, type) {
|
||||
console.log("createHandle(%d, %s)", value, type)
|
||||
var handle = new SliderHandleUI(this, value, type);
|
||||
this.handles.push(handle);
|
||||
this.element.append(handle.element);
|
||||
return handle;
|
||||
},
|
||||
_trigger: function (eventname, value) {
|
||||
console.log("triggering event: ", eventname);
|
||||
if (eventname in this.options) {
|
||||
this.options[eventname](value);
|
||||
}
|
||||
},
|
||||
_mouseInit: function () {
|
||||
// handle all mouse events for the slider and handles right here
|
||||
var _this = this;
|
||||
this.element.on("mousedown.slider", function (event) {
|
||||
if (event.target == _this.element[0] || $(event.target).hasClass("ui-slider-handle")) {
|
||||
// the click is on the slider bar itself.
|
||||
var start_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
|
||||
console.log("sliderbar mousedown, value:", start_value);
|
||||
if (_this.current_value != start_value)
|
||||
_this._setValue(start_value);
|
||||
|
||||
$(document).on("mousemove.slider", function (event) {
|
||||
var current_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
|
||||
console.log("sliderbar mousemove, value:", current_value);
|
||||
// don't change the value if it hasn't actually changed!
|
||||
if (_this.current_value != current_value) {
|
||||
_this._setValue(current_value);
|
||||
_this._trigger("slide", current_value);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("mouseup.slider", function (event) {
|
||||
// make sure to get rid of the handlers on document,
|
||||
// we don't need them after this 'slide' session is done.
|
||||
$(document).off("mouseup.slider mousemove.slider");
|
||||
var end_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
|
||||
console.log("sliderbar mouseup, value:", end_value);
|
||||
// always change the value at mouseup
|
||||
_this._setValue(end_value);
|
||||
_this._trigger("change", end_value);
|
||||
|
||||
});
|
||||
} else {
|
||||
console.log("We shouldn't be here!")
|
||||
console.log(event.target);
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
);
|
||||
Loading…
Reference in a new issue