mirror of
https://github.com/marcrobledo/savegame-editors.git
synced 2025-04-28 09:05:10 +00:00
TOTK: improved new item search dropdown
This commit is contained in:
Marc Robledo
parent
13018a2ba1
commit
2068481399
@ -1,5 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
The legend of Zelda: Tears of the Kingdom savegame editor - Pouch class (last update 2023-08-17)
|
The legend of Zelda: Tears of the Kingdom savegame editor - Pouch class (last update 2023-09-02)
|
||||||
|
|
||||||
by Marc Robledo 2023
|
by Marc Robledo 2023
|
||||||
item names compiled by Echocolat, Exincracci, HylianLZ and Karlos007
|
item names compiled by Echocolat, Exincracci, HylianLZ and Karlos007
|
||||||
@ -222,7 +222,6 @@ Pouch.updateItemRow=function(item){
|
|||||||
|
|
||||||
item._htmlItemId=document.createElement('span');
|
item._htmlItemId=document.createElement('span');
|
||||||
item._htmlItemId.className='item-name clickable';
|
item._htmlItemId.className='item-name clickable';
|
||||||
item._htmlItemId.id='item-name-'+item.category+'-'+item.index;
|
|
||||||
item._htmlItemId.innerHTML=item.getItemTranslation();
|
item._htmlItemId.innerHTML=item.getItemTranslation();
|
||||||
if(item.getItemTranslation()===item.id)
|
if(item.getItemTranslation()===item.id)
|
||||||
item._htmlItemId.style.color='red';
|
item._htmlItemId.style.color='red';
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* stylesheet for Zelda TOTK Savegame editor (last update 2023-08-02) */
|
/* stylesheet for Zelda TOTK Savegame editor (last update 2023-08-17) */
|
||||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,800');
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,800');
|
||||||
|
|
||||||
:root{
|
:root{
|
||||||
@ -954,132 +954,110 @@ label.clickable:has(> input[type=radio]:checked){
|
|||||||
.tooltip.position-horizontal.align-center .arrow{top:50%;margin-top:-5px}
|
.tooltip.position-horizontal.align-center .arrow{top:50%;margin-top:-5px}
|
||||||
.tooltip.position-horizontal.align-bottom .arrow{bottom:3px}
|
.tooltip.position-horizontal.align-bottom .arrow{bottom:3px}
|
||||||
|
|
||||||
.disable-pointer{
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* filterable item search input */
|
||||||
|
.dropdown-item-container{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 90;
|
||||||
}
|
}
|
||||||
.editItem{
|
.dropdown-item-container .search-filter{
|
||||||
display: inline-block;
|
padding: 8px;
|
||||||
position: relative;
|
width: 264px;
|
||||||
z-index: 90;
|
max-height: 412px;
|
||||||
}
|
min-height: 62px;
|
||||||
.editItem,
|
position: absolute;
|
||||||
.editItem .search-input,
|
top: 46px;
|
||||||
.editItem .search-filter,
|
left: 0px;
|
||||||
.editItem .search-filter *{
|
background-color: #121e1a;
|
||||||
pointer-events: auto;
|
border-radius: 4px;
|
||||||
}
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
||||||
.editItem .search-filter{
|
overflow: auto;
|
||||||
padding: 8px 0 8px 8px;
|
box-sizing: border-box;
|
||||||
width: 225px;
|
|
||||||
max-height: 412px;
|
|
||||||
min-height: 62px;
|
|
||||||
position: absolute;
|
|
||||||
top: 46px;
|
|
||||||
left: 0px;
|
|
||||||
background-color: #121e1a;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
|
||||||
overflow: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.editItem .search-filter:empty::before{
|
.dropdown-item-container .search-filter:empty::before{
|
||||||
content: "no data";
|
content: "no data";
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
line-height: 46px;
|
line-height: 46px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editItem .search-filter::-webkit-scrollbar{
|
.dropdown-item-container .search-filter::-webkit-scrollbar{
|
||||||
width:8px;
|
width:8px;
|
||||||
height:8px;
|
height:8px;
|
||||||
}
|
}
|
||||||
.editItem .search-filter::-webkit-scrollbar-track{
|
.dropdown-item-container .search-filter::-webkit-scrollbar-track{
|
||||||
background: #121e1a;
|
background: #121e1a;
|
||||||
border-radius:0 4px 4px 0;
|
border-radius:0 4px 4px 0;
|
||||||
}
|
}
|
||||||
.editItem .search-filter::-webkit-scrollbar-thumb{
|
.dropdown-item-container .search-filter::-webkit-scrollbar-thumb{
|
||||||
background: #21362f;
|
background: #21362f;
|
||||||
border-radius:4px;
|
border-radius:4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editItem .search-filter .option{
|
.dropdown-item-container .search-filter .option{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0px 4px;
|
padding: 0px 4px;
|
||||||
transition: 300ms;
|
transition: 200ms;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
.editItem .search-filter .option:last-child{
|
.dropdown-item-container .search-filter .option:last-child{
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
/* .editItem .search-filter .option:hover{
|
.dropdown-item-container .search-filter .option.active, .dropdown-item-container .search-filter .option:hover{
|
||||||
background-color: rgba(255, 255, 255, .15);
|
cursor:pointer;
|
||||||
} */
|
background-color: rgba(255, 255, 255, .15);
|
||||||
.editItem .search-filter .option.active{
|
|
||||||
background-color: rgba(255, 255, 255, .15);
|
|
||||||
}
|
}
|
||||||
.editItem .search-filter .option .item-icon{
|
.dropdown-item-container .search-filter .option .item-icon{
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
.editItem .search-filter .option .item-name{
|
.dropdown-item-container .search-filter .option .item-name{
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
overflow : hidden;
|
overflow : hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
.editItem .search-filter .option .item-name:hover{
|
.dropdown-item-container .search-filter .option .item-name:hover{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.editItem .search-input{
|
.dropdown-item-container .search-input{
|
||||||
width: 225px;
|
width: 264px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background-color: #111111;
|
background-color: #111111;
|
||||||
border: solid 1px #444444;
|
border: solid 1px #444444;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
outline: none;
|
outline: none;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
text-indent: 8px;
|
text-indent: 8px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: 300ms;
|
transition: 300ms;
|
||||||
}
|
}
|
||||||
.editItem .search-input::placeholder{
|
.dropdown-item-container .search-input::placeholder{
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
.editItem .search-input:hover{
|
.dropdown-item-container .search-input:hover{
|
||||||
border: solid 1px #666666;
|
border: solid 1px #666666;
|
||||||
}
|
|
||||||
.edit-item-mask{
|
|
||||||
position: fixed;
|
|
||||||
z-index: 80;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transition: 300ms;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.edit-item-mask.show-mask{
|
|
||||||
pointer-events: auto;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
@ -1,16 +1,15 @@
|
|||||||
/*
|
/*
|
||||||
The legend of Zelda: Tears of the Kingdom savegame editor (last update 2023-08-10)
|
The legend of Zelda: Tears of the Kingdom savegame editor (last update 2023-09-02)
|
||||||
|
|
||||||
by Marc Robledo 2023
|
by Marc Robledo 2023
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var currentEditingItem;
|
var currentEditingItem;
|
||||||
var inputFilter = "";
|
|
||||||
|
|
||||||
SavegameEditor={
|
SavegameEditor={
|
||||||
Name:'The legend of Zelda: Tears of the Kingdom',
|
Name:'The legend of Zelda: Tears of the Kingdom',
|
||||||
Filename:['progress.sav','caption.sav'],
|
Filename:['progress.sav','caption.sav'],
|
||||||
Version:20230810,
|
Version:20230902,
|
||||||
|
|
||||||
/* Settings */
|
/* Settings */
|
||||||
Settings:{
|
Settings:{
|
||||||
@ -479,7 +478,6 @@ SavegameEditor={
|
|||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
fixItemAvailabilityFlag:function(item){
|
fixItemAvailabilityFlag:function(item){
|
||||||
if(item.category==='key'){
|
if(item.category==='key'){
|
||||||
var fixed=false;
|
var fixed=false;
|
||||||
@ -500,101 +498,146 @@ SavegameEditor={
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
getAvailableItems:function(catId){
|
|
||||||
|
|
||||||
|
getAvailableItems:function(catId, query){
|
||||||
|
var allItems;
|
||||||
if(catId==='weapons' || catId==='bows' || catId==='shields')
|
if(catId==='weapons' || catId==='bows' || catId==='shields')
|
||||||
return Equipment.AVAILABILITY[catId];
|
allItems=Equipment.AVAILABILITY[catId];
|
||||||
else if(catId==='armors')
|
else if(catId==='armors')
|
||||||
return Armor.AVAILABILITY;
|
allItems=Armor.AVAILABILITY;
|
||||||
else if(catId==='arrows' || catId==='materials' || catId==='food' || catId==='devices' || catId==='key')
|
else if(catId==='arrows' || catId==='materials' || catId==='food' || catId==='devices' || catId==='key')
|
||||||
return Item.AVAILABILITY[catId];
|
allItems=Item.AVAILABILITY[catId];
|
||||||
else if(catId==='horses')
|
else if(catId==='horses')
|
||||||
return Horse.AVAILABILITY;
|
allItems=Horse.AVAILABILITY;
|
||||||
return null;
|
else
|
||||||
},
|
return null;
|
||||||
|
|
||||||
editItem:function(item){
|
if(query){
|
||||||
|
query = query.slug();
|
||||||
|
|
||||||
document.querySelector("#header").classList.add("disable-pointer");
|
return allItems.filter(function(itemName){
|
||||||
document.querySelector(".edit-item-mask").classList.add("show-mask");
|
let nameSlug = SavegameEditor.nameMap.get(itemName);
|
||||||
this.searchFilter.style.paddingRight = "0px"
|
if(!nameSlug){
|
||||||
|
nameSlug = _(itemName).slug();
|
||||||
|
SavegameEditor.nameMap.set(itemName, nameSlug);
|
||||||
|
}
|
||||||
|
|
||||||
currentEditingItem=item;
|
return nameSlug.includes(query)
|
||||||
/* prepare edit item selector */
|
});
|
||||||
this.updateFilterList();
|
}else{
|
||||||
if(this.selectItem.lastCategory !== item.category){
|
return allItems;
|
||||||
this.selectItem.lastCategory=item.category;
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
editItem:function(item){
|
||||||
|
currentEditingItem=item;
|
||||||
|
|
||||||
|
/* prepare edit item selector */
|
||||||
item._htmlItemId.style.display='none';
|
item._htmlItemId.style.display='none';
|
||||||
item._htmlRow.children[0].appendChild(this.selectItem);
|
item._htmlRow.children[0].appendChild(this.itemChangeDropdown);
|
||||||
this.selectItem.querySelector(".search-input").setAttribute("placeholder",_(item.id));
|
|
||||||
this.selectItem.querySelector(".search-input").focus();
|
this.filterDropdownItems('');
|
||||||
this.selectItem.querySelector(".search-input").click();
|
if(SavegameEditor.customItemDropdown){
|
||||||
|
this.itemFilterInput.setAttribute('placeholder', _(item.id));
|
||||||
|
this.itemFilterInput.value='';
|
||||||
|
this.itemFilterInput.focus();
|
||||||
|
}else{
|
||||||
|
this.itemChangeDropdown.value=item.id;
|
||||||
|
this.itemChangeDropdown.click();
|
||||||
|
this.itemChangeDropdown.focus();
|
||||||
|
}
|
||||||
|
|
||||||
item.lastInputChanged='id';
|
item.lastInputChanged='id';
|
||||||
for(var prop in item._htmlInputs){
|
for(var prop in item._htmlInputs){
|
||||||
item._htmlInputs[prop].disabled=true;
|
item._htmlInputs[prop].disabled=true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
editItemEnd:function(newId){
|
||||||
|
if(currentEditingItem){
|
||||||
|
for(var prop in currentEditingItem._htmlInputs){
|
||||||
|
currentEditingItem._htmlInputs[prop].disabled=false;
|
||||||
|
}
|
||||||
|
|
||||||
getName: function(el){
|
if(newId && currentEditingItem.id!==newId){
|
||||||
if(!this.nameMap){
|
currentEditingItem.id=newId;
|
||||||
this.nameMap = new Map();
|
Pouch.updateItemIcon(currentEditingItem);
|
||||||
}
|
Pouch.updateItemRow(currentEditingItem);
|
||||||
let name = this.nameMap.get(el);
|
SavegameEditor.fixItemAvailabilityFlag(currentEditingItem);
|
||||||
if(name){
|
}
|
||||||
return name;
|
|
||||||
} else {
|
|
||||||
name = _(el);
|
|
||||||
this.nameMap.set(el, name);
|
|
||||||
return name;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateFilterList: function(){
|
currentEditingItem._htmlItemId.style.display='inline';
|
||||||
this.searchFilter.innerHTML = "";
|
}
|
||||||
var itemList=this.getAvailableItems(currentEditingItem.category);
|
|
||||||
var filterList = itemList.filter(el => this.getName(el).toLowerCase().includes(inputFilter));
|
|
||||||
filterList.forEach(el => {
|
|
||||||
var option = document.createElement("div");
|
|
||||||
option.classList.add("option");
|
|
||||||
option.setAttribute("itemId",el);
|
|
||||||
option.addEventListener("click", (event) => {
|
|
||||||
var itemId = event.target.getAttribute("itemid")
|
|
||||||
if(itemId){
|
|
||||||
currentEditingItem.id = itemId;
|
|
||||||
document.querySelector(".edit-item-mask").classList.remove("show-mask");
|
|
||||||
document.querySelectorAll(".disable-pointer").forEach(el => {
|
|
||||||
el.classList.remove("disable-pointer");
|
|
||||||
})
|
|
||||||
var endEvent = new Event("editItemEnd");
|
|
||||||
this.searchInput.dispatchEvent(endEvent);
|
|
||||||
this.searchInput.value = "";
|
|
||||||
inputFilter = "";
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
var pic = new Image();
|
this.itemFilterInput.parentElement.parentElement.removeChild(this.itemFilterInput.parentElement);
|
||||||
pic.className='item-icon';
|
|
||||||
pic.loading='lazy';
|
currentEditingItem=null;
|
||||||
pic.onerror=function(){
|
},
|
||||||
this.src=ICON_PATH+'unknown.png';
|
filterDropdownItems: function(query){
|
||||||
}
|
var itemList=this.getAvailableItems(currentEditingItem.category, query);
|
||||||
if(currentEditingItem instanceof Armor){
|
|
||||||
pic.src = Pouch.getItemIcon(new Armor(Object.assign({...currentEditingItem},{id:el})));
|
if(SavegameEditor.customItemDropdown){
|
||||||
} else {
|
this.itemFilterResults.innerHTML='';
|
||||||
pic.src = Pouch.getItemIcon(Object.assign({...currentEditingItem},{id:el}));
|
var activeEl;
|
||||||
}
|
|
||||||
option.appendChild(pic);
|
itemList.forEach(el => {
|
||||||
|
var option = document.createElement('div');
|
||||||
|
option.className = 'option';
|
||||||
|
option.setAttribute('itemId',el);
|
||||||
|
option.addEventListener('mousedown', function(event){
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
SavegameEditor.editItemEnd(this.getAttribute('itemId'));
|
||||||
|
});
|
||||||
|
if(el===currentEditingItem.id)
|
||||||
|
activeEl=option;
|
||||||
|
|
||||||
|
var itemIcon = new Image();
|
||||||
|
itemIcon.className='item-icon';
|
||||||
|
itemIcon.loading='lazy';
|
||||||
|
itemIcon.onerror=function(){
|
||||||
|
this.src=ICON_PATH+'unknown.png';
|
||||||
|
}
|
||||||
|
if(currentEditingItem instanceof Armor){
|
||||||
|
itemIcon.src = Pouch.getItemIcon(new Armor(Object.assign({...currentEditingItem},{id:el})));
|
||||||
|
} else {
|
||||||
|
itemIcon.src = Pouch.getItemIcon(Object.assign({...currentEditingItem},{id:el}));
|
||||||
|
}
|
||||||
|
option.appendChild(itemIcon);
|
||||||
|
|
||||||
|
var name = document.createElement('span');
|
||||||
|
name.className='item-name';
|
||||||
|
name.innerText = _(el);
|
||||||
|
option.appendChild(name);
|
||||||
|
|
||||||
|
this.itemFilterResults.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
if(!activeEl && this.itemFilterResults.children.length){
|
||||||
|
activeEl=this.itemFilterResults.children[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
if(activeEl){
|
||||||
|
activeEl.className+=' active';
|
||||||
|
var optionOffsetTop = activeEl.offsetTop;
|
||||||
|
|
||||||
|
this.itemFilterResults.scrollTo(0, optionOffsetTop - 8);
|
||||||
|
}
|
||||||
|
}else{ //prefer classic dropdown in devices with touch events for UX purposes
|
||||||
|
if(this.itemChangeDropdown.lastCategory !== currentEditingItem.category){
|
||||||
|
this.itemChangeDropdown.lastCategory=currentEditingItem.category;
|
||||||
|
this.itemChangeDropdown.innerHTML='';
|
||||||
|
|
||||||
|
for(var i=0; i<itemList.length; i++){
|
||||||
|
var opt=document.createElement('option');
|
||||||
|
opt.value=itemList[i];
|
||||||
|
opt.innerHTML=_(itemList[i]);
|
||||||
|
this.itemChangeDropdown.appendChild(opt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
var name = document.createElement("span");
|
|
||||||
name.classList.add("item-name");
|
|
||||||
name.innerText = this.getName(el);
|
|
||||||
option.appendChild(name);
|
|
||||||
|
|
||||||
this.searchFilter.appendChild(option);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
restoreDurability:function(equipment){
|
restoreDurability:function(equipment){
|
||||||
if(equipment.restoreDurability()){
|
if(equipment.restoreDurability()){
|
||||||
@ -1022,6 +1065,22 @@ SavegameEditor={
|
|||||||
|
|
||||||
|
|
||||||
preload:function(){
|
preload:function(){
|
||||||
|
/* implement String.slug for item searching purposes */
|
||||||
|
String.prototype.slug=function(){
|
||||||
|
return this.toLowerCase().trim()
|
||||||
|
.replace(/[\xc0\xc1\xc2\xc4\xe0\xe1\xe2\xe4]/g, 'a')
|
||||||
|
.replace(/[\xc8\xc9\xca\xcb\xe8\xe9\xea\xeb]/g, 'e')
|
||||||
|
.replace(/[\xcc\xcd\xce\xcf\xec\xed\xee\xef]/g, 'i')
|
||||||
|
.replace(/[\xd2\xd3\xd4\xd6\xf2\xf3\xf4\xf6]/g, 'o')
|
||||||
|
.replace(/[\xd9\xda\xdb\xdc\xf9\xfa\xfb\xfc]/g, 'u')
|
||||||
|
|
||||||
|
.replace(/[\xd1\xf1]/g, 'n')
|
||||||
|
.replace(/[\xc7\xe7]/g, 'c')
|
||||||
|
|
||||||
|
.replace(/[\(\)\*]/g, '')
|
||||||
|
.replace(/[ _\-]+/g, ' ')
|
||||||
|
}
|
||||||
|
|
||||||
/* completiosnim mode */
|
/* completiosnim mode */
|
||||||
$('#input-radio-completionism-map, #input-radio-completionism-unlock').on('change', function(evt){
|
$('#input-radio-completionism-map, #input-radio-completionism-unlock').on('change', function(evt){
|
||||||
if(this.value==='unlock'){
|
if(this.value==='unlock'){
|
||||||
@ -1122,144 +1181,138 @@ SavegameEditor={
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* filter item dropdown */
|
||||||
|
SavegameEditor.nameMap=new Map();
|
||||||
|
SavegameEditor.customItemDropdown='onmousedown' in window; //browser has mouse events
|
||||||
|
|
||||||
|
if(SavegameEditor.customItemDropdown){
|
||||||
|
this.itemChangeDropdown = document.createElement('div');
|
||||||
|
this.itemChangeDropdown.className='dropdown-item-container';
|
||||||
|
|
||||||
var editMask = document.createElement("div");
|
this.itemFilterInput = document.createElement('input');
|
||||||
editMask.classList.add("edit-item-mask");
|
this.itemFilterInput.className='search-input';
|
||||||
document.body.appendChild(editMask);
|
this.itemChangeDropdown.appendChild(this.itemFilterInput);
|
||||||
|
|
||||||
editMask.addEventListener("click", (event) => {
|
this.itemFilterResults = document.createElement('div');
|
||||||
var endEvent = new Event("editItemEnd");
|
this.itemFilterResults.className='search-filter';
|
||||||
this.searchInput.dispatchEvent(endEvent);
|
this.itemChangeDropdown.appendChild(this.itemFilterResults);
|
||||||
this.searchInput.value = "";
|
|
||||||
inputFilter = "";
|
|
||||||
document.querySelectorAll(".disable-pointer").forEach(el => {
|
|
||||||
el.classList.remove("disable-pointer");
|
|
||||||
})
|
|
||||||
editMask.classList.remove("show-mask");
|
|
||||||
})
|
|
||||||
|
|
||||||
|
this.itemChangeDropdown.addEventListener('keydown', (event)=>{
|
||||||
|
var activeEl = this.itemFilterResults.querySelector('.active');
|
||||||
|
|
||||||
|
if(activeEl){
|
||||||
|
var changedEl;
|
||||||
|
|
||||||
this.selectItem = document.createElement('div');
|
switch(event.keyCode){
|
||||||
this.selectItem.classList.add("editItem")
|
case 13:
|
||||||
|
// enter
|
||||||
|
if(activeEl){
|
||||||
|
activeEl.dispatchEvent(new Event('mousedown'));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 38:
|
||||||
|
// up
|
||||||
|
event.preventDefault();
|
||||||
|
if(activeEl.previousElementSibling){
|
||||||
|
changedEl=activeEl.previousElementSibling;
|
||||||
|
} else {
|
||||||
|
changedEl=this.itemFilterResults.querySelector('.option:last-child');
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 40:
|
||||||
|
// down
|
||||||
|
event.preventDefault();
|
||||||
|
if(activeEl.nextElementSibling){
|
||||||
|
changedEl=activeEl.nextElementSibling;
|
||||||
|
} else {
|
||||||
|
changedEl=this.itemFilterResults.querySelector('.option:first-child');
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 33:
|
||||||
|
// prevpage
|
||||||
|
event.preventDefault();
|
||||||
|
var allOptions=this.itemFilterResults.querySelectorAll('.option');
|
||||||
|
var indexOf=[].indexOf.call(allOptions, activeEl);
|
||||||
|
indexOf-=8;
|
||||||
|
if(indexOf<0)
|
||||||
|
indexOf=0;
|
||||||
|
changedEl=allOptions[indexOf];
|
||||||
|
break;
|
||||||
|
case 34:
|
||||||
|
// nextpage
|
||||||
|
event.preventDefault();
|
||||||
|
var allOptions=this.itemFilterResults.querySelectorAll('.option');
|
||||||
|
var indexOf=[].indexOf.call(allOptions, activeEl);
|
||||||
|
indexOf+=8;
|
||||||
|
if(indexOf>=allOptions.length)
|
||||||
|
indexOf=allOptions.length-1;
|
||||||
|
changedEl=allOptions[indexOf];
|
||||||
|
break;
|
||||||
|
case 36:
|
||||||
|
// start
|
||||||
|
event.preventDefault();
|
||||||
|
changedEl=this.itemFilterResults.querySelector('.option:first-child');
|
||||||
|
break;
|
||||||
|
case 35:
|
||||||
|
// end
|
||||||
|
event.preventDefault();
|
||||||
|
changedEl=this.itemFilterResults.querySelector('.option:last-child');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
this.searchInput = document.createElement("input");
|
if(changedEl && changedEl !== activeEl){
|
||||||
this.searchInput.classList.add("search-input");
|
activeEl.classList.remove('active');
|
||||||
this.selectItem.appendChild(this.searchInput);
|
changedEl.classList.add('active');
|
||||||
|
|
||||||
this.searchFilter = document.createElement("div");
|
// scrollOffset
|
||||||
this.searchFilter.classList.add("search-filter");
|
var optionOffsetTop = changedEl.offsetTop;
|
||||||
this.selectItem.appendChild(this.searchFilter);
|
var optionHeight = changedEl.offsetHeight;
|
||||||
var keyList = new Set([13,27,38,40])
|
var optionOffsetBottom = optionOffsetTop + optionHeight;
|
||||||
this.selectItem.addEventListener("mousemove", (event)=>{
|
var filterScrollTop = this.itemFilterResults.scrollTop;
|
||||||
if(event.target.className.includes("option") && !event.target.className.includes("active")){
|
var filterHeight = this.itemFilterResults.offsetHeight
|
||||||
var activeEl = this.selectItem.querySelector(".active")
|
var filterScrollBottom = filterScrollTop + filterHeight;
|
||||||
if(activeEl){
|
if(optionOffsetBottom > filterScrollBottom){
|
||||||
activeEl.classList.remove("active");
|
this.itemFilterResults.scrollTo({
|
||||||
}
|
top: optionOffsetBottom - filterHeight + 8,
|
||||||
event.target.classList.add("active");
|
behavior: event.repeat ? 'instant' : 'smooth'
|
||||||
}
|
})
|
||||||
})
|
} else if(optionOffsetTop < filterScrollTop){
|
||||||
this.selectItem.addEventListener("keydown", (event)=>{
|
this.itemFilterResults.scrollTo({
|
||||||
var activeEl = this.searchFilter.querySelector(".active");
|
top: optionOffsetTop - 8,
|
||||||
if(keyList.has(event.keyCode)){
|
behavior: event.repeat ? 'instant' : 'smooth'
|
||||||
switch(event.keyCode){
|
})
|
||||||
case 13:
|
}
|
||||||
// enter
|
}
|
||||||
if(activeEl){
|
}
|
||||||
activeEl.click();
|
});
|
||||||
} else {
|
|
||||||
document.querySelector(".edit-item-mask").click();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 27:
|
|
||||||
// esc
|
|
||||||
document.querySelector(".edit-item-mask").click();
|
|
||||||
break;
|
|
||||||
case 38:
|
|
||||||
// up
|
|
||||||
event.preventDefault();
|
|
||||||
if(activeEl){
|
|
||||||
if(activeEl.previousElementSibling){
|
|
||||||
activeEl.classList.remove("active");
|
|
||||||
activeEl.previousElementSibling.classList.add("active");
|
|
||||||
} else {
|
|
||||||
activeEl.classList.remove("active");
|
|
||||||
this.searchFilter.querySelector(".option:last-child").classList.add("active");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var firstEl = this.searchFilter.querySelector(".option:first-child")
|
|
||||||
if(firstEl){
|
|
||||||
firstEl.classList.add("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 40:
|
|
||||||
// down
|
|
||||||
event.preventDefault();
|
|
||||||
if(activeEl){
|
|
||||||
if(activeEl.nextElementSibling){
|
|
||||||
activeEl.classList.remove("active");
|
|
||||||
activeEl.nextElementSibling.classList.add("active");
|
|
||||||
} else {
|
|
||||||
activeEl.classList.remove("active");
|
|
||||||
this.searchFilter.querySelector(".option:first-child").classList.add("active");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var firstEl = this.searchFilter.querySelector(".option:first-child")
|
|
||||||
if(firstEl){
|
|
||||||
firstEl.classList.add("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
activeEl = this.searchFilter.querySelector(".active");
|
|
||||||
// scrollOffset
|
|
||||||
if(activeEl){
|
|
||||||
var optionOffsetTop = activeEl.offsetTop;
|
|
||||||
var optionHeight = activeEl.offsetHeight;
|
|
||||||
var optionOffsetBottom = optionOffsetTop + optionHeight;
|
|
||||||
var filterScrollTop = this.searchFilter.scrollTop;
|
|
||||||
var filterHeight = this.searchFilter.offsetHeight
|
|
||||||
var filterScrollBottom = filterScrollTop + filterHeight;
|
|
||||||
if(optionOffsetBottom > filterScrollBottom){
|
|
||||||
this.searchFilter.scrollTo({
|
|
||||||
top: optionOffsetBottom - filterHeight + 8,
|
|
||||||
behavior: event.repeat ? "instant" : "smooth",
|
|
||||||
})
|
|
||||||
} else if(optionOffsetTop < filterScrollTop){
|
|
||||||
this.searchFilter.scrollTo({
|
|
||||||
top: optionOffsetTop - 8,
|
|
||||||
behavior: event.repeat ? "instant" : "smooth",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
this.searchInput.addEventListener("input",(event)=>{
|
this.itemFilterInput.addEventListener('blur', function(evt){
|
||||||
inputFilter = event.target.value;
|
SavegameEditor.editItemEnd(null);
|
||||||
this.updateFilterList();
|
});
|
||||||
if(this.searchFilter.clientHeight >= this.searchFilter.scrollHeight){
|
|
||||||
this.searchFilter.style.paddingRight = "8px"
|
|
||||||
} else {
|
|
||||||
this.searchFilter.style.paddingRight = "0px"
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
this.searchInput.addEventListener('editItemEnd', function(){
|
this.itemFilterInput.addEventListener('input', function(evt){
|
||||||
Pouch.updateItemIcon(currentEditingItem);
|
SavegameEditor.filterDropdownItems(this.value);
|
||||||
for(var prop in currentEditingItem._htmlInputs){
|
});
|
||||||
currentEditingItem._htmlInputs[prop].disabled=false;
|
}else{
|
||||||
}
|
this.itemChangeDropdown=document.createElement('select');
|
||||||
Pouch.updateItemRow(currentEditingItem);
|
this.itemChangeDropdown.addEventListener('change', function(){
|
||||||
SavegameEditor.fixItemAvailabilityFlag(currentEditingItem);
|
//console.log('change');
|
||||||
currentEditingItem._htmlItemId.style.display='inline';
|
currentEditingItem.id=this.value;
|
||||||
this.parentElement.parentElement.removeChild(this.parentElement);
|
Pouch.updateItemIcon(currentEditingItem);
|
||||||
|
}, false);
|
||||||
|
this.itemChangeDropdown.addEventListener('blur', function(){
|
||||||
|
//console.log('blur');
|
||||||
|
for(var prop in currentEditingItem._htmlInputs){
|
||||||
|
currentEditingItem._htmlInputs[prop].disabled=false;
|
||||||
|
}
|
||||||
|
Pouch.updateItemRow(currentEditingItem);
|
||||||
|
SavegameEditor.fixItemAvailabilityFlag(currentEditingItem);
|
||||||
|
currentEditingItem._htmlItemId.style.display='inline';
|
||||||
|
this.parentElement.removeChild(this);
|
||||||
|
|
||||||
currentEditingItem=null;
|
currentEditingItem=null;
|
||||||
}, false);
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
setNumericRange('rupees', 0, 999999);
|
setNumericRange('rupees', 0, 999999);
|
||||||
setNumericRange('pony-points', 0, 999999);
|
setNumericRange('pony-points', 0, 999999);
|
||||||
@ -1301,7 +1354,7 @@ SavegameEditor={
|
|||||||
if(err){
|
if(err){
|
||||||
console.error('fflate error: '+err);
|
console.error('fflate error: '+err);
|
||||||
}else{
|
}else{
|
||||||
var charData = data.reduce((value, char) => value + String.fromCharCode(char), "");
|
var charData = data.reduce((value, char) => value + String.fromCharCode(char), '');
|
||||||
var base64String = btoa(charData);
|
var base64String = btoa(charData);
|
||||||
console.log(base64String);
|
console.log(base64String);
|
||||||
window.open('https://blehditor.ssmvc.org/?view=true&cai='+encodeURIComponent(base64String), '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');
|
window.open('https://blehditor.ssmvc.org/?view=true&cai='+encodeURIComponent(base64String), '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');
|
||||||
@ -1458,7 +1511,7 @@ SavegameEditor={
|
|||||||
this.retranslateSelectOptions(Horse.SADDLES);
|
this.retranslateSelectOptions(Horse.SADDLES);
|
||||||
this.retranslateSelectOptions(Horse.REINS);
|
this.retranslateSelectOptions(Horse.REINS);
|
||||||
|
|
||||||
this.selectItem.lastCategory=null;
|
this.itemChangeDropdown.lastCategory=null;
|
||||||
|
|
||||||
|
|
||||||
/* prepare editor */
|
/* prepare editor */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user