Merge branch 'text-experiment' into develop

Conflicts:
	js/Help.js
	js/buttonbehaviors.js
	js/main.js
	js_src/Keyboard.js
	js_src/Shape.js
	js_src/verticalShapes.js
	www/index.html
This commit is contained in:
Wouter R 2014-01-17 13:21:02 +01:00
commit d634f2e9c3
150 changed files with 3325 additions and 9559 deletions

View File

@ -16,28 +16,35 @@ module.exports = function(grunt) {
},
js: {
src: [
'js_src/Shape.js',
'js_src/Svg.js',
'js_src/Keyboard.js',
'js_src/SettingsWindow.js',
'js_src/UpdatePanel.js',
'js_src/PrinterPanel.js',
'js_src/Help.js',
'js_src/d3dServerInterfacing.js',
'js_src/verticalShapes.js',
'js_src/buttonbehaviors.js',
'js_src/canvasDrawing.js',
'js_src/previewRendering.js',
'js_src/gcodeGenerating.js',
'js_src/init_layout.js',
'js_src/Printer.js',
'js_src/Progressbar.js',
'js_src/Thermometer.js',
'js_src/utils.js',
'js_src/sidebar.js',
'js_src/Message.js',
'js_src/main.js',
'js_src/sketches.js'
'js/Events.js',
'js/Class.js',
'js/Button.js',
'js/Popup.js',
'js/btnMove.js',
'js/WordArt.js',
'js/Shape.js',
'js/AddShapeDialog.js',
'js/Svg.js',
'js/Keyboard.js',
'js/SettingsWindow.js',
'js/UpdatePanel.js',
'js/PrinterPanel.js',
'js/Help.js',
'js/d3dServerInterfacing.js',
'js/verticalShapes.js',
'js/buttonbehaviors.js',
'js/canvasDrawing.js',
'js/previewRendering.js',
'js/gcodeGenerating.js',
'js/init_layout.js',
'js/Printer.js',
'js/Progressbar.js',
'js/Thermometer.js',
'js/utils.js',
'js/sidebar.js',
'js/Message.js',
'js/main.js',
'js/sketches.js'
],
dest: 'www/js/<%= pkg.name %>.js'
}
@ -57,8 +64,8 @@ module.exports = function(grunt) {
}
},
jslibs: {
cwd: "js_src/libs/",
// src: ['js_src/libs/*.js', '!js_src/libs/*.min.js'], // source files mask
cwd: "js/libs/",
// src: ['js/libs/*.js', '!js/libs/*.min.js'], // source files mask
src: ['*.js', '!*.min.js'], // source files mask
dest: 'www/js/libs/', // destination folder
expand: true, // allow dynamic building
@ -106,12 +113,12 @@ module.exports = function(grunt) {
},
watch: {
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: ["jshint", "concat", "uglify"]
},
javascriptLibs: {
files: ["js_src/libs/*"],
files: ["js/libs/*"],
tasks: ["uglify:jslibs"]
// tasks: ["jshint", "concat", "uglify"]
},

View File

@ -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;
}
*/

View File

@ -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;*/
/*}*/

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1785.8772"
height="37.343998"
id="svg3245"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="New document 9">
<defs
id="defs3247" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.66125533"
inkscape:cx="885.47012"
inkscape:cy="79.926821"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1670"
inkscape:window-height="821"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-maximized="0" />
<metadata
id="metadata3250">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(635.23282,-279.42656)">
<text
xml:space="preserve"
style="font-size:35.2932663px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="-638.04181"
y="220.68825"
id="text3253"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3255"
x="-638.04181"
y="220.68825" /><tspan
sodipodi:role="line"
x="-638.04181"
y="264.80484"
id="tspan3257"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Copse;-inkscape-font-specification:Copse" /><tspan
sodipodi:role="line"
x="-638.04181"
y="308.44699"
id="tspan3259"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Copse;-inkscape-font-specification:Copse">!&quot;#$%&amp;'()*+,-./0123456789:;&lt;=&gt;?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</tspan><tspan
sodipodi:role="line"
x="-638.04181"
y="352.56357"
id="tspan3261"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Copse;-inkscape-font-specification:Copse" /><tspan
sodipodi:role="line"
x="-638.04181"
y="396.68018"
id="tspan3263"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Copse;-inkscape-font-specification:Copse" /></text>
<text
xml:space="preserve"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Times New Roman;-inkscape-font-specification:Times New Roman"
x="488.13605"
y="59.544075"
id="text3016"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3018"
x="488.13605"
y="59.544075" /></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
img/buttons/btnArrow.xcf Normal file

Binary file not shown.

BIN
img/buttons/btnEditOpen.xcf Normal file

Binary file not shown.

BIN
img/buttons/btnHeight.xcf Normal file

Binary file not shown.

BIN
img/buttons/btnMove.xcf Normal file

Binary file not shown.

BIN
img/buttons/btnRotate.xcf Normal file

Binary file not shown.

BIN
img/buttons/btnTwist.xcf Normal file

Binary file not shown.

BIN
img/buttons/btnZoom.xcf Normal file

Binary file not shown.

864
img/shapeIcons.ai Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

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

81
js/AddShapeDialog.js Normal file
View File

@ -0,0 +1,81 @@
var shapeResolution=3;
var shapePopup;
function initShapeDialog() {
$("#btnShapeOk").on("onButtonClick",onShapeOk);
$("#btnShapeCancel").on("onButtonClick",onShapeCancel);
$("#btnShapePlus").on("onButtonHold",onShapePlus);
$("#btnShapeMin").on("onButtonHold",onShapeMin);
updateShapePreview();
shapePopup = new Popup($("#popupShape"), $("#popupMask"));
shapePopup.setEscapeKeyHandler(onShapeCancel);
shapePopup.setEnterKeyHandler(onShapeOk);
}
function showShapeDialog() {
shapePopup.open();
}
function onShapeCancel() {
shapePopup.close();
}
function onShapeOk() {
shapePopup.close();
var res = shapeResolution;
if (res!=undefined) {
if (isNaN(res)) res=3;
if (res<2) res=2;
if (res>100) res=100;
drawCircle(canvasWidth/2,canvasHeight/2,80,res);
}
}
function onShapePlus() {
shapeResolution++;
if (shapeResolution>50) shapeResolution=50;
updateShapePreview();
}
function onShapeMin() {
shapeResolution--;
if (shapeResolution<2) shapeResolution=2;
updateShapePreview();
}
function updateShapePreview() {
$(".lblShapeResolution").text(shapeResolution + " sides");
var canvas = $("#shapePreview")[0];
var c = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
console.log(w,h);
var r = w/2 - 20;
var x0 = w/2;
var y0 = h/2;
var res = shapeResolution;
var step = Math.PI * 2.0 / res;
c.save();
c.clearRect(0,0,canvas.width, canvas.height);
c.restore();
c.beginPath();
for (var a=0; a<Math.PI*2; a+=step) {
var x = Math.sin(a+Math.PI) * r + x0;
var y = Math.cos(a+Math.PI) * r + y0;
if (a==0) c.moveTo(x,y);
else c.lineTo(x,y);
}
//close shape
var x = Math.sin(0+Math.PI) * r + x0;
var y = Math.cos(0+Math.PI) * r + y0;
c.lineTo(x,y);
//draw shape
c.lineWidth = 2;
c.stroke();
}

139
js/Button.js Normal file
View File

