<script src="../../js/thirdparty/jquery.js"></script>
<script src="../../js/thirdparty/jquery.mobile.js"></script>
<script src="../../js/tests.js"></script>
+ <script src="js/SpinningBox.js"></script>
<script src="js/main.js"></script>
+ <script src="js/slider.tooltip.js"></script>
<script src="js/khronos/webgl-utils.js"></script>
<script src="js/khronos/webgl-debug.js"></script>
<script src="js/khronos/J3DI.js"></script>
-The WebGL initial code of main.js(line 1~234) comes from
-https://www.khronos.org/registry/webgl/sdk/demos/webkit/
-without modification.
+The SpinningBox.js comes from
+https://github.com/KhronosGroup/WebGL
+with some modifications.
+
++ var incAngle = 0;
++ var currentAngle = 0;
++ var bakAngle = 0;
++ var viewDistance = 18;
++ var requestId;
++ var canvas;
+
+ function reshape(gl)
+ {
+- var canvas = document.getElementById('example');
++ var canvas = document.getElementById('canvas');
+- var windowWidth = window.innerWidth - 20;
+- var windowHeight = window.innerHeight - 40;
+- if (windowWidth == width && windowHeight == height)
+- return;
+
+- width = windowWidth;
+- height = windowHeight;
+- canvas.width = width;
+- canvas.height = height;
+
+- gl.viewport(0, 0, width, height);
++ gl.viewport(0, 0, canvas.width, canvas.height);
+ g.perspectiveMatrix = new J3DIMatrix4();
+- g.perspectiveMatrix.perspective(30, width/height, 1, 10000);
++ g.perspectiveMatrix.perspective(30, canvas.width/canvas.height, 1, 10000);
+- g.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0);
++ g.perspectiveMatrix.lookat(0, 0, viewDistance, 0, 0, 0, 0, 1, 0);
These tests are copyright by the Khronos Group under MIT License:
https://www.khronos.org/registry/webgl/sdk/tests/test-guidelines.md
The jquery extension code of main.js(line 251~376) comes from
-http://jquerymobile.com/demos/1.3.0/docs/examples/slider/tooltip.html
+https://github.com/jquery/jquery-mobile/tree/1.3-stable
with some modifications.
this._currentValue = newValue;
+ }
+ }
-You may use any jQuery project under the terms of the MIT License:
+ if ( o.popupEnabled ) {
+ this._positionPopup();
+- this._popup.html( newValue );
++ this._popup.html( Math.round(newValue) );
+ }
+
+ if ( o.showValue ) {
+- this._handleText.html( newValue );
++ this._handleText.html( Math.round(newValue) );
+ }
+
+jQuery Mobile v@VERSION
+http://jquerymobile.com
+
+Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
+Released under the MIT license.
http://jquery.org/license
--- /dev/null
+var g = {}; // globals
+
+var incAngle = 0;
+var currentAngle = 0;
+var bakAngle = 0;
+var viewDistance = 18;
+var requestId;
+
+var canvas;
+
+
+function init() {
+ // Initialize
+ var gl = initWebGL(
+ // The id of the Canvas Element
+ "canvas");
+ if (!gl) {
+ return;
+ }
+
+ g.program = simpleSetup(
+ gl,
+ // The ids of the vertex and fragment shaders
+ "vshader", "fshader",
+ // The vertex attribute names used by the shaders.
+ // The order they appear here corresponds to their index
+ // used later.
+ [ "vNormal", "vColor", "vPosition"],
+ // The clear color and depth values
+ [ 0, 0, 0, 1 ], 10000);
+
+ // Set up a uniform variable for the shaders
+ gl.uniform3f(gl.getUniformLocation(g.program, "lightDir"), 0, 0, 1);
+
+ // Create a box. On return 'gl' contains a 'box' property with
+ // the BufferObjects containing the arrays for vertices,
+ // normals, texture coords, and indices.
+ g.box = makeBox(gl);
+
+ // Set up the array of colors for the cube's faces
+ var colors = new Uint8Array(
+ [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front
+ 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right
+ 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top
+ 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left
+ 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom
+ 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back
+ );
+
+ // Set up the vertex buffer for the colors
+ g.box.colorObject = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, g.box.colorObject);
+ gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+
+ // Create some matrices to use later and save their locations in the shaders
+ g.mvMatrix = new J3DIMatrix4();
+ g.u_normalMatrixLoc = gl.getUniformLocation(g.program, "u_normalMatrix");
+ g.normalMatrix = new J3DIMatrix4();
+ g.u_modelViewProjMatrixLoc =
+ gl.getUniformLocation(g.program, "u_modelViewProjMatrix");
+ g.mvpMatrix = new J3DIMatrix4();
+
+ // Enable all of the vertex attribute arrays.
+ gl.enableVertexAttribArray(0);
+ gl.enableVertexAttribArray(1);
+ gl.enableVertexAttribArray(2);
+
+ // Set up all the vertex attributes for vertices, normals and colors
+ gl.bindBuffer(gl.ARRAY_BUFFER, g.box.vertexObject);
+ gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, g.box.normalObject);
+ gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, g.box.colorObject);
+ gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);
+
+ // Bind the index array
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, g.box.indexObject);
+
+ return gl;
+}
+
+//width = -1;
+//height = -1;
+//var requestId;
+
+function reshape(gl) {
+ //var canvas = document.getElementById('example');
+ var canvas = document.getElementById('canvas');
+ //var windowWidth = window.innerWidth - 20;
+ //var windowHeight = window.innerHeight - 40;
+ //if (windowWidth == width && windowHeight == height)
+ // return;
+
+ //width = windowWidth;
+ //height = windowHeight;
+ //canvas.width = width;
+ //canvas.height = height;
+
+ // Set the viewport and projection matrix for the scene
+ //gl.viewport(0, 0, width, height);
+ gl.viewport(0, 0, canvas.width, canvas.height);
+ g.perspectiveMatrix = new J3DIMatrix4();
+ //g.perspectiveMatrix.perspective(30, width/height, 1, 10000);
+ g.perspectiveMatrix.perspective(30, canvas.width/canvas.height, 1, 10000);
+ //g.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0);
+ g.perspectiveMatrix.lookat(0, 0, viewDistance, 0, 0, 0, 0, 1, 0);
+}
+
+function drawPicture(gl) {
+ // Make sure the canvas is sized correctly.
+ reshape(gl);
+
+ gl.clearColor(1.0, 1.0, 1.0, 1.0);
+ // Clear the canvas
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ // Make a model/view matrix.
+ g.mvMatrix.makeIdentity();
+ g.mvMatrix.rotate(20, 1, 0, 0);
+ g.mvMatrix.rotate(currentAngle, 0, 1, 0);
+
+ // Construct the normal matrix from the model-view matrix and pass it in
+ g.normalMatrix.load(g.mvMatrix);
+ g.normalMatrix.invert();
+ g.normalMatrix.transpose();
+ g.normalMatrix.setUniform(gl, g.u_normalMatrixLoc, false);
+
+ // Construct the model-view * projection matrix and pass it in
+ g.mvpMatrix.load(g.perspectiveMatrix);
+ g.mvpMatrix.multiply(g.mvMatrix);
+ g.mvpMatrix.setUniform(gl, g.u_modelViewProjMatrixLoc, false);
+
+ // Draw the cube
+ gl.drawElements(gl.TRIANGLES, g.box.numIndices, gl.UNSIGNED_BYTE, 0);
+
+ currentAngle += incAngle;
+ if (currentAngle > 360)
+ currentAngle -= 360;
+}
-var g = {}; // globals
+/*
+Copyright (c) 2013 Intel Corporation.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of works must retain the original copyright notice, this list
+ of conditions and the following disclaimer.
+* Redistributions in binary form must reproduce the original copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+* Neither the name of Intel Corporation nor the names of its contributors
+ may be used to endorse or promote products derived from this work without
+ specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY INTEL CORPORATION "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL INTEL CORPORATION BE LIABLE FOR ANY DIRECT,
+INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+Authors:
+ Liu, Xin <xinx.liu@intel.com>
+
+*/
+
var ORIGIN_SPEED = 0.5;
var multiple = 5;
-var incAngle = 0;
-var currentAngle = 0;
-var bakAngle = 0;
-var viewDistance = 18;
-var requestId;
var isRunning = false;
-var canvas;
-
var isInit = true;
var testFlag = {
status: false,
size:false,
speed:false
};
-function init() {
- // Initialize
- var gl = initWebGL(
- // The id of the Canvas Element
- "canvas");
- if (!gl) {
- return;
- }
-
- g.program = simpleSetup(
- gl,
- // The ids of the vertex and fragment shaders
- "vshader", "fshader",
- // The vertex attribute names used by the shaders.
- // The order they appear here corresponds to their index
- // used later.
- [ "vNormal", "vColor", "vPosition"],
- // The clear color and depth values
- [ 0, 0, 0, 1 ], 10000);
-
- // Set up a uniform variable for the shaders
- gl.uniform3f(gl.getUniformLocation(g.program, "lightDir"), 0, 0, 1);
-
- // Create a box. On return 'gl' contains a 'box' property with
- // the BufferObjects containing the arrays for vertices,
- // normals, texture coords, and indices.
- g.box = makeBox(gl);
-
- // Set up the array of colors for the cube's faces
- var colors = new Uint8Array(
- [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front
- 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right
- 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top
- 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left
- 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom
- 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back
- );
-
- // Set up the vertex buffer for the colors
- g.box.colorObject = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, g.box.colorObject);
- gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
-
- // Create some matrices to use later and save their locations in the shaders
- g.mvMatrix = new J3DIMatrix4();
- g.u_normalMatrixLoc = gl.getUniformLocation(g.program, "u_normalMatrix");
- g.normalMatrix = new J3DIMatrix4();
- g.u_modelViewProjMatrixLoc =
- gl.getUniformLocation(g.program, "u_modelViewProjMatrix");
- g.mvpMatrix = new J3DIMatrix4();
-
- // Enable all of the vertex attribute arrays.
- gl.enableVertexAttribArray(0);
- gl.enableVertexAttribArray(1);
- gl.enableVertexAttribArray(2);
-
- // Set up all the vertex attributes for vertices, normals and colors
- gl.bindBuffer(gl.ARRAY_BUFFER, g.box.vertexObject);
- gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, g.box.normalObject);
- gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, g.box.colorObject);
- gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);
-
- // Bind the index array
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, g.box.indexObject);
-
- return gl;
-}
-
-function reshape(gl) {
- var canvas = document.getElementById('canvas');
- // Set the viewport and projection matrix for the scene
- gl.viewport(0, 0, canvas.width, canvas.height);
- g.perspectiveMatrix = new J3DIMatrix4();
- g.perspectiveMatrix.perspective(30, canvas.width/canvas.height, 1, 10000);
- g.perspectiveMatrix.lookat(0, 0, viewDistance, 0, 0, 0, 0, 1, 0);
-}
-
-function drawPicture(gl) {
- // Make sure the canvas is sized correctly.
- reshape(gl);
-
- gl.clearColor(1.0, 1.0, 1.0, 1.0);
- // Clear the canvas
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
- // Make a model/view matrix.
- g.mvMatrix.makeIdentity();
- g.mvMatrix.rotate(20, 1, 0, 0);
- g.mvMatrix.rotate(currentAngle, 0, 1, 0);
-
- // Construct the normal matrix from the model-view matrix and pass it in
- g.normalMatrix.load(g.mvMatrix);
- g.normalMatrix.invert();
- g.normalMatrix.transpose();
- g.normalMatrix.setUniform(gl, g.u_normalMatrixLoc, false);
-
- // Construct the model-view * projection matrix and pass it in
- g.mvpMatrix.load(g.perspectiveMatrix);
- g.mvpMatrix.multiply(g.mvMatrix);
- g.mvpMatrix.setUniform(gl, g.u_modelViewProjMatrixLoc, false);
-
- // Draw the cube
- gl.drawElements(gl.TRIANGLES, g.box.numIndices, gl.UNSIGNED_BYTE, 0);
-
- currentAngle += incAngle;
- if (currentAngle > 360)
- currentAngle -= 360;
-}
function start() {
var c = document.getElementById("canvas");
});
DisablePassButton();
});
-
-(function($, undefined) {
-$.widget( "mobile.slider", $.mobile.slider, {
- options: {
- popupEnabled: false,
- showValue: false
- },
- _create: function() {
- var o = this.options,
- popup = $("<div></div>", {
- class: "ui-slider-popup ui-shadow ui-corner-all ui-body-" + (o.theme ? o.theme : $.mobile.getInheritedTheme(this.element, "c"))
- });
- this._super();
- $.extend( this, {
- _currentValue: null,
- _popup: popup,
- _popupVisible: false,
- _handleText: this.handle.find(".ui-btn-text")
- });
- this.slider.before(popup);
- popup.hide();
- this._on(this.handle, {"vmousedown" : "_showPopup"});
- this._on(this.slider.add($.mobile.document), {"vmouseup" : "_hidePopup"});
- this._refresh();
- },
-
- // position the popup centered 5px above the handle
- _positionPopup: function() {
- var dstOffset = this.handle.offset();
- this._popup.offset({
- left: dstOffset.left + (this.handle.width() - this._popup.width()) / 2,
- top: dstOffset.top - this._popup.outerHeight() - 5
- });
- },
- _setOption: function(key, value) {
- this._super(key, value);
- if ( key === "showValue" ) {
- if ( value ) {
- this._handleText.html(this._value()).show();
- } else {
- this._handleText.hide();
- }
- }
- },
- // show value on the handle and in popup
- refresh: function() {
- this._super.apply(this, arguments);
- // necessary because slider's _create() calls refresh(), and that lands
- // here before our own _create() has even run
- if (!this._popup) {
- return;
- }
- this._refresh();
- },
- _refresh: function() {
- var o = this.options, newValue;
- if (o.popupEnabled) {
- // remove the title attribute from the handle (which is
- // responsible for the annoying tooltip); NB we have
- // to do it here as the jqm slider sets it every time
- // the slider's value changes :(
- this.handle.removeAttr('title');
- }
- newValue = this._value();
- if (newValue === this._currentValue) {
- return;
- }
- this._currentValue = newValue;
- var ID = this.element[0].id;
- if (ID == "slider-1") {
- var value = 7 + 23*(4 - (parseInt(newValue, 10) - 1))/5;
- setSize(value);
- if (parseInt(newValue, 10) != 3) {
- testFlag.size = true;
- checkEnable();
- }
- } else if (ID == "speed-1") {
- setSpeed(parseInt(newValue, 10));
- if (parseInt(newValue, 10) != 5) {
- testFlag.speed = true;
- checkEnable();
- }
- } else if (ID == "flip-1") {
- if (newValue == "0") {
- stop();
- $("input[type='radio']").checkboxradio('disable');
- $("#slider-1").slider('disable');
- $("#speed-1").slider('disable');
- testFlag.status = true;
- checkEnable();
- } else if (newValue == "1"){
- if (!isInit) {
- reStart();
- $("input[type='radio']").checkboxradio('enable');
- $("#slider-1").slider('enable');
- $("#speed-1").slider('enable');
- } else {
- isInit = false;
- }
- }
- }
-
- if (o.popupEnabled) {
- this._positionPopup();
- this._popup.html(Math.round(newValue));
- }
- if (o.showValue) {
- this._handleText.html(Math.round(newValue));
- }
- },
- _showPopup: function() {
- if ( this.options.popupEnabled && !this._popupVisible ) {
- this._handleText.hide();
- this._popup.show();
- this._positionPopup();
- this._popupVisible = true;
- }
- },
- _hidePopup: function() {
- if ( this.options.popupEnabled && this._popupVisible ) {
- this._handleText.show();
- this._popup.hide();
- this._popupVisible = false;
- }
- }
-});
-})( jQuery );
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Slider tooltip extension
+//>>label: Slidertooltip
+//>>group: Forms
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+//>>css.structure: ../css/structure/jquery.mobile.slider.tooltip.css
+
+//define( [ "jquery", "./slider" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.slider", $.mobile.slider, {
+ options: {
+ popupEnabled: false,
+ showValue: false
+ },
+
+ _create: function() {
+ var o = this.options,
+ popup = $( "<div></div>", {
+ class: "ui-slider-popup ui-shadow ui-corner-all ui-body-" + ( o.theme ? o.theme : $.mobile.getInheritedTheme( this.element, "c" ) )
+ });
+
+ this._super();
+
+ $.extend( this, {
+ _currentValue: null,
+ _popup: popup,
+ _popupVisible: false,
+ _handleText: this.handle.find( ".ui-btn-text" )
+ });
+
+ this.slider.before( popup );
+ popup.hide();
+
+ this._on( this.handle, { "vmousedown" : "_showPopup" } );
+ this._on( this.slider.add( $.mobile.document ), { "vmouseup" : "_hidePopup" } );
+ this._refresh();
+ },
+
+ // position the popup centered 5px above the handle
+ _positionPopup: function() {
+ var dstOffset = this.handle.offset();
+ this._popup.offset( {
+ left: dstOffset.left + ( this.handle.width() - this._popup.width() ) / 2,
+ top: dstOffset.top - this._popup.outerHeight() - 5
+ });
+ },
+
+ _setOption: function( key, value ) {
+ this._super( key, value );
+
+ if ( key === "showValue" ) {
+ if ( value ) {
+ this._handleText.html( this._value() ).show();
+ } else {
+ this._handleText.hide();
+ }
+ }
+ },
+
+ // show value on the handle and in popup
+ refresh: function() {
+ this._super.apply( this, arguments );
+
+ // necessary because slider's _create() calls refresh(), and that lands
+ // here before our own _create() has even run
+ if ( !this._popup ) {
+ return;
+ }
+
+ this._refresh();
+ },
+
+ _refresh: function() {
+ var o = this.options, newValue;
+
+ if ( o.popupEnabled ) {
+ // remove the title attribute from the handle (which is
+ // responsible for the annoying tooltip); NB we have
+ // to do it here as the jqm slider sets it every time
+ // the slider's value changes :(
+ this.handle.removeAttr( 'title' );
+ }
+
+ newValue = this._value();
+ if ( newValue === this._currentValue ) {
+ return;
+ }
+ this._currentValue = newValue;
+
+ var ID = this.element[0].id;
+ if (ID == "slider-1") {
+ var value = 7 + 23*(4 - (parseInt(newValue, 10) - 1))/5;
+ setSize(value);
+ if (parseInt(newValue, 10) != 3) {
+ testFlag.size = true;
+ checkEnable();
+ }
+ } else if (ID == "speed-1") {
+ setSpeed(parseInt(newValue, 10));
+ if (parseInt(newValue, 10) != 5) {
+ testFlag.speed = true;
+ checkEnable();
+ }
+ } else if (ID == "flip-1") {
+ if (newValue == "0") {
+ stop();
+ $("input[type='radio']").checkboxradio('disable');
+ $("#slider-1").slider('disable');
+ $("#speed-1").slider('disable');
+ testFlag.status = true;
+ checkEnable();
+ } else if (newValue == "1"){
+ if (!isInit) {
+ reStart();
+ $("input[type='radio']").checkboxradio('enable');
+ $("#slider-1").slider('enable');
+ $("#speed-1").slider('enable');
+ } else {
+ isInit = false;
+ }
+ }
+ }
+ if ( o.popupEnabled ) {
+ this._positionPopup();
+ //this._popup.html( newValue );
+ this._popup.html( Math.round(newValue) );
+ }
+
+ if ( o.showValue ) {
+ //this._handleText.html( newValue );
+ this._handleText.html( Math.round(newValue) );
+ }
+ },
+
+ _showPopup: function() {
+ if ( this.options.popupEnabled && !this._popupVisible ) {
+ this._handleText.hide();
+ this._popup.show();
+ this._positionPopup();
+ this._popupVisible = true;
+ }
+ },
+
+ _hidePopup: function() {
+ if ( this.options.popupEnabled && this._popupVisible ) {
+ this._handleText.show();
+ this._popup.hide();
+ this._popupVisible = false;
+ }
+ }
+});
+
+})( jQuery );
<script src="../../js/thirdparty/jquery.js"></script>
<script src="../../js/thirdparty/jquery.mobile.js"></script>
<script src="../../js/tests.js"></script>
- <script src="js/main.js"></script>
+ <script src="js/transition-test-helpers.js"></script>
<script type="text/javascript">
var test_box;
var box_txt = "1";
+++ /dev/null
-/* This is the helper function to run transition tests:
-
-Test page requirements:
-- The body must contain an empty div with id "result"
-- Call this function directly from the <script> inside the test page
-
-Function parameters:
- expected [required]: an array of arrays defining a set of CSS properties that must have given values at specific times (see below)
- callback [optional]: a function to be executed just before the test starts (none by default)
-
- Each sub-array must contain these items in this order:
- - the time in seconds at which to snapshot the CSS property
- - the id of the element on which to get the CSS property value
- - the name of the CSS property to get [1]
- - the expected value for the CSS property
- - the tolerance to use when comparing the effective CSS property value with its expected value
-
- [1] If the CSS property name is "-webkit-transform", expected value must be an array of 1 or more numbers corresponding to the matrix elements,
- or a string which will be compared directly (useful if the expected value is "none")
- If the CSS property name is "-webkit-transform.N", expected value must be a number corresponding to the Nth element of the matrix
-
-*/
-
-const usePauseAPI = true;
-const dontUsePauseAPI = false;
-
-const shouldBeTransitioning = true;
-const shouldNotBeTransitioning = false;
-
-function roundNumber(num, decimalPlaces)
-{
- return Math.round(num * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
-}
-
-function isCloseEnough(actual, desired, tolerance)
-{
- var diff = Math.abs(actual - desired);
- return diff <= tolerance;
-}
-
-function isShadow(property)
-{
- return (property == '-webkit-box-shadow' || property == 'text-shadow');
-}
-
-function getShadowXY(cssValue)
-{
- var text = cssValue.cssText;
- // Shadow cssText looks like "rgb(0, 0, 255) 0px -3px 10px 0px"
- var shadowPositionRegExp = /\)\s*(-?\d+)px\s*(-?\d+)px/;
- var result = shadowPositionRegExp.exec(text);
- return [parseInt(result[1]), parseInt(result[2])];
-}
-
-function compareRGB(rgb, expected, tolerance)
-{
- return (isCloseEnough(parseInt(rgb[0]), expected[0], tolerance) &&
- isCloseEnough(parseInt(rgb[1]), expected[1], tolerance) &&
- isCloseEnough(parseInt(rgb[2]), expected[2], tolerance));
-}
-
-function parseCrossFade(s)
-{
- var matches = s.match("-webkit-cross-fade\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
-
- if (!matches)
- return null;
-
- return {"from": matches[1], "to": matches[2], "percent": parseFloat(matches[3])}
-}
-
-function checkExpectedValue(expected, index)
-{
- var time = expected[index][0];
- var elementId = expected[index][1];
- var property = expected[index][2];
- var expectedValue = expected[index][3];
- var tolerance = expected[index][4];
- var postCompletionCallback = expected[index][5];
-
- var computedValue;
- var pass = false;
- var transformRegExp = /^-webkit-transform(\.\d+)?$/;
- if (transformRegExp.test(property)) {
- computedValue = window.getComputedStyle(document.getElementById(elementId)).webkitTransform;
- if (typeof expectedValue == "string")
- pass = (computedValue == expectedValue);
- else if (typeof expectedValue == "number") {
- var m = computedValue.split("(");
- var m = m[1].split(",");
- pass = isCloseEnough(parseFloat(m[parseInt(property.substring(18))]), expectedValue, tolerance);
- } else {
- var m = computedValue.split("(");
- var m = m[1].split(",");
- for (i = 0; i < expectedValue.length; ++i) {
- pass = isCloseEnough(parseFloat(m[i]), expectedValue[i], tolerance);
- if (!pass)
- break;
- }
- }
- } else if (property == "fill" || property == "stroke") {
- computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).rgbColor;
- if (compareRGB([computedValue.red.cssText, computedValue.green.cssText, computedValue.blue.cssText], expectedValue, tolerance))
- pass = true;
- else {
- // We failed. Make sure computed value is something we can read in the error message
- computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
- }
- } else if (property == "stop-color" || property == "flood-color" || property == "lighting-color") {
- computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
- // The computedValue cssText is rgb(num, num, num)
- var components = computedValue.cssText.split("(")[1].split(")")[0].split(",");
- if (compareRGB(components, expectedValue, tolerance))
- pass = true;
- else {
- // We failed. Make sure computed value is something we can read in the error message
- computedValue = computedValue.cssText;
- }
- } else if (property == "lineHeight") {
- computedValue = parseInt(window.getComputedStyle(document.getElementById(elementId)).lineHeight);
- pass = isCloseEnough(computedValue, expectedValue, tolerance);
- } else if (property == "background-image"
- || property == "border-image-source"
- || property == "border-image"
- || property == "list-style-image"
- || property == "-webkit-mask-image"
- || property == "-webkit-mask-box-image") {
- if (property == "border-image" || property == "-webkit-mask-image" || property == "-webkit-mask-box-image")
- property += "-source";
-
- computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
- computedCrossFade = parseCrossFade(computedValue);
-
- if (!computedCrossFade) {
- pass = false;
- } else {
- pass = isCloseEnough(computedCrossFade.percent, expectedValue, tolerance);
- }
- } else {
- var computedStyle = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
- if (computedStyle.cssValueType == CSSValue.CSS_VALUE_LIST) {
- var values = [];
- for (var i = 0; i < computedStyle.length; ++i) {
- switch (computedStyle[i].cssValueType) {
- case CSSValue.CSS_PRIMITIVE_VALUE:
- values.push(computedStyle[i].getFloatValue(CSSPrimitiveValue.CSS_NUMBER));
- break;
- case CSSValue.CSS_CUSTOM:
- // arbitrarily pick shadow-x and shadow-y
- if (isShadow) {
- var shadowXY = getShadowXY(computedStyle[i]);
- values.push(shadowXY[0]);
- values.push(shadowXY[1]);
- } else
- values.push(computedStyle[i].cssText);
- break;
- }
- }
- computedValue = values.join(',');
- pass = true;
- for (var i = 0; i < values.length; ++i)
- pass &= isCloseEnough(values[i], expectedValue[i], tolerance);
- } else if (computedStyle.cssValueType == CSSValue.CSS_PRIMITIVE_VALUE) {
- switch (computedStyle.primitiveType) {
- case CSSPrimitiveValue.CSS_STRING:
- case CSSPrimitiveValue.CSS_IDENT:
- computedValue = computedStyle.getStringValue();
- pass = computedValue == expectedValue;
- break;
- case CSSPrimitiveValue.CSS_RGBCOLOR:
- var rgbColor = computedStyle.getRGBColorValue();
- computedValue = [rgbColor.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
- rgbColor.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
- rgbColor.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)]; // alpha is not exposed to JS
- pass = true;
- for (var i = 0; i < 3; ++i)
- pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
- break;
- case CSSPrimitiveValue.CSS_RECT:
- computedValue = computedStyle.getRectValue();
- computedValue = [computedValue.top.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
- computedValue.right.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
- computedValue.bottom.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
- computedValue.left.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)];
- pass = true;
- for (var i = 0; i < 4; ++i)
- pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
- break;
- case CSSPrimitiveValue.CSS_PERCENTAGE:
- computedValue = parseFloat(computedStyle.cssText);
- pass = isCloseEnough(computedValue, expectedValue, tolerance);
- break;
- default:
- computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
- pass = isCloseEnough(computedValue, expectedValue, tolerance);
- }
- }
- }
-
- if (pass)
- result += "PASS - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s saw something close to: " + expectedValue + "<br>";
- else
- result += "FAIL - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s expected: " + expectedValue + " but saw: " + computedValue + "<br>";
-
- if (postCompletionCallback)
- result += postCompletionCallback();
-}
-
-function endTest()
-{
- document.getElementById('result').innerHTML = result;
-
- if (window.testRunner)
- testRunner.notifyDone();
-}
-
-function checkExpectedValueCallback(expected, index)
-{
- return function() { checkExpectedValue(expected, index); };
-}
-
-function runTest(expected, usePauseAPI)
-{
- var maxTime = 0;
- for (var i = 0; i < expected.length; ++i) {
- var time = expected[i][0];
- var elementId = expected[i][1];
- var property = expected[i][2];
- if (!property.indexOf("-webkit-transform."))
- property = "-webkit-transform";
-
- var tryToPauseTransition = expected[i][6];
- if (tryToPauseTransition === undefined)
- tryToPauseTransition = shouldBeTransitioning;
-
- if (hasPauseTransitionAPI && usePauseAPI) {
- if (tryToPauseTransition) {
- var element = document.getElementById(elementId);
- if (!internals.pauseTransitionAtTimeOnElement(property, time, element))
- window.console.log("Failed to pause '" + property + "' transition on element '" + elementId + "'");
- }
- checkExpectedValue(expected, i);
- } else {
- if (time > maxTime)
- maxTime = time;
-
- window.setTimeout(checkExpectedValueCallback(expected, i), time * 1000);
- }
- }
-
- if (maxTime > 0)
- window.setTimeout(endTest, maxTime * 1000 + 50);
- else
- endTest();
-}
-
-function waitForAnimationStart(callback, delay)
-{
- var delayTimeout = delay ? 1000 * delay + 10 : 0;
- // Why the two setTimeouts? Well, for hardware animations we need to ensure that the hardware animation
- // has started before we try to pause it, and timers fire before animations get committed in the runloop.
- window.setTimeout(function() {
- window.setTimeout(function() {
- callback();
- }, 0);
- }, delayTimeout);
-}
-
-function startTest(expected, usePauseAPI, callback)
-{
- if (callback)
- callback();
-
- waitForAnimationStart(function() {
- runTest(expected, usePauseAPI);
- });
-}
-
-var result = "";
-var hasPauseTransitionAPI;
-
-function runTransitionTest(expected, callback, usePauseAPI, doPixelTest)
-{
- hasPauseTransitionAPI = 'internals' in window;
-
- if (window.testRunner) {
- if (!doPixelTest)
- testRunner.dumpAsText();
- testRunner.waitUntilDone();
- }
-
- if (!expected)
- throw("Expected results are missing!");
-
- window.addEventListener("load", function() { startTest(expected, usePauseAPI, callback); }, false);
-}
--- /dev/null
+/* This is the helper function to run transition tests:
+
+Test page requirements:
+- The body must contain an empty div with id "result"
+- Call this function directly from the <script> inside the test page
+
+Function parameters:
+ expected [required]: an array of arrays defining a set of CSS properties that must have given values at specific times (see below)
+ callback [optional]: a function to be executed just before the test starts (none by default)
+
+ Each sub-array must contain these items in this order:
+ - the time in seconds at which to snapshot the CSS property
+ - the id of the element on which to get the CSS property value
+ - the name of the CSS property to get [1]
+ - the expected value for the CSS property
+ - the tolerance to use when comparing the effective CSS property value with its expected value
+
+ [1] If the CSS property name is "-webkit-transform", expected value must be an array of 1 or more numbers corresponding to the matrix elements,
+ or a string which will be compared directly (useful if the expected value is "none")
+ If the CSS property name is "-webkit-transform.N", expected value must be a number corresponding to the Nth element of the matrix
+
+*/
+
+const usePauseAPI = true;
+const dontUsePauseAPI = false;
+
+const shouldBeTransitioning = true;
+const shouldNotBeTransitioning = false;
+
+function roundNumber(num, decimalPlaces)
+{
+ return Math.round(num * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
+}
+
+function isCloseEnough(actual, desired, tolerance)
+{
+ var diff = Math.abs(actual - desired);
+ return diff <= tolerance;
+}
+
+function isShadow(property)
+{
+ return (property == '-webkit-box-shadow' || property == 'text-shadow');
+}
+
+function getShadowXY(cssValue)
+{
+ var text = cssValue.cssText;
+ // Shadow cssText looks like "rgb(0, 0, 255) 0px -3px 10px 0px"
+ var shadowPositionRegExp = /\)\s*(-?\d+)px\s*(-?\d+)px/;
+ var result = shadowPositionRegExp.exec(text);
+ return [parseInt(result[1]), parseInt(result[2])];
+}
+
+function compareRGB(rgb, expected, tolerance)
+{
+ return (isCloseEnough(parseInt(rgb[0]), expected[0], tolerance) &&
+ isCloseEnough(parseInt(rgb[1]), expected[1], tolerance) &&
+ isCloseEnough(parseInt(rgb[2]), expected[2], tolerance));
+}
+
+function parseCrossFade(s)
+{
+ var matches = s.match("-webkit-cross-fade\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
+
+ if (!matches)
+ return null;
+
+ return {"from": matches[1], "to": matches[2], "percent": parseFloat(matches[3])}
+}
+
+function checkExpectedValue(expected, index)
+{
+ var time = expected[index][0];
+ var elementId = expected[index][1];
+ var property = expected[index][2];
+ var expectedValue = expected[index][3];
+ var tolerance = expected[index][4];
+ var postCompletionCallback = expected[index][5];
+
+ var computedValue;
+ var pass = false;
+ var transformRegExp = /^-webkit-transform(\.\d+)?$/;
+ if (transformRegExp.test(property)) {
+ computedValue = window.getComputedStyle(document.getElementById(elementId)).webkitTransform;
+ if (typeof expectedValue == "string")
+ pass = (computedValue == expectedValue);
+ else if (typeof expectedValue == "number") {
+ var m = computedValue.split("(");
+ var m = m[1].split(",");
+ pass = isCloseEnough(parseFloat(m[parseInt(property.substring(18))]), expectedValue, tolerance);
+ } else {
+ var m = computedValue.split("(");
+ var m = m[1].split(",");
+ for (i = 0; i < expectedValue.length; ++i) {
+ pass = isCloseEnough(parseFloat(m[i]), expectedValue[i], tolerance);
+ if (!pass)
+ break;
+ }
+ }
+ } else if (property == "fill" || property == "stroke") {
+ computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).rgbColor;
+ if (compareRGB([computedValue.red.cssText, computedValue.green.cssText, computedValue.blue.cssText], expectedValue, tolerance))
+ pass = true;
+ else {
+ // We failed. Make sure computed value is something we can read in the error message
+ computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
+ }
+ } else if (property == "stop-color" || property == "flood-color" || property == "lighting-color") {
+ computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
+ // The computedValue cssText is rgb(num, num, num)
+ var components = computedValue.cssText.split("(")[1].split(")")[0].split(",");
+ if (compareRGB(components, expectedValue, tolerance))
+ pass = true;
+ else {
+ // We failed. Make sure computed value is something we can read in the error message
+ computedValue = computedValue.cssText;
+ }
+ } else if (property == "lineHeight") {
+ computedValue = parseInt(window.getComputedStyle(document.getElementById(elementId)).lineHeight);
+ pass = isCloseEnough(computedValue, expectedValue, tolerance);
+ } else if (property == "background-image"
+ || property == "border-image-source"
+ || property == "border-image"
+ || property == "list-style-image"
+ || property == "-webkit-mask-image"
+ || property == "-webkit-mask-box-image") {
+ if (property == "border-image" || property == "-webkit-mask-image" || property == "-webkit-mask-box-image")
+ property += "-source";
+
+ computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
+ computedCrossFade = parseCrossFade(computedValue);
+
+ if (!computedCrossFade) {
+ pass = false;
+ } else {
+ pass = isCloseEnough(computedCrossFade.percent, expectedValue, tolerance);
+ }
+ } else {
+ var computedStyle = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
+ if (computedStyle.cssValueType == CSSValue.CSS_VALUE_LIST) {
+ var values = [];
+ for (var i = 0; i < computedStyle.length; ++i) {
+ switch (computedStyle[i].cssValueType) {
+ case CSSValue.CSS_PRIMITIVE_VALUE:
+ values.push(computedStyle[i].getFloatValue(CSSPrimitiveValue.CSS_NUMBER));
+ break;
+ case CSSValue.CSS_CUSTOM:
+ // arbitrarily pick shadow-x and shadow-y
+ if (isShadow) {
+ var shadowXY = getShadowXY(computedStyle[i]);
+ values.push(shadowXY[0]);
+ values.push(shadowXY[1]);
+ } else
+ values.push(computedStyle[i].cssText);
+ break;
+ }
+ }
+ computedValue = values.join(',');
+ pass = true;
+ for (var i = 0; i < values.length; ++i)
+ pass &= isCloseEnough(values[i], expectedValue[i], tolerance);
+ } else if (computedStyle.cssValueType == CSSValue.CSS_PRIMITIVE_VALUE) {
+ switch (computedStyle.primitiveType) {
+ case CSSPrimitiveValue.CSS_STRING:
+ case CSSPrimitiveValue.CSS_IDENT:
+ computedValue = computedStyle.getStringValue();
+ pass = computedValue == expectedValue;
+ break;
+ case CSSPrimitiveValue.CSS_RGBCOLOR:
+ var rgbColor = computedStyle.getRGBColorValue();
+ computedValue = [rgbColor.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
+ rgbColor.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
+ rgbColor.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)]; // alpha is not exposed to JS
+ pass = true;
+ for (var i = 0; i < 3; ++i)
+ pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
+ break;
+ case CSSPrimitiveValue.CSS_RECT:
+ computedValue = computedStyle.getRectValue();
+ computedValue = [computedValue.top.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
+ computedValue.right.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
+ computedValue.bottom.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
+ computedValue.left.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)];
+ pass = true;
+ for (var i = 0; i < 4; ++i)
+ pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
+ break;
+ case CSSPrimitiveValue.CSS_PERCENTAGE:
+ computedValue = parseFloat(computedStyle.cssText);
+ pass = isCloseEnough(computedValue, expectedValue, tolerance);
+ break;
+ default:
+ computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
+ pass = isCloseEnough(computedValue, expectedValue, tolerance);
+ }
+ }
+ }
+
+ if (pass)
+ result += "PASS - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s saw something close to: " + expectedValue + "<br>";
+ else
+ result += "FAIL - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s expected: " + expectedValue + " but saw: " + computedValue + "<br>";
+
+ if (postCompletionCallback)
+ result += postCompletionCallback();
+}
+
+function endTest()
+{
+ document.getElementById('result').innerHTML = result;
+
+ if (window.testRunner)
+ testRunner.notifyDone();
+}
+
+function checkExpectedValueCallback(expected, index)
+{
+ return function() { checkExpectedValue(expected, index); };
+}
+
+function runTest(expected, usePauseAPI)
+{
+ var maxTime = 0;
+ for (var i = 0; i < expected.length; ++i) {
+ var time = expected[i][0];
+ var elementId = expected[i][1];
+ var property = expected[i][2];
+ if (!property.indexOf("-webkit-transform."))
+ property = "-webkit-transform";
+
+ var tryToPauseTransition = expected[i][6];
+ if (tryToPauseTransition === undefined)
+ tryToPauseTransition = shouldBeTransitioning;
+
+ if (hasPauseTransitionAPI && usePauseAPI) {
+ if (tryToPauseTransition) {
+ var element = document.getElementById(elementId);
+ if (!internals.pauseTransitionAtTimeOnElement(property, time, element))
+ window.console.log("Failed to pause '" + property + "' transition on element '" + elementId + "'");
+ }
+ checkExpectedValue(expected, i);
+ } else {
+ if (time > maxTime)
+ maxTime = time;
+
+ window.setTimeout(checkExpectedValueCallback(expected, i), time * 1000);
+ }
+ }
+
+ if (maxTime > 0)
+ window.setTimeout(endTest, maxTime * 1000 + 50);
+ else
+ endTest();
+}
+
+function waitForAnimationStart(callback, delay)
+{
+ var delayTimeout = delay ? 1000 * delay + 10 : 0;
+ // Why the two setTimeouts? Well, for hardware animations we need to ensure that the hardware animation
+ // has started before we try to pause it, and timers fire before animations get committed in the runloop.
+ window.setTimeout(function() {
+ window.setTimeout(function() {
+ callback();
+ }, 0);
+ }, delayTimeout);
+}
+
+function startTest(expected, usePauseAPI, callback)
+{
+ if (callback)
+ callback();
+
+ waitForAnimationStart(function() {
+ runTest(expected, usePauseAPI);
+ });
+}
+
+var result = "";
+var hasPauseTransitionAPI;
+
+function runTransitionTest(expected, callback, usePauseAPI, doPixelTest)
+{
+ hasPauseTransitionAPI = 'internals' in window;
+
+ if (window.testRunner) {
+ if (!doPixelTest)
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ }
+
+ if (!expected)
+ throw("Expected results are missing!");
+
+ window.addEventListener("load", function() { startTest(expected, usePauseAPI, callback); }, false);
+}
<script src="../../js/thirdparty/jquery.mobile.js"></script>
<script src="../../js/tests.js"></script>
<script src="js/main.js"></script>
+ <script src="js/slider.tooltip.js"></script>
</head>
<body>
<div data-role="header">
-The jquery extension code of main.js(line 236~339) comes from
-http://jquerymobile.com/demos/1.3.0/docs/examples/slider/tooltip.html
+The slider.tooltip.js comes from
+https://github.com/jquery/jquery-mobile/tree/1.3-stable
with some modifications.
+- define( [ "jquery", "./slider" ], function( $ ) {
++ //define( [ "jquery", "./slider" ], function( $ ) {
+
this._currentValue = newValue;
+ var ID = this.element[0].id;
+ if (ID == "slider-1") {
+ }
+ }
+ }
-- //setSpeed(parseInt(newValue, 10));
- if (o.popupEnabled) {
- this._positionPopup();
- this._popup.html(Math.round(newValue));
- this._handleText.html(Math.round(newValue));
- }
-You may use any jQuery project under the terms of the MIT License:
+jQuery Mobile v@VERSION
+http://jquerymobile.com
+
+Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
+Released under the MIT license.
http://jquery.org/license
+/*
+Copyright (c) 2013 Intel Corporation.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of works must retain the original copyright notice, this list
+ of conditions and the following disclaimer.
+* Redistributions in binary form must reproduce the original copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+* Neither the name of Intel Corporation nor the names of its contributors
+ may be used to endorse or promote products derived from this work without
+ specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY INTEL CORPORATION "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL INTEL CORPORATION BE LIABLE FOR ANY DIRECT,
+INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+Authors:
+ Cui,Jieqiong <jieqiongx.cui@intel.com>
+
+*/
+
var testFlag={
Mulcolumn: false,
Transparency: false,
$("#slider-1").hide();
$("#slider-2").hide();
});
-
-/** CSS Opacity */
-(function( $, undefined ) {
-$.widget( "mobile.slider", $.mobile.slider, {
- options: {
- popupEnabled: false,
- showValue: false
- },
- _create: function() {
- var o = this.options,
- popup = $( "<div></div>", {
- class: "ui-slider-popup ui-shadow ui-corner-all ui-body-" + ( o.theme ? o.theme : $.mobile.getInheritedTheme( this.element, "c" ) )
- });
- this._super();
- $.extend( this, {
- _currentValue: null,
- _popup: popup,
- _popupVisible: false,
- _handleText: this.handle.find( ".ui-btn-text" )
- });
- this.slider.before( popup );
- popup.hide();
- this._on( this.handle, { "vmousedown" : "_showPopup" } );
- this._on( this.slider.add( $.mobile.document ), { "vmouseup" : "_hidePopup" } );
- this._refresh();
- },
- // position the popup centered 5px above the handle
- _positionPopup: function() {
- var dstOffset = this.handle.offset();
- this._popup.offset( {
- left: dstOffset.left + ( this.handle.width() - this._popup.width() ) / 2,
- top: dstOffset.top - this._popup.outerHeight() - 5
- });
- },
- _setOption: function( key, value ) {
- this._super( key, value );
- if ( key === "showValue" ) {
- if ( value ) {
- this._handleText.html( this._value() ).show();
- } else {
- this._handleText.hide();
- }
- }
- },
- // show value on the handle and in popup
- refresh: function() {
- this._super.apply( this, arguments );
- // necessary because slider's _create() calls refresh(), and that lands
- // here before our own _create() has even run
- if ( !this._popup ) {
- return;
- }
- this._refresh();
- },
- _refresh: function() {
- var o = this.options, newValue;
- if ( o.popupEnabled ) {
- // remove the title attribute from the handle (which is
- // responsible for the annoying tooltip); NB we have
- // to do it here as the jqm slider sets it every time
- // the slider's value changes :(
- this.handle.removeAttr( 'title' );
- }
- newValue = this._value();
- if ( newValue === this._currentValue ) {
- return;
- }
- this._currentValue = newValue;
- var ID = this.element[0].id;
- if (ID == "slider-1") {
- if ( o.showValue ) {
- this._handleText.html(Math.round(newValue*100)+"%");
- $("#p").css("opacity", newValue);
- if(newValue != 1){
- testFlag.Transparency = true;
- status();
- }
- }
- }else if(ID == "slider-2"){
- if ( o.showValue ) {
- this._handleText.html(Math.round(newValue));
- $("#text-div").css("outline-offset", newValue);
- if(newValue != 5){
- testFlag.Outline = true;
- status();
- }
- }
- }
- },
- _showPopup: function() {
- if ( this.options.popupEnabled && !this._popupVisible ) {
- this._handleText.hide();
- this._popup.show();
- this._positionPopup();
- this._popupVisible = true;
- }
- },
- _hidePopup: function() {
- if ( this.options.popupEnabled && this._popupVisible ) {
- this._handleText.show();
- this._popup.hide();
- this._popupVisible = false;
- }
- }
-});
-})( jQuery );
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Slider tooltip extension
+//>>label: Slidertooltip
+//>>group: Forms
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+//>>css.structure: ../css/structure/jquery.mobile.slider.tooltip.css
+
+//define( [ "jquery", "./slider" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.slider", $.mobile.slider, {
+ options: {
+ popupEnabled: false,
+ showValue: false
+ },
+
+ _create: function() {
+ var o = this.options,
+ popup = $( "<div></div>", {
+ class: "ui-slider-popup ui-shadow ui-corner-all ui-body-" + ( o.theme ? o.theme : $.mobile.getInheritedTheme( this.element, "c" ) )
+ });
+
+ this._super();
+
+ $.extend( this, {
+ _currentValue: null,
+ _popup: popup,
+ _popupVisible: false,
+ _handleText: this.handle.find( ".ui-btn-text" )
+ });
+
+ this.slider.before( popup );
+ popup.hide();
+
+ this._on( this.handle, { "vmousedown" : "_showPopup" } );
+ this._on( this.slider.add( $.mobile.document ), { "vmouseup" : "_hidePopup" } );
+ this._refresh();
+ },
+
+ // position the popup centered 5px above the handle
+ _positionPopup: function() {
+ var dstOffset = this.handle.offset();
+ this._popup.offset( {
+ left: dstOffset.left + ( this.handle.width() - this._popup.width() ) / 2,
+ top: dstOffset.top - this._popup.outerHeight() - 5
+ });
+ },
+
+ _setOption: function( key, value ) {
+ this._super( key, value );
+
+ if ( key === "showValue" ) {
+ if ( value ) {
+ this._handleText.html( this._value() ).show();
+ } else {
+ this._handleText.hide();
+ }
+ }
+ },
+
+ // show value on the handle and in popup
+ refresh: function() {
+ this._super.apply( this, arguments );
+
+ // necessary because slider's _create() calls refresh(), and that lands
+ // here before our own _create() has even run
+ if ( !this._popup ) {
+ return;
+ }
+
+ this._refresh();
+ },
+
+ _refresh: function() {
+ var o = this.options, newValue;
+
+ if ( o.popupEnabled ) {
+ // remove the title attribute from the handle (which is
+ // responsible for the annoying tooltip); NB we have
+ // to do it here as the jqm slider sets it every time
+ // the slider's value changes :(
+ this.handle.removeAttr( 'title' );
+ }
+
+ newValue = this._value();
+ if ( newValue === this._currentValue ) {
+ return;
+ }
+ this._currentValue = newValue;
+
+ var ID = this.element[0].id;
+ if (ID == "slider-1") {
+ if ( o.showValue ) {
+ this._handleText.html(Math.round(newValue*100)+"%");
+ $("#p").css("opacity", newValue);
+ if(newValue != 1){
+ testFlag.Transparency = true;
+ status();
+ }
+ }
+ }else if(ID == "slider-2"){
+ if ( o.showValue ) {
+ this._handleText.html(Math.round(newValue));
+ $("#text-div").css("outline-offset", newValue);
+ if(newValue != 5){
+ testFlag.Outline = true;
+ status();
+ }
+ }
+ }
+
+ //if ( o.popupEnabled ) {
+ // this._positionPopup();
+ // this._popup.html( newValue );
+ //}
+
+ //if ( o.showValue ) {
+ // this._handleText.html( newValue );
+ //}
+ },
+
+ _showPopup: function() {
+ if ( this.options.popupEnabled && !this._popupVisible ) {
+ this._handleText.hide();
+ this._popup.show();
+ this._positionPopup();
+ this._popupVisible = true;
+ }
+ },
+
+ _hidePopup: function() {
+ if ( this.options.popupEnabled && this._popupVisible ) {
+ this._handleText.show();
+ this._popup.hide();
+ this._popupVisible = false;
+ }
+ }
+});
+
+})( jQuery );
+++ /dev/null
-The code of determine user's location in main.js(line 44~86)
-reference a sample of google maps:
-https://developers.google.com/maps/articles/geolocation?hl=zh-CN
-
-The code samples are licensed under the Apache 2.0 License:
-http://www.apache.org/licenses/LICENSE-2.0
+/*
+Copyright (c) 2013 Intel Corporation.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of works must retain the original copyright notice, this list
+ of conditions and the following disclaimer.
+* Redistributions in binary form must reproduce the original copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+* Neither the name of Intel Corporation nor the names of its contributors
+ may be used to endorse or promote products derived from this work without
+ specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY INTEL CORPORATION "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL INTEL CORPORATION BE LIABLE FOR ANY DIRECT,
+INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+Authors:
+ Liu, Xin <xinx.liu@intel.com>
+
+*/
+
function initialize() {
$.mobile.loading('show', {
text: 'loading...',
};
var location;
- var browserSupportFlag = new Boolean();
+ var geoSupportFlag = new Boolean();
//defalut location
var nanjing = new google.maps.LatLng(32.060255,118.796877);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
mapTypeId: google.maps.MapTypeId.ROADMAP
};
- // Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
- browserSupportFlag = true;
+ geoSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
$.mobile.loading('hide');
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setCenter(location);
printPosition(position.coords.latitude, position.coords.longitude);
}, function() {
- handleNoGeolocation(browserSupportFlag);
- });
- // Try Google Gears Geolocation
- } else if (google.gears) {
- browserSupportFlag = true;
- var geo = google.gears.factory.create('beta.geolocation');
- geo.getCurrentPosition(function(position) {
- $.mobile.loading('hide');
- var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
- location = new google.maps.LatLng(position.latitude,position.longitude);
- map.setCenter(location);
- printPosition(position.coords.latitude, position.coords.longitude);
- }, function() {
- handleNoGeoLocation(browserSupportFlag);
+ handleNoGeolocation(geoSupportFlag);
});
- // Browser doesn't support Geolocation
} else {
$.mobile.loading('hide');
- browserSupportFlag = false;
- handleNoGeolocation(browserSupportFlag);
+ geoSupportFlag = false;
+ handleNoGeolocation(geoSupportFlag);
}
function handleNoGeolocation(errorFlag) {
<script src="../../js/thirdparty/jquery.mobile.js"></script>
<script src="../../js/tests.js"></script>
<script src="js/main.js"></script>
+ <script src="js/slider.tooltip.js"></script>
</head>
<body>
<div data-role="header">
-The jquery extension code of main.js(line 67~159) comes from
-http://jquerymobile.com/demos/1.3.0/docs/examples/slider/tooltip.html
+The slider.tooltip.js comes from
+https://github.com/jquery/jquery-mobile/tree/1.3-stable
with some modifications.
+- define( [ "jquery", "./slider" ], function( $ ) {
++ //define( [ "jquery", "./slider" ], function( $ ) {
+
if (o.popupEnabled) {
this._positionPopup();
- this._popup.html(Math.round(newValue));
+ document.getElementById("MediaPlayback").volume = newValue;
}
-You may use any jQuery project under the terms of the MIT License:
+jQuery Mobile v@VERSION
+http://jquerymobile.com
+
+Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
+Released under the MIT license.
http://jquery.org/license
+/*
+Copyright (c) 2013 Intel Corporation.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of works must retain the original copyright notice, this list
+ of conditions and the following disclaimer.
+* Redistributions in binary form must reproduce the original copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+* Neither the name of Intel Corporation nor the names of its contributors
+ may be used to endorse or promote products derived from this work without
+ specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY INTEL CORPORATION "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL INTEL CORPORATION BE LIABLE FOR ANY DIRECT,
+INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+Authors:
+ Cui,Jieqiong <jieqiongx.cui@intel.com>
+
+*/
+
var videoFileList = new Array("3GP_h263_CIF_30FPS_507Kbps_eAAC+_Stereo_64Kbps_60sec(4.1Mb)_BBB.3gp", "MP4_h264_CIF_15FPS_387Kbps_MP3_44.1KHz_64Kbps_60sec(3.4Mb)_BBB(hinted).mp4", "MP4_MPEG4_CIF_15FPS_387Kbps_MP3_44.1KHz_64Kbps_60sec(3Mb)_BBB(hinted).mp4");
var testTarget='';
var pos=o.lastIndexOf("/");
return o.substring(pos+1);
}
-
-
-(function( $, undefined ) {
-$.widget( "mobile.slider", $.mobile.slider, {
- options: {
- popupEnabled: false,
- showValue: false
- },
- _create: function() {
- var o = this.options,
- popup = $( "<div></div>", {
- class: "ui-slider-popup ui-shadow ui-corner-all ui-body-" + ( o.theme ? o.theme : $.mobile.getInheritedTheme( this.element, "c" ) )
- });
- this._super();
- $.extend( this, {
- _currentValue: null,
- _popup: popup,
- _popupVisible: false,
- _handleText: this.handle.find( ".ui-btn-text" )
- });
- this.slider.before( popup );
- popup.hide();
- this._on( this.handle, { "vmousedown" : "_showPopup" } );
- this._on( this.slider.add( $.mobile.document ), { "vmouseup" : "_hidePopup" } );
- this._refresh();
- },
- // position the popup centered 5px above the handle
- _positionPopup: function() {
- var dstOffset = this.handle.offset();
- this._popup.offset( {
- left: dstOffset.left + ( this.handle.width() - this._popup.width() ) / 2,
- top: dstOffset.top - this._popup.outerHeight() - 5
- });
- },
- _setOption: function( key, value ) {
- this._super( key, value );
- if ( key === "showValue" ) {
- if ( value ) {
- this._handleText.html( this._value() ).show();
- } else {
- this._handleText.hide();
- }
- }
- },
- // show value on the handle and in popup
- refresh: function() {
- this._super.apply( this, arguments );
- // necessary because slider's _create() calls refresh(), and that lands
- // here before our own _create() has even run
- if ( !this._popup ) {
- return;
- }
- this._refresh();
- },
- _refresh: function() {
- var o = this.options, newValue;
- if ( o.popupEnabled ) {
- // remove the title attribute from the handle (which is
- // responsible for the annoying tooltip); NB we have
- // to do it here as the jqm slider sets it every time
- // the slider's value changes :(
- this.handle.removeAttr( 'title' );
- }
- newValue = this._value();
- if ( newValue === this._currentValue ) {
- return;
- }
- this._currentValue = newValue;
- if ( o.popupEnabled ) {
- this._positionPopup();
- this._popup.html(Math.round(newValue*100)+"%" );
- document.getElementById("MediaPlayback").volume = newValue;
- }
- if ( o.showValue ) {
- this._handleText.html(Math.round(newValue*100)+"%");
- document.getElementById("MediaPlayback").volume = newValue;
- }
- },
- _showPopup: function() {
- if ( this.options.popupEnabled && !this._popupVisible ) {
- this._handleText.hide();
- this._popup.show();
- this._positionPopup();
- this._popupVisible = true;
- }
- },
- _hidePopup: function() {
- if ( this.options.popupEnabled && this._popupVisible ) {
- this._handleText.show();
- this._popup.hide();
- this._popupVisible = false;
- }
- }
-});
-})( jQuery );
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Slider tooltip extension
+//>>label: Slidertooltip
+//>>group: Forms
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+//>>css.structure: ../css/structure/jquery.mobile.slider.tooltip.css
+
+//define( [ "jquery", "./slider" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.slider", $.mobile.slider, {
+ options: {
+ popupEnabled: false,
+ showValue: false
+ },
+
+ _create: function() {
+ var o = this.options,
+ popup = $( "<div></div>", {
+ class: "ui-slider-popup ui-shadow ui-corner-all ui-body-" + ( o.theme ? o.theme : $.mobile.getInheritedTheme( this.element, "c" ) )
+ });
+
+ this._super();
+
+ $.extend( this, {
+ _currentValue: null,
+ _popup: popup,
+ _popupVisible: false,
+ _handleText: this.handle.find( ".ui-btn-text" )
+ });
+
+ this.slider.before( popup );
+ popup.hide();
+
+ this._on( this.handle, { "vmousedown" : "_showPopup" } );
+ this._on( this.slider.add( $.mobile.document ), { "vmouseup" : "_hidePopup" } );
+ this._refresh();
+ },
+
+ // position the popup centered 5px above the handle
+ _positionPopup: function() {
+ var dstOffset = this.handle.offset();
+ this._popup.offset( {
+ left: dstOffset.left + ( this.handle.width() - this._popup.width() ) / 2,
+ top: dstOffset.top - this._popup.outerHeight() - 5
+ });
+ },
+
+ _setOption: function( key, value ) {
+ this._super( key, value );
+
+ if ( key === "showValue" ) {
+ if ( value ) {
+ this._handleText.html( this._value() ).show();
+ } else {
+ this._handleText.hide();
+ }
+ }
+ },
+
+ // show value on the handle and in popup
+ refresh: function() {
+ this._super.apply( this, arguments );
+
+ // necessary because slider's _create() calls refresh(), and that lands
+ // here before our own _create() has even run
+ if ( !this._popup ) {
+ return;
+ }
+
+ this._refresh();
+ },
+
+ _refresh: function() {
+ var o = this.options, newValue;
+
+ if ( o.popupEnabled ) {
+ // remove the title attribute from the handle (which is
+ // responsible for the annoying tooltip); NB we have
+ // to do it here as the jqm slider sets it every time
+ // the slider's value changes :(
+ this.handle.removeAttr( 'title' );
+ }
+
+ newValue = this._value();
+ if ( newValue === this._currentValue ) {
+ return;
+ }
+ this._currentValue = newValue;
+
+ if ( o.popupEnabled ) {
+ this._positionPopup();
+ this._popup.html(Math.round(newValue*100)+"%" );
+ document.getElementById("MediaPlayback").volume = newValue;
+ }
+
+ if ( o.showValue ) {
+ this._handleText.html(Math.round(newValue*100)+"%");
+ document.getElementById("MediaPlayback").volume = newValue;
+ }
+ },
+
+ _showPopup: function() {
+ if ( this.options.popupEnabled && !this._popupVisible ) {
+ this._handleText.hide();
+ this._popup.show();
+ this._positionPopup();
+ this._popupVisible = true;
+ }
+ },
+
+ _hidePopup: function() {
+ if ( this.options.popupEnabled && this._popupVisible ) {
+ this._handleText.show();
+ this._popup.hide();
+ this._popupVisible = false;
+ }
+ }
+});
+
+})( jQuery );
<script src="../../js/thirdparty/jquery.mobile.js"></script>
<script src="../../js/tests.js"></script>
<script src="js/main.js"></script>
+ <script src="js/slider.tooltip.js"></script>
</head>
<body>
<div data-role="header">
-The jquery extension code of main.js(line 37~137) comes from
-http://jquerymobile.com/demos/1.3.0/docs/examples/slider/tooltip.html
+The slider.tooltip.js comes from
+https://github.com/jquery/jquery-mobile/tree/1.3-stable
with some modifications.
this._currentValue = newValue;
+ vibration_number = $("#slider-3").val();
+ }
-You may use any jQuery project under the terms of the MIT License:
+jQuery Mobile v@VERSION
+http://jquerymobile.com
+
+Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
+Released under the MIT license.
http://jquery.org/license
+/*
+Copyright (c) 2013 Intel Corporation.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of works must retain the original copyright notice, this list
+ of conditions and the following disclaimer.
+* Redistributions in binary form must reproduce the original copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+* Neither the name of Intel Corporation nor the names of its contributors
+ may be used to endorse or promote products derived from this work without
+ specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY INTEL CORPORATION "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL INTEL CORPORATION BE LIABLE FOR ANY DIRECT,
+INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+Authors:
+ Liu, Xin <xinx.liu@intel.com>
+
+*/
+
var vibration_time, vibration_periods, vibration_number;
jQuery(document).ready(function() {
navigator.vibrate(0);
$("#start").removeClass("ui-disabled");
}
-
-//slider style
-(function($, undefined) {
-$.widget( "mobile.slider", $.mobile.slider, {
- options: {
- popupEnabled: false,
- showValue: false
- },
- _create: function() {
- var o = this.options,
- popup = $("<div></div>", {
- class: "ui-slider-popup ui-shadow ui-corner-all ui-body-" + (o.theme ? o.theme : $.mobile.getInheritedTheme(this.element, "c"))
- });
- this._super();
- $.extend( this, {
- _currentValue: null,
- _popup: popup,
- _popupVisible: false,
- _handleText: this.handle.find(".ui-btn-text")
- });
- this.slider.before(popup);
- popup.hide();
- this._on(this.handle, {"vmousedown" : "_showPopup"});
- this._on(this.slider.add($.mobile.document), {"vmouseup" : "_hidePopup"});
- this._refresh();
- },
-
- // position the popup centered 5px above the handle
- _positionPopup: function() {
- var dstOffset = this.handle.offset();
- this._popup.offset({
- left: dstOffset.left + (this.handle.width() - this._popup.width()) / 2,
- top: dstOffset.top - this._popup.outerHeight() - 5
- });
- },
- _setOption: function(key, value) {
- this._super(key, value);
- if ( key === "showValue" ) {
- if ( value ) {
- this._handleText.html(this._value()).show();
- } else {
- this._handleText.hide();
- }
- }
- },
- // show value on the handle and in popup
- refresh: function() {
- this._super.apply(this, arguments);
- // necessary because slider's _create() calls refresh(), and that lands
- // here before our own _create() has even run
- if (!this._popup) {
- return;
- }
- this._refresh();
- },
- _refresh: function() {
- var o = this.options, newValue;
- if (o.popupEnabled) {
- // remove the title attribute from the handle (which is
- // responsible for the annoying tooltip); NB we have
- // to do it here as the jqm slider sets it every time
- // the slider's value changes :(
- this.handle.removeAttr('title');
- }
- newValue = this._value();
- if (newValue === this._currentValue) {
- return;
- }
- this._currentValue = newValue;
- var ID = this.element[0].id;
- if (ID == "slider-1") {
- vibration_time = Number($("#slider-1").val())*1000;
- } else if (ID == "slider-2") {
- vibration_periods = Number($("#slider-2").val())*1000;
- } else if (ID == "slider-3") {
- vibration_number = $("#slider-3").val();
- }
-
- if (o.popupEnabled) {
- this._positionPopup();
- this._popup.html(newValue);
- }
- if (o.showValue) {
- this._handleText.html(newValue);
- }
- },
- _showPopup: function() {
- if ( this.options.popupEnabled && !this._popupVisible ) {
- this._handleText.hide();
- this._popup.show();
- this._positionPopup();
- this._popupVisible = true;
- }
- },
- _hidePopup: function() {
- if ( this.options.popupEnabled && this._popupVisible ) {
- this._handleText.show();
- this._popup.hide();
- this._popupVisible = false;
- }
- }
-});
-})( jQuery );
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Slider tooltip extension
+//>>label: Slidertooltip
+//>>group: Forms
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+//>>css.structure: ../css/structure/jquery.mobile.slider.tooltip.css
+
+//define( [ "jquery", "./slider" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.slider", $.mobile.slider, {
+ options: {
+ popupEnabled: false,
+ showValue: false
+ },
+
+ _create: function() {
+ var o = this.options,
+ popup = $( "<div></div>", {
+ class: "ui-slider-popup ui-shadow ui-corner-all ui-body-" + ( o.theme ? o.theme : $.mobile.getInheritedTheme( this.element, "c" ) )
+ });
+
+ this._super();
+
+ $.extend( this, {
+ _currentValue: null,
+ _popup: popup,
+ _popupVisible: false,
+ _handleText: this.handle.find( ".ui-btn-text" )
+ });
+
+ this.slider.before( popup );
+ popup.hide();
+
+ this._on( this.handle, { "vmousedown" : "_showPopup" } );
+ this._on( this.slider.add( $.mobile.document ), { "vmouseup" : "_hidePopup" } );
+ this._refresh();
+ },
+
+ // position the popup centered 5px above the handle
+ _positionPopup: function() {
+ var dstOffset = this.handle.offset();
+ this._popup.offset( {
+ left: dstOffset.left + ( this.handle.width() - this._popup.width() ) / 2,
+ top: dstOffset.top - this._popup.outerHeight() - 5
+ });
+ },
+
+ _setOption: function( key, value ) {
+ this._super( key, value );
+
+ if ( key === "showValue" ) {
+ if ( value ) {
+ this._handleText.html( this._value() ).show();
+ } else {
+ this._handleText.hide();
+ }
+ }
+ },
+
+ // show value on the handle and in popup
+ refresh: function() {
+ this._super.apply( this, arguments );
+
+ // necessary because slider's _create() calls refresh(), and that lands
+ // here before our own _create() has even run
+ if ( !this._popup ) {
+ return;
+ }
+
+ this._refresh();
+ },
+
+ _refresh: function() {
+ var o = this.options, newValue;
+
+ if ( o.popupEnabled ) {
+ // remove the title attribute from the handle (which is
+ // responsible for the annoying tooltip); NB we have
+ // to do it here as the jqm slider sets it every time
+ // the slider's value changes :(
+ this.handle.removeAttr( 'title' );
+ }
+
+ newValue = this._value();
+ if ( newValue === this._currentValue ) {
+ return;
+ }
+ this._currentValue = newValue;
+
+ var ID = this.element[0].id;
+ if (ID == "slider-1") {
+ vibration_time = Number($("#slider-1").val())*1000;
+ } else if (ID == "slider-2") {
+ vibration_periods = Number($("#slider-2").val())*1000;
+ } else if (ID == "slider-3") {
+ vibration_number = $("#slider-3").val();
+ }
+
+ if ( o.popupEnabled ) {
+ this._positionPopup();
+ this._popup.html( newValue );
+ }
+
+ if ( o.showValue ) {
+ this._handleText.html( newValue );
+ }
+ },
+
+ _showPopup: function() {
+ if ( this.options.popupEnabled && !this._popupVisible ) {
+ this._handleText.hide();
+ this._popup.show();
+ this._positionPopup();
+ this._popupVisible = true;
+ }
+ },
+
+ _hidePopup: function() {
+ if ( this.options.popupEnabled && this._popupVisible ) {
+ this._handleText.show();
+ this._popup.hide();
+ this._popupVisible = false;
+ }
+ }
+});
+
+})( jQuery );
projects / test / tct / web / behavior.git / commitdiff