Skip to content
Snippets Groups Projects
Commit 801c0368 authored by Manuel Herrmann's avatar Manuel Herrmann
Browse files

story mode navigation

parent 2ceab2ca
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 183 additions and 61 deletions
registration-system/index.php
+ 10
− 4
View file @ 801c0368
......@@ -249,9 +249,15 @@ function index_show_formular($fid, $bid = NULL, $bachelor = NULL){
{
echo '</noscript>';
echo '<h2>Anmeldeformular</h2>';
echo '<div style="margin:0 auto; position:relative; width:900px; height:500px; overflow:hidden"><div id="storybox"></div>';
echo '<div id="story_umleitung" style="position:absolute; left:0px; bottom:-70px; background:#f0f; cursor:pointer; background:url(view/graphics/story/umleitung.png); width:120px; height: 70px" onclick="story.next(true)">&nbsp;</div></div>';
echo '<div style="text-align:center;font-weight:bold"><a style="float:none;margin:0 auto;" href="'.$_SERVER['REQUEST_URI'].'&noscript">Seite funktioniert nicht / zu bunt?</a></div>';
echo<<<END
<div id="storyhead"></div>
<div id="storycanvas">
<div id="storybox"></div>
<div id="story_umleitung" style="position:absolute; left:0px; bottom:-70px; background:#f0f; cursor:pointer; background:url(view/graphics/story/umleitung.png); width:120px; height: 70px" onclick="story.next(true)">&nbsp;</div>
</div>
<div style="text-align:center;font-weight:bold"><a style="float:none;margin:0 auto;"
END;
echo ' href="'.$_SERVER['REQUEST_URI'].'&noscript">Seite funktioniert nicht / zu bunt?</a></div>';
}
}
......@@ -396,4 +402,4 @@ function index_show_signupTable_destroyTypes($anabtyp){
if(array_search($anabtyp, $config_reisearten)>=2)
return $config_reisearten_destroyed[array_rand($config_reisearten_destroyed)];
return $anabtyp;
}
\ No newline at end of file
}
registration-system/other/story_eat.svg
+4.92 KiB (+1%)
View file @ 801c0368
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
registration-system/other/story_travelBegin.svg
+1.89 KiB (+1%)
View file @ 801c0368
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
registration-system/view/graphics/story/eat.png
+ 0
− 0
View replaced file @ 2ceab2ca View file @ 801c0368
registration-system/view/graphics/story/eat.png

129 KiB | W: | H:

registration-system/view/graphics/story/eat.png

133 KiB | W: | H:

registration-system/view/graphics/story/eat.png
registration-system/view/graphics/story/eat.png
registration-system/view/graphics/story/eat.png
registration-system/view/graphics/story/eat.png
  • 2-up
  • Swipe
  • Onion skin
registration-system/view/graphics/story/ticket.png
+ 0
− 0
View replaced file @ 2ceab2ca View file @ 801c0368
registration-system/view/graphics/story/ticket.png

17.8 KiB | W: | H:

registration-system/view/graphics/story/ticket.png

18.3 KiB | W: | H:

registration-system/view/graphics/story/ticket.png
registration-system/view/graphics/story/ticket.png
registration-system/view/graphics/story/ticket.png
registration-system/view/graphics/story/ticket.png
  • 2-up
  • Swipe
  • Onion skin