@ -0,0 +1,139 @@
(function($) {
var clickEnabled = true;
$.fn.Button = function() {
return $(this).each(function(){
$.Button($(this)[0]);
});
};
$.Button = function(element) {
var downTimerFPS = 20;
var _timer = undefined;
var _x,_y;
var isDown = false;
var updateCursor = function(e) {
// retrieve cursor position relative to element
if (e.offsetX != undefined) {
_x = e.offsetX;
_y = e.offsetY;
} else if(e.pageX != undefined) {
// http://www.quirksmode.org/mobile/tableViewport_desktop.html#t11
var offset = $(element).offset();
_x = e.pageX - offset.left;
_y = e.pageY - offset.top;
} else if(e.originalEvent != undefined && e.originalEvent.pageX != undefined) {
//http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
var offset = $(element).offset();
_x = e.originalEvent.pageX - offset.left;
_y = e.originalEvent.pageY - offset.top;
}
//android+chrome-specific hack
if (e.originalEvent.changedTouches != undefined) {
var offset = $(element).offset();
_x = e.originalEvent.changedTouches[0].pageX - offset.left;
_y = e.originalEvent.changedTouches[0].pageY - offset.top;
}
}
var startDownTimer = function() {
if (_timer==undefined) {
_timer = setInterval(onDownTimerInterval, 1000/downTimerFPS);
isDown = true;
}
}
var stopDownTimer = function() {
clearInterval(_timer);
_timer = undefined;
isDown = false;
// _x = undefined;
// _y = undefined;
}
var onDownTimerInterval = function() {
if (_x!=undefined && _y!=undefined) {
$(element).trigger("onButtonHold",{x:_x,y:_y});
} else {
console.log("Button: warning... _x or _y not set...");
}
}
var onTouchStart = function(e) {
clickEnabled = false;
updateCursor(e);
startDownTimer();
$(element).trigger("onButtonClick",{x:_x,y:_y});
e.preventDefault();
}
var onTouchEnd = function(e) {
updateCursor(e);
stopDownTimer();
}
var onTouchMove = function(e) {
updateCursor(e);
startDownTimer();
}
var onMouseDown = function(e) {
updateCursor(e);
startDownTimer();
}
var onMouseUp = function(e) {
updateCursor(e);
stopDownTimer();
}
var onMouseMove = function(e) {
updateCursor(e);
if (isDown) onMouseDrag(e);
}
var onMouseDrag = function(e) {
updateCursor(e);
}
var onDocumentMouseUp = function(e) {
stopDownTimer();
}
var onClick = function(e) {
if(!clickEnabled) return;
updateCursor(e);
stopDownTimer();
$(element).trigger("onButtonClick",{x:_x,y:_y});
}
var onStartDrag = function(e) {
}
var onContextMenu = function(e) {
e.preventDefault();
}
//this needs to be done after the function declarations
$(element).bind({
touchstart: onTouchStart,
touchend: onTouchEnd,
touchmove: onTouchMove,
mousedown: onMouseDown,
mouseup: onMouseUp,
mousemove: onMouseMove,
contextmenu: onContextMenu,
click: onClick
});
$(document).on("mouseup", onDocumentMouseUp);
$(element).css("-webkit-user-select","none");
$(element).css("-webkit-touch-callout","none");
}
}(jQuery));

64
js/Class.js Normal file
View File

