LT-275: Creating measure flow component common section
This commit is contained in:
Bruno Alves de Faria committed
1 parent
9a8eaff560
commit
bbb7dad905
60 files changed
+391
-156
No files matched your search
@@ -0,0 +1,110 @@
|
||||
// Allow attaching to jQuery selectors
|
||||
$.fn.draggable = function() {
|
||||
makeDraggable(this);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* This function makes an element movable around the page.
|
||||
* It supports mouse and touch input and allows whichever element
|
||||
* is specified to be moved to any arbitrary position.
|
||||
*
|
||||
* @param element
|
||||
*/
|
||||
makeDraggable = function(element) {
|
||||
var container = $(window);
|
||||
var diffX,
|
||||
diffY;
|
||||
|
||||
function getCursorCoords(e) {
|
||||
var cursor = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
|
||||
// Handle touchMove cases
|
||||
if (cursor.x === undefined) {
|
||||
cursor.x = e.originalEvent.touches[0].pageX;
|
||||
}
|
||||
if (cursor.y === undefined) {
|
||||
cursor.y = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
return cursor;
|
||||
}
|
||||
|
||||
function startMoving(e) {
|
||||
// Prevent dragging dialog by clicking on slider
|
||||
// (could be extended for buttons, not sure it's necessary
|
||||
if (e.target.type && e.target.type === 'range') {
|
||||
return;
|
||||
}
|
||||
|
||||
var elementTop = parseFloat(element.offset().top),
|
||||
elementLeft = parseFloat(element.offset().left);
|
||||
|
||||
var cursor = getCursorCoords(e);
|
||||
diffX = cursor.x - elementLeft;
|
||||
diffY = cursor.y - elementTop;
|
||||
|
||||
container.css('cursor', 'move');
|
||||
element.css('cursor', 'move');
|
||||
|
||||
element.css({
|
||||
cursor: 'move',
|
||||
left: elementLeft + 'px',
|
||||
top: elementTop + 'px',
|
||||
bottom: 'auto', // Setting these to empty doesn't seem to work in Firefox or Safari
|
||||
right: 'auto'
|
||||
});
|
||||
|
||||
$(document).on('mousemove', moveHandler);
|
||||
$(document).on('mouseup', stopMoving);
|
||||
|
||||
$(document).on('touchmove', moveHandler);
|
||||
$(document).on('touchend', stopMoving);
|
||||
}
|
||||
|
||||
function stopMoving() {
|
||||
container.css('cursor', 'default');
|
||||
element.css('cursor', 'default');
|
||||
|
||||
$(document).off('mousemove', moveHandler);
|
||||
$(document).off('touchmove', moveHandler);
|
||||
}
|
||||
|
||||
function moveHandler(e) {
|
||||
// Prevent dialog box dragging whole page in iOS
|
||||
e.preventDefault();
|
||||
|
||||
var elementWidth = parseFloat(element.outerWidth()),
|
||||
elementHeight = parseFloat(element.outerHeight()),
|
||||
containerWidth = parseFloat(container.width()),
|
||||
containerHeight = parseFloat(container.height());
|
||||
|
||||
var cursor = getCursorCoords(e);
|
||||
|
||||
var elementLeft = cursor.x - diffX;
|
||||
var elementTop = cursor.y - diffY;
|
||||
|
||||
elementLeft = Math.max(elementLeft, 0);
|
||||
elementTop = Math.max(elementTop, 0);
|
||||
|
||||
if (elementLeft + elementWidth > containerWidth) {
|
||||
elementLeft = containerWidth - elementWidth;
|
||||
}
|
||||
|
||||
if (elementTop + elementHeight > containerHeight) {
|
||||
elementTop = containerHeight - elementHeight;
|
||||
}
|
||||
|
||||
element.css({
|
||||
left: elementLeft + 'px',
|
||||
top: elementTop + 'px',
|
||||
bottom: 'auto', // Setting these to empty doesn't seem to work in Firefox or Safari
|
||||
right: 'auto'
|
||||
});
|
||||
}
|
||||
|
||||
element.on('mousedown', startMoving);
|
||||
element.on('touchstart', startMoving);
|
||||
};
|
||||
@@ -0,0 +1,2 @@
|
||||
import './draggable/draggable.js';
|
||||
import './resizable/resizable.js';
|
||||
@@ -0,0 +1,147 @@
|
||||
// Allow attaching to jQuery selectors
|
||||
$.fn.resizable = function(options) {
|
||||
_.each(this, element => {
|
||||
const resizableInstance = $(element).data('resizableInstance');
|
||||
if (options === 'destroy' && resizableInstance) {
|
||||
$(element).removeData('resizableInstance');
|
||||
resizableInstance.destroy();
|
||||
} else {
|
||||
if (resizableInstance) {
|
||||
resizableInstance.options(options);
|
||||
} else {
|
||||
$(element).data('resizableInstance', new Resizable(element, options));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* This class makes an element resizable.
|
||||
*/
|
||||
class Resizable {
|
||||
|
||||
constructor(element, options={}) {
|
||||
this.element = element;
|
||||
this.$element = $(element);
|
||||
this.options(options);
|
||||
}
|
||||
|
||||
options(options={}) {
|
||||
const { boundSize, minWidth, minHeight } = options;
|
||||
this.minWidth = minWidth || this.$element.width() || 16;
|
||||
this.minHeight = minHeight || this.$element.height() || 16;
|
||||
this.boundSize = boundSize || 8;
|
||||
|
||||
this.destroy();
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
for (var x = -1; x <= 1; x++) {
|
||||
for (var y = -1; y <= 1; y++) {
|
||||
this.createBound(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
this.$element.addClass('resizable');
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.$element.removeClass('resizable').find('resize-bound').remove();
|
||||
}
|
||||
|
||||
attachEventHandlers($bound, xDirection, yDirection) {
|
||||
const $window = $(window);
|
||||
|
||||
const initResizeHandler = event => {
|
||||
event.stopPropagation();
|
||||
|
||||
this.width = this.initialWidth = this.$element.width();
|
||||
this.height = this.initialHeight = this.$element.height();
|
||||
this.startWidth = this.width;
|
||||
this.startHeight = this.height;
|
||||
|
||||
this.posX = parseInt(this.$element.css('left'));
|
||||
this.posY = parseInt(this.$element.css('top'));
|
||||
this.startPosX = this.posX;
|
||||
this.startPosY = this.posY;
|
||||
|
||||
this.startX = event.clientX;
|
||||
this.startY = event.clientY;
|
||||
|
||||
this.$element.addClass('resizing');
|
||||
|
||||
$window.on('mousemove', resizeHandler);
|
||||
$window.on('mouseup', endResizeHandler);
|
||||
};
|
||||
|
||||
const resizeHandler = event => {
|
||||
let x, y;
|
||||
x = event.clientX < 0 ? 0 : event.clientX;
|
||||
x = x > window.innerWidth ? window.innerWidth : x;
|
||||
y = event.clientY < 0 ? 0 : event.clientY;
|
||||
y = y > window.innerHeight ? window.innerHeight : y;
|
||||
|
||||
const xDistance = (x - this.startX) * xDirection;
|
||||
const yDistance = (y - this.startY) * yDirection;
|
||||
|
||||
const width = xDistance + this.startWidth;
|
||||
const height = yDistance + this.startHeight;
|
||||
this.width = width < this.minWidth ? this.minWidth : width;
|
||||
this.height = height < this.minHeight ? this.minHeight : height;
|
||||
this.$element.width(this.width);
|
||||
this.$element.height(this.height);
|
||||
|
||||
if (xDirection < 0) {
|
||||
this.posX = this.startPosX - xDistance;
|
||||
if (width < this.minWidth) {
|
||||
this.posX = this.startPosX + (this.startWidth - this.minWidth);
|
||||
}
|
||||
|
||||
this.$element.css('left', `${this.posX}px`);
|
||||
}
|
||||
|
||||
if (yDirection < 0) {
|
||||
this.posY = this.startPosY - yDistance;
|
||||
if (height < this.minHeight) {
|
||||
this.posY = this.startPosY + (this.startHeight - this.minHeight);
|
||||
}
|
||||
|
||||
this.$element.css('top', `${this.posY}px`);
|
||||
}
|
||||
};
|
||||
|
||||
const endResizeHandler = event => {
|
||||
$window.off('mousemove', resizeHandler);
|
||||
$window.off('mouseup', endResizeHandler);
|
||||
|
||||
this.$element.removeClass('resizing');
|
||||
};
|
||||
|
||||
$bound.on('mousedown', initResizeHandler);
|
||||
}
|
||||
|
||||
createBound(xDirection, yDirection) {
|
||||
if (xDirection === 0 && xDirection === yDirection) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $bound = $('<div class="resize-bound"></div>');
|
||||
|
||||
$bound[0].onselectstart = () => false;
|
||||
|
||||
$bound.css('font-size', `${this.boundSize}px`);
|
||||
|
||||
const mapX = ['left', 'center', 'right'];
|
||||
const mapY = ['top', 'middle', 'bottom'];
|
||||
$bound.addClass('bound-' + mapX[xDirection + 1]);
|
||||
$bound.addClass('bound-' + mapY[yDirection + 1]);
|
||||
|
||||
$bound.appendTo(this.$element);
|
||||
|
||||
this.attachEventHandlers($bound, xDirection, yDirection);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
@import "{design}/app"
|
||||
|
||||
.resizable
|
||||
transform(scale(1))
|
||||
|
||||
&.resizing, .resize-bound
|
||||
user-select: none
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-khtml-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
|
||||
.resize-bound
|
||||
content: ''
|
||||
line-height: 1em
|
||||
position: fixed
|
||||
|
||||
.bound-left
|
||||
left: 0
|
||||
width: 1em
|
||||
|
||||
.bound-center
|
||||
left: 1em
|
||||
height: 1em
|
||||
right: 1em
|
||||
|
||||
.bound-right
|
||||
right: 0
|
||||
width: 1em
|
||||
|
||||
.bound-top
|
||||
top: 0
|
||||
height: 1em
|
||||
|
||||
.bound-middle
|
||||
top: 1em
|
||||
width: 1em
|
||||
bottom: 1em
|
||||
|
||||
.bound-bottom
|
||||
bottom: 0
|
||||
height: 1em
|
||||
|
||||
.bound-left.bound-top, .bound-right.bound-bottom
|
||||
cursor: nwse-resize
|
||||
|
||||
.bound-left.bound-bottom, .bound-right.bound-top
|
||||
cursor: nesw-resize
|
||||
|
||||
.bound-left.bound-middle, .bound-right.bound-middle
|
||||
cursor: ew-resize
|
||||
|
||||
.bound-center.bound-top, .bound-center.bound-bottom
|
||||
cursor: ns-resize
|
||||
Reference in new issue
Block a user