Anmeldung starten (Story mode)');
-}
-Story.prototype.initTravelStartAnimation = function()
-{
- this.travelStartTicket.fadeIn(debug ? 0 : 1000);
-}
-Story.prototype.initSummary = function()
-{
- // === Init View ===
- if (!this.summary)
- {
- this.summary = $('');
- this.summary.animate({left:'-900px'}, 0);
- this.storybox.append(this.summary);
-
- this.summary.append('
')
- 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('' + rowTitle + ' Du bist Anmeldung verstecken Captcha eingeben 
Anmerkung Daten Ok? Dann .
Anreise Typ anklicken"); - this.travelStartDateWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 70, null, "Anreise Datum wählen"); +Story.prototype.next = function (bGoBack) { + var self = this; + + // === validate === + + if (!bGoBack) { + switch (this.state) { + case 0: + var basicDataScope = angular.element(document.querySelector('[ng-controller="storyBasicData"]')).scope(); + if (basicDataScope.storyBasicData.$invalid) + return; + this.form_variables.forname = basicDataScope.forname; + this.form_variables.name = basicDataScope.name; + this.form_variables.anzeig = basicDataScope.anzeig; + this.form_variables.mehl = basicDataScope.mehl; + + break; + case 1: + if ( + this.form_variables.travelStartDate == null + || + this.form_variables.travelStartType == null + ) + return; + + break; + case 2: + if (this.form_variables.eat == null) + return; + + break; + case 3: + if (this.form_variables.age == null) + return; + + break; + case 4: + if ( + this.form_variables.travelEndDate == null + || + this.form_variables.travelEndType == null + ) + return; + + break; + } + } + + // === navigate === + var previousState = this.state; + if (!bGoBack) + this.state += 1; + + switch (this.state) { + case -1: + this.initBeginButton(); + this.initBasicData(); + this.storycanvas.animate({height: 0}, 0); + break; + case 0: + if (previousState == -1) { + this.storyhead.children().remove(); + if (debug) + this.storyhead.append('(debug)
Zusammenfassung
'); - this.summaryTable = $('Typ
');
- this.travelStartTicket.append('------
');
- 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:
- "Ö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 denAnreise Typ anklicken"); - this.travelStartDateWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 70, null, "Anreise Datum wählen"); +Story.prototype.next = function (bGoBack) { + var self = this; + + // === validate === + + if (!bGoBack) { + switch (this.state) { + case 0: + var basicDataScope = angular.element(document.querySelector('[ng-controller="storyBasicData"]')).scope(); + if (basicDataScope.storyBasicData.$invalid) + return; + this.form_variables.forname = basicDataScope.forname; + this.form_variables.name = basicDataScope.name; + this.form_variables.anzeig = basicDataScope.anzeig; + this.form_variables.mehl = basicDataScope.mehl; + + break; + case 1: + if ( + this.form_variables.travelStartDate == null + || + this.form_variables.travelStartType == null + ) + return; + + break; + case 2: + if (this.form_variables.eat == null) + return; + + break; + case 3: + if (this.form_variables.age == null) + return; + + break; + case 4: + if ( + this.form_variables.travelEndDate == null + || + this.form_variables.travelEndType == null + ) + return; + + break; + } + } + + // === navigate === + var previousState = this.state; + if (!bGoBack) + this.state += 1; + + switch (this.state) { + case -1: + this.initBeginButton(); + this.initBasicData(); + this.storycanvas.animate({height: 0}, 0); + break; + case 0: + if (previousState == -1) { + this.storyhead.children().remove(); + if (debug) + this.storyhead.append('(debug)
NEXT');
+
+ if (debug) {
+ 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();
+ }
+ });
+ }
+ }
+ break;
+ case 1:
+ this.initTravelStart();
+ this.travelStart.animate({left: bGoBack ? '900px' : '0px'}, {
+ duration: 1000, complete: function () {
+ self.initTravelStartAnimation();
+ }
+ });
+ this.basicData.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
+ break;
+ case 2:
+ this.initEat();
+ this.eat.animate({left: bGoBack ? '900px' : '0px'}, 1000);
+ this.travelStart.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
+ break;
+ case 3:
+ this.initAge();
+ this.age.animate({left: bGoBack ? '900px' : '0px'}, {
+ duration: 1000, complete: function () {
+ self.initAgeAnimation();
+ }
+ });
+ this.eat.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
+ break;
+ case 4:
+ this.initTravelEnd();
+ this.travelEnd.animate({left: bGoBack ? '-900px' : '0px'}, 1000);
+ this.age.animate({left: bGoBack ? '0px' : '900px'}, 1000);
+ break;
+ case 5:
+ this.initSummary();
+ this.storycanvas.stop(true, true).animate({height: bGoBack ? '500px' : '680px'}, 1000);
+ this.storybox.stop(true, true).animate({height: bGoBack ? '500px' : '680px'}, 1000);
+ this.summary.animate({left: bGoBack ? '-900px' : '0px'}, 1000);
+ this.travelEnd.animate({left: bGoBack ? '0px' : '900px'}, 1000);
+ break;
+ default:
+ if (bGoBack)
+ this.state += 1;
+ else
+ this.state -= 1;
+ }
+ if (bGoBack) {
+ this.state -= 1;
+ if (this.state < 0)
+ this.state = 0;
+ }
+ if (bGoBack && this.state == 0)
+ this.umleitung.animate({bottom: '-70px'}, 500);
+ else if (!bGoBack && this.state == 1)
+ this.umleitung.animate({bottom: '0px'}, 500);
+};
+Story.prototype.initBeginButton = function () {
+ this.storyhead.append('
Anmeldung starten (Story mode)');
+};
+Story.prototype.initTravelStartAnimation = function () {
+ this.travelStartTicket.fadeIn(debug ? 0 : 1000);
+};
+Story.prototype.initSummary = function () {
+ FAPI.data.setValues({
+ 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('
Anreise Typ anklicken"); + this.travelStartDateWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 70, null, "Anreise Datum wählen"); } -Story.prototype.addTravelTypeButtons = function(page) -{ - var buttons = { - bike: - $(' '),
- oeffi:
- $(' '),
- camel:
- $(' ')
- };
- var tips = {
- bike:
- $(''),
- oeffi:
- $(''),
- camel:
- $('')
- };
-
- 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.addTravelTypeButtons = function (page) {
+ var buttons = {
+ bike: $(' '),
+ oeffi: $(' '),
+ camel: $(' ')
+ };
+ var tips = {
+ bike: $(''),
+ oeffi: $(''),
+ camel: $('')
+ };
+
+ 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.addTicketTitle = function(ticket, title)
-{
- ticket.append(' ');
- ticket.append(newButton);
- return newButton;
+Story.prototype.addTicketButton = function (ticket, funcstring) {
+ var newButton = $(' ');
+ ticket.append(newButton);
+ return newButton;
}
-Story.prototype.initTravelEnd = function()
-{
- if (this.travelEnd) return;
-
- var self = this;
-
- this.travelEnd = this.storyImageSvg('travelEnd.svg');
- this.travelEnd.animate({left:'900px'}, 0);
- this.storybox.append(this.travelEnd);
-
- this.travelEndTicket = this.storyImageDiv('ticket.png');
- this.travelEndTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'});
- this.travelEnd.append(this.travelEndTicket);
-
- this.addTicketTitle(this.travelEndTicket, "Abreise");
- this.travelEndTicketButton = this.addTicketButton(this.travelEndTicket, "story.next()");
- this.travelEndTicketButton.mouseenter(function(event) {
- $(this).stop(true, true).effect("highlight");
- });
-
- var possible_dates = comm_get_possible_dates();
- possible_dates.shift(); // remove first
- 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('
Abreise Typ anklicken"); - this.travelEndDateWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 70, null, "Abreise Datum wählen"); +Story.prototype.initTravelEnd = function () { + if (this.travelEnd) return; + + var self = this; + + this.travelEnd = this.storyImageSvg('travelEnd.svg'); + this.travelEnd.animate({left: '900px'}, 0); + this.storybox.append(this.travelEnd); + + this.travelEndTicket = this.storyImageDiv('ticket.png'); + this.travelEndTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'}); + this.travelEnd.append(this.travelEndTicket); + + this.addTicketTitle(this.travelEndTicket, "Abreise"); + this.travelEndTicketButton = this.addTicketButton(this.travelEndTicket, "story.next()"); + this.travelEndTicketButton.mouseenter(function (event) { + $(this).stop(true, true).effect("highlight"); + }); + + var possible_dates = comm_get_possible_dates(); + possible_dates.shift(); // remove first + 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('
Abreise Typ anklicken"); + this.travelEndDateWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 70, null, "Abreise Datum wählen"); } -Story.prototype.initEat = function() -{ - if (this.eat) return; - - var self = this; - - this.eat = this.storyImageSvg('eat.svg'); - 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 = $(' ');
- 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.initEat = function () {
+ if (this.eat) return;
+
+ var self = this;
+
+ this.eat = this.storyImageSvg('eat.svg');
+ 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 = $(' ');
+ 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)
-{
- var buttons =
- {
- cow:
- $(' '),
- cheese:
- $(' '),
- wheat:
- $(' ')
- };
- var tips = {
- cow:
- $(''),
- cheese:
- $(''),
- wheat:
- $('')
- };
-
- 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.addFoodTypeButtons = function (page) {
+ var buttons =
+ {
+ cow: $(' '),
+ cheese: $(' '),
+ wheat: $(' ')
+ };
+ var tips = {
+ cow: $(''),
+ cheese: $(''),
+ wheat: $('')
+ };
+
+ 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.initAgeAnimation = function()
-{
- var self = this;
- setTimeout(function()
- {
- for (var j in self.ageButtons)
- self.ageButtons[j].effect("highlight");
- }, 800);
+Story.prototype.initAgeAnimation = function () {
+ 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.storyImageSvg('age.svg');
- this.age.animate({left:'900px'}, 0);
- this.storybox.append(this.age);
-
- this.ageButtonContinue = $(' ');
- this.age.append(this.ageButtonContinue);
- this.ageButtonContinue.mouseenter(function() {
- $(this).stop(true, true).effect("highlight");
- });
-
- this.ageButtons = {
- eighteenplus:
- $(' '),
- below:
- $(' ')
- };
- for (var i in this.ageButtons)
- {
- (function(i) { // std::scope_issue, 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
Altersbereich anklicken"); +Story.prototype.initAge = function () { + if (this.age) return; + + var self = this; + + this.age = this.storyImageSvg('age.svg'); + this.age.animate({left: '900px'}, 0); + this.storybox.append(this.age); + + this.ageButtonContinue = $(' ');
+ this.age.append(this.ageButtonContinue);
+ this.ageButtonContinue.mouseenter(function () {
+ $(this).stop(true, true).effect("highlight");
+ });
+
+ this.ageButtons = {
+ eighteenplus: $(' '),
+ below: $(' ')
+ };
+ for (var i in this.ageButtons) {
+ (function (i) { // std::scope_issue, 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
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.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.storyImageSvg('begin.svg'); - this.storybox.append(this.basicData); - this.bd_bell = this.storyImageDiv('bell.png'); - this.bd_bell.css({position: 'absolute', top: '20px', left: '20px', width: '419px', height: '438px'}); - this.basicData.append(this.bd_bell); - this.bd_bell.fadeOut(0); - - // == form == - this.bd_bellForm = $(''); - 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ültige eMail Addresse eingeben"); - - // == notice == - this.bd_bell.append($('
');
+Story.prototype.storyImage = function (filename) {
+ return $('');
}
-Story.prototype.storyImageDiv = function(filename)
-{
- return $('');
+Story.prototype.storyImageDiv = function (filename) {
+ return $('');
}
-Story.prototype.storyImageSvg = function(filename)
-{
- var bg = $('');
- d3.xml(FAPI.resolvePath('graphics/'+filename), 'image/svg+xml', function (xml) {
- bg[0].appendChild(xml.documentElement);
- });
- return bg;
+Story.prototype.storyImageSvg = function (filename) {
+ var bg = $('');
+ d3.xml(FAPI.resolvePath('graphics/' + filename), 'image/svg+xml', function (xml) {
+ bg[0].appendChild(xml.documentElement);
+ });
+ return bg;
};
-Story.prototype.addComboBox = function(parentNode, label, fieldName, options, x, y)
-{
- var form_label = $(' ');
- var toolTip = $('');
- page.append(warning);
- page.append(toolTip);
-
- warning.hover(function() // over
- {
- toolTip.stop(true, true).fadeIn(200);
- },
- function() // out
- {
- toolTip.stop(true, true).fadeOut(200);
- });
-
- return warning;
+Story.prototype.toolTippedStoryWarning = function (page, x, y, field, toolTipText) {
+ var warning = $(' ');
+ var toolTip = $('');
+ page.append(warning);
+ page.append(toolTip);
+
+ warning.hover(function () // over
+ {
+ toolTip.stop(true, true).fadeIn(200);
+ },
+ function () // out
+ {
+ toolTip.stop(true, true).fadeOut(200);
+ });
+
+ return warning;
}
-Story.prototype.test = function()
-{
- function cI(objPhp, obj, error, label)
- {
- var i = 0;
- objPhpLoop:
- for (var n in objPhp)
- {
- ++i;
- for (var j in obj)
- {
- if (obj[j] == n)
- continue objPhpLoop;
- }
- error.push(n + " is missing in " + label);
- }
- for (var n in obj)
- --i;
- if (i != 0)
- error.push(label + " item count differs by " + i);
- }
-
- var error = [];
-
- cI(Story.eatMapPhp, Story.eatMap, error, "eatMap");
- 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"));
- }
+Story.prototype.test = function () {
+ function cI(objPhp, obj, error, label) {
+ var i = 0;
+ objPhpLoop:
+ for (var n in objPhp) {
+ ++i;
+ for (var j in obj) {
+ if (obj[j] == n)
+ continue objPhpLoop;
+ }
+ error.push(n + " is missing in " + label);
+ }
+ for (var n in obj)
+ --i;
+ if (i != 0)
+ error.push(label + " item count differs by " + i);
+ }
+
+ var error = [];
+
+ cI(Story.eatMapPhp, Story.eatMap, error, "eatMap");
+ 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()
-{
- var formWrapper = $('');
- var form = $('');
- formWrapper.append(form);
- $('#storybox').append(formWrapper);
-
- function formAppendText(name, value)
- {
- form.append('").replace(/&/g, "&").replace(/"/g, """) + '"/>');
- }
-
- if(window.location.pathname.search("waitlist")>0)
- formAppendText("waitlist", "waitlist");
- formAppendText('forname', story.form_variables.forname);
- formAppendText('sirname', story.form_variables.name);
- formAppendText('pseudo', story.form_variables.anzeig);
- formAppendText('mehl', story.form_variables.mehl);
- formAppendText('studityp', $('#story_summary_studityp').val());
- formAppendText('virgin', Story.ageMap[story.form_variables.age]);
- formAppendText('essen', Story.eatMapPhp[Story.eatMap[story.form_variables.eat]]);
- formAppendText('anday', story.form_variables.travelStartDate);
- formAppendText('antyp', Story.travelMapPhp[Story.travelMap[story.form_variables.travelStartType]]);
- formAppendText('abday', story.form_variables.travelEndDate);
- formAppendText('abtyp', Story.travelMapPhp[Story.travelMap[story.form_variables.travelEndType]]);
- formAppendText('comment', $('#story_summary_comment').val());
- if ($('#story_summary_public').is(':checked'))
- formAppendText('public', 'public');
- formAppendText('captcha', $('#story_summary_captcha').val());
- formAppendText('storySubmit', 'storySubmit');
-
- form.submit();
+
+Story.prototype.possibleAchievements = {
+ test: function () {
+ $('#elch').hide();
+ },
+ stein: function () {
+ $('#stein').hide();
+ },
+ elch2: function () {
+ $('#elch2').children().css('fill', '#F300FB');
+ },
+ bagger: function () {
+ $('#bagger').children().css('stroke', '#F300FB');
+ },
+ ball: function () {
+ $('#ball').hide();
+ },
+ ohh: function () {
+ $('ohh').css('fill', '#F300FB');
+ },
+ star: function () {
+ $('#licht1').hide();
+ },
+ park: function () {
+ $('#licht2').hide();
+ }
+};
+
+function triggerAchievement(aid) {
+ console.log(aid);
+ if (aid in story.possibleAchievements && !(aid in story.achievements)) {
+ story.possibleAchievements[aid]();
+ story.achievements.push(aid);
+ }
}
// === INIT ===
-$(function()
-{
- var storybox = $('#storybox');
- if (storybox)
- {
- Story.eatMapPhp = config_get_food_types();
- Story.eatMap = {
- cow:
- "ALLES",
- cheese:
- "VEGE",
- wheat:
- "VEGA"
- };
- Story.ageMap = {
- eighteenplus:
- "Ja",
- below:
- "Nein"
- };
- Story.travelMapPhp = config_get_travel_types();
- Story.travelMap = {
- oeffi:
- "BUSBAHN",
- bike:
- "RAD",
- camel:
- "INDIVIDUELL"
- };
-
- story = new Story($('#storyhead'), $('#storycanvas'), storybox);
- story.test();
- story.begin();
- }
+$(function () {
+ var storybox = $('#storybox');
+ if (storybox) {
+ Story.eatMapPhp = config_get_food_types();
+ Story.eatMap = {
+ cow: "ALLES",
+ cheese: "VEGE",
+ wheat: "VEGA"
+ };
+ Story.ageMap = {
+ eighteenplus: "Ja",
+ below: "Nein"
+ };
+ Story.travelMapPhp = config_get_travel_types();
+ Story.travelMap = {
+ oeffi: "BUSBAHN",
+ bike: "RAD",
+ camel: "INDIVIDUELL"
+ };
+
+ story = new Story($('#storyhead'), $('#storycanvas'), storybox);
+ story.test();
+ story.begin();
+ }
});
Typ
');
+ this.travelStartTicket.append('------
');
+ 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: "Ö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 denAnreise Typ anklicken"); + this.travelStartDateWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 70, null, "Anreise Datum wählen"); } -Story.prototype.addTravelTypeButtons = function(page) -{ - var buttons = { - bike: - $('
' + title + '
');
+Story.prototype.addTicketTitle = function (ticket, title) {
+ ticket.append('' + title + '
');
}
-Story.prototype.addTicketButton = function(ticket, funcstring)
-{
- var newButton = $('Typ
');
- this.travelEndTicket.append('------
');
- this.travelEndDate.change(function()
- {
- var value = $(this).val();
- if (value == '')
- {
- self.form_variables.travelEndDate = null;
- self.travelEndDateWarning.show();
- }
- else
- {
- self.form_variables.travelEndDate = value;
- self.travelEndDateWarning.hide();
- }
- });
- this.travelEndTypeButtons = this.addTravelTypeButtons(this.travelEnd);
- var travelFormNames = {
- bike:
- "Fahrrad",
- oeffi:
- "Ö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 denAbreise Typ anklicken"); - this.travelEndDateWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 70, null, "Abreise Datum wählen"); +Story.prototype.initTravelEnd = function () { + if (this.travelEnd) return; + + var self = this; + + this.travelEnd = this.storyImageSvg('travelEnd.svg'); + this.travelEnd.animate({left: '900px'}, 0); + this.storybox.append(this.travelEnd); + + this.travelEndTicket = this.storyImageDiv('ticket.png'); + this.travelEndTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'}); + this.travelEnd.append(this.travelEndTicket); + + this.addTicketTitle(this.travelEndTicket, "Abreise"); + this.travelEndTicketButton = this.addTicketButton(this.travelEndTicket, "story.next()"); + this.travelEndTicketButton.mouseenter(function (event) { + $(this).stop(true, true).effect("highlight"); + }); + + var possible_dates = comm_get_possible_dates(); + possible_dates.shift(); // remove first + 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('
Typ
');
+ this.travelEndTicket.append('------
');
+ this.travelEndDate.change(function () {
+ var value = $(this).val();
+ if (value == '') {
+ self.form_variables.travelEndDate = null;
+ self.travelEndDateWarning.show();
+ }
+ else {
+ self.form_variables.travelEndDate = value;
+ self.travelEndDateWarning.hide();
+ }
+ });
+ this.travelEndTypeButtons = this.addTravelTypeButtons(this.travelEnd);
+ var travelFormNames = {
+ bike: "Fahrrad",
+ oeffi: "Ö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 denAbreise Typ anklicken"); + this.travelEndDateWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 70, null, "Abreise Datum wählen"); } -Story.prototype.initEat = function() -{ - if (this.eat) return; - - var self = this; - - this.eat = this.storyImageSvg('eat.svg'); - 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 = $('
Altersbereich anklicken"); +Story.prototype.initAge = function () { + if (this.age) return; + + var self = this; + + this.age = this.storyImageSvg('age.svg'); + this.age.animate({left: '900px'}, 0); + this.storybox.append(this.age); + + this.ageButtonContinue = $('
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.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.storyImageSvg('begin.svg'); - this.storybox.append(this.basicData); - this.bd_bell = this.storyImageDiv('bell.png'); - this.bd_bell.css({position: 'absolute', top: '20px', left: '20px', width: '419px', height: '438px'}); - this.basicData.append(this.bd_bell); - this.bd_bell.fadeOut(0); - - // == form == - this.bd_bellForm = $(''); - 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ültige eMail Addresse eingeben"); - - // == notice == - this.bd_bell.append($('
Bitte klingeln, wenn fertig.
'))
-
- this.bd_btn_continue = $('');
- 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 = $('');
- 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.initBasicData = function () {
+ if (this.basicData) return;
+
+ var self = this;
+
+ // == init view ==
+ this.basicData = this.storyImageSvg('begin.svg');
+ this.storybox.append(this.basicData);
+ this.bd_bell = this.storyImageDiv('bell.png');
+ this.bd_bell.css({position: 'absolute', top: '20px', left: '20px', width: '419px', height: '438px'});
+ this.basicData.append(this.bd_bell);
+ this.bd_bell.fadeOut(0);
+
+ // == form ==
+ this.bd_bellForm = $('');
+ 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ültige eMail Addresse eingeben");
+
+ // == notice ==
+ this.bd_bell.append($('Bitte klingeln, wenn fertig.
'))
+
+ this.bd_btn_continue = $('');
+ 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 = $('');
+ 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.begin = function () {
+ this.next();
}
-Story.prototype.storyImage = function(filename)
-{
- return $('');
+Story.prototype.storyImage = function (filename) {
+ return $('');
}
-Story.prototype.storyImageDiv = function(filename)
-{
- return $('');
+Story.prototype.storyImageDiv = function (filename) {
+ return $('');
}
-Story.prototype.storyImageSvg = function(filename)
-{
- var bg = $('');
- d3.xml(FAPI.resolvePath('graphics/'+filename), 'image/svg+xml', function (xml) {
- bg[0].appendChild(xml.documentElement);
- });
- return bg;
+Story.prototype.storyImageSvg = function (filename) {
+ var bg = $('');
+ d3.xml(FAPI.resolvePath('graphics/' + filename), 'image/svg+xml', function (xml) {
+ bg[0].appendChild(xml.documentElement);
+ });
+ return bg;
};
-Story.prototype.addComboBox = function(parentNode, label, fieldName, options, x, y)
-{
- var form_label = $(''+label+'
');
- var form = $('');
- for(var i = 0; i < options.length; ++i)
- form.append('');
- 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);
+Story.prototype.addComboBox = function (parentNode, label, fieldName, options, x, y) {
+ var form_label = $('' + label + '
');
+ var form = $('');
+ for (var i = 0; i < options.length; ++i)
+ form.append('');
+ 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;
+ this.form_variables[fieldName] = null;
- return form;
+ return form;
}
-Story.prototype.addFormText = function(parentNode, label, fieldName, type, model, x, y)
-{
- var form_label = $(''+label+':
');
- var form = $('');
- 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.addFormText = function (parentNode, label, fieldName, type, model, x, y) {
+ var form_label = $('' + label + ':
');
+ var form = $('');
+ 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)
-{
- var warning = $('