@ -0,0 +1,64 @@
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function(){
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
this.Class = function(){};
// Create a new Class that inherits from this class
Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we're overwriting an existing function
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();

View File

@ -80,51 +80,17 @@ function GrandTour(_name) {
var dataset = $(this)[0].$li[0].dataset;
if (dataset.action != undefined) {
console.log(" THERE'S AN ACTION!");
switch (dataset.action) {
case "sayHello":
console.log(" action: sayHello");
break;
case "showMessage":
console.log(" action: showMessage");
message.set("This is a status message...", Message.NOTICE);
// message.show();
break;
case "showProgressBar":
console.log(" action: showProgressBar");
progressbar.show();
break;
case "showThermometer":
console.log(" action: showThermometer");
thermometer.show();
break;
}
}
};
this.postStepCallback = function(index, tip) {
console.log("GrandTour >> f:postStepCallback() >> index: " + index);
var dataset = $(this)[0].$li[0].dataset;
if (dataset.action != undefined) {
console.log(" THERE *WAS* AN ACTION!");
switch (dataset.action) {
case "sayHello":
// console.log(" action: sayHello");
break;
case "showMessage":
// console.log(" action: showMessage");
// message.hide();
break;
case "showProgressBar":
// console.log(" action: showProgressBar");
// progressbar.hide();
break;
case "showThermometer":
// console.log(" action: showThermometer");
// thermometer.hide();
break;
}
}
//console.log("GrandTour >> f:postStepCallback() >> index: " + index);
// var dataset = $(this)[0].$li[0].dataset;
};
this.postRideCallback = function(index, tip) {
// console.log("GrandTour >> f:postRideCallback() >> index: " + index + ", self.active: " + self.active);

97
js/Keyboard.js Normal file
View File

@ -0,0 +1,97 @@
var keyboardShortcutsEnabled = true;
var keyboardEscapeEnterEnabled = false;
var wordBuffer = "";
var wordFuncs = {
"idbeholdl": function() {
alert("Light!");
},
"idspispopd": function() {
drawTextOnCanvas("Im in ur kanvas drawin' ur stuffz.");
},
"dia": function() {
var cx = canvasWidth / 2;
var cy = canvasHeight /2;
drawCircle(cx, cy, 50, 4);
shapeMoveTo(cx - 20, cy);
shapeLineTo(cx + 20, cy);
shapeMoveTo(cx, cy - 20);
shapeLineTo(cx, cy + 20);
}
};
function initKeyboard() {
$(document).keypress(function(event) {
if (keyboardEscapeEnterEnabled) {
switch (event.keyCode) {
case 13:
$(document).trigger("onEnterKey");
break;
case 27:
$(document).trigger("onEscapeKey");
break;
}
}
if (!keyboardShortcutsEnabled) return;
if (event.ctrlKey && event.altKey && ! event.metaKey) processWords(event);
if (event.altKey || event.ctrlKey || event.metaKey) return; //ignore key presses with modifier keys except shift
var ch = String.fromCharCode(event.which);
switch (ch) {
case 'c': clearDoodle(); break;
case 'n': clearDoodle(); break;
case 'p': print(); break;
case 'u': oopsUndo(); break;
case 'g': settingsWindow.downloadGcode(); break;
case 'q': stopPrint(); break;
case ',': openSettingsWindow(); break;
case 'h': previewUp(true); break;
case 'H': previewDown(true); break;
case 's': saveSketch(); break;
case 'L': nextDoodle(); break;
case 'l': prevDoodle(); break;
case '[': previewTwistLeft(); break;
case ']': previewTwistRight(); break;
case '|': resetTwist(); break;
case 't': showWordArtDialog(); break;
case 'i': showShapeDialog(); break;
case ';': moveShape(-5,0); break;
case '\'': moveShape(5,0); break;
case '-': zoomShape(.95); break;
case '+': zoomShape(1.05); break;
case 'r': rotateShape(.1); break;
case 'R': rotateShape(-.1); break;
//default: console.log("Key: '" + ch + "' (" + event.which + ")");
}
if(event.which != 13) { // don't prevent enter usage, it's used in tour
event.preventDefault(); //prevents the character to end up in a focussed textfield
}
})
}
function processWords(e) {
wordBuffer += String.fromCharCode(e.which);
var match = false;
for (var k in wordFuncs) {
if (k.indexOf(wordBuffer) == 0) {
if (k.length == wordBuffer.length) match = wordFuncs[k];
else match = true;
break;
}
}
if (typeof(match) == 'function') {
match();
wordBuffer = "";
} else if (!match) {
wordBuffer = "";
}
}

34
js/Popup.js Normal file
View File

@ -0,0 +1,34 @@
function Popup(element, mask) {
var self = this;
var escapeKeyHandler = null;
var enterKeyHandler = null;
this.open = function(complete, disableMaskClick) {
mask.fadeIn(POPUP_SHOW_DURATION);
element.fadeIn(POPUP_SHOW_DURATION, complete);
keyboardShortcutsEnabled = false;
keyboardEscapeEnterEnabled = true;
document.body.removeEventListener('touchmove', prevent, false);
mask.bind("onButtonClick", function() { self.close() });
if (escapeKeyHandler) $(document).bind("onEscapeKey", escapeKeyHandler);
if (enterKeyHandler) $(document).bind("onEnterKey", enterKeyHandler);
}
this.close = function(complete) {
mask.fadeOut(POPUP_SHOW_DURATION);
element.fadeOut(POPUP_SHOW_DURATION, complete);
keyboardShortcutsEnabled = true;
keyboardEscapeEnterEnabled = false;
document.body.addEventListener('touchmove', prevent, false);
mask.unbind("onButtonClick");
if (escapeKeyHandler) $(document).unbind("onEscapeKey", escapeKeyHandler);
if (enterKeyHandler) $(document).unbind("onEnterKey", enterKeyHandler);
}
this.setEscapeKeyHandler = function(hnd) { escapeKeyHandler = hnd; }
this.setEnterKeyHandler = function(hnd) { enterKeyHandler = hnd; }
}

View File

@ -159,6 +159,8 @@ function Printer() {
var firstOne = (sendIndex == 0)? true : false;
var start = firstOne; // start printing right away
message.set("Sending doodle to printer..."+sendIndex,Message.NOTICE);
var completed = false;
if (this.gcode.length < (sendIndex + sendLength)) {
console.log(" sending less than max sendLength (and last)");

View File

@ -8,10 +8,12 @@
//these settings are defined in the firmware (conf_defaults.lua) and will be initialized in loadSettings()
var settings = { }
var settingsPopup;
//wrapper to prevent scoping issues in showSettings()
function openSettingsWindow() {
settingsWindow.showSettings();
settingsWindow.loadSettings(function() { // reload settings
settingsPopup.open();
});
}
function SettingsWindow() {
@ -86,11 +88,13 @@ function SettingsWindow() {
this.wifiboxURL = wifiboxURL;
this.wifiboxCGIBinURL = wifiboxCGIBinURL;
this.window = $("#settings");
this.window = $("#popupSettings");
this.btnOK = this.window.find(".btnOK");
enableButton(this.btnOK,this.submitwindow);
settingsPopup = new Popup($("#popupSettings"), $("#popupMask"));
this.window.find(".settingsContainer").load("settings.html", function() {
this.window.find("#settingsContainer").load("settings.html", function() {
console.log("Settings:finished loading settings.html, now loading settings...");
self.form = self.window.find("form");
@ -144,6 +148,14 @@ function SettingsWindow() {
}); //this.window.find
} //this.init
this.openSettings = function() {
self.loadSettings(function() { // reload settings
settingsPopup.open();
});
}
this.closeSettings = function(complete) {
settingsPopup.close(complete);
}
this.submitwindow = function(e) {
disableButton(self.btnOK,self.submitwindow);
@ -151,7 +163,7 @@ function SettingsWindow() {
e.stopPropagation();
self.saveSettings(self.readForm(),function(success){
if(success) {
self.hideSettings(function() {
self.closeSettings(function() {
enableButton(self.btnOK,self.submitwindow);
});
self.signin();
@ -163,23 +175,6 @@ function SettingsWindow() {
clearTimeout(self.retryRetrieveNetworkStatusDelay);
}
this.showSettings = function() {
keyboardShortcutsEnabled = false;
this.loadSettings(function() { // reload settings
$("#contentOverlay").fadeIn(175, function() {
document.body.removeEventListener('touchmove',prevent,false);
});
});
}
this.hideSettings = function(complete) {
keyboardShortcutsEnabled = true;
$("#contentOverlay").fadeOut(175, function() {
document.body.addEventListener('touchmove',prevent,false);
// self.window.css("display","none");
complete();
});
}
this.loadSettings = function(complete) {
if (!communicateWithWifibox) {
console.log(" communicateWithWifibox is false: settings aren't being loaded from wifibox...")

183
js/Shape.js Normal file
View File

@ -0,0 +1,183 @@
function drawCircle(x0,y0,r,res) {
if (res==undefined) res = 50; //circle resolution
beginShape();
var step = Math.PI * 2.0 / res;
for (var a=0; a<Math.PI*2; a+=step) {
var x = Math.sin(a+Math.PI) * r + x0;
var y = Math.cos(a+Math.PI) * r + y0;
if (a==0) shapeMoveTo(x,y);
else shapeLineTo(x,y);
}
//close shape
var x = Math.sin(0+Math.PI) * r + x0;
var y = Math.cos(0+Math.PI) * r + y0;
shapeLineTo(x,y);
endShape();
}
function beginShape(x,y) {
setSketchModified(true);
}
function shapeMoveTo(x,y) {
_points.push([x, y, true]);
adjustBounds(x, y);
adjustPreviewTransformation();
draw(x, y, .5);
}
function shapeLineTo(x,y) {
_points.push([x, y, false]);
adjustBounds(x, y);
adjustPreviewTransformation();
draw(x, y);
}
function endShape() {
renderToImageDataPreview();
}
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[0]);
xMax = Math.max(xMax,p[0]);
yMin = Math.min(yMin,p[1]);
yMax = Math.max(yMax,p[1]);
}
return {x:xMin,y:yMin,width:xMax-xMin,height:yMax-yMin};
}
function translatePoints(points,x,y) {
for (var i=0; i<points.length; i++) {
points[i][0] += x;
points[i][1] += y;
}
}
function scalePoints(points,x,y) {
if (y==undefined) y = x;
for (var i=0; i<points.length; i++) {
points[i][0] *= x;
points[i][1] *= y;
}
}
function rotatePoints(points, radians, cx, cy) {
if (cx==undefined) cx = 0;
if (cy==undefined) cy = 0;
var cos = Math.cos(radians);
var sin = Math.sin(radians);
for (var i=0; i<points.length; i++) {
var x = points[i][0];
var y = points[i][1];
var nx = (cos * (x - cx)) - (sin * (y - cy)) + cx;
var ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;
points[i][0] = nx;
points[i][1] = ny;
}
}
function moveShape(x,y) {
var bounds = getBounds(_points);
var delta = reduceTransformToFit(x, y, 1.0, bounds);
if (delta.x != 0 || delta.y != 0) {
translatePoints(_points, delta.x, delta.y);
updateView();
}
}
//TODO: reduction of zoomValue is still not completely correct (but acceptable?)
//TODO: bounds should be cached and marked dirty on modification of points array; translations could be combined in several places
function zoomShape(zoomValue) {
var bounds = getBounds(_points);
var transform = reduceTransformToFit(0, 0, zoomValue, bounds);
translatePoints(_points, transform.x, transform.y); //move points towards center as far as necessary to avoid clipping
translatePoints(_points, -bounds.x, -bounds.y);
translatePoints(_points, -bounds.width / 2, -bounds.height / 2);
scalePoints(_points, transform.zf, transform.zf);
translatePoints(_points, bounds.width / 2, bounds.height / 2);
translatePoints(_points, bounds.x, bounds.y);
updateView();
}
function rotateShape(radians) {
var bounds = getBounds(_points);
var cx = bounds.x + bounds.width/2;
var cy = bounds.y + bounds.height/2;
rotatePoints(_points, radians, cx, cy);
var bounds = getBounds(_points);
var transform = reduceTransformToFit(0, 0, 1.0, bounds);
translatePoints(_points, transform.x, transform.y);
scalePoints(_points, transform.zf, transform.zf);
updateView();
}
function updateView() {
setSketchModified(true);
redrawDoodle();
adjustPreviewTransformation();
renderToImageDataPreview();
if (debugMode) {
var bounds = getBounds(_points);
drawCircleTemp(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2, 5, 'red');
}
}
//when x,y!=0,0: reduces them such that transformed bounds will still fit on canvas (given that they fit prior to the transform)
//otherwise: calculate translation + zoom reduce such that given bounds will fit on canvas after transformation
function reduceTransformToFit(x, y, zf, bounds) {
var zw = bounds.width * zf; zh = bounds.height * zf;
var newBounds = { x: bounds.x - (zw - bounds.width) / 2, y: bounds.y - (zh - bounds.height) / 2, width: zw, height: zh };
// console.log("bounds: " + bounds.x + ", " + bounds.y + ", " + bounds.width + ", " + bounds.height);
// console.log("newBounds: " + newBounds.x + ", " + newBounds.y + ", " + newBounds.width + ", " + newBounds.height);
var ldx = Math.max(x, -newBounds.x);
var rdx = Math.min(x, canvasWidth - (newBounds.x + newBounds.width));
var tdy = Math.max(y, -newBounds.y);
var bdy = Math.min(y, canvasHeight - (newBounds.y + newBounds.height));
if (x != 0 || y != 0) { //movement was requested
return { x: nearestZero(ldx, rdx), y: nearestZero(tdy, bdy) };
} else { //no movement requested
var delta = { x: ldx + rdx, y: tdy + bdy };
if (ldx != 0 && rdx != 0) delta.x /= 2;
if (tdy != 0 && bdy != 0) delta.y /= 2;
delta.x /= zf;
delta.y /= zf;
var zxMax = Math.min(zf, canvasWidth / newBounds.width);
var zyMax = Math.min(zf, canvasHeight / newBounds.height);
var oldZF = zf;
// var dir = zf >= 1.0 ? 1 : 0;
zf = Math.min(zxMax, zyMax);
// if (dir == 1 && zf < 1.0) zf = 1;
console.log("orgZF, zxMax, zyMax, finZF: " + oldZF + ", " + zxMax + ", " + zyMax + ", " + zf);
return { x: delta.x, y: delta.y, zf: zf };
}
}
function nearestZero(v1, v2) { return Math.abs(v1) < Math.abs(v2) ? v1 : v2; }
//*draws* a circle (i.e. it is not added as points to shape)
function drawCircleTemp(x, y, r, color) {
ctx.beginPath();
ctx.lineWidth = 1;
ctx.fillStyle = color;
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.fillStyle = 'black';
}

132
js/WordArt.js Normal file
View File

@ -0,0 +1,132 @@
var wordArtPopup;
function initWordArt() {
$("body").append('<div id="svgfont" style="display:none"></div>');
$("#svgfont").load("img/font.svg?");
$("#btnWordArtOk").on("onButtonClick",onWordArtOk);
$("#btnWordArtCancel").on("onButtonClick",onWordArtCancel);
wordArtPopup = new Popup($("#popupWordArt"),$("#popupMask"));
wordArtPopup.setEscapeKeyHandler(onWordArtCancel);
wordArtPopup.setEnterKeyHandler(onWordArtOk);
}
function showWordArtDialog() {
buttonGroupAdd.hide();
wordArtPopup.open();
$("#txtWordArt").focus();
$("#txtWordArt").val(""); //clear textbox
}
function onWordArtCancel() {
wordArtPopup.close();
}
function onWordArtOk() {
wordArtPopup.close();
var s = $("#txtWordArt").val();
drawTextOnCanvas(s);
}
function drawTextOnCanvas(text) {
if (typeof(text) == 'string') {
var points = getStringAsPoints(text);
var bounds = getBounds(points);
var scaleX = (canvasWidth-50) / bounds.width;
var scaleY = (canvasHeight-50) / bounds.height;
var scale = Math.min(scaleX,scaleY);
scalePoints(points,scale);
var bounds = getBounds(points);
translatePoints(points,-bounds.x,-bounds.y); //left top of text is (0,0)
translatePoints(points,-bounds.width/2,-bounds.height/2); //anchor point center
translatePoints(points,canvasWidth/2,canvasHeight/2); //center in canvas
canvasDrawPoints(canvas,points);
}
}
function getStringAsPoints(text) {
var allPoints = [];
var xPos = 0;
for (var i=0; i<text.length; i++) {
if (text[i]==" ") { //space
xPos += 8;
} else { //other characters
var path = getPathFromChar(text[i]);
var points = getPointsFromPath(path);
if (points.length==0) continue;
translatePoints(points,-points[0][0],0);
var bounds = getBounds(points);
translatePoints(points,-bounds.x,0);
translatePoints(points,xPos,0);
xPos+=bounds.width;
xPos+=2;
for (var j=0; j<points.length; j++) {
allPoints.push(points[j]);
}
}
}
return allPoints;
}
function getPathFromChar(ch) {
var index = ch.charCodeAt(0)-33;
var element = $("#svgfont path")[index];
if (element==undefined) return "";
return $("#svgfont path")[index].attributes["d"].nodeValue;
}
function getPointsFromPath(path) {
var points = [];
var cmds = path.split(' ');
var cursor = { x:0.0, y:0.0 };
var move = false;
var prevCmd = "";
for (var i=0; i<cmds.length; i++) {
var cmd = cmds[i];
var xy = cmd.split(",");
if (cmd=='m') move = true;
if (xy.length==2) { // if there are two parts (a comma) we asume it's a l command. (So L is not supported)
cursor.x += parseFloat(xy[0]);
cursor.y += parseFloat(xy[1]);
points.push([cursor.x,cursor.y,move]);
move = false;
} else if (prevCmd == "h"){
cursor.x += parseFloat(cmd);
points.push([cursor.x,cursor.y,move]);
} else if (prevCmd == "v"){
cursor.y += parseFloat(cmd);
points.push([cursor.x,cursor.y,move]);
} else if (prevCmd == "H"){
cursor.x = parseFloat(cmd);
points.push([cursor.x,cursor.y,move]);
} else if (prevCmd == "V"){
cursor.y = parseFloat(cmd);
points.push([cursor.x,cursor.y,move]);
}
prevCmd = cmd;
}
return points;
}
function canvasDrawPoints(canvas,points) {
beginShape();
for (var i=0; i<points.length; i++) {
var p = points[i];
if (points[i][2]) shapeMoveTo(p[0],p[1]);
else shapeLineTo(p[0],p[1]);
}
endShape();
}

View File

@ -6,20 +6,13 @@
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
*/
var btnMoveUpInterval;
var btnMoveDownInterval;
var btnTwistLeftInterval;
var btnTwistRightInterval;
var twistIncrement = Math.PI/1800;
var btnOopsInterval;
var btnNew, btnPrevious, btnNext;
var btnOops, btnStop, btnClear;
var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
var btnInfo, btnSettings;
//var btnDebug; // debug
var btnNew, btnPrevious, btnNext, btnOops, btnStop, btnInfo;
var btnSettings, btnWordArt;
var btnToggleEdit, buttonGroupEdit, btnZoom, btnMove, btnRotate;
var btnToggleVerticalShapes, btnHeight, btnTwist, btnShape, btnConv, btnStraight, btnSine, btnDiv;
var buttonGroupAdd, popupWordArt;
var state;
var prevState;
@ -31,183 +24,179 @@ var gcodeGenerateDelay = 50;
function initButtonBehavior() {
console.log("f:initButtonBehavior");
// btnClear= $(".btnClear");
btnOops = $(".btnOops");
btnMoveUp = $("#btnMoveUp");
btnMoveDown = $("#btnMoveDown");
btnTwistLeft = $("#btnTwistLeft");
btnTwistRight = $("#btnTwistRight");
btnInfo = $(".btnInfo");
btnSettings = $(".btnSettings");
btnNew = $(".btnNew");
btnPrint= $(".btnPrint");
btnStop = $(".btnStop");
btnPrevious = $(".btnPrevious");
btnNext = $(".btnNext");
btnSave = $(".btnSave");
//debug
//btnDebug = $(".debugBtn");
btnNew.on('touchstart mousedown', clearDoodle);
btnPrint.on('touchstart mousedown', print);
$(".btn").Button(); //initalizes all buttons
btnOops = $("#btnOops");
btnInfo = $("#btnInfo");
btnSettings = $("#btnSettings");
btnNew = $("#btnNew");
btnPrint= $("#btnPrint");
btnStop = $("#btnStop");
btnPrevious = $("#btnPrevious");
btnNext = $("#btnNext");
btnSave = $("#btnSave");
buttonGroupAdd = $("#buttonGroupAdd");
btnShape = $("#btnShape");
btnWordArt = $("#btnWordArt");
popupWordArt = $("#popupWordArt");
popupShape = $("#popupShape");
popupMask = $("#popupMask");
logoPanel = $("#logopanel");
btnToggleEdit = $("#btnToggleEdit");
buttonGroupEdit = $("#buttonGroupEdit");
btnZoom = $("#btnZoom");
btnMove = $("#btnMove");
btnRotate = $("#btnRotate");
btnToggleVerticalShapes = $("#btnToggleVerticalShapes");
buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
btnHeight = $("#btnHeight");
btnTwist = $("#btnTwist");
btnStraight = $("#btnStraight");
btnDiv = $("#btnDiv");
btnConv = $("#btnConv");
btnSine = $("#btnSine");
btnAdd = $("#btnAdd");
logoPanel.on("onButtonClick", onLogo);
btnNew.on("onButtonClick", onBtnNew);
btnAdd.on("onButtonClick", onBtnAdd);
btnWordArt.on("onButtonClick", onBtnWordArt);
btnShape.on("onButtonClick", onBtnShape);
btnPrint.on("onButtonClick", onBtnPrint);
btnOops.on("onButtonHold", onBtnOops);
// vertical shape buttons
btnToggleVerticalShapes.on("onButtonClick", onBtnToggleVerticalShapes);
btnHeight.on("onButtonHold", onBtnHeight);
btnTwist.on("onButtonHold", onBtnTwist);
btnStraight.on("onButtonClick", onBtnStraight);
btnDiv.on("onButtonClick", onBtnDiv);
btnConv.on("onButtonClick", onBtnConv);
btnSine.on("onButtonClick", onBtnSine);
btnToggleEdit.on("onButtonClick", onBtnToggleEdit);
btnMove.on("onButtonHold", onBtnMove);
btnZoom.on("onButtonHold", onBtnZoom);
btnRotate.on("onButtonHold", onBtnRotate);
getSavedSketchStatus();
setSketchModified(false);
//updatePrevNextButtonStateOnClear();
// btnClear.click(function(e) {
// e.preventDefault();
// // console.log("clear");
//
// clearDoodle();
// });
function onBtnToggleVerticalShapes() {
var btnImg;
if(buttonGroupVerticalShapes.is(":hidden")) {
btnImg = "img/buttons/btnArrowClose.png";
} else {
btnImg = "img/buttons/btnArrowOpen.png";
}
btnToggleVerticalShapes.attr("src",btnImg);
buttonGroupVerticalShapes.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
}
function startOops(e) {
console.log("f:startOops()");
e.preventDefault();
btnOopsInterval = setInterval( function() {
oopsUndo();
}, 1000/40);
function onLogo() {
location.reload();
}
function onBtnAdd() {
buttonGroupAdd.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
}
function stopOops(e) {
console.log("f:stopOops()");
e.preventDefault();
clearInterval(btnOopsInterval);
redrawDoodle(true);
renderToImageDataPreview();
// redrawPreview();
}
btnOops.on('touchstart', function(e) { startOops(e); });
btnOops.on('touchend', function(e) { stopOops(e); });
btnOops.mousedown(function(e) { startOops(e); });
btnOops.mouseup(function(e) { stopOops(e); });
function startMoveUp(e) {
e.preventDefault();
// console.log("btnMoveUp mouse down");
if (_points.length > 1) {
previewUp(true);
clearInterval(btnMoveUpInterval);
btnMoveUpInterval = setInterval( function() {
previewUp(true);
}, 1000/30);
}
function onBtnStraight() {
setVerticalShape(verticalShapes.NONE);
}
function stopMoveUp(e) {
e.preventDefault();
// console.log("btnMoveUp mouse up");
clearInterval(btnMoveUpInterval);
if (_points.length > 1) previewUp();
function onBtnDiv() {
setVerticalShape(verticalShapes.DIVERGING);
}
function onBtnConv() {
setVerticalShape(verticalShapes.CONVERGING);
}
function onBtnSine() {
setVerticalShape(verticalShapes.SINUS);
}
btnMoveUp.mousedown(function(e) { startMoveUp(e) });
btnMoveUp.mouseup(function(e) { stopMoveUp(e) });
btnMoveUp.on('touchstart', function(e) { startMoveUp(e) });
btnMoveUp.on('touchend', function(e) { stopMoveUp(e) });
function startMoveDown(e) {
e.preventDefault();
// console.log("btnMoveDown mouse down");
if (_points.length > 1) {
previewDown(true);
clearInterval(btnMoveDownInterval);
btnMoveDownInterval = setInterval( function() {
previewDown(true);
}, 1000/30);
}
function hitTest(cursor,button,radius) {
return distance(cursor.x,cursor.y,button.x,button.y)<radius;
}
function stopMoveDown(e) {
e.preventDefault();
// console.log("btnMoveDown mouse up");
clearInterval(btnMoveDownInterval);
if (_points.length > 1) previewDown();
function onBtnToggleEdit() {
var btnImg;
if(buttonGroupEdit.is(":hidden")) {
btnImg = "img/buttons/btnArrowClose.png";
} else {
btnImg = "img/buttons/btnArrowOpen.png";
}
btnToggleEdit.attr("src",btnImg);
buttonGroupEdit.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
}
function onBtnMove(e,cursor) {
var w = btnMove.width();
var h = btnMove.height();
var speedX = (cursor.x-w/2)*0.3;
var speedY = (cursor.y-h/2)*0.3;
console.log("move speed: ",speedX,speedY);
moveShape(speedX,speedY);
}
function onBtnZoom(e,cursor) {
var h = btnZoom.height();
var multiplier = (h/2-cursor.y)*0.003 + 1;
zoomShape(multiplier);
}
function onBtnRotate(e,cursor) {
var h = btnZoom.height();
var multiplier = (h/2-cursor.y)*0.003;
rotateShape(-multiplier);
}
function onBtnHeight(e,cursor) {
var h = btnHeight.height();
if(cursor.y < h/2) {
previewUp(true);
} else {
previewDown(true);
}
}
function onBtnTwist(e,cursor) {
var h = btnTwist.height();
var multiplier = (cursor.y-h/2)*0.0005;
previewTwist(multiplier,true);
}
btnMoveDown.mousedown(function(e) { startMoveDown(e) });
btnMoveDown.mouseup(function(e) { stopMoveDown(e) });
btnMoveDown.on('touchstart', function(e) { startMoveDown(e) });
btnMoveDown.on('touchend', function(e) { stopMoveDown(e) });
function startTwistLeft(e) {
e.preventDefault();
// console.log("btnTwistLeft mouse down");
if (_points.length > 1) {
previewTwistLeft(true);
clearInterval(btnTwistLeftInterval);
btnTwistLeftInterval = setInterval( function() {
previewTwistLeft(true);
}, 1000/30);
}
function onBtnOops(e) {
oopsUndo();
}
function stopTwistLeft(e) {
e.preventDefault();
// console.log("btnTwistLeft mouse up");
clearInterval(btnTwistLeftInterval);
if (_points.length > 1) previewTwistLeft();
}
btnTwistLeft.mousedown(function(e) { startTwistLeft(e) });
btnTwistLeft.mouseup(function(e) { stopTwistLeft(e) });
btnTwistLeft.on('touchstart', function(e) { startTwistLeft(e) });
btnTwistLeft.on('touchend', function(e) { stopTwistLeft(e) });
function startTwistRight(e) {
e.preventDefault();
// console.log("btnTwistRight mouse down");
if (_points.length > 1) {
previewTwistRight(true);
clearInterval(btnTwistRightInterval);
btnTwistRightInterval = setInterval( function() {
previewTwistRight(true);
}, 1000/30);
}
function onBtnNew(e) {
clearDoodle();
}
function stopTwistRight(e) {
e.preventDefault();
// console.log("btnTwistRight mouse up");
clearInterval(btnTwistRightInterval);
if (_points.length > 1) previewTwistRight();
function onBtnPrint(e) {
print();
}
function onBtnWordArt(e) {
showWordArtDialog();
}
function onBtnShape(e) {
showShapeDialog();
buttonGroupAdd.fadeOut();
}
btnTwistRight.mousedown(function(e) { startTwistRight(e) });
btnTwistRight.mouseup(function(e) { stopTwistRight(e) });
btnTwistRight.on('touchstart', function(e) { startTwistRight(e) });
btnTwistRight.on('touchend', function(e) { stopTwistRight(e) });
/*function openSettings() {
console.log("f:openSettings()");
$("#contentOverlay").fadeIn(1000, function() {
loadSettings();
});
}*/
enableButton(btnSettings, openSettingsWindow);
// btnSettings.on('touchend', function(e) {
// e.preventDefault();
// console.log("btnSettings touchend");
// });
// 29-okt-2013 - we're not doing help for smartphones at the moment
if (clientInfo.isSmartphone) {
btnInfo.addClass("disabled");
} else {
btnInfo.mouseup(function(e) {
e.preventDefault();
console.log("btnInfo mouse up");
helpTours.startTour(helpTours.WELCOMETOUR);
});
function onBtnInfo(e) {
helpTours.startTour(helpTours.WELCOMETOUR);
}
enableButton(btnInfo, onBtnInfo);
}
// DEBUG
/*
// $(".agentInfo").css("display", "none");
btnDebug.click(function(e) {
console.log("debugClick");
$(".agentInfo").toggleClass("agentInfoToggle");
e.preventDefault();
})
//*/
//btnStop.on('touchstart mousedown',stopPrint);
}
function stopPrint() {
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
//if (!confirm("Weet je zeker dat je huidige print wilt stoppen?")) return;
@ -217,14 +206,6 @@ function stopPrint() {
}
// function prevDoodle(e) {
// console.log("f:prevDoodle()");
// console.log("f:prevDoodle()");
// }
// function nextDoodle(e) {
// console.log("f:nextDoodle()");
// }
function print(e) {
console.log("f:print() >> sendPrintCommands = " + sendPrintCommands);
@ -309,6 +290,7 @@ function oopsUndo() {
}
redrawPreview();
}
function previewUp(redrawLess) {
// console.log("f:previewUp()");
if (numLayers < maxNumLayers) {
@ -329,17 +311,19 @@ function previewDown(redrawLess) {
redrawRenderedPreview(redrawLess);
}
function previewTwistLeft(redrawLess) {
if (redrawLess == undefined) redrawLess = false;
// console.log("f:previewTwistLeft()");
if (rStep > -previewRotationLimit) rStep -= twistIncrement;
// redrawPreview(redrawLess);
redrawRenderedPreview(redrawLess);
setSketchModified(true);
previewTwist(-twistIncrement,true)
}
function previewTwistRight(redrawLess) {
// console.log("f:previewTwistRight()");
if (rStep < previewRotationLimit) rStep += twistIncrement;
// redrawPreview(redrawLess);
previewTwist(twistIncrement,true)
}
function previewTwist(increment,redrawLess) {
console.log("previewTwist: ",increment);
if (redrawLess == undefined) redrawLess = false;
rStep += increment;
if(rStep < -previewRotationLimit) rStep = -previewRotationLimit;
else if(rStep > previewRotationLimit) rStep = previewRotationLimit;
redrawRenderedPreview(redrawLess);
setSketchModified(true);
}

View File

@ -416,7 +416,7 @@ function onCanvasTouchMove(e) {
// var x = e.touches[0].layerX;
// var y = e.touches[0].layerY;
console.log("f:onCanvasTouchMove >> x,y = "+x+","+y+" , e: " , e);
//console.log("f:onCanvasTouchMove >> x,y = "+x+","+y+" , e: " , e);
if (prevPoint.x != -1 || prevPoint.y != -1) {
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));

View File

@ -35,7 +35,7 @@ function doOnResize() {
function initLayouting() {
console.log("f:initLayouting()");
$drawAreaContainer = $(".drawareacontainer");
$drawAreaContainer = $("#drawareacontainer");
canvas.width = $canvas.width();
canvas.height = $canvas.height(); // canvas.clientHeight;

101
js/libs/jquery-fastclick.js vendored Normal file
View File

@ -0,0 +1,101 @@
/**
* jQuery.fastClick.js
*
* Work around the 300ms delay for the click event in some mobile browsers.
*
* Code based on <http://code.google.com/mobile/articles/fast_buttons.html>
*
* @usage
* $('button').fastClick(function() {alert('clicked!');});
*
* @license MIT
* @author Dave Hulbert (dave1010)
* @version 1.0.0 2013-01-17
*/
/*global document, window, jQuery, Math */
(function($) {
$.fn.fastClick = function(handler) {
return $(this).each(function(){
$.FastButton($(this)[0], handler);
});
};
$.FastButton = function(element, handler) {
var startX, startY;
var reset = function() {
$(element).unbind('touchend');
$("body").unbind('touchmove.fastClick');
};
var onClick = function(event) {
event.stopPropagation();
reset();
handler.call(this, event);
if (event.type === 'touchend') {
$.clickbuster.preventGhostClick(startX, startY);
}
};
var onTouchMove = function(event) {
if (Math.abs(event.originalEvent.touches[0].clientX - startX) > 10 ||
Math.abs(event.originalEvent.touches[0].clientY - startY) > 10) {
reset();
}
};
var onTouchStart = function(event) {
event.stopPropagation();
$(element).bind('touchend', onClick);
$("body").bind('touchmove.fastClick', onTouchMove);
startX = event.originalEvent.touches[0].clientX;
startY = event.originalEvent.touches[0].clientY;
};
$(element).bind({
touchstart: onTouchStart,
click: onClick
});
};
$.clickbuster = {
coordinates: [],
preventGhostClick: function(x, y) {
$.clickbuster.coordinates.push(x, y);
window.setTimeout($.clickbuster.pop, 2500);
},
pop: function() {
$.clickbuster.coordinates.splice(0, 2);
},
onClick: function(event) {
var x, y, i;
for (i = 0; i < $.clickbuster.coordinates.length; i += 2) {
x = $.clickbuster.coordinates[i];
y = $.clickbuster.coordinates[i + 1];
if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
}
}
}
};
$(function(){
if (document.addEventListener){
document.addEventListener('click', $.clickbuster.onClick, true);
} else if (document.attachEvent){
// for IE 7/8
document.attachEvent('onclick', $.clickbuster.onClick);
}
});
}(jQuery));

View File

@ -30,6 +30,9 @@ var showOrHide = false;
var clientInfo = {};
var POPUP_SHOW_DURATION = 175;
var BUTTON_GROUP_SHOW_DURATION = 80;
$(function() {
console.log("ready");
@ -65,10 +68,16 @@ $(function() {
initDoodleDrawing();
initPreviewRendering();
initLayouting();
initSidebars();
// initSidebars();
initButtonBehavior();
initKeyboard();
initVerticalShapes();
// initVerticalShapes();
initWordArt();
initShapeDialog();
disableDragging();
if (!clientInfo.isSmartphone) initHelp();
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
@ -80,7 +89,7 @@ $(function() {
settingsWindow.init(wifiboxURL,wifiboxCGIBinURL);
$(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
if(debugMode) {
console.log("debug mode is true");
$("body").css("overflow", "auto");
@ -120,17 +129,24 @@ $(function() {
}
});
function disableDragging() {
$(document).bind("dragstart", function(event) {
console.log("dragstart");
event.preventDefault();
});
}
function enableButton(elem, handler) {
//var elem = $('#'+domId);
elem.removeClass("disabled");
elem.unbind('click');
elem.bind('click', handler);
elem.unbind('onButtonClick');
elem.bind('onButtonClick', handler);
}
function disableButton(elem) {
//var elem = $('#'+domId);
elem.addClass("disabled");
elem.unbind('click');
elem.unbind('onButtonClick');
}
function showOrHideThermo() {

View File

@ -168,8 +168,6 @@ function redrawPreview(redrawLess) {
}
function renderToImageDataPreview() {
console.log("f:renderToImageDataPreview()");
if (_points.length < 2) return;
//*

View File

@ -13,13 +13,13 @@ function initSidebars() {
console.log("f:initSidebars()");
sidebarLeft = new SideBar();
sidebarLeft.init(".leftpanel", "hideleft", function() {
$(".leftpanel").show();
sidebarLeft.init("#leftpanel", "hideleft", function() {
$("#leftpanel").show();
});
sidebarRight = new SideBar();
sidebarRight.init(".rightpanel", "hideright", function() {
$(".rightpanel").show();
sidebarRight.init("#rightpanel", "hideright", function() {
$("#rightpanel").show();
});
}

View File

@ -25,7 +25,7 @@ function getSavedSketchStatus() {
}
}
}).fail(function() {
console.log("getSavedSketchStatus failed: ", response);
console.log("getSavedSketchStatus failed");
});
}

View File

@ -33,3 +33,7 @@ function isSmartphone() {
return returnBool;
}
function distance(x1, y1, x2, y2) {
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}

21
js/verticalShapes.js Normal file
View File

@ -0,0 +1,21 @@
var VERTICALSHAPE;
var verticalShapes = {
"NONE": 'none',
"DIVERGING": 'diverging',
"CONVERGING": 'converging',
"SINUS": 'sinus'
};
function setVerticalShape(s) {
VERTICALSHAPE = s;
redrawRenderedPreview();
}
function initVerticalShapes() {
resetVerticalShapes();
}
function resetVerticalShapes() {
setVerticalShape(verticalShapes.NONE);
}

View File

@ -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;
}
}

View File

@ -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

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -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})();

View File

@ -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

View File

@ -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));

View File

@ -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));

View File

@ -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 );

View File

@ -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);

File diff suppressed because one or more lines are too long

View File

@ -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);
}

View File

@ -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;
}
//*/

View File

@ -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;
}
//*/

View File

@ -1,8 +1,7 @@
/*
GLOBAL CONTAINER
*/
@import "config.less";
body {
@ -10,20 +9,12 @@ body {
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;
cursor: pointer;
}
@import "buttons.less";
@import "popup.less";
#landscape {
position:absolute;
// background-color: #fff;
width: 100%;
max-width: 1024px;
max-height: 768px;
@ -31,99 +22,50 @@ img {
bottom: 0;
left: 0;
right: 0;
// z-index: 5;
overflow: hidden;
margin: 0 auto;
// box-sizing: border-box;
// border: 2px solid #5e8c71;
// -moz-box-sizing:border-box;
// -webkit-box-sizing:border-box;// border-width: 0 2px 2px 2px;
// solution from: http://stackoverflow.com/questions/14085822/css-firefox-box-shadow-and-outline
box-shadow: 0 0 0 2px #5e8c71,
0 0 8px 4px rgba(8, 8, 8, 0.25);
// outline: 2px solid #5e8c71;
}
#portrait {
display: none;
}
.bgContainer {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.bgTop, .bgMiddle, .bgBottom {
#bgTop, #bgMiddle, #bgBottom {
opacity: 1.0;
transition: opacity .35s linear;
position: absolute;
left: 0px;
z-index: -5;
//z-index: -5;
}
.bgTop {
#bgTop {
top: 0px;
}
.bgMiddle {
#bgMiddle {
top: 30%;
}
.bgBottom {
#bgBottom {
bottom: 0px;
}
//.rightpanel, .leftpanel {
// img {
// cursor: pointer;
// }
//}
/*
CENTER PANEL
*/
@import "base_centerpanel.less";
/*
LEFT PANEL
*/
@import "base_leftpanel.less";
/*
RIGHT PANEL
*/
@import "base_rightpanel.less";
/*
under all the above styles w.r.t. the cascading effect
*/
.disabled {
opacity: 0.3;
cursor: default;
}
#btnStop.disabled {
display: none;
}
// http://blogs.msdn.com/b/askie/archive/2013/01/06/how-to-implement-the-ms-touch-action-none-property-to-disable-double-tap-zoom-on-touch-devices.aspx
//a, input, button {
// -ms-touch-action: none !important;
//}
/*
REST
*/
/* CLEARFIX */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */

View File

@ -1,58 +1,130 @@
// CENTER PANEL
.centerpanel {
#centerpanel {
position: absolute;
left: 50%;
margin-left: -33%;
width: 66%;
margin-left: -@center-panel-width/2;
width: @center-panel-width;
height: 100%;
// z-index: 5;
padding-top: 1%;
}
#logopanel {
height: 15%;
text-align: center;
width: 40%;
margin-left: 30%;
cursor: pointer;
// top panel
@import "base_centerpanel_logo.less";
img#pencil {
margin-top: 2%;
max-width: 50%;
max-height: 50%;
}
// draw area stuff (plus up/down/left/right buttons)
@import "base_centerpanel_drawarea.less";
img#logo {
max-width: 90%;
margin-bottom: 2%;
max-height: 45%;
}
}
// DRAW AREA
#drawareacontainer {
position: relative;
width: 100%;
height: 79%;
background-color: #fff;
border: 3px solid black;
border-radius: 15px;
box-sizing: border-box;
margin-top: 1%;
}
#canvasContainers {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#mycanvasContainer {
position: absolute;
top: 0;
left: 0;
width: 78%;
height: 100%;
}
#mycanvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-right: 2px solid #333;
}
#previewContainer {
position: absolute;
top: 0;
right: 0;
width: 22%;
height: 100%;
}
#preview {
min-width: 50px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#preview_tmp {
display: none;
}
/*
HEIGHT-related RESPONSIVE STUFF
*/
@media screen and (max-height: 700px) {
.logopanel {
height: 22%;
}
.doodlecontainer {
height: 68%;
}
.d3dlogo {
top: 25%;
max-width: 399px;
height: 74px;
background-image: url('../img/logo/logo_small.png');
}
}
@media screen and (max-height: 655px) {
.bgMiddle { opacity: 0; }
#logopanel {
height: 10%;
img#logo {
margin-top: 1%;
max-height: 90%;
}
img#pencil {
display: none;
}
}
#drawareacontainer {
height: 83%;
}
}
@media screen and (max-height: 525px) {
.d3dlogo {
top: 20%;
height: 57px;
max-width: 307px;
background-image: url('../img/logo/logo_smaller.png');
// max-width: 399px;
// background-image: url('../img/logo/logo_smaller_wide.png');
}
}
@media screen and (max-height: 375px) {
.d3dlogo {
height: 40px;
max-width: 216px;
background-image: url('../img/logo/logo_smallest.png');
// max-width: 399px;
// background-image: url('../img/logo/logo_smallest_wide.png');
}
}
}

View File

@ -1,128 +0,0 @@
// import vertical shapes additions
@import "verticalshapes.less";
// DRAW AREA
.drawareacontainer {
position: relative;
width: 100%;
height: 65%;
background-color: #fff;
border: 4px solid #000;
border-radius: 15px;
box-sizing: border-box;
// z-index: 15;
}
#canvasContainers {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#mycanvasContainer {
position: absolute;
top: 0;
left: 0;
width: 78%;
height: 100%;
}
#mycanvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-right: 2px solid #333;
}
#previewContainer {
position: absolute;
top: 0;
right: 0;
width: 22%;
// max-width: 150px;
height: 100%;
}
#preview {
min-width: 50px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* DEBUG THING */
#preview_tmp {
position: absolute;
top: 0px;
left: 0px;
z-index: 500;
border: 1px solid #f80;
display: none;
}
.bottompanel {
position: relative;
bottom: 0px;
width: 100%;
height: 10%;
}
/*
DOODLE UP/DOWN/LEFT/RIGHT buttons
*/
.manipulationBtns {
margin: 2px 5px;
position: absolute;
right: 0;
top: 0;
max-width: 340px;
max-height: 70px;
width: 45%;
}
.manipulationBtn {
width: 45%;
height: auto;
cursor: pointer;
}
#btnsUpDown {
float: left;
width: 45%;
}
#btnsUpDown > div {
float: left;
padding-right: 8px;
background-repeat: no-repeat;
}
#btnsTurnLeftRight {
float: right;
width: 45%;
}
#btnsTurnLeftRight >div {
float: left;
padding-right: 8px;
background-repeat: no-repeat;
}
#btnMoveUp {
max-width: 65px;
}
#btnMoveDown {
max-width: 64px;
}
#btnTwistLeft {
max-width: 59px;
}
#btnTwistRight {
max-width: 64px;
}

