How to use card - 10 common examples

reset(spec = {}) {
        this.$element = undefined;
        this._config = Object.assign({}, DEFAULT_CONFIG, spec.config);
        this.data = spec.data || {};

        const imageHeight = (this.data.summary && !this._config['card.displayLargeImage']) ?
            undefined : this.initialWidth - 10; // card margins from css TODO: move css to config object

        this.headerImage.reset({ imageUrls: this.data.imageUrl, imageHeight: imageHeight, config: this._config });
        this.readerContent.reset({ data: this.data, config: this._config });
        this.forward(this.readerContent);

        this.isExpanded = false;
        this.isFlipped = this._config['card.displayBackCardByDefault'];
        return this;
    }

reset(spec = {}) {
        this.$element = undefined;
        this._config = Object.assign({}, DEFAULT_CONFIG, spec.config);
        this.data = spec.data || {};

        const imageHeight = (this.data.summary && !this._config['card.displayLargeImage']) ?
            undefined : this.initialWidth - 10; // card margins from css TODO: move css to config object

        this.headerImage.reset({ imageUrls: this.data.imageUrl, imageHeight: imageHeight, config: this._config });
        this.readerContent.reset({ data: this.data, config: this._config });
        this.forward(this.readerContent);

        this.isExpanded = false;
        this.isFlipped = this._config['card.displayBackCardByDefault'];
        return this;
    }

// Retrieving position and sending to opponent
      var pos = {
        left: ui.position.left,
        top: ui.position.top,
        zIndex: $card.css('z-index'),
        id: $card.attr('number')
      };

      _this.dispatchRealtimeEvent('card.dragged', pos);
    };

    // Receptors
    //-----------

    // Reacting to a dragged card by op
    this.triggers.events['card.dragged'] = function(d, e) {
      var $card = $('#' + e.data.side + '_' + e.data.id);

      // Animating
      $card.css({
        left: e.data.left,
        top: _this.height - e.data.top - $card.height(),
        zIndex: e.data.zIndex
      });
    };
  }

this.bindOnCards = function(name, fn) {
      this.$game.on(name, this.cards, fn);
    }

    // Generic Receptors
    //-------------------

    // Linked model updated
    this.triggers.events[this.updatedEvent] = function(d, e) {
      var cards = d.get(_this.side + '-' + _this.name);
      utilities.optcall(_this, _this.onUpdate, cards);
    };

    // Card dropped in area
    this.triggers.events['card.dropped'] = function(d, e) {
      if (!_this.drop ||
          (_this.name !== e.data.from && _this.name !== e.data.to)) {
        return;
    }

      var $card = _this.selectCard(e.data.id || e.data.card.id);

      // Applying new classes to dropped elements
      $card.removeClass('in-' + e.data.from);
      $card.addClass('in-' + e.data.to);

      // Executing drop callbacks
      if (e.data.type === 'same')
        utilities.optcall(_this, _this.drop.onSameArea, $card);
      else
        if (_this.name === e.data.from)

this.$element.on('click', '.meta-data-table a', event => {
            event.stopImmediatePropagation();
            this.emit(EVENTS.CARD_CLICK_LINK, event);
            return !this._config['card.disableLinkNavigation'];
        });

setupController: function(controller, model) {
    this._super(controller, model);
    controller.set('currentRepository', card.data.repositoryName);
  },

currentUserChanged: function(user) {
      var route = this;
      var applicationController = route.controllerFor('application');
      var repositoryName = card.data.repositoryName;
      var githubLogin = user && user.github_login;

      if (!user) {
        applicationController.set('myIssues', []);
        return;
      }

      Issue.
        findEverything(repositoryName, githubLogin).
          then(updateTheApplicationController).
          then(null, Conductor.error);

      function updateTheApplicationController(hash) {
        applicationController.set('myIssues', hash.userIssues || []);
        applicationController.set('model', hash.allIssues);

model: function(){
    var route = this;
    var user = card.data.user;
    var githubLogin = user && user.github_login;
    var applicationController = this.controllerFor('application');
    var repositoryName = card.data.repositoryName;

    applicationController.set('repositoryName', repositoryName);

    function handleRejection(reason) {
      if (Issue.isErrorDueToIssuesBeingDisabled(reason)) {
        route.transitionTo('disabled');
      } else {
        throw reason;
      }
    }

    function process(hash) {
      applicationController.set('myIssues', hash.userIssues || []);

findAllByRepositoryName: function(repositoryName) {
    var service;

    if (card.data.user) {
      service = card.consumers.authenticatedGithubApi;
    } else {
      service = card.consumers.unauthenticatedGithubApi;
    }

    return service.request("ajax", {
      url: '/repos/' + repositoryName + '/issues',
      dataType: 'json'
    });
  },

model: function(){
    return retrieveStargazers(card.data.user);
  }
});