/public/javascripts/views/pocket.js
JavaScript | 151 lines | 110 code | 10 blank | 31 comment | 15 complexity | f712f29bb3dca10f6b0170d4d27bd19b MD5 | raw file
- /**
- * View for user pocket
- */
- define([
- 'jquery',
- 'underscore',
- 'backbone',
- 'service/helper',
- 'service/mediator'
- ], function ($, _, Backbone, Helper, Mediator) {
- return Backbone.View.extend({
- tagName: 'div',
- // Cache the template function for a single item.
- template : Helper.getTemplate('#pocket-tpl'),
- infoTpl : Helper.getTemplate('#info-tpl', true),
- collection : null,
- // The DOM events specific to an item.
- events: {
- 'click .cardsWrap .deckItem' : 'toggleSelected',
- "mouseover .cardsWrap .deckList li": "switchSpellBtnOn",
- 'click .cardsWrap a.spell' : 'callCard'
- },
- setCollection: function (collection) {
- this.collection = collection;
- return this;
- },
- // The TodoView listens for changes to its model, re-rendering.
- initialize: function () {
- Mediator.on('switch-element', this.switchElements, this);
- Mediator.on('change-elements', this.setAvalaibleCard, this);
- },
- /**
- * Action on call button click in the pocket and switch between cards call click
- * @param event
- * @returns {boolean}
- */
- //TODO: check spel click
- callCard: function (event) {
- var _self = this,
- $target = $(event.target),
- cardData = $target.data("options"),
- $parentLi = $target.parent('li'),
- $otherCards = _self.$(".cards li").not(".active"),
- //second click on this card decline selection and remove green fields from the deck
- clickSpell = function clickSpell(event) {
- if (event) {
- event.stopPropagation();
- }
- $parentLi.off("click", ".spell", clickSpell).removeClass("active");
- $parentLi.find(".spell").html("Call");
- //say to deck holder to hide avaible slots
- Mediator.trigger('click-cast', false);
- },
- //if member click on spell button of another card. Reset this card and set as acive another card
- setToAll = function setToAll(){
- $otherCards.off("click", ".spell", setToAll);
- clickSpell();
- };
- if (cardData && cardData.n && cardData.e && this.collection.get(cardData.n)) {
- //if card type spell just trigger event to cast it
- if (cardData.type && 'spell' == cardData.type) {
- Mediator.trigger('cast-spell', cardData);
- return true;
- }
- $parentLi.on("click", ".spell", clickSpell).addClass("active");
- $parentLi.find(".spell").html("Cancel");
- $otherCards.on("click", ".spell", setToAll);
- //say to deck holder to show avaible places for call
- Mediator.trigger('click-cast', true, cardData);
- }
- return true;
- },
- /**
- * Switches displyed cards in the pocket only for one element
- * @param {String} element
- */
- switchElements: function (element) {
- this.$(".cardsWrap").find(".h1d").hide();
- this.$(".cardsWrap").find("#" + element +"Slider").show();
- },
- /**
- * switch selected cards in the pocket and show info tpl
- * @param {Object} event
- */
- toggleSelected: function(event) {
- this.$('.deckItem').removeClass('selected');
- this.$(event.currentTarget).toggleClass('selected');
- this.showInfoPanel(event);
- },
- /**
- * Show info panel at the right side of the pocket
- * @param event
- */
- showInfoPanel : function(event) {
- var name = $(event.currentTarget).data('real');
- this.$("#infoHolder").html(this.infoTpl(this.collection.get(name).toJSON()));
- },
- switchSpellBtnOn: function (event) {
- this.$('.cardsWrap a.spell').hide();
- this.$(event.currentTarget).find("a.spell").show();
- },
- addCardsToPocket: function(cardsList, CardView) {
- var cardView;
- if (cardsList) {
- for (var card in cardsList) {
- if (cardsList.hasOwnProperty(card)) {
- cardView = new CardView({card: cardsList[card]});
- this.$("#" + cardsList[card].element + "Slider .deckList").append(cardView.render().view.el);
- }
- }
- }
- //show cards
- this.$(".cardsWrap").find(".h1d").hide();
- this.$(".cardsWrap").find("#waterSlider").show();
- //activate carousel
- this.$('.cards').jCarouselLite({
- btnNext: ".next",
- btnPrev: ".prev",
- mouseWheel: true,
- circular: false,
- visible: 3
- });
- },
- setAvalaibleCard: function(resources) {
- var _self = this;
- $.each(this.$(".cards li"), function(index, element){
- var $card = _self.$(element),
- costs = $card.data("costs"),
- elem = $card.data("elem"),
- disabler = $card.find(".disabledCard");
- if (costs && elem) {
- if (costs <= resources[elem]) {
- disabler.hide();
- } else {
- disabler.show();
- }
- }
- });
- }
- });
- });