View File

@ -1,15 +0,0 @@
.logopanel {
height: 25%;
}
.d3dlogo {
position: relative;
top: 15%;
width: 100%;
height: 100%;
margin: 0px auto;
max-width: 399px;
height: 139px;
background: url('../img/logo/logo_full.png') no-repeat center center;
cursor: pointer;
}

View File

@ -1,42 +1,8 @@
// LEFT PANEL
.leftpanel {
#leftpanel {
position: absolute;
width: 17%;
// background-color: rgba(67, 204, 67, 0.4);
width: @left-panel-width;
top: 0px;
left: 0px;
bottom: 0px;
}
.btnNew {
margin: 5% 0% 1% 5%;
width: 100%;
max-width: 180px;
height: auto;
}
.btnsPrevNext {
margin: 1% 7%;
max-width: 160px;
}
.btnPrevious {
width: 40%;
max-width: 56px;
height: auto;
}
.btnNext {
width: 40%;
max-width: 56px;
height: auto;
float: right;
}
.btnSave {
margin: 5% 5% 1% 5%;
width: 90%;
max-width: 144px;
height: auto;
}
.btnOops {
margin: 5% 5% 1% 5%;
width: 90%;
max-width: 144px;
height: auto;
}

View File

@ -1,50 +1,16 @@
// RIGHT PANEL
.rightpanel {
#rightpanel {
position: absolute;
width: 17%;
// background-color: rgba(255, 0, 254, 0.4);
width: @right-panel-width;
top: 0;
right: 0;
bottom: 0;
//padding-top: 2%; /* reserve space for status message */
}
.btnPrint {
margin: 1% 5% 5% 0%;
width: 100%;
max-width: 163px;
height: auto;
float: right;
}
.btnStop {
margin: 5% 10% 1% 5%;
float: right;
width: 90%;
max-width: 98px;
height: auto;
}
.btnsSettingsInfo {
position: absolute;
bottom: 25px;
right: 5px;
width: 80%;
margin: 1% 5%;
max-width: 160px;
}
.btnInfo {
width: 40%;
max-width: 53px;
height: auto;
}
.btnSettings {
width: 40%;
max-width: 53px;
height: auto;
float: right;
}
/*
PROGRESSGUAGE AND THERMOMETER SHARED STYLES
*/
.progressbarAppear {
/*margin-right: 1.5% !important;*/
@ -55,104 +21,6 @@
right: -6.5% !important;
}
@import "thermometer.less";
@import "progressbar.less";
/*
PROGRESS GUAGE
*/
.progressbarCanvasContainerParent {
position:relative;
width:100%;
}
#progressbarCanvasContainer {
position: relative;
width: 50%;
float:right;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
/*padding: 5px 0px 5px 5px;*/
padding: 5px;
background-color: #fff;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -70%;
margin: 5% 0%;
}
#progressbarCanvas {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background-color: #fff;
// border: solid #000;
// border-width: 2px 0 2px 2px;
// border-radius: 15px 0 0 15px;
// padding: 5px 0px 5px 5px;
//
// -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
// box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
}
/*
THERMOMETER
*/
.thermometerContainerParent {
position:relative;
width:100%;
padding-top: 10px;
}
#thermometerContainer {
position: relative;
width: 45%;
float: right;
background-color: #fff;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
padding: 5px;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -65%;
}
#thermometerCanvas {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background-color: #fff;
// border: solid #000;
// border-width: 2px 0 2px 2px;
// border-radius: 15px 0 0 15px;
// padding: 5px 0px 5px 5px;
//
// -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
// box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
}
//#thermometerContainer {
// position: absolute;
// right: 25px;
// top: 370px;
//}
//#thermometerCanvas {
///*background: #59b2b8;*/
///*zoom: 2;*/
//}

