287 lines
15 KiB
HTML
287 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html><head><title>BFF</title><style>
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.round {
|
|
border-radius: 10px;
|
|
}
|
|
.previousNext { cursor: pointer; background: rgba(255, 255, 255, 0.15); color: black; border: 6px solid gray; width: 100%; padding-left: 25px; padding-right: 25px; text-transform: uppercase; border-radius: 10px; font-size: 600%; }
|
|
.goButton { font-size: 160%; font-weight: bold; }
|
|
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>
|
|
function body_onload() {
|
|
storeIds(); // calls function the code of which is autogenerated in HTools, and which stores
|
|
// elements which have an id in the global object Elts
|
|
Elts.resetButton.width(Elts.loadSlidesButton.width());
|
|
Config = {
|
|
spacesBeforeTime : 9,
|
|
endSlideDefault : 20,
|
|
totalNumSlides : 30,
|
|
spacesInEndSlideInput : 4,
|
|
loopDefault : false,
|
|
intervalDefault : 3,
|
|
intervalStep : 0.5,
|
|
spacesInIntervalInput : 8,
|
|
dummyExampleURL : ""
|
|
};
|
|
window.setInterval(set_time, 30000);
|
|
set_time();
|
|
Elts.endSlideUpButton.click(endSlideUpButtonClick);
|
|
Elts.endSlideDownButton.click(endSlideDownButtonClick);
|
|
App = {};
|
|
App.endSlide = Config.totalNumSlides;
|
|
Elts.loopCheckbox[0].checked = Config.loopDefault;
|
|
App.looping = Config.loopDefault;
|
|
Elts.loopCheckbox.change(loopCheckChange);
|
|
Elts.intervalUpButton.click(intervalUpButtonClick);
|
|
Elts.intervalDownButton.click(intervalDownButtonClick);
|
|
Elts.intervalInput[0].value = " ".repeat(Config.spacesInIntervalInput) + Config.intervalDefault;
|
|
Elts.goButton.click(goButtonClick);
|
|
Elts.currentSlideDownButton.click(currentSlideDownClick);
|
|
Elts.currentSlideUpButton.click(currentSlideUpClick);
|
|
Elts.previousButton.click(previousButtonClick);
|
|
Elts.nextButton.click(nextButtonClick);
|
|
setCurrentSlideInput(1);
|
|
App.currentSlide = 1;
|
|
Elts.urlInput[0].value = Config.dummyExampleURL;
|
|
Elts.loadSlidesButton.click(loadSlidesButtonClick);
|
|
Elts.resetButton.click(resetButtonClick);
|
|
Elts.endSlideInput.keyup(endSlideInputKeyup);
|
|
Elts.autoPlayButton.click(autoPlayButtonClick);
|
|
App.isAutoPlaying = false;
|
|
}
|
|
function set_time(){
|
|
var now = new Date();
|
|
var h = now.getHours();
|
|
var m = now.getMinutes();
|
|
var ampm = ( (h >= 12) ? "PM" : "AM" );
|
|
h = h % 12;
|
|
if (h == 0) {
|
|
h = 12;
|
|
}
|
|
if (m <= 9.5){
|
|
m = "0" + m;
|
|
}
|
|
var hm = [h,m].join(":");
|
|
var timeStr = [hm, ampm].join(" ");
|
|
Elts.currentTime[0].value = " ".repeat(Config.spacesBeforeTime) + timeStr;
|
|
}
|
|
function modify_url(origUrl, index){
|
|
var positionOfEq = origUrl.lastIndexOf("=");
|
|
var startUrl = origUrl.slice(0,positionOfEq);
|
|
return startUrl + "=" + index;
|
|
}
|
|
function endSlideUpButtonClick(){
|
|
var v = +Elts.endSlideInput[0].value;
|
|
if (isNaN(v) || v == 0){
|
|
v = Config.endSlideDefault;
|
|
}
|
|
v++;
|
|
v = Math.min(v, Config.totalNumSlides);
|
|
console.log("up. end slide: ", v);
|
|
Elts.endSlideInput[0].value = " ".repeat(Config.spacesInEndSlideInput) + v;
|
|
App.endSlide = v;
|
|
}
|
|
function endSlideDownButtonClick(){
|
|
var v = +Elts.endSlideInput[0].value;
|
|
if (isNaN(v) || v == 0){
|
|
v = Config.endSlideDefault;
|
|
}
|
|
v--;
|
|
v = Math.max(v, 1);
|
|
console.log("down. end slide: ", v);
|
|
Elts.endSlideInput[0].value = " ".repeat(Config.spacesInEndSlideInput) + v;
|
|
App.endSlide = v;
|
|
}
|
|
function loopCheckChange(){
|
|
console.log("looping:", this.checked);
|
|
App.looping = this.checked;
|
|
}
|
|
function intervalUpButtonClick(){
|
|
var v = +Elts.intervalInput[0].value;
|
|
if (isNaN(v) || v == 0){
|
|
v = Config.intervalDefault;
|
|
}
|
|
v += Config.intervalStep;
|
|
console.log("up. interval: ", v);
|
|
Elts.intervalInput[0].value = " ".repeat(Config.spacesInIntervalInput) + v;
|
|
}
|
|
function intervalDownButtonClick(){
|
|
var v = +Elts.intervalInput[0].value;
|
|
if (isNaN(v) || v == 0){
|
|
v = Config.intervalDefault;
|
|
}
|
|
v -= Config.intervalStep;
|
|
v = Math.max(v, Config.intervalStep);
|
|
console.log("down. interval: ", v);
|
|
Elts.intervalInput[0].value = " ".repeat(Config.spacesInIntervalInput) + v;
|
|
}
|
|
function goButtonClick(){
|
|
if (!App.originalURL){
|
|
alert("no slides loaded");
|
|
return;
|
|
}
|
|
console.log("go");
|
|
var v = +Elts.currentSlideInput[0].value;
|
|
if (isNaN(v)) return;
|
|
App.currentSlide = v;
|
|
do_load();
|
|
}
|
|
function currentSlideDownClick(){
|
|
var v = +Elts.currentSlideInput[0].value;
|
|
if (isNaN(v) || v == 0){
|
|
v = 2;
|
|
}
|
|
v--;
|
|
v = Math.max(v, 1);
|
|
//console.log("current down. end slide: ", v);
|
|
setCurrentSlideInput(v);
|
|
}
|
|
function currentSlideUpClick(){
|
|
var v = +Elts.currentSlideInput[0].value;
|
|
if (isNaN(v) || v == 0){
|
|
v = 0;
|
|
}
|
|
v++;
|
|
v = Math.min(v, Config.totalNumSlides);
|
|
//console.log("current up. end slide: ", v);
|
|
setCurrentSlideInput(v);
|
|
}
|
|
function nextButtonClick(){
|
|
console.log("next btn click");
|
|
if (!App.originalURL){
|
|
alert("no slides loaded");
|
|
return;
|
|
}
|
|
App.currentSlide++;
|
|
if (App.currentSlide > Config.totalNumSlides){
|
|
if (App.looping){
|
|
App.currentSlide = 1;
|
|
} else {
|
|
App.currentSlide = Config.totalNumSlides;
|
|
return;
|
|
}
|
|
}
|
|
if ( (App.currentSlide > App.endSlide) && App.looping ){
|
|
App.currentSlide = 1;
|
|
}
|
|
setCurrentSlideInput(App.currentSlide);
|
|
do_load();
|
|
}
|
|
function previousButtonClick(){
|
|
console.log("previous btn click");
|
|
if (!App.originalURL){
|
|
alert("no slides loaded");
|
|
return;
|
|
}
|
|
if (App.currentSlide <= 1){
|
|
return;
|
|
}
|
|
App.currentSlide--;
|
|
setCurrentSlideInput(App.currentSlide);
|
|
do_load();
|
|
}
|
|
function loadSlidesButtonClick(){
|
|
App.originalURL = Elts.urlInput[0].value;
|
|
App.currentSlide = 1;
|
|
setCurrentSlideInput(1);
|
|
Elts.remainThingy[0].value = "";
|
|
}
|
|
function setCurrentSlideInput(v){
|
|
Elts.currentSlideInput[0].value = " ".repeat(Config.spacesInEndSlideInput) + v;
|
|
}
|
|
function do_load(){
|
|
var newURL = modify_url(App.originalURL, App.currentSlide);
|
|
/////////////////////
|
|
// todo: actually load the slide here
|
|
// Do a sendmessage? Or message the thing directly?
|
|
// Use a web bridge?
|
|
/////////////////////
|
|
Elts.urlInput[0].value = newURL;
|
|
var numRemainingSlides = App.endSlide - App.currentSlide;
|
|
var numSecondsPerSlide = +Elts.intervalInput[0].value || Config.intervalDefault;
|
|
var totalNumRemainingSeconds = numRemainingSlides * numSecondsPerSlide;
|
|
var minutes = Math.floor(totalNumRemainingSeconds/60);
|
|
var seconds = totalNumRemainingSeconds - 60*minutes;
|
|
if (seconds <= 9.5){
|
|
seconds = "0" + seconds;
|
|
}
|
|
Elts.remainThingy[0].value = " " + [minutes, seconds].join(":") + " remaining";
|
|
if (App.isAutoPlaying){
|
|
if (App.currentAutoPlayCallbackHandle){
|
|
window.clearTimeout(App.currentAutoPlayCallbackHandle);
|
|
}
|
|
var millisecondsToNextSlide = 1000 * (+Elts.intervalInput[0].value || Config.intervalDefault);
|
|
App.currentAutoPlayCallbackHandle = window.setTimeout(function(){
|
|
console.log(App.currentAutoPlayCallbackHandle);
|
|
delete App.currentAutoPlayCallbackHandle;
|
|
nextButtonClick();
|
|
}, millisecondsToNextSlide);
|
|
}
|
|
}
|
|
function resetButtonClick(){
|
|
Elts.urlInput[0].value = App.originalURL;
|
|
App.currentSlide = 1;
|
|
setCurrentSlideInput(1);
|
|
Elts.remainThingy[0].value = "";
|
|
}
|
|
function endSlideInputKeyup(evt){
|
|
var v = +this.value;
|
|
if (isNaN(v)) return;
|
|
v = Math.max(v, 1);
|
|
v = Math.min(v, Config.totalNumSlides);
|
|
App.endSlide = v;
|
|
}
|
|
function autoPlayButtonClick(evt){
|
|
if (App.isAutoPlaying){
|
|
stop_auto_play();
|
|
} else {
|
|
start_auto_play();
|
|
}
|
|
}
|
|
function start_auto_play(){
|
|
if (!App.originalURL){
|
|
alert("no slides loaded");
|
|
return;
|
|
}
|
|
App.isAutoPlaying = true;
|
|
Elts.autoPlayButton.text("STOP");
|
|
do_load();
|
|
}
|
|
function stop_auto_play(){
|
|
App.isAutoPlaying = false;
|
|
Elts.autoPlayButton.text("AUTO PLAY");
|
|
window.clearTimeout(App.currentAutoPlayCallbackHandle);
|
|
}
|
|
|
|
function storeIds(){
|
|
Elts = {};
|
|
Elts.urlInput = jQuery("#urlInput");
|
|
Elts.loadSlidesButton = jQuery("#loadSlidesButton");
|
|
Elts.currentTime = jQuery("#currentTime");
|
|
Elts.remainThingy = jQuery("#remainThingy");
|
|
Elts.resetButton = jQuery("#resetButton");
|
|
Elts.endSlideTable = jQuery("#endSlideTable");
|
|
Elts.endSlideTd = jQuery("#endSlideTd");
|
|
Elts.endSlideInput = jQuery("#endSlideInput");
|
|
Elts.endSlideUpButton = jQuery("#endSlideUpButton");
|
|
Elts.endSlideDownButton = jQuery("#endSlideDownButton");
|
|
Elts.loopCheckbox = jQuery("#loopCheckbox");
|
|
Elts.intervalTable = jQuery("#intervalTable");
|
|
Elts.intervalTd = jQuery("#intervalTd");
|
|
Elts.intervalInput = jQuery("#intervalInput");
|
|
Elts.intervalUpButton = jQuery("#intervalUpButton");
|
|
Elts.intervalDownButton = jQuery("#intervalDownButton");
|
|
Elts.autoPlayButton = jQuery("#autoPlayButton");
|
|
Elts.previousButton = jQuery("#previousButton");
|
|
Elts.currentSlideTable = jQuery("#currentSlideTable");
|
|
Elts.currentSlideTd = jQuery("#currentSlideTd");
|
|
Elts.currentSlideInput = jQuery("#currentSlideInput");
|
|
Elts.currentSlideUpButton = jQuery("#currentSlideUpButton");
|
|
Elts.currentSlideDownButton = jQuery("#currentSlideDownButton");
|
|
Elts.goButton = jQuery("#goButton");
|
|
Elts.nextButton = jQuery("#nextButton");
|
|
}
|
|
|
|
</script></head><body onload="body_onload();"><table><tbody><tr><td colspan="2"><input id="urlInput" type="text" placeholder="Paste URL to slide show here" class="round" size="55" /></td><td><button id="loadSlidesButton" class="round button">Load Slides</button></td></tr><tr><td><input type="text" placeholder="time goes here" class="round" size="13" disabled="disabled" id="currentTime" /></td><td><input id="remainThingy" type="text" placeholder="remain goes here" class="round" size="32" disabled="disabled" /></td><td><button id="resetButton" class="round button">Reset</button></td></tr><tr><td><table id="endSlideTable" style="display: block;" cellspacing="0" cellpadding="2"><tbody><tr><td rowspan="2">end#</td><td id="endSlideTd" rowspan="2" style="min-width: 22px; padding-right: 3px;" align="right"><input id="endSlideInput" type="text" placeholder="End Slide" class="round" size="7" /></td><td id="endSlideUpButton" style="cursor: pointer;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAbElEQVQokZXLUQ2AIBRG4dPAAswGJrGAMwkNaEADGtCAJCSQBvpy7+YUBf7tvMD94HubNDQDHJLpRRMQgFMK8tacvSHNttAK5ArM8lfdDMQK0qLcvOZ+kOaeaAdKByxyC8ACpA6kJTH4AaT5C4L7RZNlinV0AAAAAElFTkSuQmCC" style="display: block;" /></td></tr><tr><td id="endSlideDownButton" style="cursor: pointer;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAbElEQVQokZXLUQ2DMBSG0eNgBggOpmQGlimpAxzgoA5wgBIUrA7g5ZJspIHyJf9Lew+MWG9uhCfmG2gOAz4oDajE7V9DAxyOCHpMJ2iKm2ovLBW0xN9pqQLTFYIH8g/K8dZUh2+sa0V771i1DaDORZM2jUBDAAAAAElFTkSuQmCC" style="display: block;" /></td></tr></tbody></table></td><td><table><tbody><tr><td><input type="checkbox" id="loopCheckbox" />loop</td><td><table id="intervalTable" style="display: block;" cellspacing="0" cellpadding="2"><tbody><tr><td rowspan="2">interval (s)</td><td id="intervalTd" rowspan="2" style="min-width: 22px; padding-right: 3px;" align="right"><input id="intervalInput" type="text" placeholder="interval" class="round" size="6" /></td><td id="intervalUpButton" style="cursor: pointer;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAbElEQVQokZXLUQ2AIBRG4dPAAswGJrGAMwkNaEADGtCAJCSQBvpy7+YUBf7tvMD94HubNDQDHJLpRRMQgFMK8tacvSHNttAK5ArM8lfdDMQK0qLcvOZ+kOaeaAdKByxyC8ACpA6kJTH4AaT5C4L7RZNlinV0AAAAAElFTkSuQmCC" style="display: block;" /></td></tr><tr><td id="intervalDownButton" style="cursor: pointer;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAbElEQVQokZXLUQ2DMBSG0eNgBggOpmQGlimpAxzgoA5wgBIUrA7g5ZJspIHyJf9Lew+MWG9uhCfmG2gOAz4oDajE7V9DAxyOCHpMJ2iKm2ovLBW0xN9pqQLTFYIH8g/K8dZUh2+sa0V771i1DaDORZM2jUBDAAAAAElFTkSuQmCC" style="display: block;" /></td></tr></tbody></table></td></tr></tbody></table></td><td><button id="autoPlayButton" class="round button">AUTO PLAY</button></td></tr><tr><td colspan="3"><table style="width: 100%"><tbody><tr><td><button id="previousButton" class="previousNext"><</button></td><td><table id="currentSlideTable" style="display: block;" cellspacing="0" cellpadding="2"><tbody><tr><td rowspan="2">current#</td><td id="currentSlideTd" rowspan="2" style="min-width: 22px; padding-right: 3px;" align="right"><input id="currentSlideInput" type="text" placeholder="current" class="round" size="4" /></td><td id="currentSlideUpButton" style="cursor: pointer;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAbElEQVQokZXLUQ2AIBRG4dPAAswGJrGAMwkNaEADGtCAJCSQBvpy7+YUBf7tvMD94HubNDQDHJLpRRMQgFMK8tacvSHNttAK5ArM8lfdDMQK0qLcvOZ+kOaeaAdKByxyC8ACpA6kJTH4AaT5C4L7RZNlinV0AAAAAElFTkSuQmCC" style="display: block;" /></td></tr><tr><td id="currentSlideDownButton" style="cursor: pointer;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAbElEQVQokZXLUQ2DMBSG0eNgBggOpmQGlimpAxzgoA5wgBIUrA7g5ZJspIHyJf9Lew+MWG9uhCfmG2gOAz4oDajE7V9DAxyOCHpMJ2iKm2ovLBW0xN9pqQLTFYIH8g/K8dZUh2+sa0V771i1DaDORZM2jUBDAAAAAElFTkSuQmCC" style="display: block;" /></td></tr></tbody></table></td><td><button id="goButton" class="round button goButton">GO</button></td><td><button id="nextButton" class="previousNext">></button></td></tr></tbody></table></td></tr></tbody></table></body></html>
|