Jdrewniak has uploaded a new change for review.
https://gerrit.wikimedia.org/r/310892
Change subject: Preliminary refactor of solitaire UI code. Breaking apart a few
functions and changing some variable names. No functional changes.
......................................................................
Preliminary refactor of solitaire UI code.
Breaking apart a few functions and changing some variable names.
No functional changes.
Change-Id: I8cb55b60301ed1fe5177e3e717dadae8a2375e27
---
M public/js/discernadeck.js
1 file changed, 117 insertions(+), 82 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/discovery/discernatron
refs/changes/92/310892/1
diff --git a/public/js/discernadeck.js b/public/js/discernadeck.js
index fa01437..d3f081e 100644
--- a/public/js/discernadeck.js
+++ b/public/js/discernadeck.js
@@ -2,16 +2,6 @@
var stacks = document.querySelectorAll( '.drop-area' );
-/**
- * State machine fun time
- * stack has many cards
- * card has stack || deck
- *
- * Card can move
- *
- * Stack can click
- */
-
var Stack = {
domEl: Element,
DROP_GAP: 25,
@@ -23,9 +13,7 @@
addCard: function( card ){
this.cards.push( card );
},
- removeCard: function( card ) {
- //( this.gap - this.DROP_GAP < 0 ) ? this.gap = 15 : this.gap
-= this.DROP_GAP ;
- this.cards.splice( this.cards.indexOf( card ), 1 );
+ reorganizeCardsInStack: function() {
var stack = this;
var stackXY = this.getStackPos();
@@ -36,11 +24,16 @@
TweenLite.to( card.domEl, 0.8,{x: stackXY.x, y:
stackXY.y - (stack.DROP_GAP * (reverseIndex -1 ) ), zIndex: stack.cards.length
- reverseIndex, ease:Elastic.easeOut} );
card.setCardXY( stackXY.x, stackXY.y + stack.gap - ((
reverseIndex - 1) * stack.DROP_GAP ));
}
+
+ },
+ removeCard: function( card ) {
+ this.cards.splice( this.cards.indexOf( card ), 1 );
+ this.reorganizeCardsInStack();
},
onTap: function ( stack ) {
return function( ev ) {
if ( stack.deck.currentCard ) {
- stack.deck.currentCard.moveCardToStack( false,
stack );
+ stack.deck.currentCard.moveCardToStack(
stack.deck, stack );
} else {
stack.deck.revealCard(stack.deck)();
}
@@ -59,6 +52,9 @@
var Card = {
cardData: {id: '', title:'', snippet:''},
+ id: '',
+ title: '',
+ snippet: '',
domEl: Element,
formEl: Element,
hammerCard: {},
@@ -70,7 +66,7 @@
this.x = x;
this.y = y;
},
- isCollision: function ( dropAreaEl ) {
+ hasCollidedWith: function ( dropAreaEl ) {
var a = this.domEl.getBoundingClientRect();
var b = dropAreaEl.getBoundingClientRect();
@@ -89,7 +85,7 @@
findDropCollision: function ( dropAreas ) {
var droppedArea = false;
for ( var i = 0; i < dropAreas.length; i++ ) {
- droppedArea = this.isCollision( dropAreas[i] );
+ droppedArea = this.hasCollidedWith( dropAreas[i] );
if (droppedArea) break;
}
return droppedArea;
@@ -118,12 +114,28 @@
}
},
moveCardToStack: function( oldStack, newStack ){
- this.deck.removeFromDeck( this );
+
+ if ( this.deck === oldStack || !oldStack) {
+ this.deck.removeFromDeck( this );
+ }
+
+
+ if ( this.deck === newStack ) {
+ this.deck.addCardToDeck( this );
+ }
+
+
+ if ( oldStack && this.deck !== oldStack ) {
+ this.stack.removeCard( this );
+ }
+
newStack.addCard(this);
+
this.stack = newStack;
- var droppedAreaXY = newStack.getStackPos();
- this.setCardXY( droppedAreaXY.x, droppedAreaXY.y );
- TweenLite.to( this.domEl, 0.2,{x: this.x, y: this.y,
zIndex:this.stack.getCards().length - 1, ease:Power4.easeOut} );
+
+ var newStackXY = newStack.getStackPos();
+ this.setCardXY( newStackXY.x, newStackXY.y );
+ TweenLite.to( this.domEl, 0.2,{x: newStackXY.x, y:
newStackXY.y, zIndex:newStack.getCards().length - 1, ease:Power4.easeOut} );
this.formEl.value =
newStack.domEl.attributes.getNamedItem('data-score').value;
},
onPanEnd: function( card ) {
@@ -136,7 +148,6 @@
if ( droppedArea ) {
card.moveCardToStack( card.stack,
droppedArea.stack );
} else {
-
// jump back to deck
if ( card.stack ) {
card.stack.removeCard();
@@ -147,8 +158,8 @@
deck.moveCardToBottom();
}
deck.currentCard = card;
- deck.cardsInDeck.unshift(card.cardData);
- card.formEl.value = "";
+ deck.addCardToDeck( card );
+ card.formEl.value = "";
}
card.setCardXY( 0, 0 );
TweenLite.to( card.domEl, 0.8,{ x:"0", y:"0",
ease:Elastic.easeOut } );
@@ -161,14 +172,15 @@
createCardDOM: function() {
var i, b,
el = document.createElement('div'),
- snippetPieces =
this.cardData.snippet.split('\uE000').map(function (s) { return
s.split('\uE001') }),
+ snippetPieces =
this.snippet.split('\uE000').map(function (s) { return s.split('\uE001') });
- a = document.createElement('a'),
- p = document.createElement('p');
+
+ var a = document.createElement('a');
+ var p = document.createElement('p');
a.setAttribute('target', '_blank');
- a.setAttribute('href', window.scoringData.baseWikiUrl + '/' +
this.cardData.title);
- a.appendChild(document.createTextNode(this.cardData.title));
+ a.setAttribute('href', window.scoringData.baseWikiUrl + '/' +
this.title);
+ a.appendChild(document.createTextNode(this.title));
/**
* The snippet has markers that indicate which part should be
bolded,
@@ -184,7 +196,7 @@
p.appendChild(document.createTextNode(snippetPieces[i][0]));
}
} else {
- b = document.createElement('b');
+ b = document.createElement('strong');
b.appendChild(document.createTextNode(snippetPieces[i][0]));
p.appendChild(b);
if (snippetPieces[i][1].length > 0) {
@@ -198,11 +210,13 @@
el.classList.add('card');
this.domEl = el;
- document.querySelector( '.stack' ).appendChild( this.domEl );
+ },
+ renderCardIn: function( domEl ) {
+ domEl.appendChild( this.domEl );
},
initialize: function(){
this.createCardDOM();
- this.formEl = document.getElementById( 'result_' +
this.cardData.id );
+ this.formEl = document.getElementById( 'result_' + this.id );
var hammerCard = this.hammerCard = new Hammer( this.domEl );
hammerCard.get( 'pan' ).set( { direction: Hammer.DIRECTION_ALL
} );
hammerCard.on( 'panstart', this.onPanStart( this ) );
@@ -215,32 +229,53 @@
var Deck = {
domEl: Element,
counterEl: Element,
+ flippedDomEl: Element,
cardsInDeck: [],
hammerDeck: Object,
currentCard: false,
- initializeDeck: function( onDone ) {
- // maybe do some ajax stuff?
+ initializeDeck: function() {
var deck = this;
- window.setTimeout( function(){
+ //deck.cardsInDeck = window.scoringData.results;
- deck.cardsInDeck = window.scoringData.results;
- deck.setCardCounter();
- deck.hammerDeck = new Hammer( deck.domEl );
- deck.hammerDeck.on( 'tap', deck.revealCard( deck ) );
- onDone && onDone();
- deck.revealCard(deck)();
- }, 500 )
+ window.scoringData.results.forEach(function( cardObj, i) {
+ deck.addCardToDeck( cardObj );
+ } );
+ deck.hammerDeck = new Hammer( deck.domEl );
+ deck.hammerDeck.on( 'tap', deck.revealCard( deck ) );
+ //reveal the first card
+
+ deck.revealCard(deck)();
+ deck.setCardCounter();
+ deck.assignExistingScores();
+ },
+ assignExistingScores: function() {
+ // assign already scored cards
+ var inputs = document.querySelectorAll( 'input.result-score' ),
+ stacksByScore = {};
+ if (inputs.length === 0) {
+ return;
+ }
+ for ( var i = 0; i < stacks.length; i++) {
+ var stackEl = stacks[i];
+
stacksByScore[stackEl.attributes.getNamedItem('data-score').value] =
stackEl.stack;
+ }
+ for ( var i = inputs.length -1; i >= 0; i-- ) {
+ switch(inputs[i].value) {
+ case '0':
+ case '1':
+ case '2':
+ case '3':
+ var position = deck.findPosition(deck,
parseInt( inputs[i].dataset.id ) ),
+ score = inputs[i].value;
+ var card = deck.cardsInDeck[position];
+ card.renderCardIn( deck.flippedDomEl );
+ card.moveCardToStack(this,
stacksByScore[score]);
+ break;
+ }
+ }
},
setCardCounter: function() {
this.counterEl.innerHTML = this.cardsInDeck.length;
- },
- createCard: function( deck, position ) {
- var card = Object.create(Card, {
- cardData: {writable: true, configurable: true, value:
deck.cardsInDeck[position]},
- deck: {writable: true, configurable: true, value: deck}
- });
- card.initialize();
- return card;
},
findPosition: function( deck, id ) {
for (var i = 0; i < deck.cardsInDeck.length; i++) {
@@ -258,29 +293,54 @@
}
if ( deck.cardsInDeck.length > 0 ) {
- var card = deck.createCard(deck, 0);
- deck.currentCard = card;
+ deck.cardsInDeck[0].renderCardIn(
deck.flippedDomEl );
+ deck.currentCard = deck.cardsInDeck[0];
}
- if ( deck.cardsInDeck.length <= 1 ) {
+ if ( deck.cardsInDeck.length < 1 ) {
deck.domEl.classList.add( 'empty' );
}
}
},
removeFromDeck: function( card ) {
- var cardIndex = this.cardsInDeck.indexOf( card.cardData );
+ var cardIndex = this.findPosition( this, card.id);
if ( cardIndex >= 0 ) {
- this.cardsInDeck.splice( this.cardsInDeck.indexOf(
card.cardData ), 1 );
+ this.cardsInDeck.splice( this.cardsInDeck.indexOf( card
), 1 );
this.currentCard = false;
this.setCardCounter();
this.revealCard( this )();
}
+
+ if ( this.cardsInDeck.length >= 0 ) {
+ this.currentCard = this.cardsInDeck[0];
+ }
+ },
+ addCardToDeck: function( cardData ) {
+
+ if ( cardData.isPrototypeOf( Card ) ) {
+ this.cardsInDeck.push( cardData );
+ this.currentCard = cardData;
+ } else {
+ var card = Object.create(Card, {
+ cardData: {writable: true, configurable: true,
value: cardData },
+ deck: {writable: true, configurable: true,
value: deck},
+ id : {writable: true, configurable: true,
value: cardData.id},
+ title: {writable: true, configurable: true,
value: cardData.title},
+ snippet: {writable: true, configurable: true,
value: cardData.snippet}
+ });
+ card.initialize();
+ this.cardsInDeck.push( card );
+ }
+
+ this.setCardCounter();
},
moveCardToBottom: function(){
var cards = this.cardsInDeck;
var currentCard = cards.shift();
this.cardsInDeck.push(currentCard);
- this.currentCard.domEl.parentNode.removeChild(
this.currentCard.domEl );
+ if ( this.currentCard.domEl.parentNode ) {
+ this.currentCard.domEl.parentNode.removeChild(
this.currentCard.domEl );
+ }
this.currentCard = false;
}
};
@@ -288,34 +348,8 @@
var deck = Object.create( Deck, {
domEl: {writable: true, configurable: true, value:
document.querySelector('.card-deck') },
counterEl: {writable: true, configurable: true, value:
document.querySelector('.deck-counter') },
+ flippedDomEl: {writable: true, configurable: true, value:
document.querySelector('.card-deck').nextElementSibling }
});
-
-deck.initializeDeck( function () {
- // assign already scored cards
- var inputs = document.querySelectorAll( 'input.result-score' ),
- stacksByScore = {};
- if (inputs.length === 0) {
- return;
- }
- for ( var i = 0; i < stacks.length; i++) {
- var stackEl = stacks[i];
-
stacksByScore[stackEl.attributes.getNamedItem('data-score').value] =
stackEl.stack;
- }
- for ( var i = 0; i < inputs.length; i++ ) {
- switch(inputs[i].value) {
- case '0':
- case '1':
- case '2':
- case '3':
- var position = deck.findPosition(deck,
inputs[i].attributes.getNamedItem('data-id').value),
- card = deck.createCard(deck, position),
- score = inputs[i].value;
- card.moveCardToStack(false, stacksByScore[score]);
- break;
- }
- }
-});
-
for ( var i = 0; i < stacks.length; i++ ) {
var stack = Object.create( Stack, {
@@ -327,3 +361,4 @@
stacks[i].stack.initialize();
}
+deck.initializeDeck();
--
To view, visit https://gerrit.wikimedia.org/r/310892
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I8cb55b60301ed1fe5177e3e717dadae8a2375e27
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/discovery/discernatron
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <jdrewn...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