202
less/buttons.less Normal file
View File

@ -0,0 +1,202 @@
/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
.btn {
background-repeat: no-repeat;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-drag: none;
-webkit-user-drag: none;
-webkit-touch-callout: none; /* disable callout, image save panel */
-webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
}
.btn.disabled {
opacity: 0.3;
cursor: default;
}
#btnPrint {
margin: 1% 5% 5% 0%;
width: 90%;
max-width: 163px;
height: auto;
float: right;
}
#btnStop {
margin: 5% 5% 1% 5%;
float: right;
width: 80%;
max-width: 98px;
height: auto;
}
#btnsSettingsInfo {
position: absolute;
bottom: 4%; //25px;
right: 5px;
width: 80%;
margin: 1% 5%;
max-width: 160px;
.btn {
width: 46%;
max-width: 53px;
height: auto;
}
#btnSettings {
float: right;
}
}
#btnNew {
margin: 5% 0% 1% 5%;
width: 90%;
max-width: 130px;
height: auto;
}
#btnsPrevNext {
margin: 1% 7%;
max-width: 100px;
/*text-align:center;*/
}
#btnPrevious {
width: 40%;
max-width: 56px;
height: auto;
}
#btnNext {
width: 40%;
max-width: 56px;
height: auto;
float: right;
}
#btnSave {
margin: 4% 5% 1% 5%;
width: 90%;
max-width: 100px;
height: auto;
}
#btnOops {
margin: 5% 5% 1% 5%;
width: 90%;
max-width: 100px;
height: auto;
}
#btnAdd {
width: 90%;
max-width: 100px;
margin: 5% 5% 1% 5%;
}
/*
DOODLE UP/DOWN/LEFT/RIGHT buttons
*/
.manipulationBtns {
margin: 2px 5px;
position: absolute;
right: 0;
top: 0;
max-width: 340px;
max-height: 70px;
width: 45%;
}
.manipulationBtn {
width: 45%;
height: auto;
cursor: pointer;
}
.btnVertical {
width: 35%;
display: none;
}
#btnToggleEdit {
top: 4px;
left: 4px;
position: absolute;
}
#buttonGroupEdit {
position: absolute;
top: 5px;
left: 5px;
padding: 5px 7px 9px 8px;
display: none;
.btn {
float: left;
}
#btnZoom {
clear: left;
margin: 0 2px 0 0;
}
}
.buttonGroup {
/*background-color: white;*/
background-color: #fff;
position: absolute;
border: 3px solid black;
border-radius: 40px;
box-sizing: border-box;
padding: 5% 5% 5% 5%;
}
#buttonGroupAdd {
display: none;
z-index: 1000;
position: relative;
margin-top: -60%;
margin-left: 70%;
width: 200%;
max-width: 140px; /*fixme: can this grow based on it's content?*/
padding: 5% 0 5% 5%;
#btnWordArt, #btnShape {
width: 45%;
}
}
#buttonGroupVerticalShapes {
top: 7px;
left: 8px;
padding: 12px 7px 7px 9px;
width: 65px;
.btn {
width: 40px;
}
}
#btnToggleVerticalShapes {
position: absolute;
top: 3px;
left: 6px;
}
@media only screen and (max-height: 480px),
only screen and (max-width: 600px) and (min-device-pixel-ratio : 1.5),
only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio : 1.5) {
#buttonGroupVerticalShapes {
#btnConv, #btnDiv, #btnSine, #btnStraight {
display: none;
}
}
}

