mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-05-05 21:16:26 -05:00
Copy/paste (clipboard) feature for teambuilder
This commit is contained in:
Quinella
parent
6f305080f0
commit
54cb37a37b
|
|
@ -43,7 +43,12 @@
|
|||
'keydown .chartinput': 'chartKeydown',
|
||||
'keyup .chartinput': 'chartKeyup',
|
||||
'focus .chartinput': 'chartFocus',
|
||||
'change .chartinput': 'chartChange'
|
||||
'change .chartinput': 'chartChange',
|
||||
|
||||
// clipboard
|
||||
'click .teambuilder-clipboard-data .result': 'clipboardResultSelect',
|
||||
'click .teambuilder-clipboard-data': 'clipboardExpand',
|
||||
'blur .teambuilder-clipboard-data': 'clipboardShrink'
|
||||
},
|
||||
dispatchClick: function(e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -121,8 +126,9 @@
|
|||
this.$el.html(buf);
|
||||
return;
|
||||
}
|
||||
buf = '<div class="pad"><p>y\'know zarel this is a pretty good teambuilder</p>'
|
||||
buf += '<p>aww thanks I\'m glad you like it :)</p>'
|
||||
buf = '<div class="pad"><p>y\'know zarel this is a pretty good teambuilder</p>';
|
||||
buf += '<p>aww thanks I\'m glad you like it :)</p>';
|
||||
buf += this.clipboardHTML();
|
||||
buf += '<ul>';
|
||||
if (!window.localStorage && !window.nodewebkit) buf += '<li>== CAN\'T SAVE ==<br /><small>Your browser doesn\'t support <code>localStorage</code> and can\'t save teams! Update to a newer browser.</small></li>';
|
||||
if (Storage.cantSave) buf += '<li>== CAN\'T SAVE ==<br /><small>You hit your browser\'s limit for team storage! Please backup them and delete some of them. Your teams won\'t be saved until you\'re under the limit again.</small></li>';
|
||||
|
|
@ -268,6 +274,7 @@
|
|||
buf = '<div class="pad"><button name="back"><i class="icon-chevron-left"></i> Team List</button> <input class="textbox teamnameedit" type="text" class="teamnameedit" size="30" value="'+Tools.escapeHTML(this.curTeam.name)+'" /> <button name="import"><i class="icon-upload-alt"></i> Import/Export</button></div>';
|
||||
buf += '<div class="teamchartbox">';
|
||||
buf += '<ol class="teamchart">';
|
||||
buf += '<li>' + this.clipboardHTML() + '</li>';
|
||||
var i=0;
|
||||
if (this.curTeam.team.length && !this.curTeam.team[this.curTeam.team.length-1].species) {
|
||||
this.curTeam.team.splice(this.curTeam.team.length-1, 1);
|
||||
|
|
@ -298,7 +305,7 @@
|
|||
buf += '<li><button name="import" class="majorbutton"><i class="icon-upload-alt"></i> Import from text</button></li>';
|
||||
}
|
||||
if (i < 6) {
|
||||
buf += '<li><button name="addPokemon" class="majorbutton"><i class="icon-plus"></i> Add pokemon</button></li>';
|
||||
buf += '<li><button name="addPokemon" class="majorbutton"><i class="icon-plus"></i> Add Pokemon</button></li>';
|
||||
}
|
||||
buf += '</ol>';
|
||||
buf += '</div>';
|
||||
|
|
@ -316,7 +323,7 @@
|
|||
buf += '</li>';
|
||||
return buf;
|
||||
}
|
||||
buf += '<div class="setmenu"><button name="moveSet"><i class="icon-move"></i>Move</button> <button name="deleteSet"><i class="icon-trash"></i>Delete</button></div>';
|
||||
buf += '<div class="setmenu"><button name="copySet"><i class="icon-copy"></i>Copy</button> <button name="moveSet"><i class="icon-move"></i>Move</button> <button name="deleteSet"><i class="icon-trash"></i>Delete</button></div>';
|
||||
buf += '<div class="setchart-nickname">';
|
||||
buf += '<label>Nickname</label><input type="text" value="'+Tools.escapeHTML(set.name||set.species)+'" name="nickname" />';
|
||||
buf += '</div>';
|
||||
|
|
@ -409,6 +416,18 @@
|
|||
this.update();
|
||||
this.$('input[name=pokemon]').select();
|
||||
},
|
||||
pastePokemon: function(i, btn) {
|
||||
if (!this.curTeam) return;
|
||||
var team = this.curTeam.team;
|
||||
if (team.length >= 6) return;
|
||||
if (!this.clipboardCount()) return;
|
||||
|
||||
if (team.push($.extend(true, {}, this.clipboard[0])) >= 6) {
|
||||
$(btn).css('display', 'none');
|
||||
}
|
||||
this.update();
|
||||
this.save();
|
||||
},
|
||||
saveFlag: false,
|
||||
save: function() {
|
||||
this.saveFlag = true;
|
||||
|
|
@ -431,7 +450,131 @@
|
|||
this.save();
|
||||
},
|
||||
|
||||
// move/delete
|
||||
// clipboard
|
||||
clipboard: [],
|
||||
clipboardCount: function() {
|
||||
return this.clipboard.length;
|
||||
},
|
||||
clipboardVisible: function() {
|
||||
return !!this.clipboardCount();
|
||||
},
|
||||
clipboardHTML: function() {
|
||||
var buf = '';
|
||||
buf += '<div class="teambuilder-clipboard-container" style="display: ' + (this.clipboardVisible() ? 'block' : 'none') + ';">';
|
||||
buf += '<div class="teambuilder-clipboard-title">Clipboard:</div>';
|
||||
buf += '<div class="teambuilder-clipboard-data" tabindex="-1">' + this.clipboardInnerHTML() + '</div>';
|
||||
buf += '<div class="teambuilder-clipboard-buttons">';
|
||||
if (this.curTeam && this.curTeam.team.length < 6) {
|
||||
buf += '<button name="pastePokemon" class="teambuilder-clipboard-button-left"><i class="icon-paste"></i> Paste!</button>';
|
||||
}
|
||||
buf += '<button name="clipboardRemoveAll" class="teambuilder-clipboard-button-right"><i class="icon-trash"></i> Clear clipboard</button>';
|
||||
buf += '</div>';
|
||||
buf += '</div>';
|
||||
|
||||
return buf;
|
||||
},
|
||||
clipboardInnerHTMLCache: '',
|
||||
clipboardInnerHTML: function() {
|
||||
if (this.clipboardInnerHTMLCache) {
|
||||
return this.clipboardInnerHTMLCache;
|
||||
}
|
||||
|
||||
var buf = '';
|
||||
for (var i = 0; i < this.clipboardCount(); i++) {
|
||||
var res = this.clipboard[i];
|
||||
var pokemon = Tools.getTemplate(res.species);
|
||||
|
||||
buf += '<div class="result" data-id="' + i + '">';
|
||||
buf += '<div class="section"><span class="icon" style="' + Tools.getIcon(res.species) + '"></span>';
|
||||
buf += '<span class="species">' + (pokemon.species === pokemon.baseSpecies ? pokemon.species : (pokemon.baseSpecies + '-<small>' + pokemon.species.substr(pokemon.baseSpecies.length + 1) + '</small>')) + '</span></div>';
|
||||
buf += '<div class="section"><span class="ability-item">' + res.ability + '<br />' + res.item + '</span></div>';
|
||||
buf += '<div class="section no-border">';
|
||||
for (var j = 0; j < 4; j++) {
|
||||
if (!(j & 1)) {
|
||||
buf += '<span class="moves">';
|
||||
}
|
||||
buf += res.moves[j] + (!(j & 1) ? '<br />' : '');
|
||||
if (j & 1) {
|
||||
buf += '</span>';
|
||||
}
|
||||
}
|
||||
buf += '</div>';
|
||||
buf += '</div>';
|
||||
}
|
||||
|
||||
this.clipboardInnerHTMLCache = buf;
|
||||
return buf;
|
||||
},
|
||||
clipboardUpdate: function() {
|
||||
this.clipboardInnerHTMLCache = '';
|
||||
$('.teambuilder-clipboard-data').html(this.clipboardInnerHTML());
|
||||
},
|
||||
clipboardExpanded: false,
|
||||
clipboardExpand: function() {
|
||||
var $clipboard = $('.teambuilder-clipboard-data');
|
||||
$clipboard.animate({ height: this.clipboardCount() * 28 }, 500, function() {
|
||||
setTimeout(function() { $clipboard.focus(); }, 100);
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
this.clipboardExpanded = true;
|
||||
}.bind(this), 10);
|
||||
},
|
||||
clipboardShrink: function() {
|
||||
var $clipboard = $('.teambuilder-clipboard-data');
|
||||
$clipboard.animate({ height: 26 }, 500);
|
||||
|
||||
setTimeout(function() {
|
||||
this.clipboardExpanded = false;
|
||||
}.bind(this), 10);
|
||||
},
|
||||
clipboardResultSelect: function(e) {
|
||||
if (!this.clipboardExpanded) return;
|
||||
|
||||
e.stopPropagation();
|
||||
var target = +($(e.target).closest('.result').data('id'));
|
||||
if (target === -1) {
|
||||
this.clipboardShrink();
|
||||
this.clipboardRemoveAll();
|
||||
return;
|
||||
}
|
||||
|
||||
this.clipboard.unshift(this.clipboard.splice(target, 1)[0]);
|
||||
this.clipboardUpdate();
|
||||
this.clipboardShrink();
|
||||
},
|
||||
clipboardAdd: function(set) {
|
||||
if (this.clipboard.unshift(set) > 6) {
|
||||
// we don't want the clipboard so big that it lags the teambuilder
|
||||
this.clipboard.pop();
|
||||
}
|
||||
this.clipboardUpdate();
|
||||
|
||||
if (this.clipboardCount() === 1) {
|
||||
var $clipboard = $('.teambuilder-clipboard-container').css('opacity', 0);
|
||||
$clipboard.slideDown(250, function () {
|
||||
$clipboard.animate({ opacity: 1 }, 250);
|
||||
});
|
||||
}
|
||||
},
|
||||
clipboardRemoveAll: function() {
|
||||
this.clipboard = [];
|
||||
|
||||
var self = this;
|
||||
var $clipboard = $('.teambuilder-clipboard-container');
|
||||
$clipboard.animate({ opacity: 0 }, 250, function () {
|
||||
$clipboard.slideUp(250, function() {
|
||||
self.clipboardUpdate();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// copy/move/delete
|
||||
copySet: function(i, button) {
|
||||
i = +($(button).closest('li').attr('value'));
|
||||
this.clipboardAdd($.extend(true, {}, this.curTeam.team[i]));
|
||||
button.blur();
|
||||
},
|
||||
moveSet: function(i, button) {
|
||||
i = +($(button).closest('li').attr('value'));
|
||||
app.addPopup(MovePopup, {
|
||||
|
|
|
|||
|
|
@ -1771,7 +1771,7 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
|
|||
position: relative;
|
||||
}
|
||||
.teamchart li.format-select {
|
||||
padding-bottom: 10px;
|
||||
padding: 4px 0 10px;
|
||||
}
|
||||
.teamchart li.format-select label {
|
||||
display: block;
|
||||
|
|
@ -2069,6 +2069,101 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
|
|||
width: 129px;
|
||||
}
|
||||
|
||||
.teambuilder-clipboard-container {
|
||||
height: 52px;
|
||||
max-width: 640px;
|
||||
font-size: 8pt;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
|
||||
border: 1px solid #FFAA00;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.teambuilder-clipboard-title {
|
||||
width: 74px;
|
||||
padding-top: 8px;
|
||||
font-weight: bold;
|
||||
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 8px;
|
||||
}
|
||||
.teambuilder-clipboard-data {
|
||||
display: block;
|
||||
width: 520px;
|
||||
height: 26px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
border: 1px solid #999999;
|
||||
border-radius: 5px;
|
||||
background-image: linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
||||
background-image: -o-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
||||
background-image: -moz-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
||||
background-image: -webkit-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
||||
background-image: -ms-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
||||
outline: none;
|
||||
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
.teambuilder-clipboard-data:hover {
|
||||
border: 1px solid #BBBBBB;
|
||||
}
|
||||
.teambuilder-clipboard-data .result {
|
||||
height: 26px;
|
||||
}
|
||||
.teambuilder-clipboard-data span {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
float: left;
|
||||
}
|
||||
.teambuilder-clipboard-data .icon {
|
||||
width: 32px;
|
||||
}
|
||||
.teambuilder-clipboard-data .species {
|
||||
width: 118px;
|
||||
padding-top: 6px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.teambuilder-clipboard-data .ability-item {
|
||||
width: 98px;
|
||||
padding-left: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.teambuilder-clipboard-data .moves {
|
||||
width: 126px;
|
||||
padding-left: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.teambuilder-clipboard-data .section {
|
||||
height: 100%;
|
||||
padding: 1px;
|
||||
border-right: 1px solid #999999;
|
||||
float: left;
|
||||
}
|
||||
.teambuilder-clipboard-data .section.no-border {
|
||||
border: none;
|
||||
}
|
||||
.teambuilder-clipboard-buttons {
|
||||
display: block;
|
||||
width: 520px;
|
||||
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
right: 8px;
|
||||
}
|
||||
.teambuilder-clipboard-button-left {
|
||||
float: left;
|
||||
height: 22px;
|
||||
}
|
||||
.teambuilder-clipboard-button-right {
|
||||
float: right;
|
||||
height: 22px;
|
||||
}
|
||||
.teambuilder-results {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user