mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-25 18:47:57 +01:00
removed files
This commit is contained in:
Rick Companje
parent
2cdeaacd14
commit
0ad800b021
64
Gruntfile.js
64
Gruntfile.js
@ -16,34 +16,34 @@ module.exports = function(grunt) {
|
|||||||
},
|
},
|
||||||
js: {
|
js: {
|
||||||
src: [
|
src: [
|
||||||
'js_src/Events.js',
|
'js/Events.js',
|
||||||
'js_src/Class.js',
|
'js/Class.js',
|
||||||
'js_src/Button.js',
|
'js/Button.js',
|
||||||
'js_src/Popup.js',
|
'js/Popup.js',
|
||||||
'js_src/btnMove.js',
|
'js/btnMove.js',
|
||||||
'js_src/WordArt.js',
|
'js/WordArt.js',
|
||||||
'js_src/Shape.js',
|
'js/Shape.js',
|
||||||
'js_src/Svg.js',
|
'js/Svg.js',
|
||||||
'js_src/Keyboard.js',
|
'js/Keyboard.js',
|
||||||
'js_src/SettingsWindow.js',
|
'js/SettingsWindow.js',
|
||||||
'js_src/UpdatePanel.js',
|
'js/UpdatePanel.js',
|
||||||
'js_src/PrinterPanel.js',
|
'js/PrinterPanel.js',
|
||||||
'js_src/Help.js',
|
'js/Help.js',
|
||||||
'js_src/d3dServerInterfacing.js',
|
'js/d3dServerInterfacing.js',
|
||||||
'js_src/verticalShapes.js',
|
'js/verticalShapes.js',
|
||||||
'js_src/buttonbehaviors.js',
|
'js/buttonbehaviors.js',
|
||||||
'js_src/canvasDrawing.js',
|
'js/canvasDrawing.js',
|
||||||
'js_src/previewRendering.js',
|
'js/previewRendering.js',
|
||||||
'js_src/gcodeGenerating.js',
|
'js/gcodeGenerating.js',
|
||||||
'js_src/init_layout.js',
|
'js/init_layout.js',
|
||||||
'js_src/Printer.js',
|
'js/Printer.js',
|
||||||
'js_src/Progressbar.js',
|
'js/Progressbar.js',
|
||||||
'js_src/Thermometer.js',
|
'js/Thermometer.js',
|
||||||
'js_src/utils.js',
|
'js/utils.js',
|
||||||
'js_src/sidebar.js',
|
'js/sidebar.js',
|
||||||
'js_src/Message.js',
|
'js/Message.js',
|
||||||
'js_src/main.js',
|
'js/main.js',
|
||||||
'js_src/sketches.js'
|
'js/sketches.js'
|
||||||
],
|
],
|
||||||
dest: 'www/js/<%= pkg.name %>.js'
|
dest: 'www/js/<%= pkg.name %>.js'
|
||||||
}
|
}
|
||||||
@ -63,8 +63,8 @@ module.exports = function(grunt) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
jslibs: {
|
jslibs: {
|
||||||
cwd: "js_src/libs/",
|
cwd: "js/libs/",
|
||||||
// src: ['js_src/libs/*.js', '!js_src/libs/*.min.js'], // source files mask
|
// src: ['js/libs/*.js', '!js/libs/*.min.js'], // source files mask
|
||||||
src: ['*.js', '!*.min.js'], // source files mask
|
src: ['*.js', '!*.min.js'], // source files mask
|
||||||
dest: 'www/js/libs/', // destination folder
|
dest: 'www/js/libs/', // destination folder
|
||||||
expand: true, // allow dynamic building
|
expand: true, // allow dynamic building
|
||||||
@ -112,12 +112,12 @@ module.exports = function(grunt) {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
javascript: {
|
javascript: {
|
||||||
files: ["js_src/*", '!www/js/<%= pkg.name %>.min.js', '!www/js/<%= pkg.name %>.js'],
|
files: ["js/*", '!www/js/<%= pkg.name %>.min.js', '!www/js/<%= pkg.name %>.js'],
|
||||||
tasks: ["concat:js", "uglify:js"]
|
tasks: ["concat:js", "uglify:js"]
|
||||||
// tasks: ["jshint", "concat", "uglify"]
|
// tasks: ["jshint", "concat", "uglify"]
|
||||||
},
|
},
|
||||||
javascriptLibs: {
|
javascriptLibs: {
|
||||||
files: ["js_src/libs/*"],
|
files: ["js/libs/*"],
|
||||||
tasks: ["uglify:jslibs"]
|
tasks: ["uglify:jslibs"]
|
||||||
// tasks: ["jshint", "concat", "uglify"]
|
// tasks: ["jshint", "concat", "uglify"]
|
||||||
},
|
},
|
||||||
|
|||||||
154
___settings.html
154
___settings.html
@ -1,154 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>settings</title>
|
|
||||||
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
|
||||||
|
|
||||||
<link href="css/settings.css" rel="stylesheet" media="screen">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="settingsContainer">
|
|
||||||
<form id="settingsForm">
|
|
||||||
<!--<fieldset>
|
|
||||||
<legend>3D printer</legend>
|
|
||||||
<label for="printerType">Type:</label>
|
|
||||||
<select id="printerType" name="printer.type">
|
|
||||||
<option value="rigidbot">Rigidbot</option>
|
|
||||||
<option value="ultimaker">Ultimaker</option>
|
|
||||||
<option value="makerbot_replicator2">MakerBot Replicator2</option>
|
|
||||||
<option value="makerbot_thingomatic">MakerBot Thing-o-matic</option>
|
|
||||||
<option value="printrbot">Printrbot</option>
|
|
||||||
<option value="bukobot">Bukobot</option>
|
|
||||||
<option value="cartesio">Cartesio</option>
|
|
||||||
<option value="cyrus">Cyrus</option>
|
|
||||||
<option value="delta_rostockmax">Delta RostockMax</option>
|
|
||||||
<option value="deltamaker">Deltamaker</option>
|
|
||||||
<option value="eventorbot">EventorBot</option>
|
|
||||||
<option value="felix">Felix</option>
|
|
||||||
<option value="gigabot">Gigabot</option>
|
|
||||||
<option value="kossel">Kossel</option>
|
|
||||||
<option value="leapfrog_creatr">LeapFrog Creatr</option>
|
|
||||||
<option value="lulzbot_aO_101">LulzBot AO-101</option>
|
|
||||||
<option value="makergear_m2">MakerGear M2</option>
|
|
||||||
<option value="makergear_prusa">MakerGear Prusa</option>
|
|
||||||
<option value="makibox">Makibox</option>
|
|
||||||
<option value="orca_0_3">Orca 0.3</option>
|
|
||||||
<option value="ord_bot_hadron">ORD Bot Hadron</option>
|
|
||||||
<option value="printxel_3d">Printxel 3D</option>
|
|
||||||
<option value="prusa_i3">Prusa I3</option>
|
|
||||||
<option value="prusa_iteration_2">Prusa Iteration 2</option>
|
|
||||||
<option value="rapman">RapMan</option>
|
|
||||||
<option value="reprappro_huxley">RepRapPro Huxley</option>
|
|
||||||
<option value="reprappro_mendel">RepRapPro Mendel</option>
|
|
||||||
<option value="robo_3d_printer">RoBo 3D Printer</option>
|
|
||||||
<option value="shapercube">ShaperCube</option>
|
|
||||||
<option value="tantillus">Tantillus</option>
|
|
||||||
<option value="vision_3d_printer">Vision 3D Printer</option>
|
|
||||||
</select>
|
|
||||||
<br>
|
|
||||||
<label for="printerBaudrate">Baud rate:</label>
|
|
||||||
<select id="printerBaudrate" name="printer.baudrate">
|
|
||||||
<option value="115200">115200 bps</option>
|
|
||||||
<option value="2500000">2500000 bps</option>
|
|
||||||
</select>
|
|
||||||
</fieldset>-->
|
|
||||||
|
|
||||||
<fieldset id="printersettings">
|
|
||||||
<legend>Print settings</legend>
|
|
||||||
<label for="layerHeight">Layer height:</label><input id="layerHeight" type="number" step="0.01" class="small" name="printer.layerHeight">mm<br>
|
|
||||||
<label for="wallThickness">Wall thickness:</label><input id="wallThickness" type="number" step="0.1" class="small" name="printer.wallThickness">mm<br>
|
|
||||||
<label for="filamentThickness">Filament thickness:</label><input id="filamentThickness" step="0.01" type="number" class="small" name="printer.filamentThickness">mm<br>
|
|
||||||
<label for="temperature">Temperature:</label><input id="temperature" type="number" class="small" name="printer.temperature">degrees C<br>
|
|
||||||
<br>
|
|
||||||
<label for="speed">Speed:</label><input id="speed" type="number" name="printer.speed" class="small">mm/s<br>
|
|
||||||
<label for="travelSpeed">Travel speed:</label><input id="travelSpeed" type="number" name="printer.travelSpeed" class="small">mm/s<br>
|
|
||||||
<label for="enableTraveling">Enable traveling:</label><input id="enableTraveling" type="checkbox" name="printer.enableTraveling" value="enableTraveling"><br>
|
|
||||||
<label for="firstLayerSlow">First layer slow:</label><input id="firstLayerSlow" type="checkbox" name="printer.firstLayerSlow" value="firstLayerSlow"><br>
|
|
||||||
<label for="useSubLayers">Use sub-layers*:</label><input id="useSubLayers" type="checkbox" name="printer.useSubLayers" value="firstLayerSlow"><br>
|
|
||||||
<small>* Continuously move platform while printing instead of once per layer</small>
|
|
||||||
<br>
|
|
||||||
<label for="useRetraction">Use retraction:</label><input id="useRetraction" type="checkbox" name="printer.retraction.enabled" value="useRetraction"><br>
|
|
||||||
<label for="retractionAmount">Retraction amount:</label><input id="retractionAmount" type="number" class="small" name="printer.retraction.amount">mm<br>
|
|
||||||
<label for="retractionMinDistance">Retraction min distance:</label><input id="retractionMinDistance" type="number" class="small" name="printer.retraction.minDistance">mm<br>
|
|
||||||
<label for="retractionSpeed">Retraction speed:</label><input id="retractionSpeed" type="number" class="small" name="printer.retraction.speed">mm/s<br>
|
|
||||||
<br>
|
|
||||||
<label for="autoWarmUp">Auto warm-up:</label><input id="autoWarmUp" type="checkbox" name="printer.autoWarmUp" value="autoWarmUp"><br>
|
|
||||||
<label for="autoWarmUpCommand">Auto Warm up command:</label><input id="autoWarmUpCommand" type="text" name="printer.autoWarmUpCommand"><br>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset id="doodlesettings">
|
|
||||||
<legend>Doodle3D settings</legend>
|
|
||||||
<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
|
|
||||||
<label for="maxObjectHeight">Max object height:</label><input id="maxObjectHeight" type="number" class="small" name="printer.maxObjectHeight">mm<br>
|
|
||||||
<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale"><br>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>Network settings</legend>
|
|
||||||
<label>Connection type:</label>
|
|
||||||
<div>
|
|
||||||
<label for="ap"><input type="radio" name="connectiontype" value="ap" id="ap">Access point mode</label>
|
|
||||||
<label for="client"><input type="radio" name="connectiontype" value="client" id="client">Client mode</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<fieldset id="apSettings">
|
|
||||||
<legend>Access point settings</legend>
|
|
||||||
<label for="ipaddress">Wi-Fi box IP address:</label><input type="text" name="network.ap.address" id="ipaddress"><br>
|
|
||||||
<label for="netmask">Wi-Fi box netmask:</label><input type="text" name="network.ap.netmask" id="netmask"><br>
|
|
||||||
<label for="ssid">Wi-Fi box ssid*:</label><input type="text" class="large" name="network.ap.ssid" id="ssid"> <br>
|
|
||||||
<small>* The text <em>%%MAC_ADDR_TAIL%%</em> will be replaced by the last 6 digits of your Doodle3D Wi-Fi box's MAC address.</small>
|
|
||||||
<input type="button" name="create" value="Create" class="button" id="createAP"/>
|
|
||||||
<span id="apModeState"></span>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset id="clientSettings">
|
|
||||||
<legend>Client mode settings</legend>
|
|
||||||
<label for="network">Network:</label>
|
|
||||||
<select id="network" name="network.client.network">
|
|
||||||
<option value="rigidbot">Fablab Amersfoort</option>
|
|
||||||
<option value="ultimaker">Globe4D</option>
|
|
||||||
</select>
|
|
||||||
<input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br>
|
|
||||||
<label for="password" id="passwordLabel">Password:</label><input type="password" name="network.client.password" id="password"><br>
|
|
||||||
<input type="button" name="connect" value="Connect" class="button" id="connectToNetwork"/>
|
|
||||||
<span id="clientModeState"></span>
|
|
||||||
</fieldset>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>GCODE settings</legend>
|
|
||||||
<div class="startgcode_left">
|
|
||||||
<label for="startgcode">Start:</label><br/>
|
|
||||||
<textarea id="startgcode" class="gcode" name="printer.startgcode">
|
|
||||||
</textarea>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="endgcode">End:</label><br/>
|
|
||||||
<textarea id="endgcode" class="gcode" name="printer.endgcode">
|
|
||||||
</textarea>
|
|
||||||
</div>
|
|
||||||
<!-- 2013-10-09 replaced by DIV solution (but keeping here in comments temporarily as lookup...)
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<label for="startgcode">Start:</label><br>
|
|
||||||
<textarea id="startgcode" class="gcode" name="printer.startgcode">
|
|
||||||
</textarea>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label for="endgcode">End:</label><br>
|
|
||||||
<textarea id="endgcode" class="gcode" name="printer.endgcode">
|
|
||||||
</textarea>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
-->
|
|
||||||
</fieldset>
|
|
||||||
</form><br/>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
/*.logo {
|
|
||||||
background: #f5f5f5 url('../img/logo_full.png') no-repeat left top;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
.logo {
|
|
||||||
background: #f5f5f5 url('../img/logo_small.png') no-repeat left top;
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
/*body {*/
|
|
||||||
/*-moz-user-select: none; *//* disable cut copy paste */
|
|
||||||
/*-webkit-user-select: none; *//* disable cut copy paste */
|
|
||||||
/*overflow:hidden; *//* This chops off any overhanging divs */
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*img {*/
|
|
||||||
/*z-index: 5;*/
|
|
||||||
/*pointer-events:none;*/
|
|
||||||
/*-webkit-touch-callout: none; *//**//*disable callout, image save panel */
|
|
||||||
/*-webkit-tap-highlight-color: transparent; *//**//* "turn off" link highlight */
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
|
|
||||||
/*.btn {*/
|
|
||||||
/*background-repeat: no-repeat;*/
|
|
||||||
/* -webkit-user-select: none;*/
|
|
||||||
/*cursor: pointer*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
INTERFACE BUTTONS
|
|
||||||
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
#btnNew {
|
|
||||||
left: 10px;
|
|
||||||
top: 10px;
|
|
||||||
width: 194px;
|
|
||||||
height: 170px;
|
|
||||||
background: url('../img/buttons/btnNew.png') no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious {
|
|
||||||
left: 20px;
|
|
||||||
top: 180px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNext {
|
|
||||||
left: 126px;
|
|
||||||
top: 186px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnSave {
|
|
||||||
left: 20px;
|
|
||||||
top: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
left: 20px;
|
|
||||||
top: 450px;
|
|
||||||
width: 146px;
|
|
||||||
height: 144px;
|
|
||||||
background: url('../img/buttons/btnOops.png') no-repeat;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
#btnPrint {
|
|
||||||
right: 15px;
|
|
||||||
top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnStop {
|
|
||||||
right: 20px;
|
|
||||||
top: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnInfo {
|
|
||||||
right: 25px;
|
|
||||||
bottom: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnSettings {
|
|
||||||
right: 25px;
|
|
||||||
bottom: 20px;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
DRAW AREA
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*#drawAreaContainer > .manipulationBtns {*/
|
|
||||||
/*
|
|
||||||
.drawareacontainer > .manipulationBtns {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manipulationBtn {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown {
|
|
||||||
position: absolute;
|
|
||||||
right: 200px;
|
|
||||||
bottom: -75px;
|
|
||||||
}
|
|
||||||
#btnsUpDown > div {
|
|
||||||
float: left;
|
|
||||||
padding-right: 8px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsTurnLeftRight {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
bottom: -75px;
|
|
||||||
}
|
|
||||||
#btnsTurnLeftRight >div {
|
|
||||||
float: left;
|
|
||||||
padding-right: 8px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnMoveUp {
|
|
||||||
width: 65px;
|
|
||||||
height: 61px;
|
|
||||||
background: url('../img/buttons/btnUp.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnMoveDown {
|
|
||||||
width: 64px;
|
|
||||||
height: 63px;
|
|
||||||
background: url('../img/buttons/btnDown.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnTwistLeft {
|
|
||||||
width: 59px;
|
|
||||||
height: 61px;
|
|
||||||
background: url('../img/buttons/btnTurnLeft.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnTwistRight {
|
|
||||||
width: 64px;
|
|
||||||
height: 56px;
|
|
||||||
background: url('../img/buttons/btnTurnRight.png');
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
#displayTemp {
|
|
||||||
position: absolute;
|
|
||||||
right: 55px;
|
|
||||||
top: 334px;
|
|
||||||
font-weight: bold;
|
|
||||||
background: white;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
.disabled {
|
|
||||||
opacity: 0.3;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnStop.disabled {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
/*
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
width: 65%;
|
|
||||||
min-width: 500px;
|
|
||||||
max-width: 650px;
|
|
||||||
height: 60%;
|
|
||||||
min-height: 150px;
|
|
||||||
max-height: 450px;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 15;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#canvasContainers {
|
|
||||||
display:table;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvasContainer {
|
|
||||||
display:table-cell;
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#mycanvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#previewContainer {
|
|
||||||
display:table-cell;
|
|
||||||
width: 150px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#preview {
|
|
||||||
width: 150px;
|
|
||||||
height: 100%;
|
|
||||||
float: right;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* DEBUG THING */
|
|
||||||
/*
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
Buttons and logo's
|
|
||||||
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*#d3dlogo {*/
|
|
||||||
/*position: absolute;*/
|
|
||||||
/*top: 15px;*/
|
|
||||||
/*left: 31%;*/
|
|
||||||
/*width: 399px;*/
|
|
||||||
/*height: 139px;*/
|
|
||||||
/*background-image: url('../img/logo_full.png');*/
|
|
||||||
/*cursor: pointer;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
#contentOverlay {
|
|
||||||
background-color: rgba(255, 255, 255, 0.65);
|
|
||||||
z-index: 20;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#settings {
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 15;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 835px;
|
|
||||||
height: 500px;
|
|
||||||
margin: -250px 0 0 -417.5px;
|
|
||||||
/*padding: 25px;*/
|
|
||||||
|
|
||||||
/*overflow: scroll;*/
|
|
||||||
/*overflow-y: hidden;*/
|
|
||||||
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
border: 2px solid #222;
|
|
||||||
border-radius: 15px;
|
|
||||||
-moz-border-radius: 15px;
|
|
||||||
-webkit-border-radius: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#settings header {
|
|
||||||
margin: 25px 25px 0 25px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content {
|
|
||||||
margin: 15px 25px 25px 25px;
|
|
||||||
height: 388px;
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content > div {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content > div.settings {
|
|
||||||
border: 1px solid rgb(187, 187, 187);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
width: 660px;
|
|
||||||
overflow: scroll;
|
|
||||||
max-height: 368px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 10px 10px 10px 10px;
|
|
||||||
}
|
|
||||||
div.content > div.manipulationBtns {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: bottom;
|
|
||||||
width: 125px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content .btnOK {
|
|
||||||
width: 85px;
|
|
||||||
height: 86px;
|
|
||||||
background: url('../img/buttons/btnOk_settings.png') no-repeat;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,329 +0,0 @@
|
|||||||
body {
|
|
||||||
/* This chops off any overhanging divs */
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#landscape {*/
|
|
||||||
/*position:relative;*/
|
|
||||||
/*width: 1024px;*/
|
|
||||||
/*max-height: 768px;*/
|
|
||||||
/*background-color: #808;*/
|
|
||||||
/*border: 10px solid #ff0;*/
|
|
||||||
/*margin: 0px auto;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
|
|
||||||
#verticalShapes {
|
|
||||||
position:absolute;
|
|
||||||
right: -56px;
|
|
||||||
bottom: 15px;
|
|
||||||
/*background-color: #fff;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.verticalshape {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 0px 5px 5px 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
/*background-color: #f0f;*/
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.straight {
|
|
||||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
|
||||||
}
|
|
||||||
.diverging {
|
|
||||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.converging {
|
|
||||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.sinus {
|
|
||||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Portrait */
|
|
||||||
@media screen and (orientation:portrait) {
|
|
||||||
body {
|
|
||||||
/* background-color: #08F;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Landscape */
|
|
||||||
@media screen and (orientation:landscape) {
|
|
||||||
body {
|
|
||||||
/* background-color: #8F0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uiButtonsContainer {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1024px;
|
|
||||||
min-height: 500px;
|
|
||||||
max-height: 768px;
|
|
||||||
height: 100%;
|
|
||||||
/* height: 768px;*/
|
|
||||||
}
|
|
||||||
.uiButtonsContainer:before {
|
|
||||||
content:' ';
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
right:0;
|
|
||||||
bottom:0;
|
|
||||||
border: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 31%;
|
|
||||||
width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background-image: url('../img/logo_full.png');
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 193px;
|
|
||||||
left: 193px;
|
|
||||||
width: 650px;
|
|
||||||
height: 450px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas, #preview {
|
|
||||||
/*border: 1px solid #08c;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas {
|
|
||||||
width: 500px;
|
|
||||||
height: 450px;
|
|
||||||
border: 0px solid #333;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview {
|
|
||||||
/*border: 1px solid #f8c;*/
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 150px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertImage {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
/*border: 2px solid #f0f;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto; /* for ie9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgTop {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgMiddle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgBottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRINT PROGRESS DISPLAY */
|
|
||||||
#printProgressContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 370px;
|
|
||||||
width: 110px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#progressbarContainer {
|
|
||||||
margin: 3px 0px;
|
|
||||||
width: inherit;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
}
|
|
||||||
.progressAmount {
|
|
||||||
margin: 0px 5px;
|
|
||||||
}
|
|
||||||
#progressbar {
|
|
||||||
position: relative;
|
|
||||||
/*margin-bottom: -20px;*/
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #4c4;
|
|
||||||
border: 0px solid #f0f;
|
|
||||||
border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* THERMOMETER */
|
|
||||||
#thermometerContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 360px;
|
|
||||||
}
|
|
||||||
#thermometerCanvas {
|
|
||||||
/*background: #59b2b8;*/
|
|
||||||
/*zoom: 2;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
|
||||||
|
|
||||||
@media screen and (max-height: 675px) {
|
|
||||||
.bgMiddle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo_small.png');
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(0px,-5px) scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
|
||||||
/*-moz-transform: translate(-3px,-3px);*/
|
|
||||||
}
|
|
||||||
#btnOops {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
-moz-transform: translate(5px,-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 128px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 560px) {
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 57px;
|
|
||||||
background-image: url('../img/logo_smaller_wide.png');
|
|
||||||
margin-top: 14px;
|
|
||||||
/*zoom: 0.8;*/
|
|
||||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
|
||||||
/*-moz-transform: ;*/
|
|
||||||
/*left: 34%;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 6px;
|
|
||||||
-moz-transform: translate(10px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
top: 350px;
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
|
||||||
}
|
|
||||||
#btnSave {
|
|
||||||
-moz-transform: translate(-5px,-13px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious, #btnNext {
|
|
||||||
/*top: 200px;*/
|
|
||||||
-moz-transform: translate(-5px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 110px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,329 +0,0 @@
|
|||||||
body {
|
|
||||||
/* This chops off any overhanging divs */
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#landscape {*/
|
|
||||||
/*position:relative;*/
|
|
||||||
/*width: 1024px;*/
|
|
||||||
/*max-height: 768px;*/
|
|
||||||
/*background-color: #808;*/
|
|
||||||
/*border: 10px solid #ff0;*/
|
|
||||||
/*margin: 0px auto;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
|
|
||||||
#verticalShapes {
|
|
||||||
position:absolute;
|
|
||||||
right: -56px;
|
|
||||||
bottom: 15px;
|
|
||||||
/*background-color: #fff;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.verticalshape {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 0px 5px 5px 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
/*background-color: #f0f;*/
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.straight {
|
|
||||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
|
||||||
}
|
|
||||||
.diverging {
|
|
||||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.converging {
|
|
||||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.sinus {
|
|
||||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Portrait */
|
|
||||||
@media screen and (orientation:portrait) {
|
|
||||||
body {
|
|
||||||
/* background-color: #08F;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Landscape */
|
|
||||||
@media screen and (orientation:landscape) {
|
|
||||||
body {
|
|
||||||
/* background-color: #8F0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uiButtonsContainer {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1024px;
|
|
||||||
min-height: 500px;
|
|
||||||
max-height: 768px;
|
|
||||||
height: 100%;
|
|
||||||
/* height: 768px;*/
|
|
||||||
}
|
|
||||||
.uiButtonsContainer:before {
|
|
||||||
content:' ';
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
right:0;
|
|
||||||
bottom:0;
|
|
||||||
border: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 31%;
|
|
||||||
width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background-image: url('../img/logo_full.png');
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 193px;
|
|
||||||
left: 193px;
|
|
||||||
width: 650px;
|
|
||||||
height: 450px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas, #preview {
|
|
||||||
/*border: 1px solid #08c;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas {
|
|
||||||
width: 500px;
|
|
||||||
height: 450px;
|
|
||||||
border: 0px solid #333;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview {
|
|
||||||
/*border: 1px solid #f8c;*/
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 150px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertImage {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
/*border: 2px solid #f0f;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto; /* for ie9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgTop {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgMiddle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgBottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRINT PROGRESS DISPLAY */
|
|
||||||
#printProgressContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 370px;
|
|
||||||
width: 110px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#progressbarContainer {
|
|
||||||
margin: 3px 0px;
|
|
||||||
width: inherit;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
}
|
|
||||||
.progressAmount {
|
|
||||||
margin: 0px 5px;
|
|
||||||
}
|
|
||||||
#progressbar {
|
|
||||||
position: relative;
|
|
||||||
/*margin-bottom: -20px;*/
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #4c4;
|
|
||||||
border: 0px solid #f0f;
|
|
||||||
border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* THERMOMETER */
|
|
||||||
#thermometerContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 360px;
|
|
||||||
}
|
|
||||||
#thermometerCanvas {
|
|
||||||
/*background: #59b2b8;*/
|
|
||||||
/*zoom: 2;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
|
||||||
|
|
||||||
@media screen and (max-height: 675px) {
|
|
||||||
.bgMiddle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo_small.png');
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(0px,-5px) scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
|
||||||
/*-moz-transform: translate(-3px,-3px);*/
|
|
||||||
}
|
|
||||||
#btnOops {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
-moz-transform: translate(5px,-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 128px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 560px) {
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 57px;
|
|
||||||
background-image: url('../img/logo_smaller_wide.png');
|
|
||||||
margin-top: 14px;
|
|
||||||
/*zoom: 0.8;*/
|
|
||||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
|
||||||
/*-moz-transform: ;*/
|
|
||||||
/*left: 34%;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 6px;
|
|
||||||
-moz-transform: translate(10px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
top: 350px;
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
|
||||||
}
|
|
||||||
#btnSave {
|
|
||||||
-moz-transform: translate(-5px,-13px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious, #btnNext {
|
|
||||||
/*top: 200px;*/
|
|
||||||
-moz-transform: translate(-5px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 110px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,323 +0,0 @@
|
|||||||
body {
|
|
||||||
/* This chops off any overhanging divs */
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.big {*/
|
|
||||||
/*background: #a6e19c;*/
|
|
||||||
/*border: 1px solid #222;*/
|
|
||||||
/*height: 64px;*/
|
|
||||||
/*width: 64px;*/
|
|
||||||
/*display: table-cell;*/
|
|
||||||
/*vertical-align: middle;*/
|
|
||||||
/*text-align: center;*/
|
|
||||||
/*border-radius: 32px;*/
|
|
||||||
/*-moz-border-radius: 32px;*/
|
|
||||||
/*-webkit-border-radius: 32px;*/
|
|
||||||
/*}*/
|
|
||||||
/*.small {*/
|
|
||||||
/*background: #a3d5f7;*/
|
|
||||||
/*border: 1px solid #222;*/
|
|
||||||
/*height: 40px;*/
|
|
||||||
/*width: 40px;*/
|
|
||||||
/*display: table-cell;*/
|
|
||||||
/*vertical-align: middle;*/
|
|
||||||
/*text-align: center;*/
|
|
||||||
/*border-radius: 20px;*/
|
|
||||||
/*-moz-border-radius: 20px;*/
|
|
||||||
/*-webkit-border-radius: 20px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
#logo {
|
|
||||||
position: absolute;
|
|
||||||
/*left: 50%;*/
|
|
||||||
/*margin-left: -220px;*/
|
|
||||||
top: 20px;
|
|
||||||
left: 315px;
|
|
||||||
width: 400px;
|
|
||||||
height: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*ha {*/
|
|
||||||
/*background: #f5f5f5 url('../images/bg.jpg') no-repeat;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/* Portrait */
|
|
||||||
@media screen and (orientation:portrait) {
|
|
||||||
body {
|
|
||||||
/* background-color: #08F;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Landscape */
|
|
||||||
@media screen and (orientation:landscape) {
|
|
||||||
body {
|
|
||||||
/* background-color: #8F0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
width: 1024px;
|
|
||||||
min-height: 500px;
|
|
||||||
max-height: 768px;
|
|
||||||
height: 100%;
|
|
||||||
/* height: 768px;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 31%;
|
|
||||||
width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background-image: url('../img/logo_full.png');
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#svg {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 193px;
|
|
||||||
left: 193px;
|
|
||||||
width: 650px;
|
|
||||||
height: 450px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas, #preview {
|
|
||||||
/*border: 1px solid #08c;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas {
|
|
||||||
width: 500px;
|
|
||||||
height: 450px;
|
|
||||||
border: 0px solid #333;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview {
|
|
||||||
/*border: 1px solid #f8c;*/
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 150px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertImage {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
/*border: 2px solid #f0f;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto; /* for ie9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgTop {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgMiddle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgBottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRINT PROGRESS DISPLAY */
|
|
||||||
#printProgressContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 370px;
|
|
||||||
width: 110px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#progressbarContainer {
|
|
||||||
margin: 3px 0px;
|
|
||||||
width: inherit;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
}
|
|
||||||
.progressAmount {
|
|
||||||
margin: 0px 5px;
|
|
||||||
}
|
|
||||||
#progressbar {
|
|
||||||
position: relative;
|
|
||||||
/*margin-bottom: -20px;*/
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #4c4;
|
|
||||||
border: 0px solid #f0f;
|
|
||||||
border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* THERMOMETER */
|
|
||||||
#thermometerContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 25px;
|
|
||||||
top: 370px;
|
|
||||||
}
|
|
||||||
#thermometerCanvas {
|
|
||||||
/*background: #59b2b8;*/
|
|
||||||
/*zoom: 2;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
|
||||||
|
|
||||||
@media screen and (max-height: 675px) {
|
|
||||||
.bgMiddle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo_small.png');
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(0px,-5px) scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
|
||||||
/*-moz-transform: translate(-3px,-3px);*/
|
|
||||||
}
|
|
||||||
#btnOops {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
-moz-transform: translate(5px,-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 128px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 560px) {
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 57px;
|
|
||||||
background-image: url('../img/logo_smaller_wide.png');
|
|
||||||
margin-top: 14px;
|
|
||||||
/*zoom: 0.8;*/
|
|
||||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
|
||||||
/*-moz-transform: ;*/
|
|
||||||
/*left: 34%;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 6px;
|
|
||||||
-moz-transform: translate(10px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
top: 350px;
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
|
||||||
}
|
|
||||||
#btnSave {
|
|
||||||
-moz-transform: translate(-5px,-13px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious, #btnNext {
|
|
||||||
/*top: 200px;*/
|
|
||||||
-moz-transform: translate(-5px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 110px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,329 +0,0 @@
|
|||||||
body {
|
|
||||||
/* This chops off any overhanging divs */
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#landscape {*/
|
|
||||||
/*position:relative;*/
|
|
||||||
/*width: 1024px;*/
|
|
||||||
/*max-height: 768px;*/
|
|
||||||
/*background-color: #808;*/
|
|
||||||
/*border: 10px solid #ff0;*/
|
|
||||||
/*margin: 0px auto;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
|
|
||||||
#verticalShapes {
|
|
||||||
position:absolute;
|
|
||||||
right: -56px;
|
|
||||||
bottom: 15px;
|
|
||||||
/*background-color: #fff;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.verticalshape {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 0px 5px 5px 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
/*background-color: #f0f;*/
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.straight {
|
|
||||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
|
||||||
}
|
|
||||||
.diverging {
|
|
||||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.converging {
|
|
||||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.sinus {
|
|
||||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Portrait */
|
|
||||||
@media screen and (orientation:portrait) {
|
|
||||||
body {
|
|
||||||
/* background-color: #08F;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Landscape */
|
|
||||||
@media screen and (orientation:landscape) {
|
|
||||||
body {
|
|
||||||
/* background-color: #8F0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uiButtonsContainer {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1024px;
|
|
||||||
min-height: 500px;
|
|
||||||
max-height: 768px;
|
|
||||||
height: 100%;
|
|
||||||
/* height: 768px;*/
|
|
||||||
}
|
|
||||||
.uiButtonsContainer:before {
|
|
||||||
content:' ';
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
right:0;
|
|
||||||
bottom:0;
|
|
||||||
border: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 31%;
|
|
||||||
width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background-image: url('../img/logo_full.png');
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 193px;
|
|
||||||
left: 193px;
|
|
||||||
width: 650px;
|
|
||||||
height: 450px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas, #preview {
|
|
||||||
/*border: 1px solid #08c;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas {
|
|
||||||
width: 500px;
|
|
||||||
height: 450px;
|
|
||||||
border: 0px solid #333;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview {
|
|
||||||
/*border: 1px solid #f8c;*/
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 150px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertImage {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
/*border: 2px solid #f0f;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto; /* for ie9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgTop {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgMiddle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgBottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRINT PROGRESS DISPLAY */
|
|
||||||
#printProgressContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 370px;
|
|
||||||
width: 110px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#progressbarContainer {
|
|
||||||
margin: 3px 0px;
|
|
||||||
width: inherit;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
}
|
|
||||||
.progressAmount {
|
|
||||||
margin: 0px 5px;
|
|
||||||
}
|
|
||||||
#progressbar {
|
|
||||||
position: relative;
|
|
||||||
/*margin-bottom: -20px;*/
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #4c4;
|
|
||||||
border: 0px solid #f0f;
|
|
||||||
border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* THERMOMETER */
|
|
||||||
#thermometerContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 360px;
|
|
||||||
}
|
|
||||||
#thermometerCanvas {
|
|
||||||
/*background: #59b2b8;*/
|
|
||||||
/*zoom: 2;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
|
||||||
|
|
||||||
@media screen and (max-height: 675px) {
|
|
||||||
.bgMiddle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo_small.png');
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(0px,-5px) scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
|
||||||
/*-moz-transform: translate(-3px,-3px);*/
|
|
||||||
}
|
|
||||||
#btnOops {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
-moz-transform: translate(5px,-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 128px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 560px) {
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 57px;
|
|
||||||
background-image: url('../img/logo_smaller_wide.png');
|
|
||||||
margin-top: 14px;
|
|
||||||
/*zoom: 0.8;*/
|
|
||||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
|
||||||
/*-moz-transform: ;*/
|
|
||||||
/*left: 34%;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 6px;
|
|
||||||
-moz-transform: translate(10px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
top: 350px;
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
|
||||||
}
|
|
||||||
#btnSave {
|
|
||||||
-moz-transform: translate(-5px,-13px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious, #btnNext {
|
|
||||||
/*top: 200px;*/
|
|
||||||
-moz-transform: translate(-5px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 110px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
#contentOverlay {
|
|
||||||
background-color: rgba(255, 255, 255, 0.65);
|
|
||||||
z-index: 10;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1024px;
|
|
||||||
height: 100%;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup {
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 15;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 835px;
|
|
||||||
height: 500px;
|
|
||||||
margin: -250px 0 0 -417.5px;
|
|
||||||
/*padding: 25px;*/
|
|
||||||
|
|
||||||
/*overflow: scroll;*/
|
|
||||||
/*overflow-y: hidden;*/
|
|
||||||
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
border: 2px solid #222;
|
|
||||||
border-radius: 15px;
|
|
||||||
-moz-border-radius: 15px;
|
|
||||||
-webkit-border-radius: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#settings header {
|
|
||||||
margin: 25px 25px 0 25px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
#settings div.content {
|
|
||||||
margin: 15px 25px 25px 25px;
|
|
||||||
height: 388px;
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
#settings div.content > div {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#settings div.content > div.settings {
|
|
||||||
border: 1px solid rgb(187, 187, 187);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
width: 660px;
|
|
||||||
overflow: scroll;
|
|
||||||
max-height: 368px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 10px 10px 10px 10px;
|
|
||||||
}
|
|
||||||
#settings div.content > div.manipulationBtns {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: bottom;
|
|
||||||
width: 125px;
|
|
||||||
|
|
||||||
}
|
|
||||||
#settings div.content .btnOK {
|
|
||||||
width: 85px;
|
|
||||||
height: 86px;
|
|
||||||
background: url('../img/buttons/btnOk_settings.png') no-repeat;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
form {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
form input {
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body,th,td {
|
|
||||||
font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
.settingsContainer {
|
|
||||||
position:relative;
|
|
||||||
max-width: 600px;
|
|
||||||
/*min-width: 370px;*/
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
/*form#settingsForm {*/
|
|
||||||
/*width: 100% auto;*/
|
|
||||||
/*}*/
|
|
||||||
form fieldset {
|
|
||||||
max-width: 600px;
|
|
||||||
border: 1px solid rgb(187, 187, 187);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 8px;
|
|
||||||
/*padding-right: 8px;*/
|
|
||||||
}
|
|
||||||
form fieldset fieldset{
|
|
||||||
max-width: 580px;
|
|
||||||
margin: 15px 0 5px 0;
|
|
||||||
clear: left;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
form fieldset legend {
|
|
||||||
margin-left: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
form label {
|
|
||||||
min-width: 150px;
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin: 1px 0 0 0;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
form div {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
form input[type="text"], form input[type="number"], form input[type="password"] {
|
|
||||||
border: 1px solid rgb(144, 192, 255);
|
|
||||||
margin-right: 5px;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
form input[type="text"].small, form input[type="number"].small, form input[type="password"].small {
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
form input[type="text"].large, form input[type="number"].large, form input[type="password"].large {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
form input[type="radio"] {
|
|
||||||
margin: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
form textarea {
|
|
||||||
border: 1px solid rgb(144, 192, 255);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
form .startgcode_left {
|
|
||||||
float:left;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
form textarea.gcode {
|
|
||||||
width: 252px;
|
|
||||||
/*max-width: 262px;*/
|
|
||||||
/*min-width: 200px;*/
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
form small {
|
|
||||||
margin: 3px 0 0 0;
|
|
||||||
display: block;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
form .button {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
form #passwordLabel, form #password {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
BIN
img_old/icon.png
BIN
img_old/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
@ -12,7 +12,7 @@
|
|||||||
var _timer = undefined;
|
var _timer = undefined;
|
||||||
var _x,_y;
|
var _x,_y;
|
||||||
var isDown = false;
|
var isDown = false;
|
||||||
var hoi = "fijn";
|
// var hoi = "fijn";
|
||||||
|
|
||||||
var updateCursor = function(e) {
|
var updateCursor = function(e) {
|
||||||
// console.log(e.offsetX);
|
// console.log(e.offsetX);
|
||||||
@ -80,22 +80,6 @@ function getPathFromChar(ch) {
|
|||||||
return $("#svgfont path")[index].attributes["d"].nodeValue;
|
return $("#svgfont path")[index].attributes["d"].nodeValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// function translatePoints(points,x,y) {
|
|
||||||
// for (var i=0; i<points.length; i++) {
|
|
||||||
// points[i].x += x;
|
|
||||||
// points[i].y += y;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function scalePoints(points,x,y) {
|
|
||||||
// if (y==undefined) y = x;
|
|
||||||
|
|
||||||
// for (var i=0; i<points.length; i++) {
|
|
||||||
// points[i].x *= x;
|
|
||||||
// points[i].y *= y;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
function getPointsFromPath(path) {
|
function getPointsFromPath(path) {
|
||||||
var points = [];
|
var points = [];
|
||||||
var cmds = path.split(' ');
|
var cmds = path.split(' ');
|
||||||
@ -115,19 +99,6 @@ function getPointsFromPath(path) {
|
|||||||
return points;
|
return points;
|
||||||
}
|
}
|
||||||
|
|
||||||
// function getBounds(points) {
|
|
||||||
// var xMin=9999,xMax=-9999,yMin=9999,yMax=-9999;
|
|
||||||
// for (var i=0; i<points.length; i++) {
|
|
||||||
// var p = points[i];
|
|
||||||
// xMin = Math.min(xMin,p.x);
|
|
||||||
// xMax = Math.max(xMax,p.x);
|
|
||||||
// yMin = Math.min(yMin,p.y);
|
|
||||||
// yMax = Math.max(yMax,p.y);
|
|
||||||
// }
|
|
||||||
// return {x:xMin,y:yMin,width:xMax-xMin,height:yMax-yMin};
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
function canvasDrawPoints(canvas,points) {
|
function canvasDrawPoints(canvas,points) {
|
||||||
beginShape();
|
beginShape();
|
||||||
for (var i=0; i<points.length; i++) {
|
for (var i=0; i<points.length; i++) {
|
||||||
@ -27,9 +27,11 @@ function initButtonBehavior() {
|
|||||||
btnSave = $(".btnSave");
|
btnSave = $(".btnSave");
|
||||||
btnWordArt = $(".btnWordArt");
|
btnWordArt = $(".btnWordArt");
|
||||||
btnZoom = $(".btnZoom");
|
btnZoom = $(".btnZoom");
|
||||||
btnUpDown = $(".btnUpDown");
|
btnUp = $(".btnUp");
|
||||||
|
btnDown = $(".btnDown");
|
||||||
btnMove = $(".btnMove");
|
btnMove = $(".btnMove");
|
||||||
btnTwist = $(".btnTwist");
|
btnTwistLeft = $(".btnTwistLeft");
|
||||||
|
btnTwistRight = $(".btnTwistRight");
|
||||||
btnShape = $(".btnShape");
|
btnShape = $(".btnShape");
|
||||||
btnRotate = $(".btnRotate");
|
btnRotate = $(".btnRotate");
|
||||||
btnEditClosed = $(".btnEditClosed");
|
btnEditClosed = $(".btnEditClosed");
|
||||||
@ -39,7 +41,9 @@ function initButtonBehavior() {
|
|||||||
btnConv = $(".btnConv");
|
btnConv = $(".btnConv");
|
||||||
btnSine = $(".btnSine");
|
btnSine = $(".btnSine");
|
||||||
btnAdd = $(".btnAdd");
|
btnAdd = $(".btnAdd");
|
||||||
|
btnToggleVertical = $(".btnToggleVertical");
|
||||||
buttonGroupAdd = $(".buttonGroupAdd");
|
buttonGroupAdd = $(".buttonGroupAdd");
|
||||||
|
buttonGroupVertical = $(".buttonGroupVertical");
|
||||||
popupWordArt = $(".popupWordArt");
|
popupWordArt = $(".popupWordArt");
|
||||||
popupShape = $(".popupShape");
|
popupShape = $(".popupShape");
|
||||||
|
|
||||||
@ -48,9 +52,11 @@ function initButtonBehavior() {
|
|||||||
btnPrint.on("onButtonClick", onBtnPrint);
|
btnPrint.on("onButtonClick", onBtnPrint);
|
||||||
btnZoom.on("onButtonHold", onBtnZoom);
|
btnZoom.on("onButtonHold", onBtnZoom);
|
||||||
btnOops.on("onButtonHold", onBtnOops);
|
btnOops.on("onButtonHold", onBtnOops);
|
||||||
btnUpDown.on("onButtonHold", onBtnUpDown);
|
btnUp.on("onButtonHold", onBtnUp);
|
||||||
btnMove.on("onButtonHold", onBtnMove);
|
btnDown.on("onButtonHold", onBtnDown);
|
||||||
btnTwist.on("onButtonHold", onBtnTwist);
|
// btnMove.on("onButtonHold", onBtnMove);
|
||||||
|
btnTwistLeft.on("onButtonHold", onBtnTwistLeft);
|
||||||
|
btnTwistRight.on("onButtonHold", onBtnTwistRight);
|
||||||
btnShape.on("onButtonClick", onBtnShape);
|
btnShape.on("onButtonClick", onBtnShape);
|
||||||
btnRotate.on("onButtonHold", onBtnRotate);
|
btnRotate.on("onButtonHold", onBtnRotate);
|
||||||
btnEditClosed.on("onButtonClick", onBtnEditClosed);
|
btnEditClosed.on("onButtonClick", onBtnEditClosed);
|
||||||
@ -61,11 +67,15 @@ function initButtonBehavior() {
|
|||||||
btnConv.on("onButtonClick", onBtnConv);
|
btnConv.on("onButtonClick", onBtnConv);
|
||||||
btnSine.on("onButtonClick", onBtnSine);
|
btnSine.on("onButtonClick", onBtnSine);
|
||||||
btnAdd.on("onButtonClick", onBtnAdd);
|
btnAdd.on("onButtonClick", onBtnAdd);
|
||||||
|
btnToggleVertical.on("onButtonClick", onBtnToggleVertical);
|
||||||
|
|
||||||
|
|
||||||
getSavedSketchStatus();
|
getSavedSketchStatus();
|
||||||
setSketchModified(false);
|
setSketchModified(false);
|
||||||
|
|
||||||
|
function onBtnToggleVertical() {
|
||||||
|
buttonGroupVertical.toggle();
|
||||||
|
}
|
||||||
|
|
||||||
function onBtnAdd() {
|
function onBtnAdd() {
|
||||||
buttonGroupAdd.toggle();
|
buttonGroupAdd.toggle();
|
||||||
@ -129,29 +139,35 @@ function initButtonBehavior() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBtnMove(e,cursor) {
|
// function onBtnMove(e,cursor) {
|
||||||
var btnUp = { x:40, y:19 };
|
// var btnUp = { x:40, y:19 };
|
||||||
var btnDown = { x:40, y:54 };
|
// var btnDown = { x:40, y:54 };
|
||||||
var btnLeft = { x:20, y:41 };
|
// var btnLeft = { x:20, y:41 };
|
||||||
var btnRight = { x:62, y:41 };
|
// var btnRight = { x:62, y:41 };
|
||||||
var step = 5;
|
// var step = 5;
|
||||||
var radius = 20;
|
// var radius = 20;
|
||||||
|
|
||||||
if (distance(cursor.x,cursor.y,btnLeft.x,btnLeft.y)<radius) moveShape(-step,0);
|
// if (distance(cursor.x,cursor.y,btnLeft.x,btnLeft.y)<radius) moveShape(-step,0);
|
||||||
else if (distance(cursor.x,cursor.y,btnRight.x,btnRight.y)<radius) moveShape(step,0);
|
// else if (distance(cursor.x,cursor.y,btnRight.x,btnRight.y)<radius) moveShape(step,0);
|
||||||
else if (distance(cursor.x,cursor.y,btnUp.x,btnUp.y)<radius) moveShape(0,-step);
|
// else if (distance(cursor.x,cursor.y,btnUp.x,btnUp.y)<radius) moveShape(0,-step);
|
||||||
else if (distance(cursor.x,cursor.y,btnDown.x,btnDown.y)<radius) moveShape(0,step);
|
// else if (distance(cursor.x,cursor.y,btnDown.x,btnDown.y)<radius) moveShape(0,step);
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
function onBtnUp(e) {
|
||||||
|
previewUp(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBtnUpDown(e,cursor) {
|
function onBtnDown(e) {
|
||||||
if (cursor.y<25) previewUp(true);
|
previewDown(true);
|
||||||
else if (cursor.y>55) previewDown(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBtnTwist(e,cursor) {
|
function onBtnTwistLeft(e) {
|
||||||
if (cursor.y<25) previewTwistRight(true);
|
previewTwistLeft(true);
|
||||||
else if (cursor.y>55) previewTwistLeft(true);
|
}
|
||||||
|
|
||||||
|
function onBtnTwistRight(e) {
|
||||||
|
previewTwistRight(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBtnOops(e) {
|
function onBtnOops(e) {
|
||||||
@ -1,136 +0,0 @@
|
|||||||
<<<<<<< HEAD
|
|
||||||
=======
|
|
||||||
var $displayThermometer = $("#thermometerContainer");
|
|
||||||
|
|
||||||
|
|
||||||
//TODO 2013-09-18 allow displaying temperatures HIGHER than the targTemp (it's now being capped at targTemp).
|
|
||||||
>>>>>>> new_layouting_approach
|
|
||||||
function Thermometer() {
|
|
||||||
this.currentTemperature = 0; // default val
|
|
||||||
this.targetTemperature = 180; // default val
|
|
||||||
|
|
||||||
this.thermoOverlayImg = new Image();
|
|
||||||
this.thermoOverlayImgSrc = "img/thermometer_fg_overlay.png"; // ../img/thermometer_fg_overlay.png
|
|
||||||
|
|
||||||
this.thermoWidth= 40;
|
|
||||||
this.thermoHeight = 100;
|
|
||||||
|
|
||||||
this.$canvas;
|
|
||||||
this.canvas;
|
|
||||||
this.context;
|
|
||||||
this.$container;
|
|
||||||
|
|
||||||
this.isInitted = false;
|
|
||||||
|
|
||||||
this.enabled = true;
|
|
||||||
|
|
||||||
this.thermoColors = [
|
|
||||||
[50, 200, 244], // 'cold'
|
|
||||||
[244, 190, 10], // 'warming up'
|
|
||||||
[244, 50, 50] // 'ready / hot'
|
|
||||||
];
|
|
||||||
|
|
||||||
this.init = function(targCanvas, targCanvasContainer) {
|
|
||||||
console.log("Thermometer.init()");
|
|
||||||
|
|
||||||
this.$container = targCanvasContainer;
|
|
||||||
|
|
||||||
this.$canvas = targCanvas;
|
|
||||||
this.canvas = this.$canvas[0];
|
|
||||||
this.context = this.canvas.getContext('2d');
|
|
||||||
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
this.thermoOverlayImg.onload = function() {
|
|
||||||
console.log("canvasThermoOverlay img loaded");
|
|
||||||
self.isInitted = true;
|
|
||||||
self.update(self.currentTemperature, self.targetTemperature);
|
|
||||||
};
|
|
||||||
this.thermoOverlayImg.src = this.thermoOverlayImgSrc;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.update = function(curr, targ) {
|
|
||||||
// console.log("Thermometer.update(" + curr + "," + targ + ")");
|
|
||||||
|
|
||||||
if (this.isInitted) {
|
|
||||||
if(!this.enabled) return;
|
|
||||||
if (curr == undefined) curr = 0;
|
|
||||||
if (targ== undefined) targ = 180; // prevent divide by zero
|
|
||||||
|
|
||||||
var progress = curr / targ;
|
|
||||||
|
|
||||||
progress = Math.min(progress, 1.0);
|
|
||||||
progress = Math.max(progress, 0);
|
|
||||||
|
|
||||||
var h = this.thermoHeight; // 94 // px
|
|
||||||
var paddingUnder = 15; // how far is beginpoint from bottom of thermometer
|
|
||||||
var paddingAbove = 25; // how far is endpoint from top of thermometer
|
|
||||||
var endPoint = h * .8;
|
|
||||||
var p = Math.floor((h - paddingUnder - paddingAbove) * progress); // %
|
|
||||||
// var tempHeight =
|
|
||||||
|
|
||||||
var currColor = this.thermoColors[0];
|
|
||||||
if (progress > 0.98) {
|
|
||||||
currColor = this.thermoColors[2];
|
|
||||||
} else if (progress > 0.25) {
|
|
||||||
currColor = this.thermoColors[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
// clear
|
|
||||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
||||||
this.context.font = "10pt sans-serif";
|
|
||||||
|
|
||||||
// draw the thermometer clipping path
|
|
||||||
this.context.save();
|
|
||||||
this.context.beginPath();
|
|
||||||
this.context.arc(40, 80, 16, 0, 2 * Math.PI, false); // circle bottom of thermometer
|
|
||||||
this.context.arc(40, 10, 4, 0, 2 * Math.PI, false); // circle at top of thermometer tube
|
|
||||||
this.context.rect(36, 11, 8, 70); // thermometer tube
|
|
||||||
this.context.fillStyle = '#fff';
|
|
||||||
this.context.fill();
|
|
||||||
this.context.clip();
|
|
||||||
|
|
||||||
// draw rectangle which represents temperature
|
|
||||||
// rect will be clipped by the thermometer outlines
|
|
||||||
this.context.beginPath();
|
|
||||||
this.context.rect(20, h - paddingUnder - p, 60, p + paddingUnder);
|
|
||||||
//console.log(" currColor: " + currColor);
|
|
||||||
//todo Math.floor??
|
|
||||||
this.context.fillStyle = "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")";
|
|
||||||
this.context.fill();
|
|
||||||
this.context.restore();
|
|
||||||
|
|
||||||
// additional text labels
|
|
||||||
this.context.save();
|
|
||||||
this.context.beginPath();
|
|
||||||
this.context.moveTo(32, paddingAbove);
|
|
||||||
this.context.lineTo(52, paddingAbove);
|
|
||||||
this.context.lineWidth = 2;
|
|
||||||
this.context.strokeStyle = '#000';
|
|
||||||
this.context.stroke();
|
|
||||||
this.context.fillStyle = '#000';
|
|
||||||
this.context.textAlign = "left";
|
|
||||||
this.context.textBaseline = "middle";
|
|
||||||
this.context.fillText(targ + "°", 55, paddingAbove);
|
|
||||||
this.context.restore();
|
|
||||||
|
|
||||||
// the thermometer outline png
|
|
||||||
this.context.drawImage(this.thermoOverlayImg, 20, 0);
|
|
||||||
|
|
||||||
// text
|
|
||||||
this.context.fillStyle = '#000';
|
|
||||||
this.context.textAlign="center";
|
|
||||||
this.context.fillText(curr + "°", 40, h + paddingUnder);
|
|
||||||
} else {
|
|
||||||
console.log("Thermometer.setTemperature() -> thermometer not initialized!");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.show = function() {
|
|
||||||
this.$container.show();
|
|
||||||
this.enabled = true;
|
|
||||||
}
|
|
||||||
this.hide = function() {
|
|
||||||
this.$container.hide();
|
|
||||||
this.enabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,260 +0,0 @@
|
|||||||
var imgDims = [320, 320]; // width and height of image
|
|
||||||
|
|
||||||
function doClientAndOrientationStuff() {
|
|
||||||
console.log("f:doClientAndOrientationStuff()");
|
|
||||||
|
|
||||||
$(".agentInfo").text("");
|
|
||||||
|
|
||||||
/*
|
|
||||||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
|
|
||||||
if (window.orientation == -90 || window.orientation == 90) {
|
|
||||||
// landscape
|
|
||||||
// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
|
|
||||||
} else {
|
|
||||||
// portrait
|
|
||||||
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
//*/
|
|
||||||
|
|
||||||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
|
|
||||||
console.log("PHONE OR TABLET! --> window.orientation = " + window.orientation);
|
|
||||||
if (window.orientation == -90 || window.orientation == 90) {
|
|
||||||
console.log(" landscape");
|
|
||||||
// landscape
|
|
||||||
|
|
||||||
// var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
|
|
||||||
var ww = 0; //get proper width
|
|
||||||
if (window.innerWidth) {
|
|
||||||
ww = window.innerWidth;
|
|
||||||
// if (window.screen.availWidth) {
|
|
||||||
// ww = window.screen.availWidth;
|
|
||||||
|
|
||||||
// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
|
||||||
// ww = window.innerWidth;
|
|
||||||
// }
|
|
||||||
} else if($(window).width()) {
|
|
||||||
ww = $(window).width();
|
|
||||||
} else {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// ww = 480;
|
|
||||||
|
|
||||||
var mw = imgDims[0]; // min width of site
|
|
||||||
//*
|
|
||||||
if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
|
||||||
var mw = imgDims[1]; // in landscape: min-width is image width
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
var ratio = ww / mw; //calculate ratio
|
|
||||||
$('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=no,width='+mw);
|
|
||||||
if( ww < mw){ //smaller than minimum size
|
|
||||||
// $(".colmask").css("background-color", "#ff0");
|
|
||||||
// $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
|
|
||||||
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
|
|
||||||
}else{ //regular size
|
|
||||||
// $(".colmask").css("background-color", "#0ff");
|
|
||||||
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(" ww: " + ww + ", mw: " + mw + ", ratio: " + ratio);
|
|
||||||
|
|
||||||
$(".agentInfo").append("ww: " + ww + ", mw: " + mw + "<br/>");
|
|
||||||
$(".agentInfo").append("ratio: " + ratio + "<br/>");
|
|
||||||
$(".agentInfo").append("<br/>");
|
|
||||||
} else {
|
|
||||||
console.log(" portrait");
|
|
||||||
// portrait
|
|
||||||
// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no');
|
|
||||||
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no');
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// console.log("else");
|
|
||||||
$(".colmask").css("background-color", "#f80");
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$(".agentInfo").append("$(window).width(): " + $(window).width() + "<br/>");
|
|
||||||
$(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
|
|
||||||
$(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
|
|
||||||
$(".agentInfo").append("<br/>");
|
|
||||||
$(".agentInfo").append("window.innerWidth: " + window.innerWidth + "<br/>");
|
|
||||||
$(".agentInfo").append("window.innerHeight: " + window.innerHeight + "<br/>");
|
|
||||||
$(".agentInfo").append("<br/>");
|
|
||||||
$(".agentInfo").append("$(window).height(): " + $(window).height() + "<br/>");
|
|
||||||
$(".agentInfo").append("window.screen.height: " + window.screen.height+ "<br/>");
|
|
||||||
$(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "<br/>");
|
|
||||||
$(".agentInfo").append("<br/>");
|
|
||||||
$(".agentInfo").append("user agent: " + navigator.userAgent + "<br/>");
|
|
||||||
};
|
|
||||||
|
|
||||||
function doOnOrientationChange() {
|
|
||||||
console.log("doOnOrientationChange");
|
|
||||||
doClientAndOrientationStuff();
|
|
||||||
|
|
||||||
// switch(window.orientation) {
|
|
||||||
// case -90:
|
|
||||||
// case 90:
|
|
||||||
// alert('landscape');
|
|
||||||
// break;
|
|
||||||
// default:
|
|
||||||
// alert('portrait');
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
var drawAreaContainerMinHeight = 300;
|
|
||||||
var drawAreaContainerMaxHeight = 450;
|
|
||||||
function doOnResize() {
|
|
||||||
// console.log("doOnResize() >> " + new Date().getTime());
|
|
||||||
// $(".container").css("height", window.innerHeight);
|
|
||||||
|
|
||||||
// code from new layouting approach... //TODO give this a more logical spot
|
|
||||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
|
||||||
|
|
||||||
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
|
||||||
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
|
||||||
// canvas.width = canvas.clientWidth;
|
|
||||||
// canvas.height = canvas.clientHeight;
|
|
||||||
|
|
||||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
|
||||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
|
||||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
|
||||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
|
||||||
|
|
||||||
preview.width = 150;
|
|
||||||
preview.height = $drawAreaContainer.height();
|
|
||||||
// preview.width = parseInt($preview.css("width"), 10);
|
|
||||||
// preview.height = parseInt($preview.css("height"), 10);
|
|
||||||
|
|
||||||
canvasWidth = canvas.width;
|
|
||||||
canvasHeight = canvas.height;
|
|
||||||
|
|
||||||
redrawDoodle();
|
|
||||||
redrawPreview();
|
|
||||||
|
|
||||||
return;
|
|
||||||
|
|
||||||
// doClientAndOrientationStuff() // <-- is this necessary in this method?
|
|
||||||
|
|
||||||
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
|
|
||||||
if (window.innerHeight < 768) {
|
|
||||||
// $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
|
|
||||||
var newVal = window.innerHeight - $("#drawAreaContainer").offset().top - 100; // what's the 70 ??
|
|
||||||
newVal = Math.max(newVal, drawAreaContainerMinHeight);
|
|
||||||
newVal = Math.min(newVal, drawAreaContainerMaxHeight);
|
|
||||||
|
|
||||||
$('#drawAreaContainer').innerHeight(newVal);
|
|
||||||
|
|
||||||
// canvas drawing area
|
|
||||||
$canvas.css("height", newVal);
|
|
||||||
canvas.height = newVal;
|
|
||||||
canvasWidth = canvas.width;
|
|
||||||
canvasHeight = canvas.height;
|
|
||||||
|
|
||||||
// preview area
|
|
||||||
$preview.css("height", newVal);
|
|
||||||
preview.height = newVal;
|
|
||||||
layerOffsetY = preview.height - 1.75 * layerCY;
|
|
||||||
yStep = preview.height / 150;
|
|
||||||
|
|
||||||
redrawDoodle();
|
|
||||||
redrawPreview();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initLayouting() {
|
|
||||||
console.log("f:initLayouting()");
|
|
||||||
|
|
||||||
// first set the css width/height and actual width/height of the drawing area
|
|
||||||
<!--div drawAreaContainer 650,450-->
|
|
||||||
<!--canvas mycanvas 500, 450-->
|
|
||||||
<!--canvas preview 150, 450-->
|
|
||||||
|
|
||||||
// $doodleCanvas = $("#mycanvas");
|
|
||||||
// doodleCanvas = $("#mycanvas")[0];
|
|
||||||
// doodleCanvasContext = doodleCanvas.getContext('2d');
|
|
||||||
|
|
||||||
$drawAreaContainer = $("#drawAreaContainer");
|
|
||||||
$drawAreaContainer.css("margin", 0);
|
|
||||||
$drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
|
|
||||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
|
||||||
|
|
||||||
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
|
||||||
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
|
||||||
// canvas.width = canvas.clientWidth;
|
|
||||||
// canvas.height = canvas.clientHeight;
|
|
||||||
|
|
||||||
preview.width = 150;
|
|
||||||
preview.height = $drawAreaContainer.height();
|
|
||||||
|
|
||||||
// code from new layouting approach... //TODO give this a more logical spot
|
|
||||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
|
||||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
|
||||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
|
||||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
|
||||||
// preview.width = parseInt($preview.css("width"), 10);
|
|
||||||
// preview.height = parseInt($preview.css("height"), 10);
|
|
||||||
canvasWidth = canvas.width;
|
|
||||||
canvasHeight = canvas.height;
|
|
||||||
|
|
||||||
// console.log("f:initLayouting() >> canvas height: " + canvas.height);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
|
||||||
// imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
|
||||||
|
|
||||||
// imgDims = [1024, 768];
|
|
||||||
|
|
||||||
/*
|
|
||||||
if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
|
|
||||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
|
||||||
} else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
|
||||||
imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
|
||||||
} else {
|
|
||||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
|
|
||||||
// $(".container").css("height", window.innerHeight);
|
|
||||||
|
|
||||||
// window.innerHeight
|
|
||||||
console.log("window.innerHeight: " + window.innerHeight);
|
|
||||||
console.log("window.innerWidth: " + window.innerWidth);
|
|
||||||
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
|
|
||||||
console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
|
|
||||||
|
|
||||||
|
|
||||||
/* 2013-07-26 not doing this resizing stuff now, it's not working well yet
|
|
||||||
if (window.innerHeight < 768) {
|
|
||||||
$('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
|
|
||||||
// timeout because it SEEMS to be beneficial for initting the layout
|
|
||||||
// 2013-09-18 seems beneficial since when?
|
|
||||||
setTimeout(_startOrientationAndChangeEventListening, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _startOrientationAndChangeEventListening() {
|
|
||||||
// Initial execution if needed
|
|
||||||
|
|
||||||
$(window).on('resize', doOnResize);
|
|
||||||
|
|
||||||
// if (!window.addEventListener) {
|
|
||||||
// window.attachEvent('orientationchange', doOnOrientationChange, false);
|
|
||||||
// window.attachEvent('resize', doOnResize, false);
|
|
||||||
// } else {
|
|
||||||
// window.addEventListener('orientationchange', doOnOrientationChange, false);
|
|
||||||
// window.addEventListener('resize', doOnResize, false);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// is it necessary to call these? Aren't they called by the above eventhandlers?
|
|
||||||
// doClientAndOrientationStuff();
|
|
||||||
doOnResize();
|
|
||||||
}
|
|
||||||
2280
js_old/libs/bootstrap.js
vendored
2280
js_old/libs/bootstrap.js
vendored
File diff suppressed because it is too large
Load Diff
6
js_old/libs/bootstrap.min.js
vendored
6
js_old/libs/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,35 +0,0 @@
|
|||||||
// Copyright 2006 Google Inc.
|
|
||||||
//
|
|
||||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
// you may not use this file except in compliance with the License.
|
|
||||||
// You may obtain a copy of the License at
|
|
||||||
//
|
|
||||||
// http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
//
|
|
||||||
// Unless required by applicable law or agreed to in writing, software
|
|
||||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
// See the License for the specific language governing permissions and
|
|
||||||
// limitations under the License.
|
|
||||||
document.createElement("canvas").getContext||(function(){var s=Math,j=s.round,F=s.sin,G=s.cos,V=s.abs,W=s.sqrt,k=10,v=k/2;function X(){return this.context_||(this.context_=new H(this))}var L=Array.prototype.slice;function Y(b,a){var c=L.call(arguments,2);return function(){return b.apply(a,c.concat(L.call(arguments)))}}var M={init:function(b){if(/MSIE/.test(navigator.userAgent)&&!window.opera){var a=b||document;a.createElement("canvas");a.attachEvent("onreadystatechange",Y(this.init_,this,a))}},init_:function(b){b.namespaces.g_vml_||
|
|
||||||
b.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML");b.namespaces.g_o_||b.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML");if(!b.styleSheets.ex_canvas_){var a=b.createStyleSheet();a.owningElement.id="ex_canvas_";a.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}"}var c=b.getElementsByTagName("canvas"),d=0;for(;d<c.length;d++)this.initElement(c[d])},
|
|
||||||
initElement:function(b){if(!b.getContext){b.getContext=X;b.innerHTML="";b.attachEvent("onpropertychange",Z);b.attachEvent("onresize",$);var a=b.attributes;if(a.width&&a.width.specified)b.style.width=a.width.nodeValue+"px";else b.width=b.clientWidth;if(a.height&&a.height.specified)b.style.height=a.height.nodeValue+"px";else b.height=b.clientHeight}return b}};function Z(b){var a=b.srcElement;switch(b.propertyName){case "width":a.style.width=a.attributes.width.nodeValue+"px";a.getContext().clearRect();
|
|
||||||
break;case "height":a.style.height=a.attributes.height.nodeValue+"px";a.getContext().clearRect();break}}function $(b){var a=b.srcElement;if(a.firstChild){a.firstChild.style.width=a.clientWidth+"px";a.firstChild.style.height=a.clientHeight+"px"}}M.init();var N=[],B=0;for(;B<16;B++){var C=0;for(;C<16;C++)N[B*16+C]=B.toString(16)+C.toString(16)}function I(){return[[1,0,0],[0,1,0],[0,0,1]]}function y(b,a){var c=I(),d=0;for(;d<3;d++){var f=0;for(;f<3;f++){var h=0,g=0;for(;g<3;g++)h+=b[d][g]*a[g][f];c[d][f]=
|
|
||||||
h}}return c}function O(b,a){a.fillStyle=b.fillStyle;a.lineCap=b.lineCap;a.lineJoin=b.lineJoin;a.lineWidth=b.lineWidth;a.miterLimit=b.miterLimit;a.shadowBlur=b.shadowBlur;a.shadowColor=b.shadowColor;a.shadowOffsetX=b.shadowOffsetX;a.shadowOffsetY=b.shadowOffsetY;a.strokeStyle=b.strokeStyle;a.globalAlpha=b.globalAlpha;a.arcScaleX_=b.arcScaleX_;a.arcScaleY_=b.arcScaleY_;a.lineScale_=b.lineScale_}function P(b){var a,c=1;b=String(b);if(b.substring(0,3)=="rgb"){var d=b.indexOf("(",3),f=b.indexOf(")",d+
|
|
||||||
1),h=b.substring(d+1,f).split(",");a="#";var g=0;for(;g<3;g++)a+=N[Number(h[g])];if(h.length==4&&b.substr(3,1)=="a")c=h[3]}else a=b;return{color:a,alpha:c}}function aa(b){switch(b){case "butt":return"flat";case "round":return"round";case "square":default:return"square"}}function H(b){this.m_=I();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.fillStyle=this.strokeStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=k*1;this.globalAlpha=1;this.canvas=b;
|
|
||||||
var a=b.ownerDocument.createElement("div");a.style.width=b.clientWidth+"px";a.style.height=b.clientHeight+"px";a.style.overflow="hidden";a.style.position="absolute";b.appendChild(a);this.element_=a;this.lineScale_=this.arcScaleY_=this.arcScaleX_=1}var i=H.prototype;i.clearRect=function(){this.element_.innerHTML=""};i.beginPath=function(){this.currentPath_=[]};i.moveTo=function(b,a){var c=this.getCoords_(b,a);this.currentPath_.push({type:"moveTo",x:c.x,y:c.y});this.currentX_=c.x;this.currentY_=c.y};
|
|
||||||
i.lineTo=function(b,a){var c=this.getCoords_(b,a);this.currentPath_.push({type:"lineTo",x:c.x,y:c.y});this.currentX_=c.x;this.currentY_=c.y};i.bezierCurveTo=function(b,a,c,d,f,h){var g=this.getCoords_(f,h),l=this.getCoords_(b,a),e=this.getCoords_(c,d);Q(this,l,e,g)};function Q(b,a,c,d){b.currentPath_.push({type:"bezierCurveTo",cp1x:a.x,cp1y:a.y,cp2x:c.x,cp2y:c.y,x:d.x,y:d.y});b.currentX_=d.x;b.currentY_=d.y}i.quadraticCurveTo=function(b,a,c,d){var f=this.getCoords_(b,a),h=this.getCoords_(c,d),g={x:this.currentX_+
|
|
||||||
0.6666666666666666*(f.x-this.currentX_),y:this.currentY_+0.6666666666666666*(f.y-this.currentY_)};Q(this,g,{x:g.x+(h.x-this.currentX_)/3,y:g.y+(h.y-this.currentY_)/3},h)};i.arc=function(b,a,c,d,f,h){c*=k;var g=h?"at":"wa",l=b+G(d)*c-v,e=a+F(d)*c-v,m=b+G(f)*c-v,r=a+F(f)*c-v;if(l==m&&!h)l+=0.125;var n=this.getCoords_(b,a),o=this.getCoords_(l,e),q=this.getCoords_(m,r);this.currentPath_.push({type:g,x:n.x,y:n.y,radius:c,xStart:o.x,yStart:o.y,xEnd:q.x,yEnd:q.y})};i.rect=function(b,a,c,d){this.moveTo(b,
|
|
||||||
a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath()};i.strokeRect=function(b,a,c,d){var f=this.currentPath_;this.beginPath();this.moveTo(b,a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath();this.stroke();this.currentPath_=f};i.fillRect=function(b,a,c,d){var f=this.currentPath_;this.beginPath();this.moveTo(b,a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath();this.fill();this.currentPath_=f};i.createLinearGradient=function(b,
|
|
||||||
a,c,d){var f=new D("gradient");f.x0_=b;f.y0_=a;f.x1_=c;f.y1_=d;return f};i.createRadialGradient=function(b,a,c,d,f,h){var g=new D("gradientradial");g.x0_=b;g.y0_=a;g.r0_=c;g.x1_=d;g.y1_=f;g.r1_=h;return g};i.drawImage=function(b){var a,c,d,f,h,g,l,e,m=b.runtimeStyle.width,r=b.runtimeStyle.height;b.runtimeStyle.width="auto";b.runtimeStyle.height="auto";var n=b.width,o=b.height;b.runtimeStyle.width=m;b.runtimeStyle.height=r;if(arguments.length==3){a=arguments[1];c=arguments[2];h=g=0;l=d=n;e=f=o}else if(arguments.length==
|
|
||||||
5){a=arguments[1];c=arguments[2];d=arguments[3];f=arguments[4];h=g=0;l=n;e=o}else if(arguments.length==9){h=arguments[1];g=arguments[2];l=arguments[3];e=arguments[4];a=arguments[5];c=arguments[6];d=arguments[7];f=arguments[8]}else throw Error("Invalid number of arguments");var q=this.getCoords_(a,c),t=[];t.push(" <g_vml_:group",' coordsize="',k*10,",",k*10,'"',' coordorigin="0,0"',' style="width:',10,"px;height:",10,"px;position:absolute;");if(this.m_[0][0]!=1||this.m_[0][1]){var E=[];E.push("M11=",
|
|
||||||
this.m_[0][0],",","M12=",this.m_[1][0],",","M21=",this.m_[0][1],",","M22=",this.m_[1][1],",","Dx=",j(q.x/k),",","Dy=",j(q.y/k),"");var p=q,z=this.getCoords_(a+d,c),w=this.getCoords_(a,c+f),x=this.getCoords_(a+d,c+f);p.x=s.max(p.x,z.x,w.x,x.x);p.y=s.max(p.y,z.y,w.y,x.y);t.push("padding:0 ",j(p.x/k),"px ",j(p.y/k),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",E.join(""),", sizingmethod='clip');")}else t.push("top:",j(q.y/k),"px;left:",j(q.x/k),"px;");t.push(' ">','<g_vml_:image src="',b.src,
|
|
||||||
'"',' style="width:',k*d,"px;"," height:",k*f,'px;"',' cropleft="',h/n,'"',' croptop="',g/o,'"',' cropright="',(n-h-l)/n,'"',' cropbottom="',(o-g-e)/o,'"'," />","</g_vml_:group>");this.element_.insertAdjacentHTML("BeforeEnd",t.join(""))};i.stroke=function(b){var a=[],c=P(b?this.fillStyle:this.strokeStyle),d=c.color,f=c.alpha*this.globalAlpha;a.push("<g_vml_:shape",' filled="',!!b,'"',' style="position:absolute;width:',10,"px;height:",10,'px;"',' coordorigin="0 0" coordsize="',k*10," ",k*10,'"',' stroked="',
|
|
||||||
!b,'"',' path="');var h={x:null,y:null},g={x:null,y:null},l=0;for(;l<this.currentPath_.length;l++){var e=this.currentPath_[l];switch(e.type){case "moveTo":a.push(" m ",j(e.x),",",j(e.y));break;case "lineTo":a.push(" l ",j(e.x),",",j(e.y));break;case "close":a.push(" x ");e=null;break;case "bezierCurveTo":a.push(" c ",j(e.cp1x),",",j(e.cp1y),",",j(e.cp2x),",",j(e.cp2y),",",j(e.x),",",j(e.y));break;case "at":case "wa":a.push(" ",e.type," ",j(e.x-this.arcScaleX_*e.radius),",",j(e.y-this.arcScaleY_*e.radius),
|
|
||||||
" ",j(e.x+this.arcScaleX_*e.radius),",",j(e.y+this.arcScaleY_*e.radius)," ",j(e.xStart),",",j(e.yStart)," ",j(e.xEnd),",",j(e.yEnd));break}if(e){if(h.x==null||e.x<h.x)h.x=e.x;if(g.x==null||e.x>g.x)g.x=e.x;if(h.y==null||e.y<h.y)h.y=e.y;if(g.y==null||e.y>g.y)g.y=e.y}}a.push(' ">');if(b)if(typeof this.fillStyle=="object"){var m=this.fillStyle,r=0,n={x:0,y:0},o=0,q=1;if(m.type_=="gradient"){var t=m.x1_/this.arcScaleX_,E=m.y1_/this.arcScaleY_,p=this.getCoords_(m.x0_/this.arcScaleX_,m.y0_/this.arcScaleY_),
|
|
||||||
z=this.getCoords_(t,E);r=Math.atan2(z.x-p.x,z.y-p.y)*180/Math.PI;if(r<0)r+=360;if(r<1.0E-6)r=0}else{var p=this.getCoords_(m.x0_,m.y0_),w=g.x-h.x,x=g.y-h.y;n={x:(p.x-h.x)/w,y:(p.y-h.y)/x};w/=this.arcScaleX_*k;x/=this.arcScaleY_*k;var R=s.max(w,x);o=2*m.r0_/R;q=2*m.r1_/R-o}var u=m.colors_;u.sort(function(ba,ca){return ba.offset-ca.offset});var J=u.length,da=u[0].color,ea=u[J-1].color,fa=u[0].alpha*this.globalAlpha,ga=u[J-1].alpha*this.globalAlpha,S=[],l=0;for(;l<J;l++){var T=u[l];S.push(T.offset*q+
|
|
||||||
o+" "+T.color)}a.push('<g_vml_:fill type="',m.type_,'"',' method="none" focus="100%"',' color="',da,'"',' color2="',ea,'"',' colors="',S.join(","),'"',' opacity="',ga,'"',' g_o_:opacity2="',fa,'"',' angle="',r,'"',' focusposition="',n.x,",",n.y,'" />')}else a.push('<g_vml_:fill color="',d,'" opacity="',f,'" />');else{var K=this.lineScale_*this.lineWidth;if(K<1)f*=K;a.push("<g_vml_:stroke",' opacity="',f,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',aa(this.lineCap),
|
|
||||||
'"',' weight="',K,'px"',' color="',d,'" />')}a.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",a.join(""))};i.fill=function(){this.stroke(true)};i.closePath=function(){this.currentPath_.push({type:"close"})};i.getCoords_=function(b,a){var c=this.m_;return{x:k*(b*c[0][0]+a*c[1][0]+c[2][0])-v,y:k*(b*c[0][1]+a*c[1][1]+c[2][1])-v}};i.save=function(){var b={};O(this,b);this.aStack_.push(b);this.mStack_.push(this.m_);this.m_=y(I(),this.m_)};i.restore=function(){O(this.aStack_.pop(),
|
|
||||||
this);this.m_=this.mStack_.pop()};function ha(b){var a=0;for(;a<3;a++){var c=0;for(;c<2;c++)if(!isFinite(b[a][c])||isNaN(b[a][c]))return false}return true}function A(b,a,c){if(!!ha(a)){b.m_=a;if(c)b.lineScale_=W(V(a[0][0]*a[1][1]-a[0][1]*a[1][0]))}}i.translate=function(b,a){A(this,y([[1,0,0],[0,1,0],[b,a,1]],this.m_),false)};i.rotate=function(b){var a=G(b),c=F(b);A(this,y([[a,c,0],[-c,a,0],[0,0,1]],this.m_),false)};i.scale=function(b,a){this.arcScaleX_*=b;this.arcScaleY_*=a;A(this,y([[b,0,0],[0,a,
|
|
||||||
0],[0,0,1]],this.m_),true)};i.transform=function(b,a,c,d,f,h){A(this,y([[b,a,0],[c,d,0],[f,h,1]],this.m_),true)};i.setTransform=function(b,a,c,d,f,h){A(this,[[b,a,0],[c,d,0],[f,h,1]],true)};i.clip=function(){};i.arcTo=function(){};i.createPattern=function(){return new U};function D(b){this.type_=b;this.r1_=this.y1_=this.x1_=this.r0_=this.y0_=this.x0_=0;this.colors_=[]}D.prototype.addColorStop=function(b,a){a=P(a);this.colors_.push({offset:b,color:a.color,alpha:a.alpha})};function U(){}G_vmlCanvasManager=
|
|
||||||
M;CanvasRenderingContext2D=H;CanvasGradient=D;CanvasPattern=U})();
|
|
||||||
@ -1,924 +0,0 @@
|
|||||||
// Copyright 2006 Google Inc.
|
|
||||||
//
|
|
||||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
// you may not use this file except in compliance with the License.
|
|
||||||
// You may obtain a copy of the License at
|
|
||||||
//
|
|
||||||
// http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
//
|
|
||||||
// Unless required by applicable law or agreed to in writing, software
|
|
||||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
// See the License for the specific language governing permissions and
|
|
||||||
// limitations under the License.
|
|
||||||
|
|
||||||
|
|
||||||
// Known Issues:
|
|
||||||
//
|
|
||||||
// * Patterns are not implemented.
|
|
||||||
// * Radial gradient are not implemented. The VML version of these look very
|
|
||||||
// different from the canvas one.
|
|
||||||
// * Clipping paths are not implemented.
|
|
||||||
// * Coordsize. The width and height attribute have higher priority than the
|
|
||||||
// width and height style values which isn't correct.
|
|
||||||
// * Painting mode isn't implemented.
|
|
||||||
// * Canvas width/height should is using content-box by default. IE in
|
|
||||||
// Quirks mode will draw the canvas using border-box. Either change your
|
|
||||||
// doctype to HTML5
|
|
||||||
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
|
|
||||||
// or use Box Sizing Behavior from WebFX
|
|
||||||
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
|
|
||||||
// * Non uniform scaling does not correctly scale strokes.
|
|
||||||
// * Optimize. There is always room for speed improvements.
|
|
||||||
|
|
||||||
// Only add this code if we do not already have a canvas implementation
|
|
||||||
if (!document.createElement('canvas').getContext) {
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
|
|
||||||
// alias some functions to make (compiled) code shorter
|
|
||||||
var m = Math;
|
|
||||||
var mr = m.round;
|
|
||||||
var ms = m.sin;
|
|
||||||
var mc = m.cos;
|
|
||||||
var abs = m.abs;
|
|
||||||
var sqrt = m.sqrt;
|
|
||||||
|
|
||||||
// this is used for sub pixel precision
|
|
||||||
var Z = 10;
|
|
||||||
var Z2 = Z / 2;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This funtion is assigned to the <canvas> elements as element.getContext().
|
|
||||||
* @this {HTMLElement}
|
|
||||||
* @return {CanvasRenderingContext2D_}
|
|
||||||
*/
|
|
||||||
function getContext() {
|
|
||||||
return this.context_ ||
|
|
||||||
(this.context_ = new CanvasRenderingContext2D_(this));
|
|
||||||
}
|
|
||||||
|
|
||||||
var slice = Array.prototype.slice;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Binds a function to an object. The returned function will always use the
|
|
||||||
* passed in {@code obj} as {@code this}.
|
|
||||||
*
|
|
||||||
* Example:
|
|
||||||
*
|
|
||||||
* g = bind(f, obj, a, b)
|
|
||||||
* g(c, d) // will do f.call(obj, a, b, c, d)
|
|
||||||
*
|
|
||||||
* @param {Function} f The function to bind the object to
|
|
||||||
* @param {Object} obj The object that should act as this when the function
|
|
||||||
* is called
|
|
||||||
* @param {*} var_args Rest arguments that will be used as the initial
|
|
||||||
* arguments when the function is called
|
|
||||||
* @return {Function} A new function that has bound this
|
|
||||||
*/
|
|
||||||
function bind(f, obj, var_args) {
|
|
||||||
var a = slice.call(arguments, 2);
|
|
||||||
return function() {
|
|
||||||
return f.apply(obj, a.concat(slice.call(arguments)));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var G_vmlCanvasManager_ = {
|
|
||||||
init: function(opt_doc) {
|
|
||||||
if (/MSIE/.test(navigator.userAgent) && !window.opera) {
|
|
||||||
var doc = opt_doc || document;
|
|
||||||
// Create a dummy element so that IE will allow canvas elements to be
|
|
||||||
// recognized.
|
|
||||||
doc.createElement('canvas');
|
|
||||||
doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
init_: function(doc) {
|
|
||||||
// create xmlns
|
|
||||||
if (!doc.namespaces['g_vml_']) {
|
|
||||||
doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml',
|
|
||||||
'#default#VML');
|
|
||||||
|
|
||||||
}
|
|
||||||
if (!doc.namespaces['g_o_']) {
|
|
||||||
doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office',
|
|
||||||
'#default#VML');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setup default CSS. Only add one style sheet per document
|
|
||||||
if (!doc.styleSheets['ex_canvas_']) {
|
|
||||||
var ss = doc.createStyleSheet();
|
|
||||||
ss.owningElement.id = 'ex_canvas_';
|
|
||||||
ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
|
|
||||||
// default size is 300x150 in Gecko and Opera
|
|
||||||
'text-align:left;width:300px;height:150px}' +
|
|
||||||
'g_vml_\\:*{behavior:url(#default#VML)}' +
|
|
||||||
'g_o_\\:*{behavior:url(#default#VML)}';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// find all canvas elements
|
|
||||||
var els = doc.getElementsByTagName('canvas');
|
|
||||||
for (var i = 0; i < els.length; i++) {
|
|
||||||
this.initElement(els[i]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Public initializes a canvas element so that it can be used as canvas
|
|
||||||
* element from now on. This is called automatically before the page is
|
|
||||||
* loaded but if you are creating elements using createElement you need to
|
|
||||||
* make sure this is called on the element.
|
|
||||||
* @param {HTMLElement} el The canvas element to initialize.
|
|
||||||
* @return {HTMLElement} the element that was created.
|
|
||||||
*/
|
|
||||||
initElement: function(el) {
|
|
||||||
if (!el.getContext) {
|
|
||||||
|
|
||||||
el.getContext = getContext;
|
|
||||||
|
|
||||||
// Remove fallback content. There is no way to hide text nodes so we
|
|
||||||
// just remove all childNodes. We could hide all elements and remove
|
|
||||||
// text nodes but who really cares about the fallback content.
|
|
||||||
el.innerHTML = '';
|
|
||||||
|
|
||||||
// do not use inline function because that will leak memory
|
|
||||||
el.attachEvent('onpropertychange', onPropertyChange);
|
|
||||||
el.attachEvent('onresize', onResize);
|
|
||||||
|
|
||||||
var attrs = el.attributes;
|
|
||||||
if (attrs.width && attrs.width.specified) {
|
|
||||||
// TODO: use runtimeStyle and coordsize
|
|
||||||
// el.getContext().setWidth_(attrs.width.nodeValue);
|
|
||||||
el.style.width = attrs.width.nodeValue + 'px';
|
|
||||||
} else {
|
|
||||||
el.width = el.clientWidth;
|
|
||||||
}
|
|
||||||
if (attrs.height && attrs.height.specified) {
|
|
||||||
// TODO: use runtimeStyle and coordsize
|
|
||||||
// el.getContext().setHeight_(attrs.height.nodeValue);
|
|
||||||
el.style.height = attrs.height.nodeValue + 'px';
|
|
||||||
} else {
|
|
||||||
el.height = el.clientHeight;
|
|
||||||
}
|
|
||||||
//el.getContext().setCoordsize_()
|
|
||||||
}
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function onPropertyChange(e) {
|
|
||||||
var el = e.srcElement;
|
|
||||||
|
|
||||||
switch (e.propertyName) {
|
|
||||||
case 'width':
|
|
||||||
el.style.width = el.attributes.width.nodeValue + 'px';
|
|
||||||
el.getContext().clearRect();
|
|
||||||
break;
|
|
||||||
case 'height':
|
|
||||||
el.style.height = el.attributes.height.nodeValue + 'px';
|
|
||||||
el.getContext().clearRect();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onResize(e) {
|
|
||||||
var el = e.srcElement;
|
|
||||||
if (el.firstChild) {
|
|
||||||
el.firstChild.style.width = el.clientWidth + 'px';
|
|
||||||
el.firstChild.style.height = el.clientHeight + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
G_vmlCanvasManager_.init();
|
|
||||||
|
|
||||||
// precompute "00" to "FF"
|
|
||||||
var dec2hex = [];
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
for (var j = 0; j < 16; j++) {
|
|
||||||
dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createMatrixIdentity() {
|
|
||||||
return [
|
|
||||||
[1, 0, 0],
|
|
||||||
[0, 1, 0],
|
|
||||||
[0, 0, 1]
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
function matrixMultiply(m1, m2) {
|
|
||||||
var result = createMatrixIdentity();
|
|
||||||
|
|
||||||
for (var x = 0; x < 3; x++) {
|
|
||||||
for (var y = 0; y < 3; y++) {
|
|
||||||
var sum = 0;
|
|
||||||
|
|
||||||
for (var z = 0; z < 3; z++) {
|
|
||||||
sum += m1[x][z] * m2[z][y];
|
|
||||||
}
|
|
||||||
|
|
||||||
result[x][y] = sum;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyState(o1, o2) {
|
|
||||||
o2.fillStyle = o1.fillStyle;
|
|
||||||
o2.lineCap = o1.lineCap;
|
|
||||||
o2.lineJoin = o1.lineJoin;
|
|
||||||
o2.lineWidth = o1.lineWidth;
|
|
||||||
o2.miterLimit = o1.miterLimit;
|
|
||||||
o2.shadowBlur = o1.shadowBlur;
|
|
||||||
o2.shadowColor = o1.shadowColor;
|
|
||||||
o2.shadowOffsetX = o1.shadowOffsetX;
|
|
||||||
o2.shadowOffsetY = o1.shadowOffsetY;
|
|
||||||
o2.strokeStyle = o1.strokeStyle;
|
|
||||||
o2.globalAlpha = o1.globalAlpha;
|
|
||||||
o2.arcScaleX_ = o1.arcScaleX_;
|
|
||||||
o2.arcScaleY_ = o1.arcScaleY_;
|
|
||||||
o2.lineScale_ = o1.lineScale_;
|
|
||||||
}
|
|
||||||
|
|
||||||
function processStyle(styleString) {
|
|
||||||
var str, alpha = 1;
|
|
||||||
|
|
||||||
styleString = String(styleString);
|
|
||||||
if (styleString.substring(0, 3) == 'rgb') {
|
|
||||||
var start = styleString.indexOf('(', 3);
|
|
||||||
var end = styleString.indexOf(')', start + 1);
|
|
||||||
var guts = styleString.substring(start + 1, end).split(',');
|
|
||||||
|
|
||||||
str = '#';
|
|
||||||
for (var i = 0; i < 3; i++) {
|
|
||||||
str += dec2hex[Number(guts[i])];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (guts.length == 4 && styleString.substr(3, 1) == 'a') {
|
|
||||||
alpha = guts[3];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
str = styleString;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {color: str, alpha: alpha};
|
|
||||||
}
|
|
||||||
|
|
||||||
function processLineCap(lineCap) {
|
|
||||||
switch (lineCap) {
|
|
||||||
case 'butt':
|
|
||||||
return 'flat';
|
|
||||||
case 'round':
|
|
||||||
return 'round';
|
|
||||||
case 'square':
|
|
||||||
default:
|
|
||||||
return 'square';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This class implements CanvasRenderingContext2D interface as described by
|
|
||||||
* the WHATWG.
|
|
||||||
* @param {HTMLElement} surfaceElement The element that the 2D context should
|
|
||||||
* be associated with
|
|
||||||
*/
|
|
||||||
function CanvasRenderingContext2D_(surfaceElement) {
|
|
||||||
this.m_ = createMatrixIdentity();
|
|
||||||
|
|
||||||
this.mStack_ = [];
|
|
||||||
this.aStack_ = [];
|
|
||||||
this.currentPath_ = [];
|
|
||||||
|
|
||||||
// Canvas context properties
|
|
||||||
this.strokeStyle = '#000';
|
|
||||||
this.fillStyle = '#000';
|
|
||||||
|
|
||||||
this.lineWidth = 1;
|
|
||||||
this.lineJoin = 'miter';
|
|
||||||
this.lineCap = 'butt';
|
|
||||||
this.miterLimit = Z * 1;
|
|
||||||
this.globalAlpha = 1;
|
|
||||||
this.canvas = surfaceElement;
|
|
||||||
|
|
||||||
var el = surfaceElement.ownerDocument.createElement('div');
|
|
||||||
el.style.width = surfaceElement.clientWidth + 'px';
|
|
||||||
el.style.height = surfaceElement.clientHeight + 'px';
|
|
||||||
el.style.overflow = 'hidden';
|
|
||||||
el.style.position = 'absolute';
|
|
||||||
surfaceElement.appendChild(el);
|
|
||||||
|
|
||||||
this.element_ = el;
|
|
||||||
this.arcScaleX_ = 1;
|
|
||||||
this.arcScaleY_ = 1;
|
|
||||||
this.lineScale_ = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
var contextPrototype = CanvasRenderingContext2D_.prototype;
|
|
||||||
contextPrototype.clearRect = function() {
|
|
||||||
this.element_.innerHTML = '';
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.beginPath = function() {
|
|
||||||
// TODO: Branch current matrix so that save/restore has no effect
|
|
||||||
// as per safari docs.
|
|
||||||
this.currentPath_ = [];
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.moveTo = function(aX, aY) {
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
|
|
||||||
this.currentX_ = p.x;
|
|
||||||
this.currentY_ = p.y;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.lineTo = function(aX, aY) {
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
|
|
||||||
|
|
||||||
this.currentX_ = p.x;
|
|
||||||
this.currentY_ = p.y;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
|
|
||||||
aCP2x, aCP2y,
|
|
||||||
aX, aY) {
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
var cp1 = this.getCoords_(aCP1x, aCP1y);
|
|
||||||
var cp2 = this.getCoords_(aCP2x, aCP2y);
|
|
||||||
bezierCurveTo(this, cp1, cp2, p);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper function that takes the already fixed cordinates.
|
|
||||||
function bezierCurveTo(self, cp1, cp2, p) {
|
|
||||||
self.currentPath_.push({
|
|
||||||
type: 'bezierCurveTo',
|
|
||||||
cp1x: cp1.x,
|
|
||||||
cp1y: cp1.y,
|
|
||||||
cp2x: cp2.x,
|
|
||||||
cp2y: cp2.y,
|
|
||||||
x: p.x,
|
|
||||||
y: p.y
|
|
||||||
});
|
|
||||||
self.currentX_ = p.x;
|
|
||||||
self.currentY_ = p.y;
|
|
||||||
}
|
|
||||||
|
|
||||||
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
|
|
||||||
// the following is lifted almost directly from
|
|
||||||
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
|
|
||||||
|
|
||||||
var cp = this.getCoords_(aCPx, aCPy);
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
|
|
||||||
var cp1 = {
|
|
||||||
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
|
|
||||||
y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
|
|
||||||
};
|
|
||||||
var cp2 = {
|
|
||||||
x: cp1.x + (p.x - this.currentX_) / 3.0,
|
|
||||||
y: cp1.y + (p.y - this.currentY_) / 3.0
|
|
||||||
};
|
|
||||||
|
|
||||||
bezierCurveTo(this, cp1, cp2, p);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.arc = function(aX, aY, aRadius,
|
|
||||||
aStartAngle, aEndAngle, aClockwise) {
|
|
||||||
aRadius *= Z;
|
|
||||||
var arcType = aClockwise ? 'at' : 'wa';
|
|
||||||
|
|
||||||
var xStart = aX + mc(aStartAngle) * aRadius - Z2;
|
|
||||||
var yStart = aY + ms(aStartAngle) * aRadius - Z2;
|
|
||||||
|
|
||||||
var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
|
|
||||||
var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
|
|
||||||
|
|
||||||
// IE won't render arches drawn counter clockwise if xStart == xEnd.
|
|
||||||
if (xStart == xEnd && !aClockwise) {
|
|
||||||
xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
|
|
||||||
// that can be represented in binary
|
|
||||||
}
|
|
||||||
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
var pStart = this.getCoords_(xStart, yStart);
|
|
||||||
var pEnd = this.getCoords_(xEnd, yEnd);
|
|
||||||
|
|
||||||
this.currentPath_.push({type: arcType,
|
|
||||||
x: p.x,
|
|
||||||
y: p.y,
|
|
||||||
radius: aRadius,
|
|
||||||
xStart: pStart.x,
|
|
||||||
yStart: pStart.y,
|
|
||||||
xEnd: pEnd.x,
|
|
||||||
yEnd: pEnd.y});
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
|
|
||||||
this.moveTo(aX, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY + aHeight);
|
|
||||||
this.lineTo(aX, aY + aHeight);
|
|
||||||
this.closePath();
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
|
|
||||||
var oldPath = this.currentPath_;
|
|
||||||
this.beginPath();
|
|
||||||
|
|
||||||
this.moveTo(aX, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY + aHeight);
|
|
||||||
this.lineTo(aX, aY + aHeight);
|
|
||||||
this.closePath();
|
|
||||||
this.stroke();
|
|
||||||
|
|
||||||
this.currentPath_ = oldPath;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
|
|
||||||
var oldPath = this.currentPath_;
|
|
||||||
this.beginPath();
|
|
||||||
|
|
||||||
this.moveTo(aX, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY + aHeight);
|
|
||||||
this.lineTo(aX, aY + aHeight);
|
|
||||||
this.closePath();
|
|
||||||
this.fill();
|
|
||||||
|
|
||||||
this.currentPath_ = oldPath;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
|
|
||||||
var gradient = new CanvasGradient_('gradient');
|
|
||||||
gradient.x0_ = aX0;
|
|
||||||
gradient.y0_ = aY0;
|
|
||||||
gradient.x1_ = aX1;
|
|
||||||
gradient.y1_ = aY1;
|
|
||||||
return gradient;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
|
|
||||||
aX1, aY1, aR1) {
|
|
||||||
var gradient = new CanvasGradient_('gradientradial');
|
|
||||||
gradient.x0_ = aX0;
|
|
||||||
gradient.y0_ = aY0;
|
|
||||||
gradient.r0_ = aR0;
|
|
||||||
gradient.x1_ = aX1;
|
|
||||||
gradient.y1_ = aY1;
|
|
||||||
gradient.r1_ = aR1;
|
|
||||||
return gradient;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.drawImage = function(image, var_args) {
|
|
||||||
var dx, dy, dw, dh, sx, sy, sw, sh;
|
|
||||||
|
|
||||||
// to find the original width we overide the width and height
|
|
||||||
var oldRuntimeWidth = image.runtimeStyle.width;
|
|
||||||
var oldRuntimeHeight = image.runtimeStyle.height;
|
|
||||||
image.runtimeStyle.width = 'auto';
|
|
||||||
image.runtimeStyle.height = 'auto';
|
|
||||||
|
|
||||||
// get the original size
|
|
||||||
var w = image.width;
|
|
||||||
var h = image.height;
|
|
||||||
|
|
||||||
// and remove overides
|
|
||||||
image.runtimeStyle.width = oldRuntimeWidth;
|
|
||||||
image.runtimeStyle.height = oldRuntimeHeight;
|
|
||||||
|
|
||||||
if (arguments.length == 3) {
|
|
||||||
dx = arguments[1];
|
|
||||||
dy = arguments[2];
|
|
||||||
sx = sy = 0;
|
|
||||||
sw = dw = w;
|
|
||||||
sh = dh = h;
|
|
||||||
} else if (arguments.length == 5) {
|
|
||||||
dx = arguments[1];
|
|
||||||
dy = arguments[2];
|
|
||||||
dw = arguments[3];
|
|
||||||
dh = arguments[4];
|
|
||||||
sx = sy = 0;
|
|
||||||
sw = w;
|
|
||||||
sh = h;
|
|
||||||
} else if (arguments.length == 9) {
|
|
||||||
sx = arguments[1];
|
|
||||||
sy = arguments[2];
|
|
||||||
sw = arguments[3];
|
|
||||||
sh = arguments[4];
|
|
||||||
dx = arguments[5];
|
|
||||||
dy = arguments[6];
|
|
||||||
dw = arguments[7];
|
|
||||||
dh = arguments[8];
|
|
||||||
} else {
|
|
||||||
throw Error('Invalid number of arguments');
|
|
||||||
}
|
|
||||||
|
|
||||||
var d = this.getCoords_(dx, dy);
|
|
||||||
|
|
||||||
var w2 = sw / 2;
|
|
||||||
var h2 = sh / 2;
|
|
||||||
|
|
||||||
var vmlStr = [];
|
|
||||||
|
|
||||||
var W = 10;
|
|
||||||
var H = 10;
|
|
||||||
|
|
||||||
// For some reason that I've now forgotten, using divs didn't work
|
|
||||||
vmlStr.push(' <g_vml_:group',
|
|
||||||
' coordsize="', Z * W, ',', Z * H, '"',
|
|
||||||
' coordorigin="0,0"' ,
|
|
||||||
' style="width:', W, 'px;height:', H, 'px;position:absolute;');
|
|
||||||
|
|
||||||
// If filters are necessary (rotation exists), create them
|
|
||||||
// filters are bog-slow, so only create them if abbsolutely necessary
|
|
||||||
// The following check doesn't account for skews (which don't exist
|
|
||||||
// in the canvas spec (yet) anyway.
|
|
||||||
|
|
||||||
if (this.m_[0][0] != 1 || this.m_[0][1]) {
|
|
||||||
var filter = [];
|
|
||||||
|
|
||||||
// Note the 12/21 reversal
|
|
||||||
filter.push('M11=', this.m_[0][0], ',',
|
|
||||||
'M12=', this.m_[1][0], ',',
|
|
||||||
'M21=', this.m_[0][1], ',',
|
|
||||||
'M22=', this.m_[1][1], ',',
|
|
||||||
'Dx=', mr(d.x / Z), ',',
|
|
||||||
'Dy=', mr(d.y / Z), '');
|
|
||||||
|
|
||||||
// Bounding box calculation (need to minimize displayed area so that
|
|
||||||
// filters don't waste time on unused pixels.
|
|
||||||
var max = d;
|
|
||||||
var c2 = this.getCoords_(dx + dw, dy);
|
|
||||||
var c3 = this.getCoords_(dx, dy + dh);
|
|
||||||
var c4 = this.getCoords_(dx + dw, dy + dh);
|
|
||||||
|
|
||||||
max.x = m.max(max.x, c2.x, c3.x, c4.x);
|
|
||||||
max.y = m.max(max.y, c2.y, c3.y, c4.y);
|
|
||||||
|
|
||||||
vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
|
|
||||||
'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
|
|
||||||
filter.join(''), ", sizingmethod='clip');")
|
|
||||||
} else {
|
|
||||||
vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
|
|
||||||
}
|
|
||||||
|
|
||||||
vmlStr.push(' ">' ,
|
|
||||||
'<g_vml_:image src="', image.src, '"',
|
|
||||||
' style="width:', Z * dw, 'px;',
|
|
||||||
' height:', Z * dh, 'px;"',
|
|
||||||
' cropleft="', sx / w, '"',
|
|
||||||
' croptop="', sy / h, '"',
|
|
||||||
' cropright="', (w - sx - sw) / w, '"',
|
|
||||||
' cropbottom="', (h - sy - sh) / h, '"',
|
|
||||||
' />',
|
|
||||||
'</g_vml_:group>');
|
|
||||||
|
|
||||||
this.element_.insertAdjacentHTML('BeforeEnd',
|
|
||||||
vmlStr.join(''));
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.stroke = function(aFill) {
|
|
||||||
var lineStr = [];
|
|
||||||
var lineOpen = false;
|
|
||||||
var a = processStyle(aFill ? this.fillStyle : this.strokeStyle);
|
|
||||||
var color = a.color;
|
|
||||||
var opacity = a.alpha * this.globalAlpha;
|
|
||||||
|
|
||||||
var W = 10;
|
|
||||||
var H = 10;
|
|
||||||
|
|
||||||
lineStr.push('<g_vml_:shape',
|
|
||||||
' filled="', !!aFill, '"',
|
|
||||||
' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
|
|
||||||
' coordorigin="0 0" coordsize="', Z * W, ' ', Z * H, '"',
|
|
||||||
' stroked="', !aFill, '"',
|
|
||||||
' path="');
|
|
||||||
|
|
||||||
var newSeq = false;
|
|
||||||
var min = {x: null, y: null};
|
|
||||||
var max = {x: null, y: null};
|
|
||||||
|
|
||||||
for (var i = 0; i < this.currentPath_.length; i++) {
|
|
||||||
var p = this.currentPath_[i];
|
|
||||||
var c;
|
|
||||||
|
|
||||||
switch (p.type) {
|
|
||||||
case 'moveTo':
|
|
||||||
c = p;
|
|
||||||
lineStr.push(' m ', mr(p.x), ',', mr(p.y));
|
|
||||||
break;
|
|
||||||
case 'lineTo':
|
|
||||||
lineStr.push(' l ', mr(p.x), ',', mr(p.y));
|
|
||||||
break;
|
|
||||||
case 'close':
|
|
||||||
lineStr.push(' x ');
|
|
||||||
p = null;
|
|
||||||
break;
|
|
||||||
case 'bezierCurveTo':
|
|
||||||
lineStr.push(' c ',
|
|
||||||
mr(p.cp1x), ',', mr(p.cp1y), ',',
|
|
||||||
mr(p.cp2x), ',', mr(p.cp2y), ',',
|
|
||||||
mr(p.x), ',', mr(p.y));
|
|
||||||
break;
|
|
||||||
case 'at':
|
|
||||||
case 'wa':
|
|
||||||
lineStr.push(' ', p.type, ' ',
|
|
||||||
mr(p.x - this.arcScaleX_ * p.radius), ',',
|
|
||||||
mr(p.y - this.arcScaleY_ * p.radius), ' ',
|
|
||||||
mr(p.x + this.arcScaleX_ * p.radius), ',',
|
|
||||||
mr(p.y + this.arcScaleY_ * p.radius), ' ',
|
|
||||||
mr(p.xStart), ',', mr(p.yStart), ' ',
|
|
||||||
mr(p.xEnd), ',', mr(p.yEnd));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// TODO: Following is broken for curves due to
|
|
||||||
// move to proper paths.
|
|
||||||
|
|
||||||
// Figure out dimensions so we can do gradient fills
|
|
||||||
// properly
|
|
||||||
if (p) {
|
|
||||||
if (min.x == null || p.x < min.x) {
|
|
||||||
min.x = p.x;
|
|
||||||
}
|
|
||||||
if (max.x == null || p.x > max.x) {
|
|
||||||
max.x = p.x;
|
|
||||||
}
|
|
||||||
if (min.y == null || p.y < min.y) {
|
|
||||||
min.y = p.y;
|
|
||||||
}
|
|
||||||
if (max.y == null || p.y > max.y) {
|
|
||||||
max.y = p.y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
lineStr.push(' ">');
|
|
||||||
|
|
||||||
if (!aFill) {
|
|
||||||
var lineWidth = this.lineScale_ * this.lineWidth;
|
|
||||||
|
|
||||||
// VML cannot correctly render a line if the width is less than 1px.
|
|
||||||
// In that case, we dilute the color to make the line look thinner.
|
|
||||||
if (lineWidth < 1) {
|
|
||||||
opacity *= lineWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
lineStr.push(
|
|
||||||
'<g_vml_:stroke',
|
|
||||||
' opacity="', opacity, '"',
|
|
||||||
' joinstyle="', this.lineJoin, '"',
|
|
||||||
' miterlimit="', this.miterLimit, '"',
|
|
||||||
' endcap="', processLineCap(this.lineCap), '"',
|
|
||||||
' weight="', lineWidth, 'px"',
|
|
||||||
' color="', color, '" />'
|
|
||||||
);
|
|
||||||
} else if (typeof this.fillStyle == 'object') {
|
|
||||||
var fillStyle = this.fillStyle;
|
|
||||||
var angle = 0;
|
|
||||||
var focus = {x: 0, y: 0};
|
|
||||||
|
|
||||||
// additional offset
|
|
||||||
var shift = 0;
|
|
||||||
// scale factor for offset
|
|
||||||
var expansion = 1;
|
|
||||||
|
|
||||||
if (fillStyle.type_ == 'gradient') {
|
|
||||||
var x0 = fillStyle.x0_ / this.arcScaleX_;
|
|
||||||
var y0 = fillStyle.y0_ / this.arcScaleY_;
|
|
||||||
var x1 = fillStyle.x1_ / this.arcScaleX_;
|
|
||||||
var y1 = fillStyle.y1_ / this.arcScaleY_;
|
|
||||||
var p0 = this.getCoords_(x0, y0);
|
|
||||||
var p1 = this.getCoords_(x1, y1);
|
|
||||||
var dx = p1.x - p0.x;
|
|
||||||
var dy = p1.y - p0.y;
|
|
||||||
angle = Math.atan2(dx, dy) * 180 / Math.PI;
|
|
||||||
|
|
||||||
// The angle should be a non-negative number.
|
|
||||||
if (angle < 0) {
|
|
||||||
angle += 360;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Very small angles produce an unexpected result because they are
|
|
||||||
// converted to a scientific notation string.
|
|
||||||
if (angle < 1e-6) {
|
|
||||||
angle = 0;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_);
|
|
||||||
var width = max.x - min.x;
|
|
||||||
var height = max.y - min.y;
|
|
||||||
focus = {
|
|
||||||
x: (p0.x - min.x) / width,
|
|
||||||
y: (p0.y - min.y) / height
|
|
||||||
};
|
|
||||||
|
|
||||||
width /= this.arcScaleX_ * Z;
|
|
||||||
height /= this.arcScaleY_ * Z;
|
|
||||||
var dimension = m.max(width, height);
|
|
||||||
shift = 2 * fillStyle.r0_ / dimension;
|
|
||||||
expansion = 2 * fillStyle.r1_ / dimension - shift;
|
|
||||||
}
|
|
||||||
|
|
||||||
// We need to sort the color stops in ascending order by offset,
|
|
||||||
// otherwise IE won't interpret it correctly.
|
|
||||||
var stops = fillStyle.colors_;
|
|
||||||
stops.sort(function(cs1, cs2) {
|
|
||||||
return cs1.offset - cs2.offset;
|
|
||||||
});
|
|
||||||
|
|
||||||
var length = stops.length;
|
|
||||||
var color1 = stops[0].color;
|
|
||||||
var color2 = stops[length - 1].color;
|
|
||||||
var opacity1 = stops[0].alpha * this.globalAlpha;
|
|
||||||
var opacity2 = stops[length - 1].alpha * this.globalAlpha;
|
|
||||||
|
|
||||||
var colors = [];
|
|
||||||
for (var i = 0; i < length; i++) {
|
|
||||||
var stop = stops[i];
|
|
||||||
colors.push(stop.offset * expansion + shift + ' ' + stop.color);
|
|
||||||
}
|
|
||||||
|
|
||||||
// When colors attribute is used, the meanings of opacity and o:opacity2
|
|
||||||
// are reversed.
|
|
||||||
lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
|
|
||||||
' method="none" focus="100%"',
|
|
||||||
' color="', color1, '"',
|
|
||||||
' color2="', color2, '"',
|
|
||||||
' colors="', colors.join(','), '"',
|
|
||||||
' opacity="', opacity2, '"',
|
|
||||||
' g_o_:opacity2="', opacity1, '"',
|
|
||||||
' angle="', angle, '"',
|
|
||||||
' focusposition="', focus.x, ',', focus.y, '" />');
|
|
||||||
} else {
|
|
||||||
lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
|
|
||||||
'" />');
|
|
||||||
}
|
|
||||||
|
|
||||||
lineStr.push('</g_vml_:shape>');
|
|
||||||
|
|
||||||
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.fill = function() {
|
|
||||||
this.stroke(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
contextPrototype.closePath = function() {
|
|
||||||
this.currentPath_.push({type: 'close'});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
contextPrototype.getCoords_ = function(aX, aY) {
|
|
||||||
var m = this.m_;
|
|
||||||
return {
|
|
||||||
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
|
|
||||||
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.save = function() {
|
|
||||||
var o = {};
|
|
||||||
copyState(this, o);
|
|
||||||
this.aStack_.push(o);
|
|
||||||
this.mStack_.push(this.m_);
|
|
||||||
this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.restore = function() {
|
|
||||||
copyState(this.aStack_.pop(), this);
|
|
||||||
this.m_ = this.mStack_.pop();
|
|
||||||
};
|
|
||||||
|
|
||||||
function matrixIsFinite(m) {
|
|
||||||
for (var j = 0; j < 3; j++) {
|
|
||||||
for (var k = 0; k < 2; k++) {
|
|
||||||
if (!isFinite(m[j][k]) || isNaN(m[j][k])) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setM(ctx, m, updateLineScale) {
|
|
||||||
if (!matrixIsFinite(m)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
ctx.m_ = m;
|
|
||||||
|
|
||||||
if (updateLineScale) {
|
|
||||||
// Get the line scale.
|
|
||||||
// Determinant of this.m_ means how much the area is enlarged by the
|
|
||||||
// transformation. So its square root can be used as a scale factor
|
|
||||||
// for width.
|
|
||||||
var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
|
|
||||||
ctx.lineScale_ = sqrt(abs(det));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
contextPrototype.translate = function(aX, aY) {
|
|
||||||
var m1 = [
|
|
||||||
[1, 0, 0],
|
|
||||||
[0, 1, 0],
|
|
||||||
[aX, aY, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, matrixMultiply(m1, this.m_), false);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.rotate = function(aRot) {
|
|
||||||
var c = mc(aRot);
|
|
||||||
var s = ms(aRot);
|
|
||||||
|
|
||||||
var m1 = [
|
|
||||||
[c, s, 0],
|
|
||||||
[-s, c, 0],
|
|
||||||
[0, 0, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, matrixMultiply(m1, this.m_), false);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.scale = function(aX, aY) {
|
|
||||||
this.arcScaleX_ *= aX;
|
|
||||||
this.arcScaleY_ *= aY;
|
|
||||||
var m1 = [
|
|
||||||
[aX, 0, 0],
|
|
||||||
[0, aY, 0],
|
|
||||||
[0, 0, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, matrixMultiply(m1, this.m_), true);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
|
|
||||||
var m1 = [
|
|
||||||
[m11, m12, 0],
|
|
||||||
[m21, m22, 0],
|
|
||||||
[dx, dy, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, matrixMultiply(m1, this.m_), true);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
|
|
||||||
var m = [
|
|
||||||
[m11, m12, 0],
|
|
||||||
[m21, m22, 0],
|
|
||||||
[dx, dy, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, m, true);
|
|
||||||
};
|
|
||||||
|
|
||||||
/******** STUBS ********/
|
|
||||||
contextPrototype.clip = function() {
|
|
||||||
// TODO: Implement
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.arcTo = function() {
|
|
||||||
// TODO: Implement
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.createPattern = function() {
|
|
||||||
return new CanvasPattern_;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Gradient / Pattern Stubs
|
|
||||||
function CanvasGradient_(aType) {
|
|
||||||
this.type_ = aType;
|
|
||||||
this.x0_ = 0;
|
|
||||||
this.y0_ = 0;
|
|
||||||
this.r0_ = 0;
|
|
||||||
this.x1_ = 0;
|
|
||||||
this.y1_ = 0;
|
|
||||||
this.r1_ = 0;
|
|
||||||
this.colors_ = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
|
|
||||||
aColor = processStyle(aColor);
|
|
||||||
this.colors_.push({offset: aOffset,
|
|
||||||
color: aColor.color,
|
|
||||||
alpha: aColor.alpha});
|
|
||||||
};
|
|
||||||
|
|
||||||
function CanvasPattern_() {}
|
|
||||||
|
|
||||||
// set up externs
|
|
||||||
G_vmlCanvasManager = G_vmlCanvasManager_;
|
|
||||||
CanvasRenderingContext2D = CanvasRenderingContext2D_;
|
|
||||||
CanvasGradient = CanvasGradient_;
|
|
||||||
CanvasPattern = CanvasPattern_;
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
} // if
|
|
||||||
@ -1,499 +0,0 @@
|
|||||||
/**
|
|
||||||
* @preserve HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
|
||||||
*/
|
|
||||||
;(function(window, document) {
|
|
||||||
/*jshint evil:true */
|
|
||||||
/** version */
|
|
||||||
var version = '3.6.2';
|
|
||||||
|
|
||||||
/** Preset options */
|
|
||||||
var options = window.html5 || {};
|
|
||||||
|
|
||||||
/** Used to skip problem elements */
|
|
||||||
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
|
|
||||||
|
|
||||||
/** Not all elements can be cloned in IE **/
|
|
||||||
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
|
|
||||||
|
|
||||||
/** Detect whether the browser supports default html5 styles */
|
|
||||||
var supportsHtml5Styles;
|
|
||||||
|
|
||||||
/** Name of the expando, to work with multiple documents or to re-shiv one document */
|
|
||||||
var expando = '_html5shiv';
|
|
||||||
|
|
||||||
/** The id for the the documents expando */
|
|
||||||
var expanID = 0;
|
|
||||||
|
|
||||||
/** Cached data for each document */
|
|
||||||
var expandoData = {};
|
|
||||||
|
|
||||||
/** Detect whether the browser supports unknown elements */
|
|
||||||
var supportsUnknownElements;
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
try {
|
|
||||||
var a = document.createElement('a');
|
|
||||||
a.innerHTML = '<xyz></xyz>';
|
|
||||||
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
|
|
||||||
supportsHtml5Styles = ('hidden' in a);
|
|
||||||
|
|
||||||
supportsUnknownElements = a.childNodes.length == 1 || (function() {
|
|
||||||
// assign a false positive if unable to shiv
|
|
||||||
(document.createElement)('a');
|
|
||||||
var frag = document.createDocumentFragment();
|
|
||||||
return (
|
|
||||||
typeof frag.cloneNode == 'undefined' ||
|
|
||||||
typeof frag.createDocumentFragment == 'undefined' ||
|
|
||||||
typeof frag.createElement == 'undefined'
|
|
||||||
);
|
|
||||||
}());
|
|
||||||
} catch(e) {
|
|
||||||
// assign a false positive if detection fails => unable to shiv
|
|
||||||
supportsHtml5Styles = true;
|
|
||||||
supportsUnknownElements = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
}());
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a style sheet with the given CSS text and adds it to the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @param {String} cssText The CSS text.
|
|
||||||
* @returns {StyleSheet} The style element.
|
|
||||||
*/
|
|
||||||
function addStyleSheet(ownerDocument, cssText) {
|
|
||||||
var p = ownerDocument.createElement('p'),
|
|
||||||
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
|
|
||||||
|
|
||||||
p.innerHTML = 'x<style>' + cssText + '</style>';
|
|
||||||
return parent.insertBefore(p.lastChild, parent.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the value of `html5.elements` as an array.
|
|
||||||
* @private
|
|
||||||
* @returns {Array} An array of shived element node names.
|
|
||||||
*/
|
|
||||||
function getElements() {
|
|
||||||
var elements = html5.elements;
|
|
||||||
return typeof elements == 'string' ? elements.split(' ') : elements;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the data associated to the given document
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @returns {Object} An object of data.
|
|
||||||
*/
|
|
||||||
function getExpandoData(ownerDocument) {
|
|
||||||
var data = expandoData[ownerDocument[expando]];
|
|
||||||
if (!data) {
|
|
||||||
data = {};
|
|
||||||
expanID++;
|
|
||||||
ownerDocument[expando] = expanID;
|
|
||||||
expandoData[expanID] = data;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived element for the given nodeName and document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {String} nodeName name of the element
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived element.
|
|
||||||
*/
|
|
||||||
function createElement(nodeName, ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createElement(nodeName);
|
|
||||||
}
|
|
||||||
if (!data) {
|
|
||||||
data = getExpandoData(ownerDocument);
|
|
||||||
}
|
|
||||||
var node;
|
|
||||||
|
|
||||||
if (data.cache[nodeName]) {
|
|
||||||
node = data.cache[nodeName].cloneNode();
|
|
||||||
} else if (saveClones.test(nodeName)) {
|
|
||||||
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
|
|
||||||
} else {
|
|
||||||
node = data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Avoid adding some elements to fragments in IE < 9 because
|
|
||||||
// * Attributes like `name` or `type` cannot be set/changed once an element
|
|
||||||
// is inserted into a document/fragment
|
|
||||||
// * Link elements with `src` attributes that are inaccessible, as with
|
|
||||||
// a 403 response, will cause the tab/window to crash
|
|
||||||
// * Script elements appended to fragments will execute when their `src`
|
|
||||||
// or `text` property is set
|
|
||||||
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived DocumentFragment for the given document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived DocumentFragment.
|
|
||||||
*/
|
|
||||||
function createDocumentFragment(ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createDocumentFragment();
|
|
||||||
}
|
|
||||||
data = data || getExpandoData(ownerDocument);
|
|
||||||
var clone = data.frag.cloneNode(),
|
|
||||||
i = 0,
|
|
||||||
elems = getElements(),
|
|
||||||
l = elems.length;
|
|
||||||
for(;i<l;i++){
|
|
||||||
clone.createElement(elems[i]);
|
|
||||||
}
|
|
||||||
return clone;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document|DocumentFragment} ownerDocument The document.
|
|
||||||
* @param {Object} data of the document.
|
|
||||||
*/
|
|
||||||
function shivMethods(ownerDocument, data) {
|
|
||||||
if (!data.cache) {
|
|
||||||
data.cache = {};
|
|
||||||
data.createElem = ownerDocument.createElement;
|
|
||||||
data.createFrag = ownerDocument.createDocumentFragment;
|
|
||||||
data.frag = data.createFrag();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ownerDocument.createElement = function(nodeName) {
|
|
||||||
//abort shiv
|
|
||||||
if (!html5.shivMethods) {
|
|
||||||
return data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
return createElement(nodeName, ownerDocument, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
|
|
||||||
'var n=f.cloneNode(),c=n.createElement;' +
|
|
||||||
'h.shivMethods&&(' +
|
|
||||||
// unroll the `createElement` calls
|
|
||||||
getElements().join().replace(/\w+/g, function(nodeName) {
|
|
||||||
data.createElem(nodeName);
|
|
||||||
data.frag.createElement(nodeName);
|
|
||||||
return 'c("' + nodeName + '")';
|
|
||||||
}) +
|
|
||||||
');return n}'
|
|
||||||
)(html5, data.frag);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given document.
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The document to shiv.
|
|
||||||
* @returns {Document} The shived document.
|
|
||||||
*/
|
|
||||||
function shivDocument(ownerDocument) {
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
var data = getExpandoData(ownerDocument);
|
|
||||||
|
|
||||||
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
|
|
||||||
data.hasCSS = !!addStyleSheet(ownerDocument,
|
|
||||||
// corrects block display not defined in IE6/7/8/9
|
|
||||||
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
|
|
||||||
// adds styling not present in IE6/7/8/9
|
|
||||||
'mark{background:#FF0;color:#000}' +
|
|
||||||
// hides non-rendered elements
|
|
||||||
'template{display:none}'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!supportsUnknownElements) {
|
|
||||||
shivMethods(ownerDocument, data);
|
|
||||||
}
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The `html5` object is exposed so that more elements can be shived and
|
|
||||||
* existing shiving can be detected on iframes.
|
|
||||||
* @type Object
|
|
||||||
* @example
|
|
||||||
*
|
|
||||||
* // options can be changed before the script is included
|
|
||||||
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
|
|
||||||
*/
|
|
||||||
var html5 = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An array or space separated string of node names of the elements to shiv.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Array|String
|
|
||||||
*/
|
|
||||||
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* current version of html5shiv
|
|
||||||
*/
|
|
||||||
'version': version,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the HTML5 style sheet should be inserted.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivCSS': (options.shivCSS !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Is equal to true if a browser supports creating unknown/HTML5 elements
|
|
||||||
* @memberOf html5
|
|
||||||
* @type boolean
|
|
||||||
*/
|
|
||||||
'supportsUnknownElements': supportsUnknownElements,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
|
|
||||||
* methods should be overwritten.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivMethods': (options.shivMethods !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A string to describe the type of `html5` object ("default" or "default print").
|
|
||||||
* @memberOf html5
|
|
||||||
* @type String
|
|
||||||
*/
|
|
||||||
'type': 'default',
|
|
||||||
|
|
||||||
// shivs the document according to the specified `html5` object options
|
|
||||||
'shivDocument': shivDocument,
|
|
||||||
|
|
||||||
//creates a shived element
|
|
||||||
createElement: createElement,
|
|
||||||
|
|
||||||
//creates a shived documentFragment
|
|
||||||
createDocumentFragment: createDocumentFragment
|
|
||||||
};
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
// expose html5
|
|
||||||
window.html5 = html5;
|
|
||||||
|
|
||||||
// shiv the document
|
|
||||||
shivDocument(document);
|
|
||||||
|
|
||||||
/*------------------------------- Print Shiv -------------------------------*/
|
|
||||||
|
|
||||||
/** Used to filter media types */
|
|
||||||
var reMedia = /^$|\b(?:all|print)\b/;
|
|
||||||
|
|
||||||
/** Used to namespace printable elements */
|
|
||||||
var shivNamespace = 'html5shiv';
|
|
||||||
|
|
||||||
/** Detect whether the browser supports shivable style sheets */
|
|
||||||
var supportsShivableSheets = !supportsUnknownElements && (function() {
|
|
||||||
// assign a false negative if unable to shiv
|
|
||||||
var docEl = document.documentElement;
|
|
||||||
return !(
|
|
||||||
typeof document.namespaces == 'undefined' ||
|
|
||||||
typeof document.parentWindow == 'undefined' ||
|
|
||||||
typeof docEl.applyElement == 'undefined' ||
|
|
||||||
typeof docEl.removeNode == 'undefined' ||
|
|
||||||
typeof window.attachEvent == 'undefined'
|
|
||||||
);
|
|
||||||
}());
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wraps all HTML5 elements in the given document with printable elements.
|
|
||||||
* (eg. the "header" element is wrapped with the "html5shiv:header" element)
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @returns {Array} An array wrappers added.
|
|
||||||
*/
|
|
||||||
function addWrappers(ownerDocument) {
|
|
||||||
var node,
|
|
||||||
nodes = ownerDocument.getElementsByTagName('*'),
|
|
||||||
index = nodes.length,
|
|
||||||
reElements = RegExp('^(?:' + getElements().join('|') + ')$', 'i'),
|
|
||||||
result = [];
|
|
||||||
|
|
||||||
while (index--) {
|
|
||||||
node = nodes[index];
|
|
||||||
if (reElements.test(node.nodeName)) {
|
|
||||||
result.push(node.applyElement(createWrapper(node)));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a printable wrapper for the given element.
|
|
||||||
* @private
|
|
||||||
* @param {Element} element The element.
|
|
||||||
* @returns {Element} The wrapper.
|
|
||||||
*/
|
|
||||||
function createWrapper(element) {
|
|
||||||
var node,
|
|
||||||
nodes = element.attributes,
|
|
||||||
index = nodes.length,
|
|
||||||
wrapper = element.ownerDocument.createElement(shivNamespace + ':' + element.nodeName);
|
|
||||||
|
|
||||||
// copy element attributes to the wrapper
|
|
||||||
while (index--) {
|
|
||||||
node = nodes[index];
|
|
||||||
node.specified && wrapper.setAttribute(node.nodeName, node.nodeValue);
|
|
||||||
}
|
|
||||||
// copy element styles to the wrapper
|
|
||||||
wrapper.style.cssText = element.style.cssText;
|
|
||||||
return wrapper;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given CSS text.
|
|
||||||
* (eg. header{} becomes html5shiv\:header{})
|
|
||||||
* @private
|
|
||||||
* @param {String} cssText The CSS text to shiv.
|
|
||||||
* @returns {String} The shived CSS text.
|
|
||||||
*/
|
|
||||||
function shivCssText(cssText) {
|
|
||||||
var pair,
|
|
||||||
parts = cssText.split('{'),
|
|
||||||
index = parts.length,
|
|
||||||
reElements = RegExp('(^|[\\s,>+~])(' + getElements().join('|') + ')(?=[[\\s,>+~#.:]|$)', 'gi'),
|
|
||||||
replacement = '$1' + shivNamespace + '\\:$2';
|
|
||||||
|
|
||||||
while (index--) {
|
|
||||||
pair = parts[index] = parts[index].split('}');
|
|
||||||
pair[pair.length - 1] = pair[pair.length - 1].replace(reElements, replacement);
|
|
||||||
parts[index] = pair.join('}');
|
|
||||||
}
|
|
||||||
return parts.join('{');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes the given wrappers, leaving the original elements.
|
|
||||||
* @private
|
|
||||||
* @params {Array} wrappers An array of printable wrappers.
|
|
||||||
*/
|
|
||||||
function removeWrappers(wrappers) {
|
|
||||||
var index = wrappers.length;
|
|
||||||
while (index--) {
|
|
||||||
wrappers[index].removeNode();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given document for print.
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The document to shiv.
|
|
||||||
* @returns {Document} The shived document.
|
|
||||||
*/
|
|
||||||
function shivPrint(ownerDocument) {
|
|
||||||
var shivedSheet,
|
|
||||||
wrappers,
|
|
||||||
data = getExpandoData(ownerDocument),
|
|
||||||
namespaces = ownerDocument.namespaces,
|
|
||||||
ownerWindow = ownerDocument.parentWindow;
|
|
||||||
|
|
||||||
if (!supportsShivableSheets || ownerDocument.printShived) {
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
if (typeof namespaces[shivNamespace] == 'undefined') {
|
|
||||||
namespaces.add(shivNamespace);
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeSheet() {
|
|
||||||
clearTimeout(data._removeSheetTimer);
|
|
||||||
if (shivedSheet) {
|
|
||||||
shivedSheet.removeNode(true);
|
|
||||||
}
|
|
||||||
shivedSheet= null;
|
|
||||||
}
|
|
||||||
|
|
||||||
ownerWindow.attachEvent('onbeforeprint', function() {
|
|
||||||
|
|
||||||
removeSheet();
|
|
||||||
|
|
||||||
var imports,
|
|
||||||
length,
|
|
||||||
sheet,
|
|
||||||
collection = ownerDocument.styleSheets,
|
|
||||||
cssText = [],
|
|
||||||
index = collection.length,
|
|
||||||
sheets = Array(index);
|
|
||||||
|
|
||||||
// convert styleSheets collection to an array
|
|
||||||
while (index--) {
|
|
||||||
sheets[index] = collection[index];
|
|
||||||
}
|
|
||||||
// concat all style sheet CSS text
|
|
||||||
while ((sheet = sheets.pop())) {
|
|
||||||
// IE does not enforce a same origin policy for external style sheets...
|
|
||||||
// but has trouble with some dynamically created stylesheets
|
|
||||||
if (!sheet.disabled && reMedia.test(sheet.media)) {
|
|
||||||
|
|
||||||
try {
|
|
||||||
imports = sheet.imports;
|
|
||||||
length = imports.length;
|
|
||||||
} catch(er){
|
|
||||||
length = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (index = 0; index < length; index++) {
|
|
||||||
sheets.push(imports[index]);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
cssText.push(sheet.cssText);
|
|
||||||
} catch(er){}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// wrap all HTML5 elements with printable elements and add the shived style sheet
|
|
||||||
cssText = shivCssText(cssText.reverse().join(''));
|
|
||||||
wrappers = addWrappers(ownerDocument);
|
|
||||||
shivedSheet = addStyleSheet(ownerDocument, cssText);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
ownerWindow.attachEvent('onafterprint', function() {
|
|
||||||
// remove wrappers, leaving the original elements, and remove the shived style sheet
|
|
||||||
removeWrappers(wrappers);
|
|
||||||
clearTimeout(data._removeSheetTimer);
|
|
||||||
data._removeSheetTimer = setTimeout(removeSheet, 500);
|
|
||||||
});
|
|
||||||
|
|
||||||
ownerDocument.printShived = true;
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
// expose API
|
|
||||||
html5.type += ' print';
|
|
||||||
html5.shivPrint = shivPrint;
|
|
||||||
|
|
||||||
// shiv for print
|
|
||||||
shivPrint(document);
|
|
||||||
|
|
||||||
}(this, document));
|
|
||||||
301
js_old/libs/html5shiv.js
vendored
301
js_old/libs/html5shiv.js
vendored
@ -1,301 +0,0 @@
|
|||||||
/**
|
|
||||||
* @preserve HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
|
||||||
*/
|
|
||||||
;(function(window, document) {
|
|
||||||
/*jshint evil:true */
|
|
||||||
/** version */
|
|
||||||
var version = '3.6.2';
|
|
||||||
|
|
||||||
/** Preset options */
|
|
||||||
var options = window.html5 || {};
|
|
||||||
|
|
||||||
/** Used to skip problem elements */
|
|
||||||
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
|
|
||||||
|
|
||||||
/** Not all elements can be cloned in IE **/
|
|
||||||
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
|
|
||||||
|
|
||||||
/** Detect whether the browser supports default html5 styles */
|
|
||||||
var supportsHtml5Styles;
|
|
||||||
|
|
||||||
/** Name of the expando, to work with multiple documents or to re-shiv one document */
|
|
||||||
var expando = '_html5shiv';
|
|
||||||
|
|
||||||
/** The id for the the documents expando */
|
|
||||||
var expanID = 0;
|
|
||||||
|
|
||||||
/** Cached data for each document */
|
|
||||||
var expandoData = {};
|
|
||||||
|
|
||||||
/** Detect whether the browser supports unknown elements */
|
|
||||||
var supportsUnknownElements;
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
try {
|
|
||||||
var a = document.createElement('a');
|
|
||||||
a.innerHTML = '<xyz></xyz>';
|
|
||||||
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
|
|
||||||
supportsHtml5Styles = ('hidden' in a);
|
|
||||||
|
|
||||||
supportsUnknownElements = a.childNodes.length == 1 || (function() {
|
|
||||||
// assign a false positive if unable to shiv
|
|
||||||
(document.createElement)('a');
|
|
||||||
var frag = document.createDocumentFragment();
|
|
||||||
return (
|
|
||||||
typeof frag.cloneNode == 'undefined' ||
|
|
||||||
typeof frag.createDocumentFragment == 'undefined' ||
|
|
||||||
typeof frag.createElement == 'undefined'
|
|
||||||
);
|
|
||||||
}());
|
|
||||||
} catch(e) {
|
|
||||||
// assign a false positive if detection fails => unable to shiv
|
|
||||||
supportsHtml5Styles = true;
|
|
||||||
supportsUnknownElements = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
}());
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a style sheet with the given CSS text and adds it to the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @param {String} cssText The CSS text.
|
|
||||||
* @returns {StyleSheet} The style element.
|
|
||||||
*/
|
|
||||||
function addStyleSheet(ownerDocument, cssText) {
|
|
||||||
var p = ownerDocument.createElement('p'),
|
|
||||||
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
|
|
||||||
|
|
||||||
p.innerHTML = 'x<style>' + cssText + '</style>';
|
|
||||||
return parent.insertBefore(p.lastChild, parent.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the value of `html5.elements` as an array.
|
|
||||||
* @private
|
|
||||||
* @returns {Array} An array of shived element node names.
|
|
||||||
*/
|
|
||||||
function getElements() {
|
|
||||||
var elements = html5.elements;
|
|
||||||
return typeof elements == 'string' ? elements.split(' ') : elements;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the data associated to the given document
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @returns {Object} An object of data.
|
|
||||||
*/
|
|
||||||
function getExpandoData(ownerDocument) {
|
|
||||||
var data = expandoData[ownerDocument[expando]];
|
|
||||||
if (!data) {
|
|
||||||
data = {};
|
|
||||||
expanID++;
|
|
||||||
ownerDocument[expando] = expanID;
|
|
||||||
expandoData[expanID] = data;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived element for the given nodeName and document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {String} nodeName name of the element
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived element.
|
|
||||||
*/
|
|
||||||
function createElement(nodeName, ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createElement(nodeName);
|
|
||||||
}
|
|
||||||
if (!data) {
|
|
||||||
data = getExpandoData(ownerDocument);
|
|
||||||
}
|
|
||||||
var node;
|
|
||||||
|
|
||||||
if (data.cache[nodeName]) {
|
|
||||||
node = data.cache[nodeName].cloneNode();
|
|
||||||
} else if (saveClones.test(nodeName)) {
|
|
||||||
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
|
|
||||||
} else {
|
|
||||||
node = data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Avoid adding some elements to fragments in IE < 9 because
|
|
||||||
// * Attributes like `name` or `type` cannot be set/changed once an element
|
|
||||||
// is inserted into a document/fragment
|
|
||||||
// * Link elements with `src` attributes that are inaccessible, as with
|
|
||||||
// a 403 response, will cause the tab/window to crash
|
|
||||||
// * Script elements appended to fragments will execute when their `src`
|
|
||||||
// or `text` property is set
|
|
||||||
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived DocumentFragment for the given document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived DocumentFragment.
|
|
||||||
*/
|
|
||||||
function createDocumentFragment(ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createDocumentFragment();
|
|
||||||
}
|
|
||||||
data = data || getExpandoData(ownerDocument);
|
|
||||||
var clone = data.frag.cloneNode(),
|
|
||||||
i = 0,
|
|
||||||
elems = getElements(),
|
|
||||||
l = elems.length;
|
|
||||||
for(;i<l;i++){
|
|
||||||
clone.createElement(elems[i]);
|
|
||||||
}
|
|
||||||
return clone;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document|DocumentFragment} ownerDocument The document.
|
|
||||||
* @param {Object} data of the document.
|
|
||||||
*/
|
|
||||||
function shivMethods(ownerDocument, data) {
|
|
||||||
if (!data.cache) {
|
|
||||||
data.cache = {};
|
|
||||||
data.createElem = ownerDocument.createElement;
|
|
||||||
data.createFrag = ownerDocument.createDocumentFragment;
|
|
||||||
data.frag = data.createFrag();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ownerDocument.createElement = function(nodeName) {
|
|
||||||
//abort shiv
|
|
||||||
if (!html5.shivMethods) {
|
|
||||||
return data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
return createElement(nodeName, ownerDocument, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
|
|
||||||
'var n=f.cloneNode(),c=n.createElement;' +
|
|
||||||
'h.shivMethods&&(' +
|
|
||||||
// unroll the `createElement` calls
|
|
||||||
getElements().join().replace(/\w+/g, function(nodeName) {
|
|
||||||
data.createElem(nodeName);
|
|
||||||
data.frag.createElement(nodeName);
|
|
||||||
return 'c("' + nodeName + '")';
|
|
||||||
}) +
|
|
||||||
');return n}'
|
|
||||||
)(html5, data.frag);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given document.
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The document to shiv.
|
|
||||||
* @returns {Document} The shived document.
|
|
||||||
*/
|
|
||||||
function shivDocument(ownerDocument) {
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
var data = getExpandoData(ownerDocument);
|
|
||||||
|
|
||||||
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
|
|
||||||
data.hasCSS = !!addStyleSheet(ownerDocument,
|
|
||||||
// corrects block display not defined in IE6/7/8/9
|
|
||||||
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
|
|
||||||
// adds styling not present in IE6/7/8/9
|
|
||||||
'mark{background:#FF0;color:#000}' +
|
|
||||||
// hides non-rendered elements
|
|
||||||
'template{display:none}'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!supportsUnknownElements) {
|
|
||||||
shivMethods(ownerDocument, data);
|
|
||||||
}
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The `html5` object is exposed so that more elements can be shived and
|
|
||||||
* existing shiving can be detected on iframes.
|
|
||||||
* @type Object
|
|
||||||
* @example
|
|
||||||
*
|
|
||||||
* // options can be changed before the script is included
|
|
||||||
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
|
|
||||||
*/
|
|
||||||
var html5 = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An array or space separated string of node names of the elements to shiv.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Array|String
|
|
||||||
*/
|
|
||||||
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* current version of html5shiv
|
|
||||||
*/
|
|
||||||
'version': version,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the HTML5 style sheet should be inserted.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivCSS': (options.shivCSS !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Is equal to true if a browser supports creating unknown/HTML5 elements
|
|
||||||
* @memberOf html5
|
|
||||||
* @type boolean
|
|
||||||
*/
|
|
||||||
'supportsUnknownElements': supportsUnknownElements,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
|
|
||||||
* methods should be overwritten.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivMethods': (options.shivMethods !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A string to describe the type of `html5` object ("default" or "default print").
|
|
||||||
* @memberOf html5
|
|
||||||
* @type String
|
|
||||||
*/
|
|
||||||
'type': 'default',
|
|
||||||
|
|
||||||
// shivs the document according to the specified `html5` object options
|
|
||||||
'shivDocument': shivDocument,
|
|
||||||
|
|
||||||
//creates a shived element
|
|
||||||
createElement: createElement,
|
|
||||||
|
|
||||||
//creates a shived documentFragment
|
|
||||||
createDocumentFragment: createDocumentFragment
|
|
||||||
};
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
// expose html5
|
|
||||||
window.html5 = html5;
|
|
||||||
|
|
||||||
// shiv the document
|
|
||||||
shivDocument(document);
|
|
||||||
|
|
||||||
}(this, document));
|
|
||||||
@ -1,836 +0,0 @@
|
|||||||
/*!
|
|
||||||
* imagesLoaded PACKAGED v3.0.4
|
|
||||||
* JavaScript is all like "You images are done yet or what?"
|
|
||||||
* MIT License
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*!
|
|
||||||
* EventEmitter v4.2.4 - git.io/ee
|
|
||||||
* Oliver Caldwell
|
|
||||||
* MIT license
|
|
||||||
* @preserve
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class for managing events.
|
|
||||||
* Can be extended to provide event functionality in other classes.
|
|
||||||
*
|
|
||||||
* @class EventEmitter Manages event registering and emitting.
|
|
||||||
*/
|
|
||||||
function EventEmitter() {}
|
|
||||||
|
|
||||||
// Shortcuts to improve speed and size
|
|
||||||
|
|
||||||
// Easy access to the prototype
|
|
||||||
var proto = EventEmitter.prototype;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Finds the index of the listener for the event in it's storage array.
|
|
||||||
*
|
|
||||||
* @param {Function[]} listeners Array of listeners to search through.
|
|
||||||
* @param {Function} listener Method to look for.
|
|
||||||
* @return {Number} Index of the specified listener, -1 if not found
|
|
||||||
* @api private
|
|
||||||
*/
|
|
||||||
function indexOfListener(listeners, listener) {
|
|
||||||
var i = listeners.length;
|
|
||||||
while (i--) {
|
|
||||||
if (listeners[i].listener === listener) {
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias a method while keeping the context correct, to allow for overwriting of target method.
|
|
||||||
*
|
|
||||||
* @param {String} name The name of the target method.
|
|
||||||
* @return {Function} The aliased method
|
|
||||||
* @api private
|
|
||||||
*/
|
|
||||||
function alias(name) {
|
|
||||||
return function aliasClosure() {
|
|
||||||
return this[name].apply(this, arguments);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the listener array for the specified event.
|
|
||||||
* Will initialise the event object and listener arrays if required.
|
|
||||||
* Will return an object if you use a regex search. The object contains keys for each matched event. So /ba[rz]/ might return an object containing bar and baz. But only if you have either defined them with defineEvent or added some listeners to them.
|
|
||||||
* Each property in the object response is an array of listener functions.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to return the listeners from.
|
|
||||||
* @return {Function[]|Object} All listener functions for the event.
|
|
||||||
*/
|
|
||||||
proto.getListeners = function getListeners(evt) {
|
|
||||||
var events = this._getEvents();
|
|
||||||
var response;
|
|
||||||
var key;
|
|
||||||
|
|
||||||
// Return a concatenated array of all matching events if
|
|
||||||
// the selector is a regular expression.
|
|
||||||
if (typeof evt === 'object') {
|
|
||||||
response = {};
|
|
||||||
for (key in events) {
|
|
||||||
if (events.hasOwnProperty(key) && evt.test(key)) {
|
|
||||||
response[key] = events[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
response = events[evt] || (events[evt] = []);
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Takes a list of listener objects and flattens it into a list of listener functions.
|
|
||||||
*
|
|
||||||
* @param {Object[]} listeners Raw listener objects.
|
|
||||||
* @return {Function[]} Just the listener functions.
|
|
||||||
*/
|
|
||||||
proto.flattenListeners = function flattenListeners(listeners) {
|
|
||||||
var flatListeners = [];
|
|
||||||
var i;
|
|
||||||
|
|
||||||
for (i = 0; i < listeners.length; i += 1) {
|
|
||||||
flatListeners.push(listeners[i].listener);
|
|
||||||
}
|
|
||||||
|
|
||||||
return flatListeners;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches the requested listeners via getListeners but will always return the results inside an object. This is mainly for internal use but others may find it useful.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to return the listeners from.
|
|
||||||
* @return {Object} All listener functions for an event in an object.
|
|
||||||
*/
|
|
||||||
proto.getListenersAsObject = function getListenersAsObject(evt) {
|
|
||||||
var listeners = this.getListeners(evt);
|
|
||||||
var response;
|
|
||||||
|
|
||||||
if (listeners instanceof Array) {
|
|
||||||
response = {};
|
|
||||||
response[evt] = listeners;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response || listeners;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adds a listener function to the specified event.
|
|
||||||
* The listener will not be added if it is a duplicate.
|
|
||||||
* If the listener returns true then it will be removed after it is called.
|
|
||||||
* If you pass a regular expression as the event name then the listener will be added to all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to attach the listener to.
|
|
||||||
* @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.addListener = function addListener(evt, listener) {
|
|
||||||
var listeners = this.getListenersAsObject(evt);
|
|
||||||
var listenerIsWrapped = typeof listener === 'object';
|
|
||||||
var key;
|
|
||||||
|
|
||||||
for (key in listeners) {
|
|
||||||
if (listeners.hasOwnProperty(key) && indexOfListener(listeners[key], listener) === -1) {
|
|
||||||
listeners[key].push(listenerIsWrapped ? listener : {
|
|
||||||
listener: listener,
|
|
||||||
once: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of addListener
|
|
||||||
*/
|
|
||||||
proto.on = alias('addListener');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Semi-alias of addListener. It will add a listener that will be
|
|
||||||
* automatically removed after it's first execution.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to attach the listener to.
|
|
||||||
* @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.addOnceListener = function addOnceListener(evt, listener) {
|
|
||||||
return this.addListener(evt, {
|
|
||||||
listener: listener,
|
|
||||||
once: true
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of addOnceListener.
|
|
||||||
*/
|
|
||||||
proto.once = alias('addOnceListener');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Defines an event name. This is required if you want to use a regex to add a listener to multiple events at once. If you don't do this then how do you expect it to know what event to add to? Should it just add to every possible match for a regex? No. That is scary and bad.
|
|
||||||
* You need to tell it what event names should be matched by a regex.
|
|
||||||
*
|
|
||||||
* @param {String} evt Name of the event to create.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.defineEvent = function defineEvent(evt) {
|
|
||||||
this.getListeners(evt);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Uses defineEvent to define multiple events.
|
|
||||||
*
|
|
||||||
* @param {String[]} evts An array of event names to define.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.defineEvents = function defineEvents(evts) {
|
|
||||||
for (var i = 0; i < evts.length; i += 1) {
|
|
||||||
this.defineEvent(evts[i]);
|
|
||||||
}
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes a listener function from the specified event.
|
|
||||||
* When passed a regular expression as the event name, it will remove the listener from all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to remove the listener from.
|
|
||||||
* @param {Function} listener Method to remove from the event.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.removeListener = function removeListener(evt, listener) {
|
|
||||||
var listeners = this.getListenersAsObject(evt);
|
|
||||||
var index;
|
|
||||||
var key;
|
|
||||||
|
|
||||||
for (key in listeners) {
|
|
||||||
if (listeners.hasOwnProperty(key)) {
|
|
||||||
index = indexOfListener(listeners[key], listener);
|
|
||||||
|
|
||||||
if (index !== -1) {
|
|
||||||
listeners[key].splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of removeListener
|
|
||||||
*/
|
|
||||||
proto.off = alias('removeListener');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adds listeners in bulk using the manipulateListeners method.
|
|
||||||
* If you pass an object as the second argument you can add to multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. You can also pass it an event name and an array of listeners to be added.
|
|
||||||
* You can also pass it a regular expression to add the array of listeners to all events that match it.
|
|
||||||
* Yeah, this function does quite a bit. That's probably a bad thing.
|
|
||||||
*
|
|
||||||
* @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add to multiple events at once.
|
|
||||||
* @param {Function[]} [listeners] An optional array of listener functions to add.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.addListeners = function addListeners(evt, listeners) {
|
|
||||||
// Pass through to manipulateListeners
|
|
||||||
return this.manipulateListeners(false, evt, listeners);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes listeners in bulk using the manipulateListeners method.
|
|
||||||
* If you pass an object as the second argument you can remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays.
|
|
||||||
* You can also pass it an event name and an array of listeners to be removed.
|
|
||||||
* You can also pass it a regular expression to remove the listeners from all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to remove from multiple events at once.
|
|
||||||
* @param {Function[]} [listeners] An optional array of listener functions to remove.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.removeListeners = function removeListeners(evt, listeners) {
|
|
||||||
// Pass through to manipulateListeners
|
|
||||||
return this.manipulateListeners(true, evt, listeners);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Edits listeners in bulk. The addListeners and removeListeners methods both use this to do their job. You should really use those instead, this is a little lower level.
|
|
||||||
* The first argument will determine if the listeners are removed (true) or added (false).
|
|
||||||
* If you pass an object as the second argument you can add/remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays.
|
|
||||||
* You can also pass it an event name and an array of listeners to be added/removed.
|
|
||||||
* You can also pass it a regular expression to manipulate the listeners of all events that match it.
|
|
||||||
*
|
|
||||||
* @param {Boolean} remove True if you want to remove listeners, false if you want to add.
|
|
||||||
* @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add/remove from multiple events at once.
|
|
||||||
* @param {Function[]} [listeners] An optional array of listener functions to add/remove.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.manipulateListeners = function manipulateListeners(remove, evt, listeners) {
|
|
||||||
var i;
|
|
||||||
var value;
|
|
||||||
var single = remove ? this.removeListener : this.addListener;
|
|
||||||
var multiple = remove ? this.removeListeners : this.addListeners;
|
|
||||||
|
|
||||||
// If evt is an object then pass each of it's properties to this method
|
|
||||||
if (typeof evt === 'object' && !(evt instanceof RegExp)) {
|
|
||||||
for (i in evt) {
|
|
||||||
if (evt.hasOwnProperty(i) && (value = evt[i])) {
|
|
||||||
// Pass the single listener straight through to the singular method
|
|
||||||
if (typeof value === 'function') {
|
|
||||||
single.call(this, i, value);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Otherwise pass back to the multiple function
|
|
||||||
multiple.call(this, i, value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// So evt must be a string
|
|
||||||
// And listeners must be an array of listeners
|
|
||||||
// Loop over it and pass each one to the multiple method
|
|
||||||
i = listeners.length;
|
|
||||||
while (i--) {
|
|
||||||
single.call(this, evt, listeners[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes all listeners from a specified event.
|
|
||||||
* If you do not specify an event then all listeners will be removed.
|
|
||||||
* That means every event will be emptied.
|
|
||||||
* You can also pass a regex to remove all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} [evt] Optional name of the event to remove all listeners for. Will remove from every event if not passed.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.removeEvent = function removeEvent(evt) {
|
|
||||||
var type = typeof evt;
|
|
||||||
var events = this._getEvents();
|
|
||||||
var key;
|
|
||||||
|
|
||||||
// Remove different things depending on the state of evt
|
|
||||||
if (type === 'string') {
|
|
||||||
// Remove all listeners for the specified event
|
|
||||||
delete events[evt];
|
|
||||||
}
|
|
||||||
else if (type === 'object') {
|
|
||||||
// Remove all events matching the regex.
|
|
||||||
for (key in events) {
|
|
||||||
if (events.hasOwnProperty(key) && evt.test(key)) {
|
|
||||||
delete events[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Remove all listeners in all events
|
|
||||||
delete this._events;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of removeEvent.
|
|
||||||
*
|
|
||||||
* Added to mirror the node API.
|
|
||||||
*/
|
|
||||||
proto.removeAllListeners = alias('removeEvent');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Emits an event of your choice.
|
|
||||||
* When emitted, every listener attached to that event will be executed.
|
|
||||||
* If you pass the optional argument array then those arguments will be passed to every listener upon execution.
|
|
||||||
* Because it uses `apply`, your array of arguments will be passed as if you wrote them out separately.
|
|
||||||
* So they will not arrive within the array on the other side, they will be separate.
|
|
||||||
* You can also pass a regular expression to emit to all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to emit and execute listeners for.
|
|
||||||
* @param {Array} [args] Optional array of arguments to be passed to each listener.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.emitEvent = function emitEvent(evt, args) {
|
|
||||||
var listeners = this.getListenersAsObject(evt);
|
|
||||||
var listener;
|
|
||||||
var i;
|
|
||||||
var key;
|
|
||||||
var response;
|
|
||||||
|
|
||||||
for (key in listeners) {
|
|
||||||
if (listeners.hasOwnProperty(key)) {
|
|
||||||
i = listeners[key].length;
|
|
||||||
|
|
||||||
while (i--) {
|
|
||||||
// If the listener returns true then it shall be removed from the event
|
|
||||||
// The function is executed either with a basic call or an apply if there is an args array
|
|
||||||
listener = listeners[key][i];
|
|
||||||
|
|
||||||
if (listener.once === true) {
|
|
||||||
this.removeListener(evt, listener.listener);
|
|
||||||
}
|
|
||||||
|
|
||||||
response = listener.listener.apply(this, args || []);
|
|
||||||
|
|
||||||
if (response === this._getOnceReturnValue()) {
|
|
||||||
this.removeListener(evt, listener.listener);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of emitEvent
|
|
||||||
*/
|
|
||||||
proto.trigger = alias('emitEvent');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Subtly different from emitEvent in that it will pass its arguments on to the listeners, as opposed to taking a single array of arguments to pass on.
|
|
||||||
* As with emitEvent, you can pass a regex in place of the event name to emit to all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to emit and execute listeners for.
|
|
||||||
* @param {...*} Optional additional arguments to be passed to each listener.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.emit = function emit(evt) {
|
|
||||||
var args = Array.prototype.slice.call(arguments, 1);
|
|
||||||
return this.emitEvent(evt, args);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets the current value to check against when executing listeners. If a
|
|
||||||
* listeners return value matches the one set here then it will be removed
|
|
||||||
* after execution. This value defaults to true.
|
|
||||||
*
|
|
||||||
* @param {*} value The new value to check for when executing listeners.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.setOnceReturnValue = function setOnceReturnValue(value) {
|
|
||||||
this._onceReturnValue = value;
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches the current value to check against when executing listeners. If
|
|
||||||
* the listeners return value matches this one then it should be removed
|
|
||||||
* automatically. It will return true by default.
|
|
||||||
*
|
|
||||||
* @return {*|Boolean} The current value to check for or the default, true.
|
|
||||||
* @api private
|
|
||||||
*/
|
|
||||||
proto._getOnceReturnValue = function _getOnceReturnValue() {
|
|
||||||
if (this.hasOwnProperty('_onceReturnValue')) {
|
|
||||||
return this._onceReturnValue;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches the events object and creates one if required.
|
|
||||||
*
|
|
||||||
* @return {Object} The events storage object.
|
|
||||||
* @api private
|
|
||||||
*/
|
|
||||||
proto._getEvents = function _getEvents() {
|
|
||||||
return this._events || (this._events = {});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Expose the class either via AMD, CommonJS or the global object
|
|
||||||
if (typeof define === 'function' && define.amd) {
|
|
||||||
define(function () {
|
|
||||||
return EventEmitter;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (typeof module === 'object' && module.exports){
|
|
||||||
module.exports = EventEmitter;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.EventEmitter = EventEmitter;
|
|
||||||
}
|
|
||||||
}.call(this));
|
|
||||||
|
|
||||||
/*!
|
|
||||||
* eventie v1.0.3
|
|
||||||
* event binding helper
|
|
||||||
* eventie.bind( elem, 'click', myFn )
|
|
||||||
* eventie.unbind( elem, 'click', myFn )
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*jshint browser: true, undef: true, unused: true */
|
|
||||||
/*global define: false */
|
|
||||||
|
|
||||||
( function( window ) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var docElem = document.documentElement;
|
|
||||||
|
|
||||||
var bind = function() {};
|
|
||||||
|
|
||||||
if ( docElem.addEventListener ) {
|
|
||||||
bind = function( obj, type, fn ) {
|
|
||||||
obj.addEventListener( type, fn, false );
|
|
||||||
};
|
|
||||||
} else if ( docElem.attachEvent ) {
|
|
||||||
bind = function( obj, type, fn ) {
|
|
||||||
obj[ type + fn ] = fn.handleEvent ?
|
|
||||||
function() {
|
|
||||||
var event = window.event;
|
|
||||||
// add event.target
|
|
||||||
event.target = event.target || event.srcElement;
|
|
||||||
fn.handleEvent.call( fn, event );
|
|
||||||
} :
|
|
||||||
function() {
|
|
||||||
var event = window.event;
|
|
||||||
// add event.target
|
|
||||||
event.target = event.target || event.srcElement;
|
|
||||||
fn.call( obj, event );
|
|
||||||
};
|
|
||||||
obj.attachEvent( "on" + type, obj[ type + fn ] );
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var unbind = function() {};
|
|
||||||
|
|
||||||
if ( docElem.removeEventListener ) {
|
|
||||||
unbind = function( obj, type, fn ) {
|
|
||||||
obj.removeEventListener( type, fn, false );
|
|
||||||
};
|
|
||||||
} else if ( docElem.detachEvent ) {
|
|
||||||
unbind = function( obj, type, fn ) {
|
|
||||||
obj.detachEvent( "on" + type, obj[ type + fn ] );
|
|
||||||
try {
|
|
||||||
delete obj[ type + fn ];
|
|
||||||
} catch ( err ) {
|
|
||||||
// can't delete window object properties
|
|
||||||
obj[ type + fn ] = undefined;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var eventie = {
|
|
||||||
bind: bind,
|
|
||||||
unbind: unbind
|
|
||||||
};
|
|
||||||
|
|
||||||
// transport
|
|
||||||
if ( typeof define === 'function' && define.amd ) {
|
|
||||||
// AMD
|
|
||||||
define( eventie );
|
|
||||||
} else {
|
|
||||||
// browser global
|
|
||||||
window.eventie = eventie;
|
|
||||||
}
|
|
||||||
|
|
||||||
})( this );
|
|
||||||
|
|
||||||
/*!
|
|
||||||
* imagesLoaded v3.0.4
|
|
||||||
* JavaScript is all like "You images are done yet or what?"
|
|
||||||
* MIT License
|
|
||||||
*/
|
|
||||||
|
|
||||||
( function( window ) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var $ = window.jQuery;
|
|
||||||
var console = window.console;
|
|
||||||
var hasConsole = typeof console !== 'undefined';
|
|
||||||
|
|
||||||
// -------------------------- helpers -------------------------- //
|
|
||||||
|
|
||||||
// extend objects
|
|
||||||
function extend( a, b ) {
|
|
||||||
for ( var prop in b ) {
|
|
||||||
a[ prop ] = b[ prop ];
|
|
||||||
}
|
|
||||||
return a;
|
|
||||||
}
|
|
||||||
|
|
||||||
var objToString = Object.prototype.toString;
|
|
||||||
function isArray( obj ) {
|
|
||||||
return objToString.call( obj ) === '[object Array]';
|
|
||||||
}
|
|
||||||
|
|
||||||
// turn element or nodeList into an array
|
|
||||||
function makeArray( obj ) {
|
|
||||||
var ary = [];
|
|
||||||
if ( isArray( obj ) ) {
|
|
||||||
// use object if already an array
|
|
||||||
ary = obj;
|
|
||||||
} else if ( typeof obj.length === 'number' ) {
|
|
||||||
// convert nodeList to array
|
|
||||||
for ( var i=0, len = obj.length; i < len; i++ ) {
|
|
||||||
ary.push( obj[i] );
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// array of single index
|
|
||||||
ary.push( obj );
|
|
||||||
}
|
|
||||||
return ary;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -------------------------- -------------------------- //
|
|
||||||
|
|
||||||
function defineImagesLoaded( EventEmitter, eventie ) {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {Array, Element, NodeList, String} elem
|
|
||||||
* @param {Object or Function} options - if function, use as callback
|
|
||||||
* @param {Function} onAlways - callback function
|
|
||||||
*/
|
|
||||||
function ImagesLoaded( elem, options, onAlways ) {
|
|
||||||
// coerce ImagesLoaded() without new, to be new ImagesLoaded()
|
|
||||||
if ( !( this instanceof ImagesLoaded ) ) {
|
|
||||||
return new ImagesLoaded( elem, options );
|
|
||||||
}
|
|
||||||
// use elem as selector string
|
|
||||||
if ( typeof elem === 'string' ) {
|
|
||||||
elem = document.querySelectorAll( elem );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.elements = makeArray( elem );
|
|
||||||
this.options = extend( {}, this.options );
|
|
||||||
|
|
||||||
if ( typeof options === 'function' ) {
|
|
||||||
onAlways = options;
|
|
||||||
} else {
|
|
||||||
extend( this.options, options );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( onAlways ) {
|
|
||||||
this.on( 'always', onAlways );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.getImages();
|
|
||||||
|
|
||||||
if ( $ ) {
|
|
||||||
// add jQuery Deferred object
|
|
||||||
this.jqDeferred = new $.Deferred();
|
|
||||||
}
|
|
||||||
|
|
||||||
// HACK check async to allow time to bind listeners
|
|
||||||
var _this = this;
|
|
||||||
setTimeout( function() {
|
|
||||||
_this.check();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ImagesLoaded.prototype = new EventEmitter();
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.options = {};
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.getImages = function() {
|
|
||||||
this.images = [];
|
|
||||||
|
|
||||||
// filter & find items if we have an item selector
|
|
||||||
for ( var i=0, len = this.elements.length; i < len; i++ ) {
|
|
||||||
var elem = this.elements[i];
|
|
||||||
// filter siblings
|
|
||||||
if ( elem.nodeName === 'IMG' ) {
|
|
||||||
this.addImage( elem );
|
|
||||||
}
|
|
||||||
// find children
|
|
||||||
var childElems = elem.querySelectorAll('img');
|
|
||||||
// concat childElems to filterFound array
|
|
||||||
for ( var j=0, jLen = childElems.length; j < jLen; j++ ) {
|
|
||||||
var img = childElems[j];
|
|
||||||
this.addImage( img );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {Image} img
|
|
||||||
*/
|
|
||||||
ImagesLoaded.prototype.addImage = function( img ) {
|
|
||||||
var loadingImage = new LoadingImage( img );
|
|
||||||
this.images.push( loadingImage );
|
|
||||||
};
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.check = function() {
|
|
||||||
var _this = this;
|
|
||||||
var checkedCount = 0;
|
|
||||||
var length = this.images.length;
|
|
||||||
this.hasAnyBroken = false;
|
|
||||||
// complete if no images
|
|
||||||
if ( !length ) {
|
|
||||||
this.complete();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onConfirm( image, message ) {
|
|
||||||
if ( _this.options.debug && hasConsole ) {
|
|
||||||
console.log( 'confirm', image, message );
|
|
||||||
}
|
|
||||||
|
|
||||||
_this.progress( image );
|
|
||||||
checkedCount++;
|
|
||||||
if ( checkedCount === length ) {
|
|
||||||
_this.complete();
|
|
||||||
}
|
|
||||||
return true; // bind once
|
|
||||||
}
|
|
||||||
|
|
||||||
for ( var i=0; i < length; i++ ) {
|
|
||||||
var loadingImage = this.images[i];
|
|
||||||
loadingImage.on( 'confirm', onConfirm );
|
|
||||||
loadingImage.check();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.progress = function( image ) {
|
|
||||||
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
|
|
||||||
// HACK - Chrome triggers event before object properties have changed. #83
|
|
||||||
var _this = this;
|
|
||||||
setTimeout( function() {
|
|
||||||
_this.emit( 'progress', _this, image );
|
|
||||||
if ( _this.jqDeferred ) {
|
|
||||||
_this.jqDeferred.notify( _this, image );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.complete = function() {
|
|
||||||
var eventName = this.hasAnyBroken ? 'fail' : 'done';
|
|
||||||
this.isComplete = true;
|
|
||||||
var _this = this;
|
|
||||||
// HACK - another setTimeout so that confirm happens after progress
|
|
||||||
setTimeout( function() {
|
|
||||||
_this.emit( eventName, _this );
|
|
||||||
_this.emit( 'always', _this );
|
|
||||||
if ( _this.jqDeferred ) {
|
|
||||||
var jqMethod = _this.hasAnyBroken ? 'reject' : 'resolve';
|
|
||||||
_this.jqDeferred[ jqMethod ]( _this );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// -------------------------- jquery -------------------------- //
|
|
||||||
|
|
||||||
if ( $ ) {
|
|
||||||
$.fn.imagesLoaded = function( options, callback ) {
|
|
||||||
var instance = new ImagesLoaded( this, options, callback );
|
|
||||||
return instance.jqDeferred.promise( $(this) );
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// -------------------------- -------------------------- //
|
|
||||||
|
|
||||||
var cache = {};
|
|
||||||
|
|
||||||
function LoadingImage( img ) {
|
|
||||||
this.img = img;
|
|
||||||
}
|
|
||||||
|
|
||||||
LoadingImage.prototype = new EventEmitter();
|
|
||||||
|
|
||||||
LoadingImage.prototype.check = function() {
|
|
||||||
// first check cached any previous images that have same src
|
|
||||||
var cached = cache[ this.img.src ];
|
|
||||||
if ( cached ) {
|
|
||||||
this.useCached( cached );
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// add this to cache
|
|
||||||
cache[ this.img.src ] = this;
|
|
||||||
|
|
||||||
// If complete is true and browser supports natural sizes,
|
|
||||||
// try to check for image status manually.
|
|
||||||
if ( this.img.complete && this.img.naturalWidth !== undefined ) {
|
|
||||||
// report based on naturalWidth
|
|
||||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If none of the checks above matched, simulate loading on detached element.
|
|
||||||
var proxyImage = this.proxyImage = new Image();
|
|
||||||
eventie.bind( proxyImage, 'load', this );
|
|
||||||
eventie.bind( proxyImage, 'error', this );
|
|
||||||
proxyImage.src = this.img.src;
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.useCached = function( cached ) {
|
|
||||||
if ( cached.isConfirmed ) {
|
|
||||||
this.confirm( cached.isLoaded, 'cached was confirmed' );
|
|
||||||
} else {
|
|
||||||
var _this = this;
|
|
||||||
cached.on( 'confirm', function( image ) {
|
|
||||||
_this.confirm( image.isLoaded, 'cache emitted confirmed' );
|
|
||||||
return true; // bind once
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.confirm = function( isLoaded, message ) {
|
|
||||||
this.isConfirmed = true;
|
|
||||||
this.isLoaded = isLoaded;
|
|
||||||
this.emit( 'confirm', this, message );
|
|
||||||
};
|
|
||||||
|
|
||||||
// trigger specified handler for event type
|
|
||||||
LoadingImage.prototype.handleEvent = function( event ) {
|
|
||||||
var method = 'on' + event.type;
|
|
||||||
if ( this[ method ] ) {
|
|
||||||
this[ method ]( event );
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.onload = function() {
|
|
||||||
this.confirm( true, 'onload' );
|
|
||||||
this.unbindProxyEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.onerror = function() {
|
|
||||||
this.confirm( false, 'onerror' );
|
|
||||||
this.unbindProxyEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.unbindProxyEvents = function() {
|
|
||||||
eventie.unbind( this.proxyImage, 'load', this );
|
|
||||||
eventie.unbind( this.proxyImage, 'error', this );
|
|
||||||
};
|
|
||||||
|
|
||||||
// ----- ----- //
|
|
||||||
|
|
||||||
return ImagesLoaded;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -------------------------- transport -------------------------- //
|
|
||||||
|
|
||||||
if ( typeof define === 'function' && define.amd ) {
|
|
||||||
// AMD
|
|
||||||
define( [
|
|
||||||
'eventEmitter/EventEmitter',
|
|
||||||
'eventie/eventie'
|
|
||||||
],
|
|
||||||
defineImagesLoaded );
|
|
||||||
} else {
|
|
||||||
// browser global
|
|
||||||
window.imagesLoaded = defineImagesLoaded(
|
|
||||||
window.EventEmitter,
|
|
||||||
window.eventie
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
})( window );
|
|
||||||
539
js_old/libs/jquery-tourbus.js
vendored
539
js_old/libs/jquery-tourbus.js
vendored
@ -1,539 +0,0 @@
|
|||||||
(function() {
|
|
||||||
var __slice = [].slice;
|
|
||||||
|
|
||||||
(function($) {
|
|
||||||
var Bus, Leg, methods, tourbus, uniqueId, _addRule, _assemble, _busses, _dataProp, _include, _tours;
|
|
||||||
tourbus = $.tourbus = function() {
|
|
||||||
var args, method;
|
|
||||||
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
|
|
||||||
method = args[0];
|
|
||||||
if (methods.hasOwnProperty(method)) {
|
|
||||||
args = args.slice(1);
|
|
||||||
} else if (method instanceof $) {
|
|
||||||
method = 'build';
|
|
||||||
} else if (typeof method === 'string') {
|
|
||||||
method = 'build';
|
|
||||||
args[0] = $(args[0]);
|
|
||||||
} else {
|
|
||||||
$.error("Unknown method of $.tourbus --", args);
|
|
||||||
}
|
|
||||||
return methods[method].apply(this, args);
|
|
||||||
};
|
|
||||||
$.fn.tourbus = function() {
|
|
||||||
var args;
|
|
||||||
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
|
|
||||||
return this.each(function() {
|
|
||||||
args.unshift($(this));
|
|
||||||
tourbus.apply(null, ['build'].concat(__slice.call(args)));
|
|
||||||
return this;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
methods = {
|
|
||||||
build: function(el, options) {
|
|
||||||
var built;
|
|
||||||
if (options == null) {
|
|
||||||
options = {};
|
|
||||||
}
|
|
||||||
options = $.extend(true, {}, tourbus.defaults, options);
|
|
||||||
built = [];
|
|
||||||
if (!(el instanceof $)) {
|
|
||||||
el = $(el);
|
|
||||||
}
|
|
||||||
el.each(function() {
|
|
||||||
return built.push(_assemble(this, options));
|
|
||||||
});
|
|
||||||
if (built.length === 0) {
|
|
||||||
$.error("" + el.selector + " was not found!");
|
|
||||||
}
|
|
||||||
if (built.length === 1) {
|
|
||||||
return built[0];
|
|
||||||
}
|
|
||||||
return built;
|
|
||||||
},
|
|
||||||
destroyAll: function() {
|
|
||||||
var bus, index, _results;
|
|
||||||
_results = [];
|
|
||||||
for (index in _busses) {
|
|
||||||
bus = _busses[index];
|
|
||||||
_results.push(bus.destroy());
|
|
||||||
}
|
|
||||||
return _results;
|
|
||||||
},
|
|
||||||
expose: function(global) {
|
|
||||||
return global.tourbus = {
|
|
||||||
Bus: Bus,
|
|
||||||
Leg: Leg
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
tourbus.defaults = {
|
|
||||||
debug: false,
|
|
||||||
autoDepart: false,
|
|
||||||
target: 'body',
|
|
||||||
startAt: 0,
|
|
||||||
onDepart: function() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
onStop: function() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
onLegStart: function() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
onLegEnd: function() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
leg: {
|
|
||||||
scrollTo: null,
|
|
||||||
scrollSpeed: 150,
|
|
||||||
scrollContext: 100,
|
|
||||||
orientation: 'bottom',
|
|
||||||
align: 'left',
|
|
||||||
width: 'auto',
|
|
||||||
margin: 10,
|
|
||||||
top: null,
|
|
||||||
left: null,
|
|
||||||
arrow: "35%"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/* Internal
|
|
||||||
*/
|
|
||||||
|
|
||||||
Bus = (function() {
|
|
||||||
|
|
||||||
function Bus(el, options) {
|
|
||||||
this.id = uniqueId();
|
|
||||||
this.$target = $(options.target);
|
|
||||||
this.$el = $(el);
|
|
||||||
this.$el.data({
|
|
||||||
tourbus: this
|
|
||||||
});
|
|
||||||
this.options = options;
|
|
||||||
this.currentLegIndex = null;
|
|
||||||
this.legs = null;
|
|
||||||
this.legEls = this.$el.children('li');
|
|
||||||
this.totalLegs = this.legEls.length;
|
|
||||||
this._setupEvents();
|
|
||||||
if (this.options.autoDepart) {
|
|
||||||
this.$el.trigger('depart.tourbus');
|
|
||||||
}
|
|
||||||
this._log('built tourbus with el', el.toString(), 'and options', this.options);
|
|
||||||
}
|
|
||||||
|
|
||||||
Bus.prototype.depart = function() {
|
|
||||||
this.running = true;
|
|
||||||
this.options.onDepart(this);
|
|
||||||
this._log('departing', this);
|
|
||||||
this.legs = this._buildLegs();
|
|
||||||
this.currentLegIndex = this.options.startAt;
|
|
||||||
return this.showLeg();
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.stop = function() {
|
|
||||||
if (!this.running) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.legs) {
|
|
||||||
$.each(this.legs, $.proxy(this.hideLeg, this));
|
|
||||||
}
|
|
||||||
this.currentLegIndex = this.options.startAt;
|
|
||||||
this.options.onStop(this);
|
|
||||||
return this.running = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.on = function(event, selector, fn) {
|
|
||||||
return this.$target.on(event, selector, fn);
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.currentLeg = function() {
|
|
||||||
if (this.currentLegIndex === null) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return this.legs[this.currentLegIndex];
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.showLeg = function(index) {
|
|
||||||
var leg, preventDefault;
|
|
||||||
if (index == null) {
|
|
||||||
index = this.currentLegIndex;
|
|
||||||
}
|
|
||||||
leg = this.legs[index];
|
|
||||||
this._log('showLeg:', leg);
|
|
||||||
preventDefault = this.options.onLegStart(leg, this);
|
|
||||||
if (preventDefault !== false) {
|
|
||||||
return leg.show();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.hideLeg = function(index) {
|
|
||||||
var leg, preventDefault;
|
|
||||||
if (index == null) {
|
|
||||||
index = this.currentLegIndex;
|
|
||||||
}
|
|
||||||
leg = this.legs[index];
|
|
||||||
this._log('hideLeg:', leg);
|
|
||||||
preventDefault = this.options.onLegEnd(leg, this);
|
|
||||||
if (preventDefault !== false) {
|
|
||||||
return leg.hide();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.repositionLegs = function() {
|
|
||||||
if (this.legs) {
|
|
||||||
return $.each(this.legs, function() {
|
|
||||||
return this.reposition();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.next = function() {
|
|
||||||
this.hideLeg();
|
|
||||||
this.currentLegIndex++;
|
|
||||||
if (this.currentLegIndex > this.totalLegs - 1) {
|
|
||||||
return this.stop();
|
|
||||||
}
|
|
||||||
return this.showLeg();
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.prev = function(cb) {
|
|
||||||
this.hideLeg();
|
|
||||||
this.currentLegIndex--;
|
|
||||||
if (this.currentLegIndex < 0) {
|
|
||||||
return this.stop();
|
|
||||||
}
|
|
||||||
return this.showLeg();
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.destroy = function() {
|
|
||||||
if (this.legs) {
|
|
||||||
$.each(this.legs, function() {
|
|
||||||
return this.destroy();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.legs = null;
|
|
||||||
delete _busses[this.id];
|
|
||||||
return this._teardownEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype._buildLegs = function() {
|
|
||||||
var _this = this;
|
|
||||||
if (this.legs) {
|
|
||||||
$.each(this.legs, function(_, leg) {
|
|
||||||
return leg.destroy();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return $.map(this.legEls, function(legEl, i) {
|
|
||||||
var $legEl, data, leg;
|
|
||||||
$legEl = $(legEl);
|
|
||||||
data = $legEl.data();
|
|
||||||
leg = new Leg({
|
|
||||||
content: $legEl.html(),
|
|
||||||
target: data.el || 'body',
|
|
||||||
bus: _this,
|
|
||||||
index: i,
|
|
||||||
rawData: data
|
|
||||||
});
|
|
||||||
leg.render();
|
|
||||||
_this.$target.append(leg.$el);
|
|
||||||
leg._position();
|
|
||||||
leg.hide();
|
|
||||||
return leg;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype._log = function() {
|
|
||||||
if (!this.options.debug) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
return console.log.apply(console, ["TOURBUS " + this.id + ":"].concat(__slice.call(arguments)));
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype._setupEvents = function() {
|
|
||||||
this.$el.on('depart.tourbus', $.proxy(this.depart, this));
|
|
||||||
this.$el.on('stop.tourbus', $.proxy(this.stop, this));
|
|
||||||
this.$el.on('next.tourbus', $.proxy(this.next, this));
|
|
||||||
return this.$el.on('prev.tourbus', $.proxy(this.prev, this));
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype._teardownEvents = function() {
|
|
||||||
return this.$el.off('.tourbus');
|
|
||||||
};
|
|
||||||
|
|
||||||
return Bus;
|
|
||||||
|
|
||||||
})();
|
|
||||||
Leg = (function() {
|
|
||||||
|
|
||||||
function Leg(options) {
|
|
||||||
this.bus = options.bus;
|
|
||||||
this.rawData = options.rawData;
|
|
||||||
this.content = options.content;
|
|
||||||
this.index = options.index;
|
|
||||||
this.options = options;
|
|
||||||
this.$target = $(options.target);
|
|
||||||
if (this.$target.length === 0) {
|
|
||||||
throw "" + this.$target.selector + " is not an element!";
|
|
||||||
}
|
|
||||||
this._setupOptions();
|
|
||||||
this._configureElement();
|
|
||||||
this._configureTarget();
|
|
||||||
this._configureScroll();
|
|
||||||
this._setupEvents();
|
|
||||||
this.bus._log("leg " + this.index + " made with options", this.options);
|
|
||||||
}
|
|
||||||
|
|
||||||
Leg.prototype.render = function() {
|
|
||||||
var arrowClass, html;
|
|
||||||
arrowClass = this.options.orientation === 'centered' ? '' : 'tourbus-arrow';
|
|
||||||
this.$el.addClass(" " + arrowClass + " tourbus-arrow-" + this.options.orientation + " ");
|
|
||||||
html = "<div class='tourbus-leg-inner'>\n " + this.content + "\n</div>";
|
|
||||||
this.$el.css({
|
|
||||||
width: this.options.width
|
|
||||||
}).html(html);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.destroy = function() {
|
|
||||||
this.$el.remove();
|
|
||||||
return this._teardownEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.reposition = function() {
|
|
||||||
this._configureTarget();
|
|
||||||
return this._position();
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._position = function() {
|
|
||||||
var css, keys, rule, selector;
|
|
||||||
if (this.options.orientation !== 'centered') {
|
|
||||||
rule = {};
|
|
||||||
keys = {
|
|
||||||
top: 'left',
|
|
||||||
bottom: 'left',
|
|
||||||
left: 'top',
|
|
||||||
right: 'top'
|
|
||||||
};
|
|
||||||
if (typeof this.options.arrow === 'number') {
|
|
||||||
this.options.arrow += 'px';
|
|
||||||
}
|
|
||||||
rule[keys[this.options.orientation]] = this.options.arrow;
|
|
||||||
selector = "#" + this.id + ".tourbus-arrow";
|
|
||||||
this.bus._log("adding rule for " + this.id, rule);
|
|
||||||
_addRule("" + selector + ":before, " + selector + ":after", rule);
|
|
||||||
}
|
|
||||||
css = this._offsets();
|
|
||||||
this.bus._log('setting offsets on leg', css);
|
|
||||||
return this.$el.css(css);
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.show = function() {
|
|
||||||
this.$el.css({
|
|
||||||
visibility: 'visible',
|
|
||||||
opacity: 1.0,
|
|
||||||
zIndex: 9999
|
|
||||||
});
|
|
||||||
return this.scrollIntoView();
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.hide = function() {
|
|
||||||
if (this.bus.options.debug) {
|
|
||||||
return this.$el.css({
|
|
||||||
visibility: 'visible',
|
|
||||||
opacity: 0.4,
|
|
||||||
zIndex: 0
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return this.$el.css({
|
|
||||||
visibility: 'hidden'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.scrollIntoView = function() {
|
|
||||||
var scrollTarget;
|
|
||||||
if (!this.willScroll) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
scrollTarget = _dataProp(this.options.scrollTo, this.$el);
|
|
||||||
this.bus._log('scrolling to', scrollTarget, this.scrollSettings);
|
|
||||||
return $.scrollTo(scrollTarget, this.scrollSettings);
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._setupOptions = function() {
|
|
||||||
var globalOptions;
|
|
||||||
globalOptions = this.bus.options.leg;
|
|
||||||
this.options.top = _dataProp(this.rawData.top, globalOptions.top);
|
|
||||||
this.options.left = _dataProp(this.rawData.left, globalOptions.left);
|
|
||||||
this.options.scrollTo = _dataProp(this.rawData.scrollTo, globalOptions.scrollTo);
|
|
||||||
this.options.scrollSpeed = _dataProp(this.rawData.scrollSpeed, globalOptions.scrollSpeed);
|
|
||||||
this.options.scrollContext = _dataProp(this.rawData.scrollContext, globalOptions.scrollContext);
|
|
||||||
this.options.margin = _dataProp(this.rawData.margin, globalOptions.margin);
|
|
||||||
this.options.arrow = this.rawData.arrow || globalOptions.arrow;
|
|
||||||
this.options.align = this.rawData.align || globalOptions.align;
|
|
||||||
this.options.width = this.rawData.width || globalOptions.width;
|
|
||||||
return this.options.orientation = this.rawData.orientation || globalOptions.orientation;
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._configureElement = function() {
|
|
||||||
this.id = "tourbus-leg-id-" + this.bus.id + "-" + this.options.index;
|
|
||||||
this.$el = $("<div class='tourbus-leg'></div>");
|
|
||||||
this.el = this.$el[0];
|
|
||||||
this.$el.attr({
|
|
||||||
id: this.id
|
|
||||||
});
|
|
||||||
return this.$el.css({
|
|
||||||
zIndex: 9999
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._setupEvents = function() {
|
|
||||||
this.$el.on('click', '.tourbus-next', $.proxy(this.bus.next, this.bus));
|
|
||||||
this.$el.on('click', '.tourbus-prev', $.proxy(this.bus.prev, this.bus));
|
|
||||||
return this.$el.on('click', '.tourbus-stop', $.proxy(this.bus.stop, this.bus));
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._teardownEvents = function() {
|
|
||||||
return this.$el.off('click');
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._configureTarget = function() {
|
|
||||||
this.targetOffset = this.$target.offset();
|
|
||||||
if (_dataProp(this.options.top, false)) {
|
|
||||||
this.targetOffset.top = this.options.top;
|
|
||||||
}
|
|
||||||
if (_dataProp(this.options.left, false)) {
|
|
||||||
this.targetOffset.left = this.options.left;
|
|
||||||
}
|
|
||||||
this.targetWidth = this.$target.outerWidth();
|
|
||||||
return this.targetHeight = this.$target.outerHeight();
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._configureScroll = function() {
|
|
||||||
this.willScroll = $.fn.scrollTo && this.options.scrollTo !== false;
|
|
||||||
return this.scrollSettings = {
|
|
||||||
offset: -this.options.scrollContext,
|
|
||||||
easing: 'linear',
|
|
||||||
axis: 'y',
|
|
||||||
duration: this.options.scrollSpeed
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._offsets = function() {
|
|
||||||
var dimension, elHalf, elHeight, elWidth, offsets, targetHalf, targetHeightOverride, validOrientations;
|
|
||||||
elHeight = this.$el.height();
|
|
||||||
elWidth = this.$el.width();
|
|
||||||
offsets = {};
|
|
||||||
switch (this.options.orientation) {
|
|
||||||
case 'centered':
|
|
||||||
targetHeightOverride = $(window).height();
|
|
||||||
offsets.top = this.options.top;
|
|
||||||
if (!_dataProp(offsets.top, false)) {
|
|
||||||
offsets.top = (targetHeightOverride / 2) - (elHeight / 2);
|
|
||||||
}
|
|
||||||
offsets.left = (this.targetWidth / 2) - (elWidth / 2);
|
|
||||||
break;
|
|
||||||
case 'left':
|
|
||||||
offsets.top = this.targetOffset.top;
|
|
||||||
offsets.left = this.targetOffset.left - elWidth - this.options.margin;
|
|
||||||
break;
|
|
||||||
case 'right':
|
|
||||||
offsets.top = this.targetOffset.top;
|
|
||||||
offsets.left = this.targetOffset.left + this.targetWidth + this.options.margin;
|
|
||||||
break;
|
|
||||||
case 'top':
|
|
||||||
offsets.top = this.targetOffset.top - elHeight - this.options.margin;
|
|
||||||
offsets.left = this.targetOffset.left;
|
|
||||||
break;
|
|
||||||
case 'bottom':
|
|
||||||
offsets.top = this.targetOffset.top + this.targetHeight + this.options.margin;
|
|
||||||
offsets.left = this.targetOffset.left;
|
|
||||||
}
|
|
||||||
validOrientations = {
|
|
||||||
top: ['left', 'right'],
|
|
||||||
bottom: ['left', 'right'],
|
|
||||||
left: ['top', 'bottom'],
|
|
||||||
right: ['top', 'bottom']
|
|
||||||
};
|
|
||||||
if (_include(this.options.orientation, validOrientations[this.options.align])) {
|
|
||||||
switch (this.options.align) {
|
|
||||||
case 'right':
|
|
||||||
offsets.left += this.targetWidth - elWidth;
|
|
||||||
break;
|
|
||||||
case 'bottom':
|
|
||||||
offsets.top += this.targetHeight - elHeight;
|
|
||||||
}
|
|
||||||
} else if (this.options.align === 'center') {
|
|
||||||
if (_include(this.options.orientation, validOrientations.left)) {
|
|
||||||
targetHalf = this.targetWidth / 2;
|
|
||||||
elHalf = elWidth / 2;
|
|
||||||
dimension = 'left';
|
|
||||||
} else {
|
|
||||||
targetHalf = this.targetHeight / 2;
|
|
||||||
elHalf = elHeight / 2;
|
|
||||||
dimension = 'top';
|
|
||||||
}
|
|
||||||
if (targetHalf > elHalf) {
|
|
||||||
offsets[dimension] += targetHalf - elHalf;
|
|
||||||
} else {
|
|
||||||
offsets[dimension] -= elHalf - targetHalf;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return offsets;
|
|
||||||
};
|
|
||||||
|
|
||||||
return Leg;
|
|
||||||
|
|
||||||
})();
|
|
||||||
_tours = 0;
|
|
||||||
uniqueId = function() {
|
|
||||||
return _tours++;
|
|
||||||
};
|
|
||||||
_busses = {};
|
|
||||||
_assemble = function() {
|
|
||||||
var bus;
|
|
||||||
bus = (function(func, args, ctor) {
|
|
||||||
ctor.prototype = func.prototype;
|
|
||||||
var child = new ctor, result = func.apply(child, args);
|
|
||||||
return Object(result) === result ? result : child;
|
|
||||||
})(Bus, arguments, function(){});
|
|
||||||
_busses[bus.id] = bus;
|
|
||||||
return bus;
|
|
||||||
};
|
|
||||||
_dataProp = function(possiblyFalsy, alternative) {
|
|
||||||
if (possiblyFalsy === null || typeof possiblyFalsy === 'undefined') {
|
|
||||||
return alternative;
|
|
||||||
}
|
|
||||||
return possiblyFalsy;
|
|
||||||
};
|
|
||||||
_include = function(value, array) {
|
|
||||||
return $.inArray(value, array || []) !== -1;
|
|
||||||
};
|
|
||||||
return _addRule = (function(styleTag) {
|
|
||||||
var sheet;
|
|
||||||
styleTag.type = 'text/css';
|
|
||||||
document.getElementsByTagName('head')[0].appendChild(styleTag);
|
|
||||||
sheet = document.styleSheets[document.styleSheets.length - 1];
|
|
||||||
return function(selector, css) {
|
|
||||||
var key, propText;
|
|
||||||
propText = $.map((function() {
|
|
||||||
var _results;
|
|
||||||
_results = [];
|
|
||||||
for (key in css) {
|
|
||||||
_results.push(key);
|
|
||||||
}
|
|
||||||
return _results;
|
|
||||||
})(), function(p) {
|
|
||||||
return "" + p + ":" + css[p];
|
|
||||||
}).join(';');
|
|
||||||
try {
|
|
||||||
if (sheet.insertRule) {
|
|
||||||
sheet.insertRule("" + selector + " { " + propText + " }", (sheet.cssRules || sheet.rules).length);
|
|
||||||
} else {
|
|
||||||
sheet.addRule(selector, propText);
|
|
||||||
}
|
|
||||||
} catch (_error) {}
|
|
||||||
};
|
|
||||||
})(document.createElement('style'));
|
|
||||||
})(jQuery);
|
|
||||||
|
|
||||||
}).call(this);
|
|
||||||
1
js_old/libs/jquery-tourbus.min.js
vendored
1
js_old/libs/jquery-tourbus.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,139 +0,0 @@
|
|||||||
var debugMode = false; // debug mode
|
|
||||||
var sendPrintCommands = true; // if Doodle3d should send print commands to the 3d printer
|
|
||||||
var communicateWithWifibox = true; // if Doodle3d should try interfacing with the wifibox (in case one is not connected)
|
|
||||||
var wifiboxIsRemote = false; // when you want to run the client on a computer and have it remotely connect to the wifibox
|
|
||||||
var autoUpdate = true; // auto retrieve updates about temperature and progress from printer
|
|
||||||
|
|
||||||
var printer = new Printer();
|
|
||||||
var progressbar = new Progressbar();
|
|
||||||
var thermometer = new Thermometer();
|
|
||||||
var settingsWindow = new SettingsWindow();
|
|
||||||
var message = new Message();
|
|
||||||
|
|
||||||
var firstTimeSettingsLoaded = true;
|
|
||||||
|
|
||||||
var wifiboxURL; // Using the uhttpd lua handler as default, because of better performance
|
|
||||||
var wifiboxCGIBinURL; // CGI-bin, for some network stuff, where it needs to restart the webserver for example
|
|
||||||
|
|
||||||
var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer;
|
|
||||||
|
|
||||||
$(function() {
|
|
||||||
console.log("ready");
|
|
||||||
|
|
||||||
|
|
||||||
//TODO give this a more logical place in code
|
|
||||||
|
|
||||||
if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1");
|
|
||||||
if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1");
|
|
||||||
if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1");
|
|
||||||
if (getURLParameter("r") != "null") wifiboxIsRemote = (getURLParameter("r") == "1");
|
|
||||||
if (getURLParameter("u") != "null") autoUpdate = (getURLParameter("u") == "1");
|
|
||||||
|
|
||||||
if (wifiboxIsRemote) {
|
|
||||||
wifiboxURL = "http://192.168.5.1/d3dapi";
|
|
||||||
wifiboxCGIBinURL = "http://192.168.5.1/cgi-bin/d3dapi";
|
|
||||||
} else {
|
|
||||||
wifiboxURL = "http://" + window.location.host + "/d3dapi";
|
|
||||||
wifiboxCGIBinURL = "http://" + window.location.host + "/cgi-bin/d3dapi";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!communicateWithWifibox) {
|
|
||||||
sendPrintCommands = false; // 'communicateWithWifibox = false' implies this
|
|
||||||
}
|
|
||||||
console.log("debugMode: " + debugMode);
|
|
||||||
console.log("sendPrintCommands: " + sendPrintCommands);
|
|
||||||
console.log("communicateWithWifibox: " + communicateWithWifibox);
|
|
||||||
console.log("wifiboxIsRemote: " + wifiboxIsRemote);
|
|
||||||
console.log("wifibox URL: " + wifiboxURL);
|
|
||||||
|
|
||||||
initDoodleDrawing();
|
|
||||||
initPreviewRendering();
|
|
||||||
initLayouting();
|
|
||||||
initSidebars();
|
|
||||||
initButtonBehavior();
|
|
||||||
initVerticalShapes();
|
|
||||||
|
|
||||||
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
|
|
||||||
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
|
|
||||||
|
|
||||||
message.init($("#message"));
|
|
||||||
|
|
||||||
printer.init();
|
|
||||||
$(document).on(Printer.UPDATE,update);
|
|
||||||
|
|
||||||
settingsWindow.init(wifiboxURL,wifiboxCGIBinURL);
|
|
||||||
$(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
|
|
||||||
|
|
||||||
if(debugMode) {
|
|
||||||
console.log("debug mode is true");
|
|
||||||
$("body").css("overflow", "auto");
|
|
||||||
$("#debug_textArea").css("display", "block");
|
|
||||||
$("#preview_tmp").css("display", "block");
|
|
||||||
|
|
||||||
$("#debug_display").css("display", "block");
|
|
||||||
|
|
||||||
// show and hide the progressguage and thermometer
|
|
||||||
showhideInterval = setInterval(showOrHideThermo, 2500);
|
|
||||||
|
|
||||||
// $("#debugContainer").css("display", "block");
|
|
||||||
|
|
||||||
/* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
|
|
||||||
// todo remove this temporary code...
|
|
||||||
/*
|
|
||||||
setTimeout(function() {
|
|
||||||
$("#startgcode").text("");
|
|
||||||
$("#startgcode").append("G21 (mm) \n");
|
|
||||||
$("#startgcode").append("G91 (relative) \n");
|
|
||||||
$("#startgcode").append("G28 X0 Y0 Z0 (physical home) \n");
|
|
||||||
$("#startgcode").append("M104 S230 (temperature) \n");
|
|
||||||
$("#startgcode").append("G1 E10 F250 (flow) \n");
|
|
||||||
$("#startgcode").append("G92 X-100 Y-100 Z0 E10 \n");
|
|
||||||
$("#startgcode").append("G1 Z3 F5000 (prevent diagonal line) \n");
|
|
||||||
$("#startgcode").append("G90 (absolute) \n");
|
|
||||||
$("#startgcode").append("M106 (fan on)");
|
|
||||||
console.log("$('#startgcode'): " + $("#startgcode").val());
|
|
||||||
|
|
||||||
$("#endgcode").text("");
|
|
||||||
$("#endgcode").append("G1 X-100 Y-100 F15000 (fast homing) \n");
|
|
||||||
$("#endgcode").append("M107 \n");
|
|
||||||
$("#endgcode").append("M84 (disable axes) \n");
|
|
||||||
console.log("$('#endgcode'): " + $("#endgcode").val());
|
|
||||||
}, 1000);
|
|
||||||
//*/
|
|
||||||
}
|
|
||||||
<<<<<<< .merge_file_HNcA77
|
|
||||||
=======
|
|
||||||
//showhideInterval = setInterval(showOrHideThermo, 2500);
|
|
||||||
>>>>>>> .merge_file_0hlg7g
|
|
||||||
});
|
|
||||||
|
|
||||||
/*var showhideInterval;
|
|
||||||
var showOrHide = false;
|
|
||||||
|
|
||||||
function showOrHideThermo() {
|
|
||||||
console.log("f:showOrHideThermo()");
|
|
||||||
if (showOrHide) {
|
|
||||||
thermometer.hide();
|
|
||||||
progressbar.hide();
|
|
||||||
} else {
|
|
||||||
thermometer.show();
|
|
||||||
progressbar.show();
|
|
||||||
|
|
||||||
}
|
|
||||||
showOrHide = !showOrHide;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
function settingsLoaded() {
|
|
||||||
console.log("settingsLoaded");
|
|
||||||
console.log("autoHeatup: ",settings["printer.heatup.enabled"]);
|
|
||||||
if(settings["printer.heatup.enabled"]) {
|
|
||||||
if(firstTimeSettingsLoaded) {
|
|
||||||
printer.preheat();
|
|
||||||
firstTimeSettingsLoaded = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setDebugText(text) {
|
|
||||||
$("#debug_display").text(text);
|
|
||||||
}
|
|
||||||
@ -1,209 +0,0 @@
|
|||||||
//*
|
|
||||||
var $preview;
|
|
||||||
var preview;
|
|
||||||
var previewCtx;
|
|
||||||
|
|
||||||
$preview = $("#preview");
|
|
||||||
preview = document.getElementById('preview');
|
|
||||||
previewCtx = preview.getContext('2d');
|
|
||||||
|
|
||||||
var svgPathRegExp = /[LM]\d* \d*/ig;
|
|
||||||
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
|
|
||||||
|
|
||||||
var prevRedrawTime = new Date().getTime();
|
|
||||||
var redrawInterval = 1000 / 30; // ms
|
|
||||||
|
|
||||||
function initPreviewRendering() {
|
|
||||||
console.log("f:initPreviewRendering()");
|
|
||||||
|
|
||||||
layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
layerOffsetY = preview.height - 1.75 * layerCY;
|
|
||||||
yStep = preview.height / 150;
|
|
||||||
|
|
||||||
redrawPreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
//var numLayers = 100; //50
|
|
||||||
var numLayers = 100; // 100
|
|
||||||
var globalScale = 0.3; // global scale of preview (width preview / width canvas)
|
|
||||||
var globalAlpha = 0.20; // global alpha of preview
|
|
||||||
var scaleY = 0.4; // additional vertical scale per path for 3d effect
|
|
||||||
var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
|
|
||||||
var strokeWidth = 2; //4;
|
|
||||||
//var rStep = Math.PI/40; //Math.PI/40; //
|
|
||||||
var rStep = Math.PI/45; // Math.PI/180; //Math.PI/40; //
|
|
||||||
var yStep = preview.height / 150; // 3; //6;
|
|
||||||
//var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
|
|
||||||
//var svgHeight = 450; //450; //parseInt($(svg).css("height"));
|
|
||||||
var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
var layerOffsetY= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
|
|
||||||
var prevX = 0;
|
|
||||||
var prevY = 0;
|
|
||||||
var highlight = true; //highlight bottom, middle and top layers
|
|
||||||
|
|
||||||
var linesRaw = "";
|
|
||||||
var debug_redrawSimplification = 6;
|
|
||||||
function redrawPreview(redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
//*/
|
|
||||||
//TODO
|
|
||||||
/*
|
|
||||||
het up/down en twist left/right gaat nu wat traag. Juist dat gaat veel sneller met de toDataURL oplossing
|
|
||||||
Is het een idee om op het einde van een touchevent wel de image versie te renderen maar tijdens het tekenen
|
|
||||||
niet?
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (!redrawLess) {
|
|
||||||
//debug_redrawSimplification = Math.round(_points.length / 65);
|
|
||||||
//*
|
|
||||||
if (_points.length < 100) {
|
|
||||||
debug_redrawSimplification = 6;
|
|
||||||
} else if (_points.length < 250) {
|
|
||||||
debug_redrawSimplification = 7;
|
|
||||||
} else if (_points.length < 400) {
|
|
||||||
debug_redrawSimplification = 8;
|
|
||||||
} else if (_points.length < 550) {
|
|
||||||
debug_redrawSimplification = 9;
|
|
||||||
} else if (_points.length < 700) {
|
|
||||||
debug_redrawSimplification = 10;
|
|
||||||
} else {
|
|
||||||
debug_redrawSimplification = 11;
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
//preview.width = preview.width;
|
|
||||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
|
||||||
// previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
|
|
||||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
// previewCtx.translate(-layerCX,-layerCY);
|
|
||||||
// previewCtx.translate(-doodleTransform[0] * globalScale, -doodleTransform[1] * globalScale);
|
|
||||||
|
|
||||||
// previewCtx.setTransform(doodleTransform[2], 0, 0, doodleTransform[3], 0, 0);
|
|
||||||
|
|
||||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[0]);
|
|
||||||
|
|
||||||
previewCtx.beginPath();
|
|
||||||
previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
for(var j = 1; j < _points.length; j++) {
|
|
||||||
adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
|
|
||||||
// if (redrawLess && Math.floor(j/debug_redrawSimplification)%2 == 0 ) continue;
|
|
||||||
// if (redrawLess && Math.floor(j/debug_redrawSimplification)%2 == 0 ) continue;
|
|
||||||
if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
|
|
||||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
}
|
|
||||||
previewCtx.stroke();
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
function centeredAndScaledDoodlePoint(p) {
|
|
||||||
var obj = { x: 0, y: 0};
|
|
||||||
|
|
||||||
obj.x = (p[0] - ((doodleBounds[2] - doodleBounds[0])/2)) * (globalScale * doodleTransform[2]);
|
|
||||||
obj.y = (p[1] - ((doodleBounds[3] - doodleBounds[1])/2)) * (globalScale * doodleTransform[3]);
|
|
||||||
// obj.x = (p[0] - (doodleBounds[2] - doodleBounds[0])) * (globalScale * doodleTransform[2]);
|
|
||||||
// obj.y = (p[1] - (doodleBounds[3] - doodleBounds[1])) * (globalScale * doodleTransform[3]);
|
|
||||||
// obj.x = (p[0] - doodleTransform[0]) * (globalScale * doodleTransform[2]);
|
|
||||||
// obj.y = (p[1] - doodleTransform[1]) * (globalScale * doodleTransform[3]);
|
|
||||||
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
//*
|
|
||||||
var updatePrevX = -1;
|
|
||||||
var updatePrevY = -1;
|
|
||||||
function updatePreview(_x, _y, redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
redrawLess = false;
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
if (updatePrevX == -1 || updatePrevY == -1) {
|
|
||||||
updatePrevX = _x;
|
|
||||||
updatePrevY = _y;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
|
||||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
|
|
||||||
|
|
||||||
previewCtx.beginPath();
|
|
||||||
var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
|
|
||||||
previewCtx.moveTo(prevPoint.x, prevPoint.y);
|
|
||||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
|
|
||||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
previewCtx.stroke();
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
updatePrevX = _x;
|
|
||||||
updatePrevY = _y;
|
|
||||||
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
@ -1,355 +0,0 @@
|
|||||||
//*
|
|
||||||
var $preview;
|
|
||||||
var preview;
|
|
||||||
var previewCtx;
|
|
||||||
|
|
||||||
var preview_tmp;
|
|
||||||
var previewCtx_tmp;
|
|
||||||
|
|
||||||
var previewDefaults = {
|
|
||||||
rotation: Math.PI/90,
|
|
||||||
numLayers: 10
|
|
||||||
}
|
|
||||||
|
|
||||||
var svgPathRegExp = /[LM]\d* \d*/ig;
|
|
||||||
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
|
|
||||||
|
|
||||||
var prevRedrawTime = new Date().getTime();
|
|
||||||
var redrawInterval = 1000 / 30; // ms
|
|
||||||
|
|
||||||
function initPreviewRendering() {
|
|
||||||
console.log("f:initPreviewRendering()");
|
|
||||||
|
|
||||||
$preview = $("#preview");
|
|
||||||
preview = $preview[0];
|
|
||||||
previewCtx = preview.getContext('2d');
|
|
||||||
|
|
||||||
// DEBUG --> mbt preview_tmp (voor de toImageData truc)
|
|
||||||
var _ratio = preview.width / canvas.width;
|
|
||||||
preview_tmp = document.getElementById('preview_tmp');
|
|
||||||
preview_tmp.width = preview.width;
|
|
||||||
preview_tmp.height = canvas.height * _ratio;
|
|
||||||
$("#preview_tmp").css("top", -preview_tmp.height);
|
|
||||||
|
|
||||||
previewCtx_tmp = preview_tmp.getContext('2d');
|
|
||||||
|
|
||||||
calcPreviewCanvasProperties();
|
|
||||||
redrawPreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
function calcPreviewCanvasProperties() {
|
|
||||||
console.log("f:calcPreviewCanvasProperties()");
|
|
||||||
|
|
||||||
globalScale = preview.width / canvasWidth;
|
|
||||||
layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
// layerOffsetY = preview.height - 1.75 * layerCY;
|
|
||||||
layerOffsetY = preview.height * (1 - previewVerticalPadding.bottom);
|
|
||||||
yStep = (preview.height - (preview.height * (previewVerticalPadding.top + previewVerticalPadding.bottom))) / maxNumLayers;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping)
|
|
||||||
var previewRotationLimit = Math.PI / 30; // rough estimate
|
|
||||||
|
|
||||||
var numLayers = previewDefaults.numLayers; // current number of preview layers
|
|
||||||
var maxNumLayers= 100; // maximum number of preview layers
|
|
||||||
var minNumLayers= 2; // minimum number of preview layers
|
|
||||||
var globalScale = 0.3; // global scale of preview (width preview / width canvas)
|
|
||||||
var globalAlpha = 0.20; // global alpha of preview
|
|
||||||
var scaleY = 0.4; // additional vertical scale per path for 3d effect
|
|
||||||
var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
|
|
||||||
var previewVerticalPadding = { "top" : .15, "bottom" : 0.12 }; // %
|
|
||||||
var strokeWidth = 2; //4;
|
|
||||||
//var rStep = Math.PI/40; //Math.PI/40; //
|
|
||||||
var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //
|
|
||||||
var yStep;// = preview.height / 150; // 3; //6;
|
|
||||||
//var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
|
|
||||||
//var svgHeight = 450; //450; //parseInt($(svg).css("height"));
|
|
||||||
var layerCX, layerCY;
|
|
||||||
//var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
//var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
var layerOffsetY; //= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
|
|
||||||
var prevX = 0;
|
|
||||||
var prevY = 0;
|
|
||||||
var highlight = true; //highlight bottom, middle and top layers
|
|
||||||
|
|
||||||
var linesRaw = "";
|
|
||||||
var debug_redrawSimplification = 6;
|
|
||||||
function redrawPreview(redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
|
|
||||||
if (!redrawLess) {
|
|
||||||
//debug_redrawSimplification = Math.round(_points.length / 65);
|
|
||||||
//*
|
|
||||||
if (_points.length < 100) {
|
|
||||||
debug_redrawSimplification = 6;
|
|
||||||
} else if (_points.length < 250) {
|
|
||||||
debug_redrawSimplification = 7;
|
|
||||||
} else if (_points.length < 400) {
|
|
||||||
debug_redrawSimplification = 8;
|
|
||||||
} else if (_points.length < 550) {
|
|
||||||
debug_redrawSimplification = 9;
|
|
||||||
} else if (_points.length < 700) {
|
|
||||||
debug_redrawSimplification = 10;
|
|
||||||
} else {
|
|
||||||
debug_redrawSimplification = 11;
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
|
|
||||||
}
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
//preview.width = preview.width;
|
|
||||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
// previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
|
||||||
previewCtx.translate(layerCX, layerOffsetY + y);
|
|
||||||
// previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
|
|
||||||
previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor);
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
|
|
||||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[0]);
|
|
||||||
|
|
||||||
previewCtx.beginPath();
|
|
||||||
previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
for(var j = 1; j < _points.length; j++) {
|
|
||||||
adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
|
|
||||||
if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
|
|
||||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
}
|
|
||||||
previewCtx.stroke();
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderToImageDataPreview() {
|
|
||||||
console.log("f:renderToImageDataPreview()");
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
|
|
||||||
//*
|
|
||||||
// the first step
|
|
||||||
previewCtx_tmp.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx_tmp.lineWidth = strokeWidth;
|
|
||||||
previewCtx_tmp.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
previewCtx_tmp.save();
|
|
||||||
previewCtx_tmp.translate(layerCX, layerCY);
|
|
||||||
previewCtx_tmp.scale(viewerScale, viewerScale);
|
|
||||||
previewCtx_tmp.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
|
|
||||||
var adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[0]);
|
|
||||||
|
|
||||||
previewCtx_tmp.beginPath();
|
|
||||||
previewCtx_tmp.moveTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
|
|
||||||
for(var j = 1; j < _points.length; j++) {
|
|
||||||
adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[j])
|
|
||||||
previewCtx_tmp.lineTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
|
|
||||||
}
|
|
||||||
previewCtx_tmp.stroke();
|
|
||||||
previewCtx_tmp.closePath();
|
|
||||||
previewCtx_tmp.restore();
|
|
||||||
//*/
|
|
||||||
|
|
||||||
// var saved_rect = previewCtx_tmp.getImageData(0, 0, layerCX*2, layerCY*2);
|
|
||||||
var saved_rect_todataurl = preview_tmp.toDataURL();
|
|
||||||
doodleImageCapture = new Image();
|
|
||||||
doodleImageCapture.onload = function() {
|
|
||||||
|
|
||||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
for(var i=0;i<numLayers;i++) {
|
|
||||||
|
|
||||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
|
||||||
// previewCtx.scale(1, scaleY)
|
|
||||||
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor)
|
|
||||||
=======
|
|
||||||
// previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+y);
|
|
||||||
previewCtx.scale(1, scaleY)
|
|
||||||
>>>>>>> new_layouting_approach
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate(-layerCX,-layerCY);
|
|
||||||
|
|
||||||
previewCtx.drawImage(doodleImageCapture, 0, 0);
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
doodleImageCapture.src = saved_rect_todataurl;
|
|
||||||
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
// called by the move up/down or twist left/right buttons
|
|
||||||
// it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
|
|
||||||
function redrawRenderedPreview(redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
console.log("f:redrawRenderedPreview()");
|
|
||||||
|
|
||||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%2 != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
|
||||||
// previewCtx.scale(1, scaleY)
|
|
||||||
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor);
|
|
||||||
=======
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+y);
|
|
||||||
// previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
|
||||||
previewCtx.scale(1, scaleY)
|
|
||||||
>>>>>>> new_layouting_approach
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate(-layerCX,-layerCY);
|
|
||||||
|
|
||||||
previewCtx.drawImage(doodleImageCapture, 0, 0);
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function centeredAndScaledDoodlePoint(p) {
|
|
||||||
var obj = { x: 0, y: 0};
|
|
||||||
|
|
||||||
obj.x = (p[0] - ((doodleBounds[2] - doodleBounds[0])/2)) * (globalScale * doodleTransform[2]);
|
|
||||||
obj.y = (p[1] - ((doodleBounds[3] - doodleBounds[1])/2)) * (globalScale * doodleTransform[3]);
|
|
||||||
// obj.x = (p[0] - (doodleBounds[2] - doodleBounds[0])) * (globalScale * doodleTransform[2]);
|
|
||||||
// obj.y = (p[1] - (doodleBounds[3] - doodleBounds[1])) * (globalScale * doodleTransform[3]);
|
|
||||||
// obj.x = (p[0] - doodleTransform[0]) * (globalScale * doodleTransform[2]);
|
|
||||||
// obj.y = (p[1] - doodleTransform[1]) * (globalScale * doodleTransform[3]);
|
|
||||||
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
//*
|
|
||||||
var updatePrevX = -1;
|
|
||||||
var updatePrevY = -1;
|
|
||||||
function updatePreview(_x, _y, redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
redrawLess = false;
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
if (updatePrevX == -1 || updatePrevY == -1) {
|
|
||||||
updatePrevX = _x;
|
|
||||||
updatePrevY = _y;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
// previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
|
||||||
previewCtx.translate(layerCX, layerOffsetY + y);
|
|
||||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
|
|
||||||
|
|
||||||
previewCtx.beginPath();
|
|
||||||
var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
|
|
||||||
previewCtx.moveTo(prevPoint.x, prevPoint.y);
|
|
||||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
|
|
||||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
previewCtx.stroke();
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
updatePrevX = _x;
|
|
||||||
updatePrevY = _y;
|
|
||||||
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
@ -6,6 +6,7 @@
|
|||||||
width: @center-panel-width;
|
width: @center-panel-width;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 1%;
|
padding-top: 1%;
|
||||||
|
border: 1px solid red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logopanel {
|
.logopanel {
|
||||||
|
|||||||
@ -143,23 +143,43 @@
|
|||||||
|
|
||||||
.buttonGroup {
|
.buttonGroup {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
z-index: 1000;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 60px;
|
border: 3px solid black;
|
||||||
border: 4px solid black;
|
|
||||||
border-radius: 40px;
|
border-radius: 40px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 200px;
|
|
||||||
padding: 5% 5% 5% 5%;
|
padding: 5% 5% 5% 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonGroupAdd {
|
.buttonGroupAdd {
|
||||||
display: none;
|
display: none;
|
||||||
|
z-index: 1000;
|
||||||
margin-top: -60%;
|
margin-top: -60%;
|
||||||
}
|
left: 60px;
|
||||||
|
width: 140px; /*fixme: can this grow based on it's content?*/
|
||||||
|
|
||||||
.btnWordArt, .btnShape {
|
.btnWordArt, .btnShape {
|
||||||
width: 48%;
|
width: 60px; /* scaled down >50% */
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonGroupVertical {
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
padding-top: 20px;
|
||||||
|
width: 65px;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnToggleVertical {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
BIN
www/img/buttons/btnArrowOpen.png
Normal file
BIN
www/img/buttons/btnArrowOpen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 B |
Binary file not shown.
|
Before Width: | Height: | Size: 107 B |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user