3
less/config.less Normal file
View File

@ -0,0 +1,3 @@
@left-panel-width: 10%;
@center-panel-width: 80%;
@right-panel-width: 10%;

View File

@ -1 +0,0 @@
// FULL styles (not sure if going to use...)

View File

@ -299,7 +299,7 @@
.joyride-expose-cover {
background: transparent;
position: absolute;
z-index: 10000;
//z-index: 10000;
top: 0;
left: 0;
border-radius: 5px;

View File

@ -1,142 +0,0 @@
/* Tourbus leg definitions element */
.tourbus-legs {
display: none;
}
/* Container for tourbus leg */
.tourbus-leg {
position: absolute;
visibility: hidden;
top: 0;
border: 1px solid #E5E5E5;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
border-radius: 4px;
background: white;
/*
remove top padding/margin on headings
because the interior of the leg has padding
*/
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
padding-top: 0;
}
}
/* Interior of leg, clearfixed */
.tourbus-leg-inner {
padding: 20px;
position: relative;
zoom: 1;
}
.tourbus-leg-inner:before,
.tourbus-leg-inner:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.tourbus-leg-inner:after {
clear: both;
}
.prevnextBtn {
border: 1px solid #8e8e8e;
color: #252525;
border-radius: 4px;
padding: 4px 8px;
background-color: #eaeaea;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
margin-right: 8px;
}
/* Tourbus leg arrow */
.tourbus-arrow:before,
.tourbus-arrow:after {
border: solid rgba(0, 0, 0, 0);
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
}
/* set the :after to be the _interior_ size of the arrow */
/* set the :before to be the _interior + desired border width_ */
.tourbus-arrow:after {
border-width: 14px;
}
.tourbus-arrow:before {
border-width: 16px;
}
/* Arrow background and border colors */
/*
change margin-top/left values here to
match the border width for :after above
border colors here are for the _interior_ of the arrow
*/
.tourbus-arrow-right:after {
border-right-color: #ffffff;
margin-top: -14px;
top: 50%;
}
.tourbus-arrow-left:after {
border-left-color: #ffffff;
margin-top: -14px;
top: 50%;
}
.tourbus-arrow-bottom:after {
border-bottom-color: #ffffff;
margin-left: -14px;
left: 50%;
}
.tourbus-arrow-top:after {
border-top-color: #ffffff;
margin-left: -14px;
left: 50%;
}
/*
change margin-top/left values here to
match the border width for :before above
border colors here are for the _border_ of the arrow
*/
.tourbus-arrow-right:before {
border-right-color: #e5e5e5;
margin-top: -16px;
top: 50%;
}
.tourbus-arrow-left:before {
border-left-color: #e5e5e5;
margin-top: -16px;
top: 50%;
}
.tourbus-arrow-bottom:before {
border-bottom-color: #e5e5e5;
margin-left: -16px;
left: 50%;
}
.tourbus-arrow-top:before {
border-top-color: #e5e5e5;
margin-left: -16px;
left: 50%;
}
/* you shouldn't need to change these */
.tourbus-arrow-right:after,
.tourbus-arrow-right:before {
right: 100%;
}
.tourbus-arrow-left:after,
.tourbus-arrow-left:before {
left: 100%;
}
.tourbus-arrow-bottom:after,
.tourbus-arrow-bottom:before {
bottom: 100%;
}
.tourbus-arrow-top:after,
.tourbus-arrow-top:before {
top: 100%;
}

