Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • fsini-informatik/fsfahrttool
  • kleemeis/fsfahrttool
2 results
Show changes
Hide whitespace changes
Inline Side-by-side
registration-system/view/signups/story/story.js
View file @ 7c45322b
...@@ -3,790 +3,666 @@ var debug = false; ...@@ -3,790 +3,666 @@ var debug = false;
var story; // global access for links var story; // global access for links
var FAPI = new FAPI(); var FAPI = new FAPI();
function Story(_storyhead, _storycanvas, _storybox) function Story(_storyhead, _storycanvas, _storybox) {
{ this.storyhead = _storyhead;
this.storyhead = _storyhead; this.storycanvas = _storycanvas;
this.storycanvas = _storycanvas; this.storybox = _storybox;
this.storybox = _storybox; this.umleitung = $('#story_umleitung');
this.umleitung = $('#story_umleitung'); this.state = -2;
this.state = -2;
this.form_variables = {};
this.form_variables = {}; this.achievements = [];
this.basicData = null; this.basicData = null;
this.travelStart = null; this.travelStart = null;
this.eat = null; this.eat = null;
this.age = null; this.age = null;
this.travelEnd = null; this.travelEnd = null;
} }
Story.prototype.next = function(bGoBack) Story.prototype.next = function (bGoBack) {
{ var self = this;
var self = this;
// === validate ===
// === validate ===
if (!bGoBack) {
// (e.g.) get mail: switch (this.state) {
// angular.element(document.querySelector('[ng-controller="storyBasicData"]')).scope().mehl; case 0:
var basicDataScope = angular.element(document.querySelector('[ng-controller="storyBasicData"]')).scope();
if (!bGoBack) if (basicDataScope.storyBasicData.$invalid)
{ return;
switch(this.state) this.form_variables.forname = basicDataScope.forname;
{ this.form_variables.name = basicDataScope.name;
case 0: this.form_variables.anzeig = basicDataScope.anzeig;
var basicDataScope = angular.element(document.querySelector('[ng-controller="storyBasicData"]')).scope(); this.form_variables.mehl = basicDataScope.mehl;
if (basicDataScope.storyBasicData.$invalid)
return; break;
case 1:
this.form_variables.forname = basicDataScope.forname; if (
this.form_variables.name = basicDataScope.name; this.form_variables.travelStartDate == null
this.form_variables.anzeig = basicDataScope.anzeig; ||
this.form_variables.mehl = basicDataScope.mehl; this.form_variables.travelStartType == null
)
break; return;
case 1:
if ( break;
this.form_variables.travelStartDate == null case 2:
|| if (this.form_variables.eat == null)
this.form_variables.travelStartType == null return;
)
return; break;
case 3:
break; if (this.form_variables.age == null)
case 2: return;
if (this.form_variables.eat == null)
return; break;
case 4:
break; if (
case 3: this.form_variables.travelEndDate == null
if (this.form_variables.age == null) ||
return; this.form_variables.travelEndType == null
)
break; return;
case 4:
if ( break;
this.form_variables.travelEndDate == null }
|| }
this.form_variables.travelEndType == null
) // === navigate ===
return; var previousState = this.state;
if (!bGoBack)
break; this.state += 1;
}
} switch (this.state) {
case -1:
// === navigate === this.initBeginButton();
var previousState = this.state; this.initBasicData();
if (!bGoBack) this.storycanvas.animate({height: 0}, 0);
this.state += 1; break;
case 0:
switch(this.state) if (previousState == -1) {
{ this.storyhead.children().remove();
case -1: if (debug)
this.initBeginButton(); this.storyhead.append('(debug) <div style="cursor:pointer; text-decoration: underline" onclick="story.next()">NEXT</a>');
this.initBasicData();
this.storycanvas.animate({height:0}, 0); if (debug) {
break; this.storycanvas.stop(true, true).animate({height: '500px'}, 0);
case 0: this.initBasicDataAnimation();
if (previousState == -1) }
{ else {
this.storyhead.children().remove(); this.storycanvas.stop(true, true).animate({height: '500px'}, {
if (debug) duration: 200, complete: function () {
this.storyhead.append('(debug) <div style="cursor:pointer; text-decoration: underline" onclick="story.next()">NEXT</a>'); self.initBasicDataAnimation();
}
if (debug) });
{ }
this.storycanvas.stop(true, true).animate({height:'500px'}, 0); }
this.initBasicDataAnimation(); break;
} case 1:
else this.initTravelStart();
{ this.travelStart.animate({left: bGoBack ? '900px' : '0px'}, {
this.storycanvas.stop(true, true).animate({height:'500px'}, {duration: 200, complete: function() duration: 1000, complete: function () {
{ self.initTravelStartAnimation();
self.initBasicDataAnimation(); }
}}); });
} this.basicData.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
} break;
break; case 2:
case 1: this.initEat();
this.initTravelStart(); this.eat.animate({left: bGoBack ? '900px' : '0px'}, 1000);
this.travelStart.animate({left:bGoBack?'900px':'0px'}, {duration: 1000, complete: function() this.travelStart.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
{ break;
self.initTravelStartAnimation(); case 3:
}}); this.initAge();
this.basicData.animate({left:bGoBack?'0px':'-900px'}, 1000); this.age.animate({left: bGoBack ? '900px' : '0px'}, {
break; duration: 1000, complete: function () {
case 2: self.initAgeAnimation();
this.initEat(); }
this.eat.animate({left:bGoBack?'900px':'0px'}, 1000); });
this.travelStart.animate({left:bGoBack?'0px':'-900px'}, 1000); this.eat.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
break; break;
case 3: case 4:
this.initAge(); this.initTravelEnd();
this.age.animate({left:bGoBack?'900px':'0px'}, {duration: 1000, complete: function() this.travelEnd.animate({left: bGoBack ? '-900px' : '0px'}, 1000);
{ this.age.animate({left: bGoBack ? '0px' : '900px'}, 1000);
self.initAgeAnimation(); break;
}}); case 5:
this.eat.animate({left:bGoBack?'0px':'-900px'}, 1000); this.initSummary();
break; this.storycanvas.stop(true, true).animate({height: bGoBack ? '500px' : '680px'}, 1000);
case 4: this.storybox.stop(true, true).animate({height: bGoBack ? '500px' : '680px'}, 1000);
this.initTravelEnd(); this.travelEnd.animate({left: bGoBack ? '0px' : '900px'}, 1000);
this.travelEnd.animate({left:bGoBack?'-900px':'0px'}, 1000); break;
this.age.animate({left:bGoBack?'0px':'900px'}, 1000); default:
break; if (bGoBack)
case 5: this.state += 1;
this.initSummary(); else
this.storycanvas.stop(true, true).animate({height:bGoBack?'500px':'680px'}, 1000); this.state -= 1;
this.storybox.stop(true, true).animate({height:bGoBack?'500px':'680px'}, 1000); }
this.summary.animate({left:bGoBack?'-900px':'0px'}, 1000); if (bGoBack) {
this.travelEnd.animate({left:bGoBack?'0px':'900px'}, 1000); this.state -= 1;
break; if (this.state < 0)
default: this.state = 0;
if (bGoBack) }
this.state += 1; if (bGoBack && this.state == 0)
else this.umleitung.animate({bottom: '-70px'}, 500);
this.state -= 1; else if (!bGoBack && this.state == 1)
} this.umleitung.animate({bottom: '0px'}, 500);
if (bGoBack) };
{ Story.prototype.initBeginButton = function () {
this.state -= 1; this.storyhead.append('<div style="text-align: center; cursor:pointer; text-decoration: underline" onclick="story.next()">Anmeldung starten (Story mode)</a>');
if (this.state < 0) };
this.state = 0; Story.prototype.initTravelStartAnimation = function () {
} this.travelStartTicket.fadeIn(debug ? 0 : 1000);
if (bGoBack && this.state == 0) };
this.umleitung.animate({bottom:'-70px'}, 500); Story.prototype.initSummary = function () {
else if (!bGoBack && this.state == 1) FAPI.data.setValues({
this.umleitung.animate({bottom:'0px'}, 500); forname: story.form_variables.forname,
sirname: story.form_variables.name,
pseudo: story.form_variables.anzeig,
mehl: story.form_variables.mehl,
virgin: Story.ageMap[story.form_variables.age],
essen: Story.eatMap[story.form_variables.eat],
anday: story.form_variables.travelStartDate,
abday: story.form_variables.travelEndDate,
antyp: Story.travelMap[story.form_variables.travelStartType],
abtyp: Story.travelMap[story.form_variables.travelEndType]
});
FAPI.data.setSignupStats('story', {achievements: story.achievements});
FAPI.submitSignup();
};
Story.prototype.initTravelStart = function () {
if (this.travelStart) return;
var self = this;
this.travelStart = this.storyImageSvg('travelBegin.svg');
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");
});
var possible_dates = comm_get_possible_dates();
possible_dates.pop(); // remove last
possible_dates.unshift(""); // push_front(...)
this.travelStartDate = this.addComboBox(this.travelStartTicket, "Datum", "anday", possible_dates, 115, 70); // @TODO: get date options from php
this.travelStartTicket.append('<div style="position: absolute; left: 65px; top: 95px">Typ</div>');
this.travelStartTicket.append('<div style="position: absolute; left: 115px; top: 95px" id="travelStartType">------</div>');
this.travelStartDate.change(function () {
var value = $(this).val();
if (value == '') {
self.form_variables.travelStartDate = null;
self.travelStartDateWarning.show();
}
else {
self.form_variables.travelStartDate = value;
self.travelStartDateWarning.hide();
}
});
this.travelStartTypeButtons = this.addTravelTypeButtons(this.travelStart);
var travelFormNames = {
bike: "Fahrrad",
oeffi: "&Ouml;ffentlich",
camel: "Individuell"
};
for (var i in this.travelStartTypeButtons) {
(function (i) { // i - scope issues -> would remember last i in for loop
self.travelStartTypeButtons[i].click(function () {
self.form_variables.travelStartType = i;
for (var j in self.travelStartTypeButtons)
self.travelStartTypeButtons[j].css({border: '1px solid #000'});
self.travelStartTypeButtons[i].css({border: '2px solid #f00'});
$('#travelStartType').html(travelFormNames[i]);
self.travelStartTypeWarning.hide();
});
})(i);
}
// warnings created at the end -> on top
this.travelStartTypeWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 95, null, "Auf der linken Seite den<br/>Anreise Typ anklicken");
this.travelStartDateWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 70, null, "Anreise Datum wählen");
} }
Story.prototype.initBeginButton = function() Story.prototype.addTravelTypeButtons = function (page) {
{ var buttons = {
this.storyhead.append('<div style="text-align: center; cursor:pointer; text-decoration: underline" onclick="story.next()">Anmeldung starten (Story mode)</a>'); 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>')
};
var tips = {
bike: $('<div class="storyTip" style="left: 127px; top: 444px; display:none">Anfahrt mit dem Fahrrad</div>'),
oeffi: $('<div class="storyTip" style="left: 206px; top: 286px; display:none">Anfahrt gemeinsam mit den &Ouml;ffentlichen</div>'),
camel: $('<div class="storyTip" style="left: 391px; top: 190px; display:none">Anritt mit Kamel / Individuell</div>')
};
for (var i in buttons) {
if (i.indexOf('Tip') == i.length - 3)
continue;
var button = buttons[i];
var tip = tips[i];
page.append(button);
page.append(tip);
button.mouseenter(function () {
$(this).stop(true, true).effect("highlight");
});
function setHover(tip) // function to keep 'tip' from changing (scope issue)
{
button.hover(function () // in
{
tip.stop(true, true).fadeIn(200);
},
function () // out
{
tip.stop(true, true).fadeOut(200);
});
}
setHover(tip);
}
return buttons;
} }
Story.prototype.initTravelStartAnimation = function() Story.prototype.addTicketTitle = function (ticket, title) {
{ ticket.append('<div style="position: absolute; left: 55px; top: 15px;">' + title + '</div>');
this.travelStartTicket.fadeIn(debug ? 0 : 1000);
} }
Story.prototype.initSummary = function() Story.prototype.addTicketButton = function (ticket, funcstring) {
{ var newButton = $('<div style="position: absolute; left: 245px; top: 115px; width: 36px; height: 37px; cursor: pointer;" onclick="' + funcstring + '">&nbsp;</div>');
// === Init View === ticket.append(newButton);
if (!this.summary) return newButton;
{
this.summary = $('<div style="position:absolute; left: 0px; top: 0px"/>');
this.summary.animate({left:'-900px'}, 0);
this.storybox.append(this.summary);
this.summary.append('<h2>Zusammenfassung</h2>');
this.summaryTable = $('<table class="story_summary"/>')
this.summary.append(this.summaryTable);
var rowOrder = ["forname", "name", "anzeig", "mehl", "andaytyp", "abdaytyp", "eat", "age"];
var rows = {
forname:
"Vorname",
name:
"Nachname",
anzeig:
"Anzeigename",
mehl:
"eMail",
andaytyp:
"Anreise Tag / Typ",
abdaytyp:
"Abreise Tag / Typ",
eat:
"Essenswahl",
age:
"Über 18?"
};
for (var i = 0; i < rowOrder.length; ++i)
{
var rowName = rowOrder[i];
var rowTitle = rows[rowName];
this.summaryTable.append('<tr><td>' + rowTitle + '</td><td id="story_summary_' + rowName + '"></td></tr>');
}
this.summaryTable.append('<tr><td>Du bist</td><td><select id="story_summary_studityp" name="studityp"><option>Ersti</option><option>Hoersti</option><option>Tutor</option></select></td></tr>');
this.summaryTable.append('<tr><td>Anmeldung verstecken</td><td><input id="story_summary_public" type="checkbox" name="public" value="public"/></td></tr>');
this.summaryTable.append('<tr><td>Captcha eingeben</td><td><input id="story_summary_captcha" type="text" name="captcha"/></td></tr>');
this.summaryTable.append('<tr><td align="center" colspan="2"><img src="view/captcha.php" alt=""/></td></tr>');
this.summaryTable.append('<tr><td colspan="2">Anmerkung</td></tr>');
this.summaryTable.append('<tr><td colspan="2"><textarea id="story_summary_comment" name="comment" style="width: 450px; height: 120px;"></textarea></td></tr>');
this.summaryTable.append('<tr><td colspan="2">Daten Ok? Dann <button onclick="storySubmit()">anmelden</button>.</td></tr>');
}
// === Update View ===
$('#story_summary_forname').text(this.form_variables.forname);
$('#story_summary_name').text(this.form_variables.name);
$('#story_summary_anzeig').text(this.form_variables.anzeig);
$('#story_summary_mehl').text(this.form_variables.mehl);
$('#story_summary_andaytyp').text(this.form_variables.travelStartDate + ", " + Story.travelMapPhp[Story.travelMap[this.form_variables.travelStartType]]);
$('#story_summary_abdaytyp').text(this.form_variables.travelEndDate + ", " + Story.travelMapPhp[Story.travelMap[this.form_variables.travelEndType]]);
$('#story_summary_eat').text(Story.eatMapPhp[Story.eatMap[this.form_variables.eat]]);
$('#story_summary_age').text(Story.ageMap[this.form_variables.age]);
} }
Story.prototype.initTravelStart = function() Story.prototype.initTravelEnd = function () {
{ if (this.travelEnd) return;
if (this.travelStart) return;
var self = this;
var self = this;
this.travelEnd = this.storyImageSvg('travelEnd.svg');
this.travelStart = this.storyImageDiv('travelBegin.png'); this.travelEnd.animate({left: '900px'}, 0);
this.travelStart.animate({left:'900px'}, 0); this.storybox.append(this.travelEnd);
this.storybox.append(this.travelStart);
this.travelEndTicket = this.storyImageDiv('ticket.png');
this.travelStartTicket = this.storyImageDiv('ticket.png'); this.travelEndTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'});
this.travelStartTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'}); this.travelEnd.append(this.travelEndTicket);
this.travelStart.append(this.travelStartTicket);
this.travelStartTicket.fadeOut(0); this.addTicketTitle(this.travelEndTicket, "Abreise");
this.travelEndTicketButton = this.addTicketButton(this.travelEndTicket, "story.next()");
this.addTicketTitle(this.travelStartTicket, "Anreise"); this.travelEndTicketButton.mouseenter(function (event) {
this.travelStartTicketButton = this.addTicketButton(this.travelStartTicket, "story.next()"); $(this).stop(true, true).effect("highlight");
this.travelStartTicketButton.mouseenter(function(event) { });
$(this).stop(true, true).effect("highlight");
}); var possible_dates = comm_get_possible_dates();
possible_dates.shift(); // remove first
var possible_dates = comm_get_possible_dates(); possible_dates.unshift(""); // push_front(...)
possible_dates.pop(); // remove last
possible_dates.unshift(""); // push_front(...) this.travelEndDate = this.addComboBox(this.travelEndTicket, "Datum", "abday", possible_dates, 115, 70); // @TODO: get date options from php
this.travelEndTicket.append('<div style="position: absolute; left: 65px; top: 95px">Typ</div>');
this.travelStartDate = this.addComboBox(this.travelStartTicket, "Datum", "anday", possible_dates, 115, 70); // @TODO: get date options from php this.travelEndTicket.append('<div style="position: absolute; left: 115px; top: 95px" id="travelEndType">------</div>');
this.travelStartTicket.append('<div style="position: absolute; left: 65px; top: 95px">Typ</div>'); this.travelEndDate.change(function () {
this.travelStartTicket.append('<div style="position: absolute; left: 115px; top: 95px" id="travelStartType">------</div>'); var value = $(this).val();
this.travelStartDate.change(function() if (value == '') {
{ self.form_variables.travelEndDate = null;
var value = $(this).val(); self.travelEndDateWarning.show();
if (value == '') }
{ else {
self.form_variables.travelStartDate = null; self.form_variables.travelEndDate = value;
self.travelStartDateWarning.show(); self.travelEndDateWarning.hide();
} }
else });
{ this.travelEndTypeButtons = this.addTravelTypeButtons(this.travelEnd);
self.form_variables.travelStartDate = value; var travelFormNames = {
self.travelStartDateWarning.hide(); bike: "Fahrrad",
} oeffi: "&Ouml;ffentlich",
}); camel: "Individuell"
this.travelStartTypeButtons = this.addTravelTypeButtons(this.travelStart); };
var travelFormNames = { for (var i in this.travelEndTypeButtons) {
car: (function (i) { // i - scope issues -> would remember last i in for loop
"Auto", self.travelEndTypeButtons[i].click(function () {
bike: self.form_variables.travelEndType = i;
"Fahrrad", for (var j in self.travelEndTypeButtons)
oeffi: self.travelEndTypeButtons[j].css({border: '1px solid #000'});
"&Ouml;ffentlich", self.travelEndTypeButtons[i].css({border: '2px solid #f00'});
camel: $('#travelEndType').html(travelFormNames[i]);
"Individuell" self.travelEndTypeWarning.hide();
}; });
for (var i in this.travelStartTypeButtons) })(i);
{ }
(function(i) { // i - scope issues -> would remember last i in for loop
self.travelStartTypeButtons[i].click(function() // warnings created at the end -> on top
{ this.travelEndTypeWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 95, null, "Auf der linken Seite den<br/>Abreise Typ anklicken");
self.form_variables.travelStartType = i; this.travelEndDateWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 70, null, "Abreise Datum wählen");
for (var j in self.travelStartTypeButtons)
self.travelStartTypeButtons[j].css({border:'1px solid #000'});
self.travelStartTypeButtons[i].css({border:'2px solid #f00'});
$('#travelStartType').html(travelFormNames[i]);
self.travelStartTypeWarning.hide();
});
})(i);
}
// warnings created at the end -> on top
this.travelStartTypeWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 95, null, "Auf der linken Seite den<br/>Anreise Typ anklicken");
this.travelStartDateWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 70, null, "Anreise Datum wählen");
} }
Story.prototype.addTravelTypeButtons = function(page) Story.prototype.initEat = function () {
{ if (this.eat) return;
var buttons = {
car: var self = this;
$('<div style="position: absolute; border: 1px solid; left: 23px; top: 222px; width: 129px; height: 87px; cursor: pointer;">&nbsp;</div>'),
bike: this.eat = this.storyImageSvg('eat.svg');
$('<div style="position: absolute; border: 1px solid; left: 177px; top: 366px; width: 90px; height: 73px; cursor: pointer;">&nbsp;</div>'), this.eat.animate({left: '900px'}, 0);
oeffi: this.storybox.append(this.eat);
$('<div style="position: absolute; border: 1px solid; left: 316px; top: 192px; width: 84px; height: 90px; cursor: pointer;">&nbsp;</div>'),
camel: this.foodTypeButtons = this.addFoodTypeButtons(this.eat);
$('<div style="position: absolute; border: 1px solid; left: 461px; top: 114px; width: 78px; height: 71px; cursor: pointer;">&nbsp;</div>') for (var i in this.foodTypeButtons) {
}; (function (i) {
var tips = { self.foodTypeButtons[i].click(function () {
car: self.form_variables.eat = i;
$('<div class="storyTip" style="left: 8px; top: 314px; display:none">Anfahrt mit dem Auto</div>'), for (var j in self.foodTypeButtons)
bike: self.foodTypeButtons[j].css({border: '1px solid #000'});
$('<div class="storyTip" style="left: 127px; top: 444px; display:none">Anfahrt mit dem Fahrrad</div>'), self.foodTypeButtons[i].css({border: '2px solid #f00'});
oeffi: self.eatWarning.hide();
$('<div class="storyTip" style="left: 206px; top: 286px; display:none">Anfahrt gemeinsam mit den &Ouml;ffentlichen</div>'), });
camel: })(i);
$('<div class="storyTip" style="left: 391px; top: 190px; display:none">Anritt mit Kamel / Individuell</div>') }
};
this.eatContinueButton = $('<div style="position: absolute; left: 799px; top: 412px; width: 32px; height: 27px; cursor: pointer;" onclick="story.next()">&nbsp;</div>');
for (var i in buttons) this.eatContinueButton.mouseenter(function (event) {
{ $(this).stop(true, true).effect("highlight");
if (i.indexOf('Tip') == i.length - 3) });
continue; this.eat.append(this.eatContinueButton);
var button = buttons[i]; this.eatWarning = this.toolTippedStoryWarning(this.eat, 386, 149, null, "Art des Essens auswählen");
var tip = tips[i];
page.append(button);
page.append(tip);
button.mouseenter(function ()
{
$(this).stop(true, true).effect("highlight");
});
function setHover(tip) // function to keep 'tip' from changing (scope issue)
{
button.hover(function () // in
{
tip.stop(true, true).fadeIn(200);
},
function () // out
{
tip.stop(true, true).fadeOut(200);
});
}
setHover(tip);
}
return buttons;
} }
Story.prototype.addTicketTitle = function(ticket, title) Story.prototype.addFoodTypeButtons = function (page) {
{ var buttons =
ticket.append('<div style="position: absolute; left: 55px; top: 15px;">' + title + '</div>'); {
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>')
};
var tips = {
cow: $('<div class="storyTip" style="left: 175px; top: 237px; display:none">Ziemlich alles:<br/>Vegan, Vegetarisch und Fleisch</div>'),
cheese: $('<div class="storyTip" style="left: 427px; top: 298px; display:none">Vegetarisch</div>'),
wheat: $('<div class="storyTip" style="left: 632px; top: 346px; display:none">Vegan</div>')
};
for (var i in buttons) {
var button = buttons[i];
page.append(button);
button.mouseenter(function (event) {
$(this).stop(true, true).effect("highlight");
});
page.append(tips[i]);
(function (tip) {
button.hover(function () // in
{
tip.stop(true, true).fadeIn(200);
},
function () // out
{
tip.stop(true, true).fadeOut(200);
});
})(tips[i]);
}
return buttons;
} }
Story.prototype.addTicketButton = function(ticket, funcstring) Story.prototype.initAgeAnimation = function () {
{ var self = this;
var newButton = $('<div style="position: absolute; left: 245px; top: 115px; width: 36px; height: 37px; cursor: pointer;" onclick="' + funcstring + '">&nbsp;</div>'); setTimeout(function () {
ticket.append(newButton); for (var j in self.ageButtons)
return newButton; self.ageButtons[j].effect("highlight");
}, 800);
} }
Story.prototype.initTravelEnd = function() Story.prototype.initAge = function () {
{ if (this.age) return;
if (this.travelEnd) return;
var self = this;
var self = this;
this.age = this.storyImageSvg('age.svg');
this.travelEnd = this.storyImageDiv('travelEnd.png'); this.age.animate({left: '900px'}, 0);
this.travelEnd.animate({left:'900px'}, 0); this.storybox.append(this.age);
this.storybox.append(this.travelEnd);
this.ageButtonContinue = $('<div style="position: absolute; left: 675px; top: 354px; width: 28px; height: 21px; cursor: pointer;" onclick="story.next()">&nbsp;</div>');
this.travelEndTicket = this.storyImageDiv('ticket.png'); this.age.append(this.ageButtonContinue);
this.travelEndTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'}); this.ageButtonContinue.mouseenter(function () {
this.travelEnd.append(this.travelEndTicket); $(this).stop(true, true).effect("highlight");
});
this.addTicketTitle(this.travelEndTicket, "Abreise");
this.travelEndTicketButton = this.addTicketButton(this.travelEndTicket, "story.next()"); this.ageButtons = {
this.travelEndTicketButton.mouseenter(function(event) { eighteenplus: $('<div style="position: absolute; left: 468px; top: 232px; width: 35px; height: 20px; cursor: pointer;">&nbsp;</div>'),
$(this).stop(true, true).effect("highlight"); below: $('<div style="position: absolute; left: 38px; top: 285px; width: 88px; height: 33px; cursor: pointer;">&nbsp;</div>')
}); };
for (var i in this.ageButtons) {
var possible_dates = comm_get_possible_dates(); (function (i) { // std::scope_issue<i>, own scope fixes reference
possible_dates.shift(); // remove first self.age.append(self.ageButtons[i]);
possible_dates.unshift(""); // push_front(...) self.ageButtons[i].click(function () {
self.form_variables.age = i;
this.travelEndDate = this.addComboBox(this.travelEndTicket, "Datum", "abday", possible_dates, 115, 70); // @TODO: get date options from php for (var j in self.ageButtons)
this.travelEndTicket.append('<div style="position: absolute; left: 65px; top: 95px">Typ</div>'); self.ageButtons[j].css({border: 'none'});
this.travelEndTicket.append('<div style="position: absolute; left: 115px; top: 95px" id="travelEndType">------</div>'); self.ageButtons[i].css({border: '2px solid #f00'});
this.travelEndDate.change(function() self.ageButtonContinue.effect("highlight");
{ self.ageWarning.hide();
var value = $(this).val(); });
if (value == '') self.ageButtons[i].mouseenter(function () {
{ $(this).stop(true, true).effect("highlight");
self.form_variables.travelEndDate = null; });
self.travelEndDateWarning.show(); })(i);
} }
else
{ this.ageWarning = this.toolTippedStoryWarning(this.age, 678, 134, null, "Links ein Schild mit passendem<br/>Altersbereich anklicken");
self.form_variables.travelEndDate = value;
self.travelEndDateWarning.hide();
}
});
this.travelEndTypeButtons = this.addTravelTypeButtons(this.travelEnd);
var travelFormNames = {
car:
"Auto",
bike:
"Fahrrad",
oeffi:
"&Ouml;ffentlich",
camel:
"Individuell"
};
for (var i in this.travelEndTypeButtons)
{
(function(i) { // i - scope issues -> would remember last i in for loop
self.travelEndTypeButtons[i].click(function()
{
self.form_variables.travelEndType = i;
for (var j in self.travelEndTypeButtons)
self.travelEndTypeButtons[j].css({border:'1px solid #000'});
self.travelEndTypeButtons[i].css({border:'2px solid #f00'});
$('#travelEndType').html(travelFormNames[i]);
self.travelEndTypeWarning.hide();
});
})(i);
}
// warnings created at the end -> on top
this.travelEndTypeWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 95, null, "Auf der linken Seite den<br/>Abreise Typ anklicken");
this.travelEndDateWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 70, null, "Abreise Datum wählen");
} }
Story.prototype.initEat = function() Story.prototype.initBasicDataAnimation = function () {
{ var self = this;
if (this.eat) return; setTimeout(function () {
self.bd_bell.fadeIn(debug ? 0 : 1200);
var self = this; self.bd_orig_bell.effect("transfer", {to: self.bd_bell}, 800);
}, debug ? 0 : 600);
this.eat = this.storyImageDiv('eat.png');
this.eat.animate({left:'900px'}, 0);
this.storybox.append(this.eat);
this.foodTypeButtons = this.addFoodTypeButtons(this.eat);
for (var i in this.foodTypeButtons)
{
(function (i)
{
self.foodTypeButtons[i].click(function()
{
self.form_variables.eat = i;
for (var j in self.foodTypeButtons)
self.foodTypeButtons[j].css({border: '1px solid #000'});
self.foodTypeButtons[i].css({border: '2px solid #f00'});
self.eatWarning.hide();
});
})(i);
}
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);
this.eatWarning = this.toolTippedStoryWarning(this.eat, 386, 149, null, "Art des Essens auswählen");
} }
Story.prototype.addFoodTypeButtons = function(page) Story.prototype.initBasicData = function () {
{ if (this.basicData) return;
var buttons =
{ var self = this;
cow:
$('<div style="position: absolute; border: 1px solid; left: 236px; top: 139px; width: 129px; height: 93px; cursor: pointer;">&nbsp;</div>'), // == init view ==
cheese: this.basicData = this.storyImageSvg('begin.svg');
$('<div style="position: absolute; border: 1px solid; left: 446px; top: 236px; width: 57px; height: 56px; cursor: pointer;">&nbsp;</div>'), this.storybox.append(this.basicData);
wheat: this.bd_bell = this.storyImageDiv('bell.png');
$('<div style="position: absolute; border: 1px solid; left: 604px; top: 214px; width: 112px; height: 127px; cursor: pointer;">&nbsp;</div>') this.bd_bell.css({position: 'absolute', top: '20px', left: '20px', width: '419px', height: '438px'});
}; this.basicData.append(this.bd_bell);
var tips = { this.bd_bell.fadeOut(0);
cow:
$('<div class="storyTip" style="left: 175px; top: 237px; display:none">Ziemlich alles:<br/>Vegan, Vegetarisch und Fleisch</div>'), // == form ==
cheese: this.bd_bellForm = $('<form name="storyBasicData" novalidate/>');
$('<div class="storyTip" style="left: 427px; top: 298px; display:none">Vegetarisch</div>'), this.bd_bell.append(this.bd_bellForm);
wheat:
$('<div class="storyTip" style="left: 632px; top: 346px; display:none">Vegan</div>') this.bd_bellForname = this.addFormText(this.bd_bellForm, "Vorname", "forname", "text", "forname", 160, 60);
}; this.bd_bellForname.attr('ng-minlength', '2');
this.bd_bellForname.attr('required', 'required');
for (var i in buttons) this.toolTippedStoryWarning(this.bd_bell, 135, 80, 'forname', "Bitte den Vornamen eingeben");
{
var button = buttons[i]; this.bd_bellName = this.addFormText(this.bd_bellForm, "Nachname", "name", "text", "name", 160, 140).attr('ng-minlength', '2');
page.append(button); this.bd_bellName.attr('ng-minlength', '2');
button.mouseenter(function(event) { this.bd_bellName.attr('required', 'required');
$(this).stop(true, true).effect("highlight"); this.toolTippedStoryWarning(this.bd_bell, 135, 160, 'name', "Bitte den Nachnamen eingeben");
});
page.append(tips[i]); this.bd_bellAnzeig = this.addFormText(this.bd_bellForm, "Anzeigename", "anzeig", "text", "anzeig", 160, 215);
(function(tip) { this.bd_bellAnzeig.attr('ng-minlength', '2');
button.hover(function () // in this.bd_bellAnzeig.attr('required', 'required');
{ this.toolTippedStoryWarning(this.bd_bell, 135, 235, 'anzeig', "Bitte einen Anzeige-Namen eingeben");
tip.stop(true, true).fadeIn(200);
}, this.bd_bellMehl = this.addFormText(this.bd_bellForm, "eMail", "mehl", "email", "mehl", 160, 290);
function () // out this.bd_bellMehl.attr('ng-minlength', '5');
{ this.bd_bellMehl.attr('required', 'required');
tip.stop(true, true).fadeOut(200); this.toolTippedStoryWarning(this.bd_bell, 135, 310, 'mehl', "Bitte eine g&uuml;ltige eMail Addresse eingeben");
});
})(tips[i]); // == notice ==
} this.bd_bell.append($('<div style="position:absolute;top:378px;left:168px">Bitte klingeln, wenn fertig.</div>'))
return buttons; 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");
});
// for transition animation
this.bd_orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
this.basicData.append(this.bd_orig_bell);
// == angularJS ==
this.basicData.attr('ng-controller', 'storyBasicData');
// manually start angular for the forms
angular.module('storyApp', []).controller('storyBasicData', function ($scope) {
// for function decl.
});
angular.bootstrap(document, ['storyApp']);
} }
Story.prototype.initAgeAnimation = function() Story.prototype.begin = function () {
{ this.next();
var self = this;
setTimeout(function()
{
for (var j in self.ageButtons)
self.ageButtons[j].effect("highlight");
}, 800);
}
Story.prototype.initAge = function()
{
if (this.age) return;
var self = this;
this.age = this.storyImageDiv('age.png');
this.age.animate({left:'900px'}, 0);
this.storybox.append(this.age);
this.ageButtonContinue = $('<div style="position: absolute; left: 675px; top: 354px; width: 28px; height: 21px; cursor: pointer;" onclick="story.next()">&nbsp;</div>');
this.age.append(this.ageButtonContinue);
this.ageButtonContinue.mouseenter(function() {
$(this).stop(true, true).effect("highlight");
});
this.ageButtons = {
eighteenplus:
$('<div style="position: absolute; left: 468px; top: 232px; width: 35px; height: 20px; cursor: pointer;">&nbsp;</div>'),
below:
$('<div style="position: absolute; left: 38px; top: 285px; width: 88px; height: 33px; cursor: pointer;">&nbsp;</div>')
};
for (var i in this.ageButtons)
{
(function(i) { // std::scope_issue<i>, own scope fixes reference
self.age.append(self.ageButtons[i]);
self.ageButtons[i].click(function()
{
self.form_variables.age = i;
for (var j in self.ageButtons)
self.ageButtons[j].css({border:'none'});
self.ageButtons[i].css({border:'2px solid #f00'});
self.ageButtonContinue.effect("highlight");
self.ageWarning.hide();
});
self.ageButtons[i].mouseenter(function() {
$(this).stop(true, true).effect("highlight");
});
})(i);
}
this.ageWarning = this.toolTippedStoryWarning(this.age, 678, 134, null, "Links ein Schild mit passendem<br/>Altersbereich anklicken");
}
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;
var self = this;
// == init view ==
this.basicData = this.storyImageDiv('begin.png');
this.storybox.append(this.basicData);
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);
// == form ==
this.bd_bellForm = $('<form name="storyBasicData" novalidate/>');
this.bd_bell.append(this.bd_bellForm);
this.bd_bellForname = this.addFormText(this.bd_bellForm, "Vorname", "forname", "text", "forname", 160, 60);
this.bd_bellForname.attr('ng-minlength', '2');
this.bd_bellForname.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 80, 'forname', "Bitte den Vornamen eingeben");
this.bd_bellName = this.addFormText(this.bd_bellForm, "Nachname", "name", "text", "name", 160, 140).attr('ng-minlength', '2');
this.bd_bellName.attr('ng-minlength', '2');
this.bd_bellName.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 160, 'name', "Bitte den Nachnamen eingeben");
this.bd_bellAnzeig = this.addFormText(this.bd_bellForm, "Anzeigename", "anzeig", "text", "anzeig", 160, 215);
this.bd_bellAnzeig.attr('ng-minlength', '2');
this.bd_bellAnzeig.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 235, 'anzeig', "Bitte einen Anzeige-Namen eingeben");
this.bd_bellMehl = this.addFormText(this.bd_bellForm, "eMail", "mehl", "email", "mehl", 160, 290);
this.bd_bellMehl.attr('ng-minlength', '5');
this.bd_bellMehl.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 310, 'mehl', "Bitte eine g&uuml;ltige eMail Addresse eingeben");
// == notice ==
this.bd_bell.append($('<div style="position:absolute;top:378px;left:168px">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");
});
// for transition animation
this.bd_orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
this.basicData.append(this.bd_orig_bell);
// == angularJS ==
this.basicData.attr('ng-controller', 'storyBasicData');
// manually start angular for the forms
angular.module('storyApp', []).controller('storyBasicData', function($scope)
{
// for function decl.
});
angular.bootstrap(document, ['storyApp']);
}
Story.prototype.begin = function()
{
this.next();
} }
Story.prototype.storyImage = function(filename) Story.prototype.storyImage = function (filename) {
{ return $('<img src="view/graphics/story/' + filename + '" alt="" />');
return $('<img src="view/graphics/story/' + filename + '" alt="" />');
} }
Story.prototype.storyImageDiv = function(filename) Story.prototype.storyImageDiv = function (filename) {
{ return $('<div style="position:absolute; width:900px; height:500px; background: url(' + FAPI.resolvePath('graphics/' + filename) + ');"></div>');
return $('<div style="position:absolute; width:900px; height:500px; background: url('+FAPI.resolvePath('graphics/'+filename)+');"></div>');
} }
Story.prototype.addComboBox = function(parentNode, label, fieldName, options, x, y) Story.prototype.storyImageSvg = function (filename) {
{ var bg = $('<div style="position:absolute; width:900px; height:500px;"></div>');
var form_label = $('<div>'+label+'</div>'); d3.xml(FAPI.resolvePath('graphics/' + filename), 'image/svg+xml', function (xml) {
var form = $('<select name="story_field_'+fieldName+'"></select>'); bg[0].appendChild(xml.documentElement);
for(var i = 0; i < options.length; ++i) });
form.append('<option>' + options[i] + '</option>'); return bg;
form_label.css({position:'absolute', top: y + 'px',left: (x - 60) + 'px'}); };
form.css({position:'absolute', top: y + 'px',left: x + 'px'});
parentNode.append(form_label); Story.prototype.addComboBox = function (parentNode, label, fieldName, options, x, y) {
parentNode.append(form); var form_label = $('<div>' + label + '</div>');
var form = $('<select name="story_field_' + fieldName + '"></select>');
for (var i = 0; i < options.length; ++i)
form.append('<option>' + options[i] + '</option>');
form_label.css({position: 'absolute', top: y + 'px', left: (x - 60) + 'px'});
form.css({position: 'absolute', top: y + 'px', left: x + 'px'});
parentNode.append(form_label);
parentNode.append(form);
this.form_variables[fieldName] = null;
return form;
}
Story.prototype.addFormText = function (parentNode, label, fieldName, type, model, x, y) {
var form_label = $('<div>' + label + ':</div>');
var form = $('<input type="' + type + '" name="story_field_' + fieldName + '" ng-model="' + model + '"/>');
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; this.form_variables[fieldName] = null;
return form; return form;
}
Story.prototype.addFormText = function(parentNode, label, fieldName, type, model, x, y)
{
var form_label = $('<div>'+label+':</div>');
var form = $('<input type="'+type+'" name="story_field_'+fieldName+'" ng-model="'+model+'"/>');
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;
return form;
} }
Story.prototype.toolTippedStoryWarning = function(page, x, y, field, toolTipText) Story.prototype.toolTippedStoryWarning = function (page, x, y, field, toolTipText) {
{ var warning = $('<div class="storyWarn" style="left: ' + x + 'px; top: ' + y + 'px;"' + (field != null ? (' ng-show="!' + field + '"') : '') + '>&nbsp;</div>');
var warning = $('<div class="storyWarn" style="left: '+x+'px; top: '+y+'px;"' + (field != null ? (' ng-show="!'+field+'"') : '') + '>&nbsp;</div>'); var toolTip = $('<div class="storyToolTip" style="left: ' + x + 'px; top: ' + (y + 25) + 'px; display: none; text-align: left">' + toolTipText + '</div>');
var toolTip = $('<div class="storyToolTip" style="left: '+x+'px; top: '+(y+25)+'px; display: none; text-align: left">'+toolTipText+'</div>'); page.append(warning);
page.append(warning); page.append(toolTip);
page.append(toolTip);
warning.hover(function () // over
warning.hover(function() // over {
{ toolTip.stop(true, true).fadeIn(200);
toolTip.stop(true, true).fadeIn(200); },
}, function () // out
function() // out {
{ toolTip.stop(true, true).fadeOut(200);
toolTip.stop(true, true).fadeOut(200); });
});
return warning;
return warning;
} }
Story.prototype.test = function() Story.prototype.test = function () {
{ function cI(objPhp, obj, error, label) {
function cI(objPhp, obj, error, label) var i = 0;
{ objPhpLoop:
var i = 0; for (var n in objPhp) {
objPhpLoop: ++i;
for (var n in objPhp) for (var j in obj) {
{ if (obj[j] == n)
++i; continue objPhpLoop;
for (var j in obj) }
{ error.push(n + " is missing in " + label);
if (obj[j] == n) }
continue objPhpLoop; for (var n in obj)
} --i;
error.push(n + " is missing in " + label); if (i != 0)
} error.push(label + " item count differs by " + i);
for (var n in obj) }
--i;
if (i != 0) var error = [];
error.push(label + " item count differs by " + i);
} cI(Story.eatMapPhp, Story.eatMap, error, "eatMap");
cI(Story.travelMapPhp, Story.travelMap, error, "travelMap");
var error = [];
if (error.length > 0) {
cI(Story.eatMapPhp, Story.eatMap, error, "eatMap"); alert("Der Story Modus ist nicht aktuell.\r\nBitte ohne Story-Modus fortsetzen.\r\nDazu 'Seite funktioniert nicht' anklicken.\r\n\r\n" + error.join("\r\n"));
cI(Story.travelMapPhp, Story.travelMap, error, "travelMap"); }
if (error.length > 0)
{
alert("Der Story Modus ist nicht aktuell.\r\nBitte ohne Story-Modus fortsetzen.\r\nDazu 'Seite funktioniert nicht' anklicken.\r\n\r\n"+error.join("\r\n"));
}
} }
function storySubmit()
{ Story.prototype.possibleAchievements = {
var formWrapper = $('<div style="display:none"/>'); test: function () {
var form = $('<form name="storySubmitForm" method="POST"/>'); $('#elch').hide();
formWrapper.append(form); },
$('#storybox').append(formWrapper); stein: function () {
$('#stein').hide();
function formAppendText(name, value) },
{ elch2: function () {
form.append('<input name="' + name + '" value="' + value.replace(/[\r\n]/g, "<br/>").replace(/&/g, "&amp;").replace(/"/g, "&quot;") + '"/>'); $('#elch2').children().css('fill', '#F300FB');
} },
bagger: function () {
if(window.location.pathname.search("waitlist")>0) $('#bagger').children().css('stroke', '#F300FB');
formAppendText("waitlist", "waitlist"); },
formAppendText('forname', story.form_variables.forname); ball: function () {
formAppendText('sirname', story.form_variables.name); $('#ball').hide();
formAppendText('pseudo', story.form_variables.anzeig); },
formAppendText('mehl', story.form_variables.mehl); ohh: function () {
formAppendText('studityp', $('#story_summary_studityp').val()); $('ohh').css('fill', '#F300FB');
formAppendText('virgin', Story.ageMap[story.form_variables.age]); },
formAppendText('essen', Story.eatMapPhp[Story.eatMap[story.form_variables.eat]]); star: function () {
formAppendText('anday', story.form_variables.travelStartDate); $('#licht1').hide();
formAppendText('antyp', Story.travelMapPhp[Story.travelMap[story.form_variables.travelStartType]]); },
formAppendText('abday', story.form_variables.travelEndDate); park: function () {
formAppendText('abtyp', Story.travelMapPhp[Story.travelMap[story.form_variables.travelEndType]]); $('#licht2').hide();
formAppendText('comment', $('#story_summary_comment').val()); }
if ($('#story_summary_public').is(':checked')) };
formAppendText('public', 'public');
formAppendText('captcha', $('#story_summary_captcha').val()); function triggerAchievement(aid) {
formAppendText('storySubmit', 'storySubmit'); console.log(aid);
if (aid in story.possibleAchievements && !(aid in story.achievements)) {
form.submit(); story.possibleAchievements[aid]();
story.achievements.push(aid);
}
} }
// === INIT === // === INIT ===
$(function() $(function () {
{ var storybox = $('#storybox');
var storybox = $('#storybox'); if (storybox) {
if (storybox) Story.eatMapPhp = config_get_food_types();
{ Story.eatMap = {
Story.eatMapPhp = config_get_food_types(); cow: "ALLES",
Story.eatMap = { cheese: "VEGE",
cow: wheat: "VEGA"
"ALLES", };
cheese: Story.ageMap = {
"VEGE", eighteenplus: "Ja",
wheat: below: "Nein"
"VEGA" };
}; Story.travelMapPhp = config_get_travel_types();
Story.ageMap = { Story.travelMap = {
eighteenplus: oeffi: "BUSBAHN",
"Ja", bike: "RAD",
below: camel: "INDIVIDUELL"
"Nein" };
};
Story.travelMapPhp = config_get_travel_types(); story = new Story($('#storyhead'), $('#storycanvas'), storybox);
Story.travelMap = { story.test();
car: story.begin();
"AUTO", }
oeffi:
"BUSBAHN",
bike:
"RAD",
camel:
"INDIVIDUELL"
};
story = new Story($('#storyhead'), $('#storycanvas'), storybox);
story.test();
story.begin();
}
}); });
registration-system/view/style.css
View file @ 7c45322b
...@@ -14,7 +14,6 @@ Neon Purple: #993CF3 ...@@ -14,7 +14,6 @@ Neon Purple: #993CF3
body { body {
background: #cfdee7; background: #cfdee7;
font-family: sans-serif; font-family: sans-serif;
text-align: justify;
font-size: 1em; font-size: 1em;
} }
...@@ -168,51 +167,23 @@ h3 { ...@@ -168,51 +167,23 @@ h3 {
} }
p { margin: 15px; } p { margin: 15px; }
div.event_info { margin: 0 15px 5px 15px; }
p.event_date { background: url(event_date_icon.png) left center no-repeat; line-height: 20px; padding-left: 25px; }
a { color: black; text-decoration: none; } a { color: black; text-decoration: none; }
a:hover { text-decoration: underline; } a:hover { text-decoration: underline; }
a.email_all { table.signups, div.signups { width: 95%; margin: 30px auto;}
margin-left: 70px; table.signups tr th { }
padding-left: 30px; table.signups tr th, tr td { text-align: left; padding: 1px 4px 1px 4px; }
line-height: 25px; table.signups td {
background: white url(mail_all.jpg) no-repeat left center; height: 2em;
} vertical-align: middle;
a.csv_download { margin-left: 70px; padding-left: 30px; line-height: 25px; background: url(csv_icon.gif) no-repeat left center; display: block; } margin:0;
ul.user_list {
list-style-image: url(user_small.gif);
}
.event_name {
background: url(event.jpg) no-repeat left center;
padding-left: 40px;
}
h2.event_name { line-height: 50px; }
h3.event_name { line-height: 40px; }
h3.signup {
background: url(signup.gif) no-repeat left center;
padding-left: 45px;
line-height: 45px;
} }
table.signups {border:none;}
table.fieldset { margin-left: 30px; } table.signups tbody tr:nth-child(odd) {
div.asterisk { margin-left: 30px; font-size: 10px; } background-color: #e6e6e6;
h3.signup_people {
background: url(group.jpg) no-repeat left center;
padding-left: 55px;
line-height: 50px;
margin-top: 15px;
} }
table.signups, div.signups { width: 90%; margin: 30px auto;}
table.signups tr th { }
table.signups tr th, tr td { text-align: left; padding: 1px 4px 1px 4px; }
p.edit_link { p.edit_link {
padding: 10px; padding: 10px;
border: 1px dotted black; border: 1px dotted black;
...@@ -298,10 +269,13 @@ a.editenum { display: block; height: 20px; line-height: 20px; width: 20px; font- ...@@ -298,10 +269,13 @@ a.editenum { display: block; height: 20px; line-height: 20px; width: 20px; font-
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
float: left; float: left;
background-color: #ffffff;
} }
.fahrttable { .fahrttable {
display: table; display: table;
margin-bottom: 1em;
margin-top: 1em;
} }
.fahrttable div { .fahrttable div {
...@@ -374,4 +348,22 @@ ul#method-list a:hover { ...@@ -374,4 +348,22 @@ ul#method-list a:hover {
#signup-container { #signup-container {
margin: 2em 0; margin: 2em 0;
}
.progressbar {
height: 5px;
position: relative;
background: #d4bfc1;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
padding: 1px;
}
.progressbar > span {
display: block;
height: 100%;
background-color: rgb(65, 207, 75);
position: relative;
overflow: hidden;
} }
\ No newline at end of file

Impressum | Datenschutzerklärung