Skip to content

Commit f643d10

Browse files
heidgeraheidgera
committed
using custom elements
1 parent e43549b commit f643d10

File tree

621 files changed

+950
-594
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

621 files changed

+950
-594
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ dll/*
33
temp*
44
test*
55
sequences*/*
6+
app/sequence*/*
67
celeb_seq*/*
78
node_modules/*
89
node_modules_old/*

‎app/assets/pngs/imageframe.png

2.47 KB
Loading

‎app/assets/pngs/imageframe_old.png

11.7 KB
Loading

‎app/assets/pngs/loading.png

4.83 KB
Loading

‎app/assets/pngs/horzScrollLever - Copy.png renamed to ‎app/assets/pngs/scrollLever.png

File renamed without changes.

‎app/book.js

+3-33
Original file line numberDiff line numberDiff line change
@@ -105,36 +105,12 @@ include([], function() {
105105
}
106106

107107
this.drawFrame=function(){ //display image
108-
/*if(bLoaded){
109-
canvas.width = canvas.width;
110-
ctx.fillStyle = "rgb(170,170,170)";
111-
ctx.fillRect (0,0,canvas.width,canvas.height);
112-
ctx.drawImage(tiles[nDisp], imgPad/2,imgPad/2);
113-
}
114-
else{
115-
var numComp = 0;
116-
for(let i=0; i<tiles.length; i++){
117-
if(tiles[i].complete && tiles[i].naturalWidth !== 0){
118-
numComp++;
119-
canvas.width=tiles[i].width+imgPad;
120-
canvas.height=tiles[i].height+imgPad;
121-
} else if(tiles[i].naturalWidth === 0){
122-
tiles.length--;
123-
}
124-
}
125-
if(numComp>=tiles.length/2&&numComp) bLoading=false,bLoaded=true;
126-
127-
canvas.width = canvas.width;
128-
ctx.fillStyle = "rgb(170,170,170)";
129-
ctx.fillRect (0,0,canvas.width,canvas.height);
130-
ctx.drawImage(notLoadedImg, imgPad/2,imgPad/2);
131-
}*/
132108
if(tiles.length&&tiles[nDisp].complete){
133109
canvas.width=tiles[nDisp].width+imgPad;
134110
canvas.height=tiles[nDisp].height+imgPad;
135111
ctx.fillStyle = "rgb(170,170,170)";
136112
ctx.fillRect (0,0,canvas.width,canvas.height);
137-
ctx.drawImage(tiles[nDisp], imgPad/2,imgPad/2);
113+
ctx.drawImage(tiles[nDisp], imgPad/2,imgPad/2,canvas.width,canvas.height);
138114

139115
} else {
140116
canvas.width=notLoadedImg.width+imgPad;
@@ -147,9 +123,8 @@ include([], function() {
147123

148124
this.idle=function(){ //increment the image pointer, if we are playing
149125
if(bPlaying&&nDisp<tiles.length-1&&tiles[nDisp+1].complete){
150-
//do {nDisp++} while(!tiles[nDisp].loaded||nDisp<tiles.length-1);
151126
nDisp++;
152-
imgSld.changeVal(nDisp/tiles.length);
127+
imgSld.setPercent(nDisp/tiles.length);
153128
}
154129
else if(tiles.length-2<=nDisp){
155130
bPlaying=false;
@@ -202,7 +177,7 @@ include([], function() {
202177
this.reset=function(){
203178
nDisp=0;
204179
bPlaying=false;
205-
if(imgSld) imgSld.changeVal(0);
180+
if(imgSld) imgSld.setPercent(0);
206181
};
207182

208183
this.changeDir=function(dir){
@@ -212,8 +187,3 @@ include([], function() {
212187
}
213188
};
214189
});
215-
//var book = new flipbook($("visitor-caps"));
216-
217-
//setInterval(book.drawFrame,50);
218-
//setInterval(book.idle,50);
219-
//window.onload = book.init;

‎app/button.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use strict';
2+
3+
include([], function() {
4+
var buttonTag = inheritFrom(HTMLImageElement, function() {
5+
this.attachedCallback = function() {
6+
var _this = this;
7+
8+
var inactiveSrc = _this.src;
9+
var dot = _this.src.lastIndexOf('.');
10+
var activeSrc = _this.src.substring(0, dot) + '-active' + _this.src.substring(dot);
11+
12+
_this.src = inactiveSrc;
13+
14+
_this.onClick = () => {};
15+
16+
_this.onmouseup = () => {
17+
if (_this.pressed) _this.onClick();
18+
_this.pressed = false;
19+
if (document.onmouseup == _this.onmouseup) document.onmouseup = null;
20+
_this.src = inactiveSrc;
21+
};
22+
23+
_this.onmousedown = function(e) {
24+
e.preventDefault();
25+
_this.pressed = true;
26+
document.onmouseup = _this.onmouseup;
27+
_this.src = activeSrc;
28+
};
29+
};
30+
});
31+
32+
var ButtonTag = document.registerElement('but-ton', { prototype: buttonTag.prototype, extends: 'img' });
33+
});

‎app/sequences/seq1/001.jpg renamed to ‎app/celeb_seq/seq1/000.jpg

File renamed without changes.

‎app/flipPlayer.js

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use strict';
22

3-
include(['book.js'],function(){
3+
include(['book.js','slider.js'],function(){
44
window.flipPlayer = function (containerID){
55
var _this = this;
66
var cntnr = µ(containerID);
@@ -22,20 +22,21 @@ include(['book.js'],function(){
2222
playBut.className = "button";
2323
controls.appendChild(playBut);
2424

25-
var bgDiv = document.createElement("div");
26-
bgDiv.style.width = 512+"px";
27-
bgDiv.className = "slider-background";
28-
controls.appendChild(bgDiv);
29-
30-
var slide = new imgSlider(bgDiv,flip);
25+
var slide = new window.Slider();
26+
slide.setAttribute('orient','horiz');
27+
controls.appendChild(slide);
3128

3229
flip.registerStopCB(function(){
3330
playBut.src = playImg;
3431
},this);
3532

3633
this.init = function(){
37-
slide.connect();
38-
34+
//slide.connect();
35+
flip.connectSlider(slide);
36+
slide.onMoved = () => {
37+
flip.changePosByPercent(slide.getPercent());
38+
flip.stop();
39+
}
3940
}
4041

4142
this.changeSet = function(dirName){

‎app/index.html

+26-96
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,39 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta http-equiv="Cache-control" content="no-cache">
5-
<link rel="stylesheet" href="style.css" />
6-
<style type="text/css">
4+
<meta http-equiv='Cache-control' content='no-cache'>
5+
<link rel='stylesheet' href='style.css' />
6+
<style type='text/css'>
77

88
.text{ color: #aaa;font: 20px arial, sans-serif; border:none;}
99
</style>
10-
<script src="src/vendor/Muse/include.js" main="src/app.js"></script>
10+
<script src='src/vendor/Muse/include.js' main='src/app.js'></script>
1111
</head>
1212

13-
<body class="main" oncontextmenu="return false;">
14-
<div style="width: 100%;">
15-
<!-- <div id='mainTitle'>
16-
<img src="assets/pngs/title.png">
17-
</div>
18-
<div class='playback'>
19-
<img id="fyv" src="assets/pngs/button1.png" onmousedown="fyvClickDown()" onmouseup="fyvClickUp()">
20-
<img id="jy" class="sideBySide" src="assets/pngs/button2.png" onmousedown="jyClickDown()" onmouseup="jyClickUp()" style="display: none">
21-
<img id="sbs" class="justYou" src="assets/pngs/button3.png" onmousedown="sbsClickDown()" onmouseup="sbsClickUp()" >
22-
<div id="visitor-caps" style="display: table-cell;"></div>
23-
<div class="sideBySide" style="display: none; width: 153px;">
24-
<img id="playBoth" src="assets/pngs/playBoth-active.png" onmousedown="pbClickDown()"></img>
25-
</div>
26-
<div id="celeb-caps" class="sideBySide" style="display: none;"></div>
27-
<div class="justYou">
28-
<img src="assets/pngs/justYouInstruct.png"></img>
29-
</div>
30-
<div id="celebThumbs" class="sideBySide" style="display:none;">
31-
<div id='celebContainer'></div>
13+
<body class='main' oncontextmenu='return false;'>
14+
<div id='topBar'>
15+
<img id='mainTitle' src='assets/pngs/title.png'></img>
16+
<div class='playback'>
17+
<img is='but-ton' id='fyv' src='assets/pngs/button1.png'></img>
18+
<img is='but-ton' id='jy' class='sideBySide' src='assets/pngs/button2.png'></img>
19+
<img is='but-ton' id='sbs' class='justYou' src='assets/pngs/button3.png'></img>
3220
</div>
33-
<div class="sideBySide" style="display:none;">
34-
<div id="celebThumbSlider"></div>
21+
</div>
22+
<div class='playback' id='playbackDiv'>
23+
<video-player id='visitorPlayer'></video-player>
24+
<img class='justYou' id='visInstruct' src='assets/pngs/justYouInstruct.png'></img>
25+
<div class='sideBySide' id='celebDiv'>
26+
<img is='tog-gle' id='playBoth' active='assets/pngs/playBoth-active.png' inactive='assets/pngs/pauseBoth.png'></img>
27+
<video-player id='celebPlayer'></video-player>
28+
<div id='celebSelect'>
29+
<thumb-group id='celebThumbs' player='celebPlayer' max='21' scrollable='true'></thumb-group>
30+
<sli-der orient='vert' id='celebSlider'></sli-der>
31+
</div>
3532
</div>
36-
<div class='select'>
37-
<div id="thumbs"></div>
38-
</div> -->
39-
<table id="mainTable">
40-
<tr>
41-
<td >
42-
<table >
43-
<tr class="playback" style="display: none">
44-
<td>
45-
<img src="assets/pngs/title.png">
46-
</td>
47-
<td >
48-
<img id="fyv" src="assets/pngs/button1.png" onmousedown="fyvClickDown()" onmouseup="fyvClickUp()">
49-
</td>
50-
<td >
51-
<img id="jy" class="sideBySide" src="assets/pngs/button2.png" onmousedown="jyClickDown()" onmouseup="jyClickUp()" style="display: none">
52-
</td>
53-
<td >
54-
<img id="sbs" class="justYou" src="assets/pngs/button3.png" onmousedown="sbsClickDown()" onmouseup="sbsClickUp()" >
55-
</td>
56-
</tr>
57-
<tr class="select" style="display: table-row">
58-
<td>
59-
<img src="assets/pngs/title.png">
60-
</td>
61-
</tr>
62-
</table>
63-
</td>
64-
</tr>
65-
<tr id="captures" class="playback" style="display: none;" >
66-
<td >
67-
<table >
68-
<tr style="width: 100%;">
69-
<td id="visitor-caps" style="display: table-cell;">
70-
</td>
71-
<td class="sideBySide" style="display: none; width: 153px;">
72-
<img id="playBoth" src="assets/pngs/playBoth-active.png" onmousedown="pbClickDown()"></img>
73-
</td>
74-
<td id="celeb-caps" class="sideBySide" style="display: none;">
75-
</td>
76-
<td class="justYou">
77-
<img src="assets/pngs/justYouInstruct.png"></img>
78-
</td>
79-
<td id="celebThumbs" class="sideBySide" style="display:none;">
80-
<div id='celebContainer'></div>
81-
</td>
82-
<td class="sideBySide" style="display:none;">
83-
<div id="celebThumbSlider"></div>
84-
</td>
85-
</tr>
86-
</table>
87-
</td>
88-
</tr>
89-
<tr class="select" style="display: table-row">
90-
<td id="thumbs">
91-
</td>
92-
</tr>
93-
</table>
94-
95-
</div>
96-
97-
<!-- <script type="text/javascript" src="groups.js"></script>
98-
<script type="text/javascript" src="utils.js" ></script>
99-
<script type="text/javascript" src="mouseFxn.js" ></script>
100-
<script type="text/javascript" src="book.js" ></script>
101-
<script type="text/javascript" src="posSlider.js" ></script>
102-
<script type="text/javascript" src="flipPlayer.js" ></script>
103-
<script type="text/javascript" src="thumbSelect.js" ></script>
104-
<script type="text/javascript" src="webSockets.js" ></script>
105-
<script type="text/javascript" src="thumbSlider.js" ></script> -->
106-
33+
</div>
34+
<div class='select' id='selectDiv'>
35+
<thumb-group id='thumbs' player='visitorPlayer' max='21'></div>
36+
</div>
10737

10838
</body>
10939
</html>

‎app/index_withDivs.html renamed to ‎app/index_old.html

+8-17
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,13 @@
1212

1313
<body class="main" oncontextmenu="return false;">
1414
<div style="width: 100%;">
15-
<div id='topBar'>
16-
<div>
17-
<img id='mainTitle' src="assets/pngs/title.png">
18-
</div>
19-
<div>
20-
<img id="fyv" src="assets/pngs/button1.png" onmousedown="fyvClickDown()" onmouseup="fyvClickUp()">
21-
</div>
22-
<div style="display: none">
23-
<img id="jy" class="sideBySide" src="assets/pngs/button2.png" onmousedown="jyClickDown()" onmouseup="jyClickUp()">
24-
</div>
25-
<div>
26-
<img id="sbs" class="justYou" src="assets/pngs/button3.png" onmousedown="sbsClickDown()" onmouseup="sbsClickUp()" >
27-
</div>
15+
<!-- <div id='mainTitle'>
16+
<img src="assets/pngs/title.png">
2817
</div>
2918
<div class='playback'>
30-
19+
<img id="fyv" src="assets/pngs/button1.png" onmousedown="fyvClickDown()" onmouseup="fyvClickUp()">
20+
<img id="jy" class="sideBySide" src="assets/pngs/button2.png" onmousedown="jyClickDown()" onmouseup="jyClickUp()" style="display: none">
21+
<img id="sbs" class="justYou" src="assets/pngs/button3.png" onmousedown="sbsClickDown()" onmouseup="sbsClickUp()" >
3122
<div id="visitor-caps" style="display: table-cell;"></div>
3223
<div class="sideBySide" style="display: none; width: 153px;">
3324
<img id="playBoth" src="assets/pngs/playBoth-active.png" onmousedown="pbClickDown()"></img>
@@ -44,8 +35,8 @@
4435
</div>
4536
<div class='select'>
4637
<div id="thumbs"></div>
47-
</div>
48-
<!-- <table id="mainTable">
38+
</div> -->
39+
<table id="mainTable">
4940
<tr>
5041
<td >
5142
<table >
@@ -99,7 +90,7 @@
9990
<td id="thumbs">
10091
</td>
10192
</tr>
102-
</table> -->
93+
</table>
10394

10495
</div>
10596

0 commit comments

Comments
 (0)