View File

@ -13,7 +13,7 @@
color: #333;
white-space:nowrap;
z-index: 5;
//z-index: 5;
display:none;

View File

@ -1,138 +1,56 @@
/*
TOP LOGO
*/
.centerpanel {
left: 0;
margin-left: 0;
width: 100%;
/* background-color: rgba(0, 135, 255, 0.4);*/
}
.logopanel {
height: 40px;
}
.d3dlogo {
top: 0;
height: 40px;
max-width: 216px;
background-image: url('../img/logo/logo_smallest.png');
// max-width: 399px;
// background-image: url('../img/logo/logo_smallest_wide.png');
}
.drawareacontainer {
/* position: absolute;*/
height: 70%;
}
.bottompanel {
height: 10%;
.manipulationBtns {
margin: 2px -27;
right: 22%;
width: 38%;
}
}
// sets width for both right and left panel
@mobilePanelsWidth: 92px;
/*
LEFT
*/
.leftpanel {
width: @mobilePanelsWidth;
background-color: #fff;
z-index: 50;
transition: left .3s ease-out;
}
.hideleft {
left: -(@mobilePanelsWidth+1);
}
.shadowright {
box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
}
.btnNew {
margin: 5% 5% 1% 5%;
width: 90%;
}
.btnSave {
margin-left: 9%;
width: 75%;
}
.btnOops {
margin-left: 6%;
width: 71%;
}
#leftpanel {
// width: @mobilePanelsWidth;
#btnNew {
margin: 5% 5% 1% 5%;
width: 90%;
}
#btnSave {
margin-left: 5%;
width: 90%;
}
#btnOops {
margin-left: 5%;
width: 90%;
}
#btnAdd {
margin-left: 5%;
width: 90%;
}
}
/*
CENTER
*/
#centerpanel {
}
/*
RIGHT
*/
.rightpanel {
width: @mobilePanelsWidth;
background-color: #fff;
z-index: 50;
transition: right .3s ease-out;
}
.hideright {
right: -(@mobilePanelsWidth+1);
}
.shadowleft {
box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
}
.btnPrint {
margin: 1% 5% 5% 5%;
width: 90%;
}
.btnStop {
margin: 5% 6% 1% 5%;
width: 70%;
}
#rightpanel {
// width: @mobilePanelsWidth;
// margin-top: 5%; /* reserve space for 'status message' in right top */
#btnPrint {
margin: 1% 5% 5% 5%;
width: 90%;
}
#btnStop {
margin: 5% 6% 1% 5%;
width: 70%;
}
}
/*
REST
SETTINGS POPUP
*/
.sidebutton {
display: block;
position:absolute;
/* top: 50%;*/
/* margin-top: -20px;*/
top: 40px;
/*float:right;*/
width: 25px;
height: 38px;
border: 1px solid #808;
background: url('../img/arrows.png') no-repeat;
background-color: #eee;
cursor: pointer;
&:active {
background-color: #aaa;
}
.leftpanel & {
right: -27px;
background-position: 0px 0px;
}
.rightpanel & {
left: -27px;
background-position: -25px 0px;
}
}
.sidebuttonin {
&:active {
background-color: #888;
}
.leftpanel & {
background-color: #ccc;
background-position: -25px 0px;
}
.rightpanel & {
background-color: #ccc;
background-position: -0px 0px;
}
}
#popupSettings {
margin: 2% 2%;
}

View File

@ -1,18 +0,0 @@
/*
SETTINGS POPUP - MOBILE
*/
#contentOverlay {
z-index: 200;
#settings {
width: 87%;
height: 82%;
margin: 6% 4%;
> .right {
width: 14%;
}
}
}

Some files were not shown because too many files have changed in this diff Show More