b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
1233 lines
37 KiB
JavaScript
Executable file
1233 lines
37 KiB
JavaScript
Executable file
'use strict';
|
|
/* global ScreenLayout */
|
|
|
|
/**
|
|
* This is one of possible LockScreen unlockers, and is the default unlocker
|
|
* would be used in Gaia. It's possible to follow the strategy pattern described
|
|
* in the LockSreen to make more unlockers.
|
|
*/
|
|
|
|
(function(exports) {
|
|
|
|
/**
|
|
* We should care about the need of testing,
|
|
* and make all stateful objects become instance-able.
|
|
*
|
|
* @param {Object} |opts| (Opional) addtional, options that may overwrite the
|
|
* default settings.
|
|
* The options should follow default settings above.
|
|
* @constructor
|
|
*/
|
|
var LockScreenSlide = function(opts) {
|
|
this.initialize(opts);
|
|
};
|
|
|
|
var LockScreenSlidePrototype = {
|
|
stopped: false,
|
|
canvas: null,
|
|
layout: '',
|
|
/**
|
|
* "new style" slider: as described in https://bugzil.la/950884
|
|
* if this is set true, slider will be rendered as specified there
|
|
* this module uses different render logics/data structures,
|
|
* when useNewStyle is set to true
|
|
* other callers of this module will see old-styled slider,
|
|
* when useNewStyle is not specified
|
|
*/
|
|
useNewStyle: false,
|
|
track: {
|
|
length: {tiny: '280', large: '410'},
|
|
color: 'rgba(255, 255, 255, 0.4)',
|
|
backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
from: 0,
|
|
to: 0,
|
|
radius: 0,
|
|
width: 0 // We need dynamic length here.
|
|
},
|
|
|
|
trackNew: {
|
|
length: {tiny: '276', large: '406'},
|
|
strokeColorTop: 'rgba(0, 0, 0, 0.2)',
|
|
strokeColorBottom: 'rgba(0, 0, 0, 0)',
|
|
fillColorTop: 'rgba(0, 0, 0, 0.2)',
|
|
fillColorBottom: 'rgba(0, 0, 0, 0)',
|
|
backColor: 'rgba(51, 51, 51, 0.15)',
|
|
from: 0,
|
|
to: 0,
|
|
radius: 0,
|
|
width: 0 // We need dynamic length here.
|
|
},
|
|
|
|
arrows: {
|
|
left: null, right: null,
|
|
// Left and right drawing origin.
|
|
ldraw: {x: null, y: null},
|
|
rdraw: {x: null, y: null}
|
|
},
|
|
|
|
iconBG: {
|
|
radius: 20,
|
|
left: {
|
|
color: 'rgba(255, 255, 255, 0.25)'
|
|
},
|
|
right: {
|
|
color: 'rgba(255, 255, 255, 0.25)'
|
|
}
|
|
},
|
|
|
|
slides: {
|
|
left: null,
|
|
right: null
|
|
},
|
|
|
|
areas: {
|
|
left: null,
|
|
right: null
|
|
},
|
|
|
|
// The handle area can touch by the user.
|
|
area: null,
|
|
overlay: null,
|
|
|
|
width: 0, // We need dynamic length here.
|
|
height: 80,
|
|
center: {x: null, y: null},
|
|
|
|
handle: {
|
|
// Whether we need to auto extend the handle.
|
|
autoExpand: {
|
|
accState: 'normal', // In accelerating or not.
|
|
accFactor: 1.02, // Accelerate sliding (y = x^accFactor).
|
|
sentinelOffset: 40, // How many pixels before reaching end.
|
|
sentinelWidth: 0 // Max width - offset
|
|
},
|
|
bounceBackTime: 200, // ms
|
|
radius: 28, // The radius of the handle in pixel.
|
|
lineWidth: 1.6,
|
|
maxWidth: 0, // We need dynamic length here.
|
|
|
|
// The colors here is the current color, which
|
|
// will be alternated with another side's color
|
|
// when user dragged across the center.
|
|
|
|
// If it slide across the boundary to color it.
|
|
touchedColor: '0, 170, 204', // RGB
|
|
// The intermediate color of touched color.
|
|
touchedColorStop: '178, 229, 239',
|
|
// The initial stroke color.
|
|
color: '255, 255, 255',
|
|
// The initial handle background color.
|
|
backgroundColor: '255, 255, 255',
|
|
// The initial handle background color alpha value.
|
|
backgroundAlpha: 0
|
|
},
|
|
|
|
handleNew: {
|
|
// Whether we need to auto extend the handle.
|
|
autoExpand: {
|
|
accState: 'normal', // In accelerating or not.
|
|
accFactor: 1.02, // Accelerate sliding (y = x^accFactor).
|
|
sentinelOffset: 40, // How many pixels before reaching end.
|
|
sentinelWidth: 0 // Max width - offset
|
|
},
|
|
bounceBackTime: 200, // ms
|
|
radius: 30, // The radius of the handle in pixel.
|
|
innerRadius: 15,
|
|
outerColor: 'rgba(255, 255, 255, 0.9)',
|
|
innerColor: 'rgba(0, 0, 0, 0.05)',
|
|
lineWidth: 1.6,
|
|
maxWidth: 0, // We need dynamic length here.
|
|
towardLeft: false,
|
|
|
|
// The colors here is the current color, which
|
|
// will be alternated with another side's color
|
|
// when user dragged across the center.
|
|
|
|
// If it slide across the boundary to color it.
|
|
touchedColor: '0, 170, 204', // RGB
|
|
// The intermediate color of touched color.
|
|
touchedColorStop: '178, 229, 239'
|
|
},
|
|
|
|
colors: {
|
|
left: {
|
|
touchedColor: '255, 255, 255',
|
|
touchedColorStop: '255, 255, 255'
|
|
},
|
|
|
|
right: {
|
|
touchedColor: '255, 255, 255',
|
|
touchedColorStop: '255, 255, 255'
|
|
}
|
|
},
|
|
|
|
states: {
|
|
// Some elements can only be initialized after initialization...
|
|
initialized: false,
|
|
sliding: false,
|
|
slideReachEnd: false,
|
|
slidingColorful: false, // Start to color the handle.
|
|
slidingColorGradientEnd: false, // Full color the handle.
|
|
|
|
// Most of them need to be initialized later.
|
|
touch: {
|
|
id: '',
|
|
touched: false,
|
|
initX: -1,
|
|
pageX: -1,
|
|
pageY: -1,
|
|
tx: -1,
|
|
prevX: -1,
|
|
deltaX: 0 // Diff from prevX and current X
|
|
}
|
|
|
|
},
|
|
|
|
// How to get elements.
|
|
IDs: {
|
|
overlay: 'lockscreen',
|
|
area: 'lockscreen-area',
|
|
canvas: 'lockscreen-canvas',
|
|
areas: {
|
|
left: 'lockscreen-area-camera',
|
|
right: 'lockscreen-area-unlock'
|
|
}
|
|
},
|
|
|
|
// Paths to access the resources.
|
|
resources: {
|
|
larrow: '/lockscreen/style/images/larrow.png',
|
|
rarrow: '/lockscreen/style/images/rarrow.png'
|
|
},
|
|
|
|
resourcesNew: {
|
|
larrow: '/lockscreen/style/images/lockscreen_toggle_arrow_left.png',
|
|
rarrow: '/lockscreen/style/images/lockscreen_toggle_arrow_right.png'
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Initialize this unlocker strategy.
|
|
*
|
|
* @param {Object} |opts| (Opional) addtional, options that may overwrite the
|
|
* default settings.
|
|
* The options should follow default settings above.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype.initialize =
|
|
function(opts) {
|
|
if (opts) {
|
|
this._overwriteSettings(opts);
|
|
}
|
|
if (opts.useNewStyle) {
|
|
this.track = this.trackNew;
|
|
this.handle = this.handleNew;
|
|
this.resources = this.resourcesNew;
|
|
}
|
|
this._initializeCanvas();
|
|
this.publish('lockscreenslide-unlocker-initializer');
|
|
this.states.initialized = true;
|
|
};
|
|
|
|
LockScreenSlidePrototype.reset = function lss_reset() {
|
|
this._clearCanvas();
|
|
this._drawTrack();
|
|
this._resetHandle();
|
|
this._resetArrows();
|
|
this._drawIconBG();
|
|
};
|
|
|
|
/**
|
|
* Overwrite settings recursively.
|
|
*
|
|
* @param {Object} |options| options for overwrite default settings.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._overwriteSettings =
|
|
function(options) {
|
|
var iterate = function _iterate(opts, settings) {
|
|
for (var property in opts) {
|
|
if (opts.hasOwnProperty(property)) {
|
|
if ('object' === typeof opts[property]) {
|
|
iterate(opts[property], settings[property]);
|
|
}
|
|
else {
|
|
settings[property] = opts[property];
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
iterate(options, this);
|
|
};
|
|
|
|
/**
|
|
* The dispatcher. Unlocker would manager all its DOMs individually.
|
|
*
|
|
* @param {event} |evt| LockScreen Slide event.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype.handleEvent =
|
|
function(evt) {
|
|
switch (evt.type) {
|
|
case 'screenchange':
|
|
// Don't lock if screen is turned off by promixity sensor.
|
|
if (evt.detail.screenOffBy == 'proximity') {
|
|
break;
|
|
}
|
|
|
|
// If the screen got blackout, we should restore the slide.
|
|
this._clearCanvas();
|
|
this._drawTrack();
|
|
this._resetHandle();
|
|
this._resetArrows();
|
|
this._drawIconBG();
|
|
break;
|
|
|
|
case 'touchstart':
|
|
evt.preventDefault();
|
|
if (evt.target !== this.area || evt.touches.length > 1) {
|
|
return;
|
|
}
|
|
this.states.touch.id = evt.touches[0].identifier;
|
|
this._onSlideBegin(this._dpx(evt.touches[0].pageX));
|
|
window.addEventListener('touchend', this);
|
|
window.addEventListener('touchmove', this);
|
|
break;
|
|
|
|
case 'touchmove':
|
|
// In order to prevent pocket unlocks we reset the slide progress and
|
|
// end the gesture detection if a new touch point appears on screen.
|
|
if (evt.touches.length > 1) {
|
|
this._endGesture();
|
|
return;
|
|
}
|
|
// Records touch states.
|
|
this._onTouchMove(
|
|
this._dpx(evt.touches[0].pageX),
|
|
this._dpx(evt.touches[0].pageY)
|
|
);
|
|
if (this.states.sliding) {
|
|
this._onSliding(this._dpx(evt.touches[0].pageX));
|
|
}
|
|
break;
|
|
|
|
case 'touchend':
|
|
if (evt.changedTouches[0].identifier !== this.states.touch.id) {
|
|
return;
|
|
}
|
|
|
|
this._endGesture();
|
|
break;
|
|
|
|
case 'click':
|
|
if (evt.mozInputSource === 0) {
|
|
evt.preventDefault();
|
|
if (this.areas.left === evt.target) {
|
|
this.publish('lockscreenslide-activate-left');
|
|
} else if (this.areas.right === evt.target) {
|
|
this.publish('lockscreenslide-activate-right');
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Initialize the canvas.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._initializeCanvas =
|
|
function lss_initializeCanvas() {
|
|
|
|
this.overlay = document.getElementById(this.IDs.overlay);
|
|
this.area = document.getElementById(this.IDs.area);
|
|
this.canvas = document.getElementById(this.IDs.canvas);
|
|
this.areas.left = document.getElementById(this.IDs.areas.left);
|
|
this.areas.right = document.getElementById(this.IDs.areas.right);
|
|
|
|
this.area.addEventListener('touchstart', this);
|
|
this.areas.left.addEventListener('click', this);
|
|
this.areas.right.addEventListener('click', this);
|
|
|
|
// Capture the first overlay change and do the delayed initialization.
|
|
this.layout = (ScreenLayout && ScreenLayout.getCurrentLayout &&
|
|
ScreenLayout.getCurrentLayout()) ?
|
|
ScreenLayout.getCurrentLayout() : 'tiny';
|
|
|
|
var center = this.center;
|
|
this.arrows.left = new Image();
|
|
this.arrows.right = new Image();
|
|
var larrow = this.arrows.left;
|
|
var rarrow = this.arrows.right;
|
|
larrow.src = this.resources.larrow;
|
|
rarrow.src = this.resources.rarrow;
|
|
|
|
// XXX: Bet it would be OK while user start to drag the slide.
|
|
larrow.onload = (function() {
|
|
var offset =
|
|
this.useNewStyle ?
|
|
(this.arrows.left.width + this.handle.radius) :
|
|
(this.arrows.left.width << 1);
|
|
this.arrows.ldraw.x =
|
|
center.x - offset;
|
|
this.arrows.ldraw.y =
|
|
center.y - (this.arrows.left.height >> 1);
|
|
var ctx = this.canvas.getContext('2d');
|
|
ctx.drawImage(this.arrows.left,
|
|
this.arrows.ldraw.x,
|
|
this.arrows.ldraw.y,
|
|
this.arrows.left.width,
|
|
this.arrows.left.height);
|
|
}).bind(this);
|
|
rarrow.onload = (function() {
|
|
var offset =
|
|
this.useNewStyle ? this.handle.radius : this.arrows.right.width;
|
|
this.arrows.rdraw.x =
|
|
center.x + offset;
|
|
this.arrows.rdraw.y =
|
|
center.y - (this.arrows.right.height >> 1);
|
|
var ctx = this.canvas.getContext('2d');
|
|
ctx.drawImage(this.arrows.right,
|
|
this.arrows.rdraw.x,
|
|
this.arrows.rdraw.y,
|
|
this.arrows.right.width,
|
|
this.arrows.right.height);
|
|
}).bind(this);
|
|
|
|
this.width = this._dpx(window.innerWidth);
|
|
this.height = this._dpx(80);
|
|
|
|
this.canvas.width = this.width;
|
|
this.canvas.height = this.height;
|
|
|
|
// Shrink the canvas back to keep the density.
|
|
this.canvas.style.width = window.innerWidth + 'px';
|
|
this.canvas.style.height = 80 + 'px';
|
|
|
|
this.center.x =
|
|
this.canvas.offsetLeft + this.canvas.width >> 1;
|
|
this.center.y =
|
|
this.canvas.offsetTop + this.canvas.height >> 1;
|
|
|
|
this.handle.radius =
|
|
this._dpx(this.handle.radius);
|
|
|
|
if (this.useNewStyle) {
|
|
this.handle.innerRadius =
|
|
this._dpx(this.handle.innerRadius);
|
|
}
|
|
|
|
this.track.radius =
|
|
this.handle.radius + this._dpx(this.useNewStyle ? 2 : 1);
|
|
|
|
this.handle.lineWidth =
|
|
this._dpx(this.handle.lineWidth);
|
|
|
|
this.handle.autoExpand.sentinelOffset =
|
|
this._dpx(this.handle.autoExpand.sentinelOffset);
|
|
|
|
this.iconBG.radius = this._dpx(this.iconBG.radius);
|
|
|
|
this.canvas.getContext('2d').save();
|
|
|
|
// Need to move the context toward right, to compensate the circle which
|
|
// would be draw at the center, and make it align too left.
|
|
this.canvas.getContext('2d', this.handle.radius << 1, 0);
|
|
|
|
// We don't reset the arrows because it need to be draw while image
|
|
// got loaded, which is a asynchronous process.
|
|
|
|
var trackLength = 'tiny' === this.layout ?
|
|
this.track.length.tiny : this.track.length.large;
|
|
|
|
// Offset and clientWidth would be window size.
|
|
trackLength = this._dpx(trackLength);
|
|
|
|
// Because the canvas would draw from the center to one point
|
|
// on the circle, it would add dimeter long distance for one side.
|
|
var maxWidth = (trackLength -
|
|
(this.handle.radius << 1)) >> 1;
|
|
|
|
// Left 1 pixel each side for the border.
|
|
maxWidth -= 2;
|
|
this.handle.maxWidth = maxWidth;
|
|
this.handle.autoExpand.sentinelWidth =
|
|
maxWidth - this.handle.autoExpand.sentinelOffset;
|
|
|
|
this.track.width = trackLength;
|
|
this.track.from = this.center.x - maxWidth;
|
|
this.track.to = this.center.x + maxWidth;
|
|
this.track.y = this.center.y;
|
|
|
|
this._drawTrack();
|
|
this._drawIconBG();
|
|
|
|
// Draw the handle.
|
|
this._resetHandle();
|
|
this._resetTouchStates();
|
|
};
|
|
|
|
/**
|
|
* Finalize the canvas: restore its default states.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._finalizeCanvas =
|
|
function lss_finalizeCanvas() {
|
|
this.states.slidingColorful = false;
|
|
this.states.slidingColorGradientEnd = false,
|
|
this._clearCanvas();
|
|
};
|
|
|
|
/**
|
|
* Records how long the user's finger dragged.
|
|
*
|
|
* @param {number} |tx| The absolute coordinate of the touching position.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._onSliding =
|
|
function lss_onSliding(tx) {
|
|
var mtx = this._mapCoord(tx, 0)[0];
|
|
var isLeft = tx - this.center.x < 0;
|
|
var prevState;
|
|
var currentState;
|
|
this._clearCanvas();
|
|
|
|
var expandSentinelR = this.center.x +
|
|
this.handle.autoExpand.sentinelWidth;
|
|
|
|
var expandSentinelL = this.center.x -
|
|
this.handle.autoExpand.sentinelWidth;
|
|
|
|
if (tx > expandSentinelR || tx < expandSentinelL) {
|
|
prevState = this.handle.autoExpand.accState;
|
|
this.handle.autoExpand.accState = 'accelerating';
|
|
currentState = this.handle.autoExpand.accState;
|
|
var slow = false;
|
|
if (isLeft) {
|
|
slow = this.states.touch.deltaX > 0;
|
|
if (prevState !== currentState) {
|
|
this.publish('lockscreenslide-near-left',
|
|
{'currentState': currentState, 'prevState': prevState});
|
|
}
|
|
} else {
|
|
slow = this.states.touch.deltaX < 0;
|
|
if (prevState !== currentState) {
|
|
this.publish('lockscreenslide-near-right',
|
|
{'currentState': currentState, 'prevState': prevState});
|
|
}
|
|
}
|
|
} else {
|
|
prevState = this.handle.autoExpand.accState;
|
|
this.handle.autoExpand.accState = 'normal';
|
|
currentState = this.handle.autoExpand.accState;
|
|
if (prevState !== currentState) {
|
|
if (isLeft) {
|
|
if (prevState !== currentState) {
|
|
this.publish('lockscreenslide-near-left',
|
|
{'currentState': currentState, 'prevState': prevState});
|
|
}
|
|
} else {
|
|
if (prevState !== currentState) {
|
|
this.publish('lockscreenslide-near-right',
|
|
{'currentState': currentState, 'prevState': prevState});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
mtx = this._accelerateSlide(tx);
|
|
|
|
// Order matters.
|
|
this._drawTrack();
|
|
this._drawArrowsTo(mtx);
|
|
this._drawIconBG();
|
|
this._drawSlideTo(mtx);
|
|
};
|
|
|
|
/**
|
|
* Start slide the handle of the lockscreen.
|
|
* Effect: Will set touch and sliding flag in this.
|
|
*
|
|
* @param {tx} The absolute coordinate X of the touch position.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._onSlideBegin =
|
|
function lss_onSlideBegin(tx) {
|
|
var center = this.center;
|
|
|
|
// To see if the finger touch on the area of the center circle.
|
|
var boundaryR = center.x + this.handle.radius;
|
|
var boundaryL = center.x - this.handle.radius;
|
|
|
|
if (tx > boundaryR || tx < boundaryL) {
|
|
this.states.sliding = false;
|
|
return; // Do nothing.
|
|
}
|
|
|
|
this.publish('lockscreenslide-unlocking-start');
|
|
this.states.touch.initX = tx;
|
|
this.states.sliding = true;
|
|
this._lightIcons();
|
|
};
|
|
|
|
/**
|
|
* Encapsulating all the cleanups needed at the end of a gesture.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._endGesture =
|
|
function lss_endGesture() {
|
|
window.removeEventListener('touchmove', this);
|
|
window.removeEventListener('touchend', this);
|
|
|
|
this.states.sliding = false;
|
|
this._onSlideEnd();
|
|
this._resetTouchStates();
|
|
this.overlay.classList.remove('touched');
|
|
this.states.slideReachEnd = false;
|
|
};
|
|
|
|
LockScreenSlidePrototype._stop =
|
|
function lss_stop() {
|
|
if (this._stopped) { return; }
|
|
window.removeEventListener('touchmove', this);
|
|
window.removeEventListener('touchend', this);
|
|
this.area.removeEventListener('touchstart', this);
|
|
this._stopped = true;
|
|
};
|
|
|
|
LockScreenSlidePrototype._start =
|
|
function lss_stop() {
|
|
if (!this._stopped) { return; }
|
|
window.addEventListener('touchmove', this);
|
|
window.addEventListener('touchend', this);
|
|
this.area.addEventListener('touchstart', this);
|
|
this._stopped = false;
|
|
};
|
|
|
|
/**
|
|
* When user released the finger, bounce it back.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._onSlideEnd =
|
|
function lss_onSlideEnd() {
|
|
|
|
var isLeft = this.states.touch.pageX - this.center.x < 0;
|
|
if (false === this.states.slideReachEnd) {
|
|
this._bounceBack(this.states.touch.pageX);
|
|
} else {
|
|
var intention = isLeft ? 'lockscreenslide-activate-left' :
|
|
'lockscreenslide-activate-right';
|
|
this.publish(intention);
|
|
}
|
|
|
|
this.publish('lockscreenslide-unlocking-stop');
|
|
this._darkIcons();
|
|
};
|
|
|
|
/**
|
|
* When touchmove event on, records the information.
|
|
*
|
|
* @param {number} |pageX| The absolute coordinate X of the finger.
|
|
* @param {number} |pageY| The absolute coordinate Y of the finger.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._onTouchMove =
|
|
function ls_handleMove(pageX, pageY) {
|
|
var touch = this.states.touch;
|
|
|
|
if (!touch.touched) {
|
|
|
|
// Do nothing if the user have not move the finger to the slide yet.
|
|
if (!this.states.sliding) {
|
|
return;
|
|
}
|
|
|
|
touch.touched = true;
|
|
touch.initX = pageX;
|
|
|
|
var overlay = this.overlay;
|
|
overlay.classList.add('touched');
|
|
}
|
|
|
|
touch.tx = pageX - touch.initX;
|
|
touch.pageX = pageX;
|
|
|
|
if (-1 !== touch.pageX) {
|
|
touch.deltaX = pageX - touch.prevX;
|
|
}
|
|
|
|
touch.prevX = pageX;
|
|
};
|
|
|
|
/**
|
|
* Accelerate the slide when the finger is near the end.
|
|
*
|
|
* @param {number} |tx| The absolute coordinate of the touching position.
|
|
* @return {number}
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._accelerateSlide =
|
|
function lss_accelerateSlide(tx) {
|
|
var isLeft = tx - this.center.x < 0;
|
|
var dx = Math.abs(tx - this.center.x);
|
|
var accFactor = this.handle.autoExpand.accFactor;
|
|
var acc = Math.pow(dx, accFactor);
|
|
var accTx = tx + acc;
|
|
if (isLeft) {
|
|
accTx = tx - acc;
|
|
}
|
|
|
|
if (accTx < 0) {
|
|
accTx = 0;
|
|
}
|
|
return accTx;
|
|
};
|
|
|
|
/**
|
|
* Clear the canvas.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._clearCanvas =
|
|
function lss_clearCanvas() {
|
|
var canvas = this.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
};
|
|
|
|
/**
|
|
* Bounce the handle back from the |tx|.
|
|
*
|
|
* @param {number} |tx| The absolute horizontal position of the finger.
|
|
* @param {Function()} |cb| (Optional) Callback. Will be executed after
|
|
* the animation ended.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._bounceBack =
|
|
function lss_bounceBack(tx, cb) {
|
|
// Absolute coordinate of the canvas center.
|
|
var duration = this.handle.bounceBackTime;
|
|
var center = this.center;
|
|
var nextTx = tx;
|
|
var tsBegin = null;
|
|
var mspf = 0; // ms per frame.
|
|
var interval = 1; // How many pixels per frame should draw.
|
|
// Draw from the circle center to one end on the circle itself.
|
|
var isLeft = tx - center.x < 0;
|
|
|
|
var drawIt = (function _drawIt(ts) {
|
|
if (null === tsBegin) {
|
|
tsBegin = ts;
|
|
}
|
|
|
|
if (ts - tsBegin < duration) {
|
|
if (0 === mspf) {
|
|
mspf = ts - tsBegin; // Not an accurate way to determine mspf.
|
|
}
|
|
interval = Math.abs(center.x - tx) / (duration / mspf);
|
|
nextTx = isLeft ? nextTx + interval : nextTx - interval;
|
|
if ((isLeft && nextTx < center.x) ||
|
|
(!isLeft && nextTx >= center.x)) {
|
|
this._clearCanvas();
|
|
this._drawTrack();
|
|
this._drawArrowsTo(nextTx);
|
|
this._drawIconBG();
|
|
this._drawSlideTo(nextTx);
|
|
}
|
|
requestAnimationFrame(drawIt);
|
|
} else {
|
|
// Compensation from the current position to the center of the slide.
|
|
this._clearCanvas();
|
|
this._drawTrack();
|
|
this._drawArrowsTo(center.x);
|
|
this._drawIconBG();
|
|
this._drawSlideTo(center.x);
|
|
if (cb) {
|
|
cb();
|
|
}
|
|
}
|
|
}).bind(this);
|
|
requestAnimationFrame(drawIt);
|
|
};
|
|
|
|
/**
|
|
* Dark the left and right icons when user leave our LockScreen.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._darkIcons =
|
|
function lss_darkIcons() {
|
|
this.areas.left.classList.add('dark');
|
|
this.areas.right.classList.add('dark');
|
|
};
|
|
|
|
/**
|
|
* Draw the two arrows on the slide.
|
|
*
|
|
* @param {number} |tx| The absolute horizontal position of the target.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._drawArrowsTo =
|
|
function lss_drawArrows(tx) {
|
|
var canvas = this.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
var center = this.center;
|
|
var offset = tx - center.x;
|
|
var isLeft = offset < 0;
|
|
var alpha = 1 - Math.min(1, Math.abs(offset) / this._dpx(30));
|
|
var position;
|
|
var oldAlpha;
|
|
|
|
if (this.handle.maxWidth < Math.abs(offset)) {
|
|
this.states.slideReachEnd = true;
|
|
return;
|
|
}
|
|
this.states.slideReachEnd = false;
|
|
|
|
// The Y of arrows: need to put it from center to sink half of the arrow.
|
|
if (isLeft) {
|
|
// XXX:<<1: OK but don't know why!
|
|
position =
|
|
this.useNewStyle ?
|
|
(tx - this.arrows.left.width - this.handle.radius) :
|
|
(tx - (this.arrows.left.width << 1));
|
|
oldAlpha = ctx.globalAlpha;
|
|
ctx.globalAlpha = alpha;
|
|
ctx.drawImage(this.arrows.left,
|
|
position,
|
|
this.arrows.ldraw.y,
|
|
this.arrows.left.width,
|
|
this.arrows.left.height);
|
|
ctx.globalAlpha = oldAlpha;
|
|
ctx.drawImage(this.arrows.right,
|
|
this.arrows.rdraw.x,
|
|
this.arrows.rdraw.y,
|
|
this.arrows.right.width,
|
|
this.arrows.right.height);
|
|
|
|
} else {
|
|
position =
|
|
this.useNewStyle ?
|
|
(tx + this.handle.radius) :
|
|
(tx + this.arrows.right.width);
|
|
oldAlpha = ctx.globalAlpha;
|
|
ctx.globalAlpha = alpha;
|
|
ctx.drawImage(this.arrows.right,
|
|
position,
|
|
this.arrows.rdraw.y,
|
|
this.arrows.right.width,
|
|
this.arrows.right.height);
|
|
ctx.globalAlpha = oldAlpha;
|
|
ctx.drawImage(this.arrows.left,
|
|
this.arrows.ldraw.x,
|
|
this.arrows.ldraw.y,
|
|
this.arrows.left.width,
|
|
this.arrows.left.height);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Draw the track of the slide.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._drawTrack =
|
|
function lss_drawTrack() {
|
|
var canvas = this.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
var radius = this.track.radius;
|
|
var startAngle;
|
|
var endAngle;
|
|
|
|
if (this.useNewStyle) {
|
|
startAngle = 1.5 * Math.PI;
|
|
endAngle = 0.5 * Math.PI;
|
|
|
|
var draw = (function(fillStyle, strokeStyle) {
|
|
ctx.beginPath();
|
|
ctx.fillStyle = fillStyle;
|
|
ctx.strokeStyle = strokeStyle;
|
|
ctx.lineWidth = this.handle.lineWidth;
|
|
ctx.moveTo(this.track.from, this.track.y - radius);
|
|
ctx.lineTo(this.track.to, this.track.y - radius);
|
|
ctx.arc(this.track.to, this.track.y,
|
|
radius, startAngle, endAngle, false);
|
|
ctx.lineTo(this.track.from, this.track.y + radius);
|
|
ctx.arc(this.track.from, this.track.y,
|
|
radius, endAngle, startAngle, false);
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
}).bind(this);
|
|
|
|
// single-color background
|
|
draw(this.track.backColor, 'transparent');
|
|
|
|
// actual gradient
|
|
var gradientStroke =
|
|
ctx.createLinearGradient(
|
|
this.track.from - radius,
|
|
this.track.y - radius,
|
|
this.track.from - radius,
|
|
this.track.y + radius
|
|
);
|
|
var gradientFill =
|
|
ctx.createLinearGradient(
|
|
this.track.from - radius,
|
|
this.track.y - radius,
|
|
this.track.from - radius,
|
|
this.track.y + radius
|
|
);
|
|
gradientStroke.addColorStop(0, this.track.strokeColorTop);
|
|
gradientStroke.addColorStop(1, this.track.strokeColorBottom);
|
|
gradientFill.addColorStop(0, this.track.fillColorTop);
|
|
gradientFill.addColorStop(1, this.track.fillColorBottom);
|
|
|
|
draw(gradientFill, gradientStroke);
|
|
|
|
} else {
|
|
// 1.5 ~ 0.5 is the right part of a circle.
|
|
startAngle = 1.5 * Math.PI;
|
|
endAngle = 0.5 * Math.PI;
|
|
var strokeStyle = this.track.color;
|
|
|
|
ctx.fillStyle = this.track.backgroundColor;
|
|
ctx.lineWidth = this.handle.lineWidth;
|
|
ctx.strokeStyle = strokeStyle;
|
|
|
|
// Start to draw it.
|
|
// Can't use functions like rect or these individual parts
|
|
// would show its borders.
|
|
ctx.beginPath();
|
|
|
|
ctx.arc(this.track.from, this.track.y,
|
|
radius, endAngle, startAngle, false);
|
|
ctx.lineTo(this.track.from, this.track.y - radius);
|
|
ctx.lineTo(this.track.to, this.track.y - radius);
|
|
ctx.arc(this.track.to, this.track.y,
|
|
radius, startAngle, endAngle, false);
|
|
ctx.lineTo(this.track.from, this.track.y + radius);
|
|
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Extend the slide from its center to the specific position.
|
|
*
|
|
* @param {number} |tx| The absolute horizontal position of the target.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._drawSlideTo =
|
|
function lss_drawSlideTo(tx) {
|
|
var canvas = this.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
var maxWidth = this.handle.maxWidth;
|
|
|
|
var offset = tx;
|
|
var radius = this.handle.radius;
|
|
var center = this.center;
|
|
|
|
// The width and height of the rectangle.
|
|
var rw = offset - center.x;
|
|
var urw = Math.abs(rw);
|
|
|
|
if (this.handle.maxWidth < urw) {
|
|
offset = rw > 0 ? center.x + maxWidth : center.x - maxWidth;
|
|
}
|
|
|
|
var counterclock = false;
|
|
if (offset - center.x < 0) {
|
|
counterclock = true;
|
|
}
|
|
var isLeft = counterclock;
|
|
|
|
var isRight = offset - center.x > 0;
|
|
|
|
if (isLeft) {
|
|
this.handle.touchedColor = this.colors.left.touchedColor;
|
|
this.handle.touchedColorStop = this.colors.left.touchedColorStop;
|
|
} else if (isRight) {
|
|
this.handle.touchedColor = this.colors.right.touchedColor;
|
|
this.handle.touchedColorStop = this.colors.right.touchedColorStop;
|
|
}
|
|
|
|
// 1.5 ~ 0.5 is the right part of a circle.
|
|
var startAngle = 1.5 * Math.PI;
|
|
var endAngle = 0.5 * Math.PI;
|
|
var fillAlpha = 0.0;
|
|
var strokeStyle = 'white';
|
|
const GRADIENT_LENGTH = 50;
|
|
|
|
if (this.useNewStyle) {
|
|
if (0 === urw) { // Draw as the initial circle.
|
|
// outer circle
|
|
ctx.beginPath();
|
|
|
|
ctx.arc(center.x, center.y,
|
|
radius, 0, 2 * Math.PI, false);
|
|
ctx.fillStyle = this.handle.outerColor;
|
|
|
|
// Note: When setting both the fill and stroke for a shape,
|
|
// make sure that you use fill() before stroke().
|
|
// Otherwise, the fill will overlap half of the stroke.
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// outer circle
|
|
ctx.beginPath();
|
|
|
|
ctx.arc(center.x, center.y,
|
|
this.handle.innerRadius, 0, 2 * Math.PI, false);
|
|
ctx.fillStyle = this.handle.innerColor;
|
|
|
|
// Note: When setting both the fill and stroke for a shape,
|
|
// make sure that you use fill() before stroke().
|
|
// Otherwise, the fill will overlap half of the stroke.
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
} else {
|
|
// from 0.9 to 0.2
|
|
fillAlpha = 0.9 - Math.min(0.7, (urw / this.handle.maxWidth) * 0.7);
|
|
|
|
strokeStyle = 'transparent';
|
|
|
|
ctx.fillStyle = 'rgba(' + this.handle.touchedColor + ', ' +
|
|
fillAlpha + ')';
|
|
ctx.strokeStyle = strokeStyle;
|
|
|
|
// Start to draw it.
|
|
// Can't use functions like rect or these individual parts
|
|
// would show its borders.
|
|
ctx.beginPath();
|
|
|
|
ctx.arc(center.x, center.y,
|
|
radius, endAngle, startAngle, counterclock);
|
|
ctx.lineTo(center.x, center.y - radius);
|
|
ctx.lineTo(center.x + (offset - center.x), center.y - radius);
|
|
ctx.arc(offset, center.y, radius, startAngle, endAngle, counterclock);
|
|
ctx.lineTo(center.x, center.y + radius);
|
|
|
|
// Note: When setting both the fill and stroke for a shape,
|
|
// make sure that you use fill() before stroke().
|
|
// Otherwise, the fill will overlap half of the stroke.
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
}
|
|
} else { // old style
|
|
var fillColor;
|
|
var strokeColor;
|
|
var borderAlpha;
|
|
// If user move over 15px, fill the slide.
|
|
if (urw > 15 && true !== this.states.slidingColorful) {
|
|
// The color should be gradient in this length, from the origin.
|
|
// It would decide how long the color turning to the touched color.
|
|
|
|
fillAlpha = (urw - 15) / GRADIENT_LENGTH;
|
|
if (fillAlpha > 1.0) {
|
|
fillAlpha = 1.0;
|
|
this.states.slidingColorGradientEnd = true;
|
|
}
|
|
|
|
// The border must disappear during the sliding,
|
|
// so it's alpha would decrease to zero.
|
|
borderAlpha = 1.0 - fillAlpha;
|
|
|
|
// From white to covered color.
|
|
strokeStyle = 'rgba(' + this.handle.touchedColorStop +
|
|
',' + borderAlpha + ')';
|
|
|
|
// It's colorful now.
|
|
this.states.slidingColorful = true;
|
|
} else {
|
|
|
|
if (0 === urw) { // Draw as the initial circle.
|
|
fillAlpha = this.handle.backgroundAlpha;
|
|
strokeColor = this.handle.color;
|
|
fillColor = this.handle.backgroundColor;
|
|
} else {
|
|
fillAlpha = (urw - 15) / GRADIENT_LENGTH;
|
|
if (fillAlpha > 1.0) {
|
|
fillAlpha = 1.0;
|
|
}
|
|
strokeColor = this.handle.touchedColorStop;
|
|
fillColor = this.handle.touchedColor;
|
|
}
|
|
borderAlpha = 1.0 - fillAlpha;
|
|
strokeStyle = 'rgba(' + strokeColor + ',' + borderAlpha + ')';
|
|
}
|
|
ctx.fillStyle = 'rgba(' + fillColor + ',' + fillAlpha + ')';
|
|
ctx.lineWidth = this.handle.lineWidth;
|
|
ctx.strokeStyle = strokeStyle;
|
|
|
|
// Start to draw it.
|
|
// Can't use functions like rect or these individual parts
|
|
// would show its borders.
|
|
ctx.beginPath();
|
|
|
|
ctx.arc(center.x, center.y,
|
|
radius, endAngle, startAngle, counterclock);
|
|
ctx.lineTo(center.x, center.y - radius);
|
|
ctx.lineTo(center.x + (offset - center.x), center.y - radius);
|
|
ctx.arc(offset, center.y, radius, startAngle, endAngle, counterclock);
|
|
ctx.lineTo(center.x, center.y + radius);
|
|
|
|
// Note: When setting both the fill and stroke for a shape,
|
|
// make sure that you use fill() before stroke().
|
|
// Otherwise, the fill will overlap half of the stroke.
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Return the mapping pixels according to the device pixel ratio.
|
|
* This may need to be put int the shared/js.
|
|
*
|
|
* @param {number} |px| original px distance.
|
|
* @return {number}
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._drawIconBG =
|
|
function lss_dibg() {
|
|
if (!this.useNewStyle) {
|
|
return;
|
|
}
|
|
|
|
var canvas = this.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
ctx.fillStyle = this.iconBG.left.color;
|
|
ctx.strokeStyle = 'transparent';
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(this.track.from, this.track.y,
|
|
this.iconBG.radius, 0, 2 * Math.PI, false);
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
ctx.fillStyle = this.iconBG.right.color;
|
|
ctx.beginPath();
|
|
ctx.arc(this.track.to, this.track.y,
|
|
this.iconBG.radius, 0, 2 * Math.PI, false);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
};
|
|
|
|
/**
|
|
* Return the mapping pixels according to the device pixel ratio.
|
|
* This may need to be put int the shared/js.
|
|
*
|
|
* @param {number} |px| original px distance.
|
|
* @return {number}
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._dpx =
|
|
function lss_dpx(px) {
|
|
return px * window.devicePixelRatio;
|
|
};
|
|
|
|
/**
|
|
* Light the left and right icons when user touch on our LockScreen.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._lightIcons =
|
|
function lss_lightIcons() {
|
|
this.areas.left.classList.remove('dark');
|
|
this.areas.right.classList.remove('dark');
|
|
};
|
|
|
|
/**
|
|
* Map and Y to canvas' X and Y.
|
|
* Note this should only be used when user want to draw something
|
|
* follow the user's input. If the canvans need adjust its position,
|
|
* the absolute coordinates should be used.
|
|
*
|
|
* @param {number} |x| absolution X.
|
|
* @param {number} |y| absolution Y.
|
|
* @return {[number]} Array of single pair of X and Y.
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._mapCoord =
|
|
function lss_mapCoord(x, y) {
|
|
var cw = this.canvas.clientWidth;
|
|
var ch = this.canvas.clientHeight;
|
|
|
|
return [cw * x / window.innerWidth,
|
|
ch * y / window.innerHeight];
|
|
};
|
|
|
|
/**
|
|
* Restore the arrow to the original position.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._resetArrows =
|
|
function lss_restoreArrows() {
|
|
var canvas = this.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.drawImage(this.arrows.left,
|
|
this.arrows.ldraw.x,
|
|
this.arrows.ldraw.y,
|
|
this.arrows.left.width,
|
|
this.arrows.left.height);
|
|
ctx.drawImage(this.arrows.right,
|
|
this.arrows.rdraw.x,
|
|
this.arrows.rdraw.y,
|
|
this.arrows.right.width,
|
|
this.arrows.right.height);
|
|
};
|
|
|
|
/**
|
|
* Draw the handle with its initial states.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._resetHandle =
|
|
function lss_resetHandle() {
|
|
this.states.slidingColorful = false;
|
|
this.states.slidingColorGradientEnd = false;
|
|
var centerx = this.center.x;
|
|
this._drawSlideTo(centerx);
|
|
};
|
|
|
|
/**
|
|
* Reset the states of touch after it's end.
|
|
*
|
|
* @this {LockScreenSlide}
|
|
*/
|
|
LockScreenSlidePrototype._resetTouchStates =
|
|
function lss_resetTouchStates() {
|
|
this.states.touch = {
|
|
id: null,
|
|
touched: false,
|
|
initX: this.center.x,
|
|
pageX: this.center.x,
|
|
pageY: this.center.y,
|
|
tx: 0,
|
|
prevX: this.center.x,
|
|
deltaX: 0
|
|
};
|
|
};
|
|
|
|
LockScreenSlidePrototype.publish =
|
|
function lss_publish(type, detail) {
|
|
window.dispatchEvent(new CustomEvent(type, {'detail': detail}));
|
|
};
|
|
|
|
LockScreenSlide.prototype = LockScreenSlidePrototype;
|
|
exports.LockScreenSlide = LockScreenSlide;
|
|
})(window);
|