registration-system/view/js/story.js
+ 166
− 57
View file @ 801c0368
var debug = true;
var debug = false;
var story;
var form_variables = {};
function storyImage(filename)
{
return $('<img src="view/graphics/story/' + filename + '" alt="" />');
}
function storyImageDiv(filename)
{
return $('<div style="position:absolute; width:900px; height:500px; background: url(view/graphics/story/'+filename+');"></div>');
addFormText(bell, "eMail", "mehl", 150, 215);
}
function addFormText(parentNode, label, fieldName, x, y)
{
var form_label = $('<div>'+label+':</div>');
var form = $('<input name="'+fieldName+'"/>');
form_label.css({position:'absolute', top:y+'px',left:x+'px'});
form.css({position:'absolute', top:(y+20)+'px',left:x+'px'});
parentNode.append(form_label);
parentNode.append(form);
}
function Story(_storybox)
function Story(_storyhead, _storycanvas, _storybox)
{
this.storyhead = _storyhead;
this.storycanvas = _storycanvas;
this.storybox = _storybox;
this.umleitung = $('#story_umleitung');
this.state = -2;
this.form_variables = {};
this.basicData = null;
this.travelStart = null;
this.eat = null;
......@@ -37,6 +20,8 @@ function Story(_storybox)
}
Story.prototype.next = function(bGoBack)
{
var self = this;
var previousState = this.state;
if (!bGoBack)
this.state += 1;
......@@ -45,19 +30,36 @@ Story.prototype.next = function(bGoBack)
{
case -1:
this.initBeginButton();
this.initBasicData();
this.storycanvas.animate({height:0}, 0);
break;
case 0:
if (previousState == -1)
{
this.storybox.children().remove();
this.storyhead.children().remove();
if (debug)
this.storyhead.append('(debug) <div style="cursor:pointer; text-decoration: underline" onclick="story.next()">NEXT</a>');
if (debug)
this.storybox.append('(debug) <div style="cursor:pointer; text-decoration: underline" onclick="story.next()">NEXT</a>');
{
this.storycanvas.stop(true, true).animate({height:'500px'}, 0);
this.initBasicDataAnimation();
}
else
{
this.storycanvas.stop(true, true).animate({height:'500px'}, {duration: 200, complete: function()
{
self.initBasicDataAnimation();
}});
}
}
this.initBasicData();
break;
case 1:
this.initTravelStart();
this.travelStart.animate({left:bGoBack?'900px':'0px'}, 1000);
this.travelStart.animate({left:bGoBack?'900px':'0px'}, {duration: 1000, complete: function()
{
self.initTravelStartAnimation();
}});
this.basicData.animate({left:bGoBack?'0px':'-900px'}, 1000);
break;
case 2:
......@@ -94,73 +96,180 @@ Story.prototype.next = function(bGoBack)
}
Story.prototype.initBeginButton = function()
{
this.storybox.append('<div style="cursor:pointer; text-decoration: underline" onclick="story.next()">Anmeldung starten (Story mode)</a>');
this.storyhead.append('<div style="cursor:pointer; text-decoration: underline" onclick="story.next()">Anmeldung starten (Story mode)</a>');
}
Story.prototype.initTravelStartAnimation = function()
{
this.travelStartTicket.fadeIn(debug ? 0 : 1000);
}
Story.prototype.initTravelStart = function()
{
if (this.travelStart) return;
this.travelStart = storyImageDiv('travelBegin.png');
this.travelStart = this.storyImageDiv('travelBegin.png');
this.travelStart.animate({left:'900px'}, 0);
this.storybox.append(this.travelStart);
this.travelStartTicket = this.storyImageDiv('ticket.png');
this.travelStartTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'});
this.travelStart.append(this.travelStartTicket);
this.travelStartTicket.fadeOut(0);
this.addTicketTitle(this.travelStartTicket, "Anreise");
this.travelStartTicketButton = this.addTicketButton(this.travelStartTicket, "story.next()");
this.travelStartTicketButton.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
this.travelStartTypeButtons = this.addTravelTypeButtons(this.travelStart);
}
Story.prototype.addTravelTypeButtons = function(page)
{
var buttons =
{
car:
$('<div style="position: absolute; border: 1px solid; left: 23px; top: 222px; width: 129px; height: 87px; cursor: pointer;">&nbsp;</div>'),
bike:
$('<div style="position: absolute; border: 1px solid; left: 177px; top: 366px; width: 90px; height: 73px; cursor: pointer;">&nbsp;</div>'),
oeffi:
$('<div style="position: absolute; border: 1px solid; left: 316px; top: 192px; width: 84px; height: 90px; cursor: pointer;">&nbsp;</div>'),
camel:
$('<div style="position: absolute; border: 1px solid; left: 461px; top: 114px; width: 78px; height: 71px; cursor: pointer;">&nbsp;</div>')
};
for (var i in buttons)
{
var button = buttons[i];
page.append(button);
button.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
}
return buttons;
}
Story.prototype.addTicketTitle = function(ticket, title)
{
ticket.append('<div style="position: absolute; left: 55px; top: 15px;">' + title + '</div>');
}
Story.prototype.addTicketButton = function(ticket, funcstring)
{
var newButton = $('<div style="position: absolute; left: 249px; top: 125px; width: 27px; height: 27px; cursor: pointer;" onclick="' + funcstring + '">&nbsp;</div>');
ticket.append(newButton);
return newButton;
}
Story.prototype.initTravelEnd = function()
{
if (this.travelEnd) return;
this.travelEnd = storyImageDiv('travelBegin.png');
this.travelEnd = this.storyImageDiv('travelBegin.png');
this.travelEnd.animate({left:'-900px'}, 0);
this.storybox.append(this.travelEnd);
}
Story.prototype.initEat = function()
{
if (this.eat) return;
this.eat = storyImageDiv('eat.png');
this.eat = this.storyImageDiv('eat.png');
this.eat.animate({left:'900px'}, 0);
this.storybox.append(this.eat);
this.foodTypeButtons = this.addFoodTypeButtons(this.eat);
this.eatContinueButton = $('<div style="position: absolute; left: 799px; top: 412px; width: 32px; height: 27px; cursor: pointer;" onclick="story.next()">&nbsp;</div>');
this.eatContinueButton.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
this.eat.append(this.eatContinueButton);
}
Story.prototype.addFoodTypeButtons = function(page)
{
var buttons =
{
cow:
$('<div style="position: absolute; border: 1px solid; left: 236px; top: 139px; width: 129px; height: 93px; cursor: pointer;">&nbsp;</div>'),
cheese:
$('<div style="position: absolute; border: 1px solid; left: 446px; top: 236px; width: 57px; height: 56px; cursor: pointer;">&nbsp;</div>'),
wheat:
$('<div style="position: absolute; border: 1px solid; left: 604px; top: 214px; width: 112px; height: 127px; cursor: pointer;">&nbsp;</div>')
};
for (var i in buttons)
{
var button = buttons[i];
page.append(button);
button.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
}
return buttons;
}
Story.prototype.initAge = function()
{
if (this.age) return;
this.age = storyImageDiv('age.png');
this.age = this.storyImageDiv('age.png');
this.age.animate({left:'900px'}, 0);
this.storybox.append(this.age);
}
Story.prototype.initBasicDataAnimation = function()
{
var self = this;
setTimeout(function() {
self.bd_bell.fadeIn(debug ? 0 : 1200);
self.bd_orig_bell.effect("transfer", {to: self.bd_bell}, 800);
}, debug ? 0 : 600);
}
Story.prototype.initBasicData = function()
{
if (this.basicData) return;
this.basicData = storyImageDiv('begin.png');
this.basicData = this.storyImageDiv('begin.png');
this.storybox.append(this.basicData);
var bell = storyImageDiv('bell.png');
bell.css({position: 'relative', top: '20px', left: '20px', width: '419px', height: '438px'});
this.basicData.append(bell);
if (!debug)
bell.fadeOut(0);
addFormText(bell, "Vorname", "forname", 150, 60);
addFormText(bell, "Nachname", "name", 150, 140);
addFormText(bell, "Anzeigename", "anzeig", 150, 215);
addFormText(bell, "eMail", "mehl", 150, 290);
bell.append($('<div style="position:absolute;top:380px;left:120px">Bitte klingeln, wenn fertig.</div>'))
var btn_continue = $('<div style="width:60px;height:67px;position:absolute;top:48px;left:48px;cursor:pointer;" onclick="story.next();" />');
bell.append(btn_continue);
btn_continue.mouseenter(function(event) {
$(this).effect("highlight");
this.bd_bell = this.storyImageDiv('bell.png');
this.bd_bell.css({position: 'relative', top: '20px', left: '20px', width: '419px', height: '438px'});
this.basicData.append(this.bd_bell);
this.bd_bell.fadeOut(0);
this.addFormText(this.bd_bell, "Vorname", "forname", 150, 60);
this.addFormText(this.bd_bell, "Nachname", "name", 150, 140);
this.addFormText(this.bd_bell, "Anzeigename", "anzeig", 150, 215);
this.addFormText(this.bd_bell, "eMail", "mehl", 150, 290);
this.bd_bell.append($('<div style="position:absolute;top:380px;left:120px">Bitte klingeln, wenn fertig.</div>'))
this.bd_btn_continue = $('<div style="width:60px;height:67px;position:absolute;top:48px;left:48px;cursor:pointer;" onclick="story.next();" />');
this.bd_bell.append(this.bd_btn_continue);
this.bd_btn_continue.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
var orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
this.basicData.append(orig_bell);
if (!debug)
setTimeout(function() {
bell.fadeIn(1200);
orig_bell.effect("transfer", {to: bell}, 800);
}, 600);
this.bd_orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
this.basicData.append(this.bd_orig_bell);
}
Story.prototype.begin = function()
{
this.next();
}
Story.prototype.storyImage = function(filename)
{
return $('<img src="view/graphics/story/' + filename + '" alt="" />');
}
Story.prototype.storyImageDiv = function(filename)
{
return $('<div style="position:absolute; width:900px; height:500px; background: url(view/graphics/story/'+filename+');"></div>');
this.addFormText(bell, "eMail", "mehl", 150, 215);
}
Story.prototype.addFormText = function(parentNode, label, fieldName, x, y)
{
var form_label = $('<div>'+label+':</div>');
var form = $('<input name="'+fieldName+'"/>');
form_label.css({position:'absolute', top:y+'px',left:x+'px'});
form.css({position:'absolute', top:(y+20)+'px',left:x+'px'});
parentNode.append(form_label);
parentNode.append(form);
this.form_variables[fieldName] = null;
}
$(function() {
story = new Story($('#storybox'));
story = new Story($('#storyhead'), $('#storycanvas'), $('#storybox'));
story.begin();
});
registration-system/view/style.css
+ 7
− 0
View file @ 801c0368
......@@ -119,6 +119,13 @@ div#storybox {
height:500px;
overflow:hidden;
}
div#storycanvas {
margin:0 auto;
position:relative;
width:900px;
height:500px;
overflow:hidden;
}
div#headerbox h2 {
padding-top: 10px;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Impressum | Datenschutzerklärung