|
- define([
- 'js/system/events',
- 'js/system/client',
- 'html!ui/templates/reputation/template',
- 'css!ui/templates/reputation/styles'
- ], function (
- events,
- client,
- template,
- styles
- ) {
- return {
- tpl: template,
-
- centered: true,
- modal: true,
- hasClose: true,
-
- list: null,
-
- postRender: function () {
- this.onEvent('onGetReputations', this.onGetReputations.bind(this));
- this.onEvent('onShowReputation', this.toggle.bind(this, true));
- },
-
- build: function () {
- let list = this.list;
-
- this.find('.info .heading-bottom').html('');
- this.find('.info .description').html('');
- this.find('.bar-outer').hide();
-
- if (!list.length)
- this.find('.heading-bottom').html("you haven't discovered any factions yet");
- else
- this.find('.heading-bottom').html('select a faction to see more info');
-
- let elList = this.find('.list').empty();
-
- list.forEach(l => {
- if (l.noGainRep)
- return;
-
- let html = '<div class="faction">' + l.name + '</div>';
-
- let el = $(html).appendTo(elList);
-
- el.on('click', this.onSelectFaction.bind(this, el, l));
- el.on('click', events.emit.bind(events, 'onClickButton'));
- });
- },
-
- onSelectFaction: function (el, faction) {
- this.find('.selected').removeClass('selected');
- el.addClass('selected');
-
- this.find('.info .heading-bottom').html(faction.name);
- this.find('.info .description').html(faction.description);
-
- let rep = faction.rep;
- let tier = faction.tier;
- let tiers = faction.tiers;
- let prevTier = tiers[tier];
- let nextTier = (tier === tiers.length - 1) ? tiers[tiers.length - 1] : tiers[tier + 1];
-
- let percentage = (rep - prevTier.rep) / (nextTier.rep - prevTier.rep) * 100;
-
- if (tier === tiers.length - 1)
- percentage = 100;
-
- this.find('.bar-outer').show();
-
- this.find('.front').css({
- width: percentage + '%',
- minWidth: percentage + '%'
- });
-
- let w = ~~(this.find('.front').width() / 5) * 5;
- this.find('.front').css({
- width: w
- });
-
- percentage = ~~(percentage * 10) / 10;
-
- this.find('.tier').html(tiers[tier].name.toLowerCase() + ' (' + percentage + '%)');
- },
-
- onGetReputations: function (list) {
- this.list = list;
-
- this.list.sort(function (a, b) {
- if (a.name[0] < b.name[0])
- return -1;
- return 1;
- });
-
- let selElement = this.find('.selected');
- if (this.el.is(':visible') && selElement.index() !== -1)
- this.onSelectFaction(selElement, list[selElement.index() + 1]);
- },
-
- onAfterShow: function () {
- this.build();
- }
- };
- });
|