Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@blurymind
blurymind committed Sep 13, 2024
1 parent 732ad81 commit 53b1fd9
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 42 deletions.
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html><html><head><meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel="manifest" href="./manifest.json"><link rel="apple-touch-icon" href="images/icon.png"><title>Yarn</title><link rel="icon" href="icon.ico"><link href="css/0.css" rel="stylesheet"><link as="style" href="css/0.css" rel="preload"><link as="script" href="js/main.cd24042ae25db449f8e4.js" rel="preload"><link as="script" href="js/runtime.cd24042ae25db449f8e4.js" rel="preload"><link as="script" href="js/vendor.cd24042ae25db449f8e4.js" rel="preload"><meta name="theme-color" content="#3367D6" /><link rel="manifest" href="manifest.json" crossorigin="use-credentials" /></head><body><script src="./public/libs/bondage.min.js"></script><script src="./public/libs/ink-full.js"></script><script src="./public/libs/uFuzzy.iife.min.js"></script><!-- Web components - see index.js importing web-components.js--><toast-component></toast-component><!-- Fancy Background --><div id="app-bg">&nbsp;</div><!-- Container --><div id="app"><!-- app-opened-documents --><div class="file-tabs" id="fileTabsTray"><span style="border-radius: 2px; padding: 0 5px;margin-right: 5px" class="bbcode-button" data-bind="click:app.data.trySaveCurrent, text:`${data.isDocumentDirty() ? '💾':'✅'}`"></span> <button class="bbcode-button" data-bind="click: function(){
<!doctype html><html><head><meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel="manifest" href="./manifest.json"><link rel="apple-touch-icon" href="images/icon.png"><title>Yarn</title><link rel="icon" href="icon.ico"><link href="css/0.css" rel="stylesheet"><link as="style" href="css/0.css" rel="preload"><link as="script" href="js/main.41e24297aeaae606e9a8.js" rel="preload"><link as="script" href="js/runtime.41e24297aeaae606e9a8.js" rel="preload"><link as="script" href="js/vendor.41e24297aeaae606e9a8.js" rel="preload"><meta name="theme-color" content="#3367D6" /><link rel="manifest" href="manifest.json" crossorigin="use-credentials" /></head><body><script src="./public/libs/bondage.min.js"></script><script src="./public/libs/ink-full.js"></script><script src="./public/libs/uFuzzy.iife.min.js"></script><!-- Web components - see index.js importing web-components.js--><toast-component></toast-component><!-- Fancy Background --><div id="app-bg">&nbsp;</div><!-- Container --><div id="app"><!-- app-opened-documents --><div class="file-tabs" id="fileTabsTray"><span style="border-radius: 2px; padding: 0 5px;margin-right: 5px" class="bbcode-button" data-bind="click:app.data.trySaveCurrent, text:`${data.isDocumentDirty() ? '💾':'✅'}`"></span> <button class="bbcode-button" data-bind="click: function(){
app.settings.fileTabsVisible(!app.settings.fileTabsVisible())
},css: {
active: !app.settings.fileTabsVisible(), rotated: !app.settings.fileTabsVisible()
Expand Down Expand Up @@ -80,4 +80,4 @@
}
},
true
);</script><script src="js/runtime.cd24042ae25db449f8e4.js"></script><script src="js/vendor.cd24042ae25db449f8e4.js"></script><script src="js/main.cd24042ae25db449f8e4.js"></script></body></html>
);</script><script src="js/runtime.41e24297aeaae606e9a8.js"></script><script src="js/vendor.41e24297aeaae606e9a8.js"></script><script src="js/main.41e24297aeaae606e9a8.js"></script></body></html>
1 change: 1 addition & 0 deletions js/main.41e24297aeaae606e9a8.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion js/main.cd24042ae25db449f8e4.js
View file

This file was deleted.

0 js/runtime.cd24042ae25db449f8e4.js → js/runtime.41e24297aeaae606e9a8.js
View file
File renamed without changes.
0 js/vendor.cd24042ae25db449f8e4.js → js/vendor.41e24297aeaae606e9a8.js
View file
File renamed without changes.
14 changes: 13 additions & 1 deletion public/plugins/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,9 @@ export var Plugins = function (app) {
});
});
}
const getVolatileResourcesList = () => dbStorage.getDbValue(`volatileResources`);
const getVloatileResource = (name = '') => dbStorage.getDbValue(`volatileResources-${name || this.selectedResourcesJson}`);


const isGistTokenInvalid = () => {
return app.data.storage.getIsTokenInvalid();
Expand Down Expand Up @@ -361,8 +364,14 @@ export var Plugins = function (app) {
const entire = func.toString();
const body = func.toString().slice(entire.indexOf("{") + 1, entire.lastIndexOf("}"));
return body;
}
const getVolatileResources = () => { ///todo

}
const getPreviewHtml = (data, otherFiles, yarnData = {}) => {

// todo get volatile resources

// includes: ['some-other-file.js'] - with moduleName (can be used to create an instance) or no moduleName (just dump script body)
const localModules = (data.modules || []).filter(item => !item.includes('/') && item in otherFiles && otherFiles[item].content).map(item => {
try {
Expand Down Expand Up @@ -398,6 +407,7 @@ export var Plugins = function (app) {
<body>
<script id="yarnDataJson">
const yarnData = ${yarnData};
const y = {yarnData: ${yarnData}};
</script>
${data.html || data.body || ''}
${getStoryParserModuleCode(data.parser)}
Expand Down Expand Up @@ -525,6 +535,8 @@ export var Plugins = function (app) {
isGistTokenInvalid,
urlParams,
updateUrlParams,
getVolatileResourcesList,
getVloatileResource,
getGistPluginsFileUrl,
getGistPluginsId,
pluginModeUrl,
Expand All @@ -534,7 +546,7 @@ export var Plugins = function (app) {
getExtensionScriptData,
getPreviewHtml,
getGistFileUrl,
getSelectedResourceUrl
getSelectedResourceUrl,
};

// built in plugin initiation
Expand Down
74 changes: 51 additions & 23 deletions public/plugins/resources-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,19 @@ export var ResourcesEditor = function({
getGistFileUrl,
getSelectedResourceUrl,
updateUrlParams,

getVolatileResourcesList,
getVloatileResource
}) {
const self = this;
this.name = 'ResourcesEditor';
this.selectedResourcesJson = 'resources.res.json';
this.resourcesFileUrl = '';// todo this should be written in the file itself instead. It doesnt persist between reloads atm
this.resourcesFileContent = '';
const dbStorage = app.data.db;
this.getVloatileResource = (name = '') => dbStorage.getDbValue(`volatileResources-${name || this.selectedResourcesJson}`);
this.setVolatileResource = (value, name = '') => dbStorage.save(`volatileResources-${name || this.selectedResourcesJson}`, value);
this.deleteVolatileResource = (name = '') => dbStorage.save(`volatileResources-${name || this.selectedResourcesJson}`, undefined);
this.getVolatileResourcesList = () => dbStorage.getDbValue(`volatileResources`);
this.setVolatileResourcesList = (key, add = true) => {
return this.getVolatileResourcesList().then(data => {
return getVolatileResourcesList().then(data => {
if(!data) data = new Set([]);
if(add) {
data.add(key)
Expand Down Expand Up @@ -74,12 +73,12 @@ export var ResourcesEditor = function({
}
// resource in local or at gist
this.initResourcesFile = (createVolatile = false) => {
console.log({INITWITH: this.selectedResourcesJson})
this.selectedResourcesJson = 'resources.res.json';//todo use url param, also needs to update list here - it doesnt
return new Promise((resolve, reject) => {
const getOrCreateVolatile = () => {
return this.getVloatileResource().then(volatile => {
if(volatile && volatile.content) {
console.log({volatile})
this.onUpdateResourcesList();
return getVloatileResource().then(volatile => {
if(volatile && volatile.content) {
resolve(volatile);
return
}
Expand All @@ -92,16 +91,17 @@ export var ResourcesEditor = function({
resolve(newFile);
return
}
this.onUpdateResourcesList();
return this.createOrEditGistFile(resolve, reject);
})
}
this.getVolatileResourcesList().then(volatileResourcesList => {
console.log({volatileResourcesList})
getVolatileResourcesList().then(volatileResourcesList => {
if(!volatileResourcesList) {
this.setVolatileResourcesList(this.selectedResourcesJson).then(()=> {
return getOrCreateVolatile()
})
}
// this.onUpdateResourcesList();
return getOrCreateVolatile();
})
});
Expand All @@ -125,7 +125,7 @@ export var ResourcesEditor = function({
});
this.resourcesFileUrl = file.raw_url;
document.querySelector('resources-component').setIsNew(false);
document.querySelector('resources-component').updateRawUrl(file.raw_url);
document.querySelector('resources-component').setFileContent(file);
} else {
ToastWc.show({
type: 'error',
Expand All @@ -140,19 +140,44 @@ export var ResourcesEditor = function({

this.onGetFromGist = () => {
// todo make this less hideous
this.getVolatileResourcesList().then(volatileResourcesList => {
app.data.storage.getGistFiles().then(({ filesInGist }) => {
getVolatileResourcesList().then(volatileResourcesList => {
this.isBusy('☁️ Requesting new resource files in gist');
app.data.storage.getGistFiles(error => {
ToastWc.show({
type: 'error',
content: error,
time: 3000,
});
this.isBusy('');
}).then(({ filesInGist }) => {
this.isBusy('☁️ Looking for new resource files in gist');

// try to detect json resource map files in the gist
const filesFromGist = [];
const promises = [];
Object.values(filesInGist).forEach(
item => {
if(item.filename.endsWith('.res.json') && !volatileResourcesList.has(item.filename)) {
if(item.filename === this.selectedResourcesJson){
console.log('Skip --', item.filename)
return;
}
if(item.filename.endsWith('.res.json') && (!volatileResourcesList.has(item.filename) || !volatileResourcesList[item.filename])) {
filesFromGist.push(item);
this.isBusy(`☁️ Found ${item.filename}.. Trying to load it..`);
promises.push(app.data.storage.getContentOrRaw(item.content, item.raw_url, console.error));
}
}
);
console.log({filesInGist, promises, filesFromGist})
if(promises.length === 0) {
ToastWc.show({
type: 'info',
content: 'No new resources found.',
time: 3000,
});
this.isBusy('')
return;
}
Promise.all(promises).then((files) => {
files.forEach((content, index) => {
const file = {...filesFromGist[index], content}
Expand All @@ -162,13 +187,14 @@ export var ResourcesEditor = function({
this.setVolatileResource(file, newFileName).then(() => {
if(index === files.length -1) {
this.setVolatileResourcesList(newFileName).then(()=> {
this.onUpdateResourcesList(newFileName);
this.onUpdateResourcesList();
this.onSetEditingFile(newFileName);
ToastWc.show({
type: 'success',
content: `Added ${files.length} files..\n${filesFromGist.map(item=>item.filename).join('\n')}`,
time: 3000,
});
this.isBusy('')
})
}
})
Expand All @@ -178,18 +204,19 @@ export var ResourcesEditor = function({
})
}
this.onUpdateResourcesList = () => {
this.getVolatileResourcesList().then(resourcesList => {
getVolatileResourcesList().then(resourcesList => {
console.log({resourcesList})
document.getElementById("edited-resources").innerHTML = Array.from(resourcesList).map(key => `<option value="${key}">${key}</option>`).join('')
})
}
this.onSetEditingFile = (newFileName = '') => {
const fileName = newFileName || document.getElementById('edited-resources').value;
this.selectedResourcesJson = fileName;
this.getVloatileResource(fileName).then(file => {
getVloatileResource(fileName).then(file => {
console.log('Set', {fileName, file})
document.querySelector('resources-component').updateResourcesList(file.content);
document.getElementById("edited-resources").value = this.selectedResourcesJson;
document.querySelector('resources-component').updateRawUrl(file.raw_url);
document.querySelector('resources-component').setFileContent(file);
});
}
this.onAddNewFile = () => {
Expand All @@ -198,15 +225,15 @@ export var ResourcesEditor = function({
if (newFileName) {
newFileName = newFileName.replace(/\s+/g, '').replace(/\//g, '').trim();
newFileName = newFileName.endsWith('.res.json') ? newFileName : `${newFileName}.res.json`;
this.getVolatileResourcesList().then(volatileResources => {
getVolatileResourcesList().then(volatileResources => {
if (volatileResources.has(newFileName)) {
alert(`${newFileName} already exists.\nPlease choose another name..`)
return;
}
const newFileData = { content: this.getNewresourceFileContent(), filename: newFileName }
this.setVolatileResource(newFileData, newFileName).then(() => {
this.setVolatileResourcesList(newFileName).then(()=> {
this.onUpdateResourcesList(newFileName);
this.onUpdateResourcesList();
this.onSetEditingFile(newFileName);
})
})
Expand All @@ -221,7 +248,7 @@ export var ResourcesEditor = function({
}
const willDelete = confirm(`Are you sure you want to delete this resources file:\n${fileName}?`)
if (willDelete) {
this.getVolatileResourcesList().then(oldList =>{
getVolatileResourcesList().then(oldList =>{
const resourcesList = Array.from(oldList);
let nextFileIndex = resourcesList.indexOf(fileName) - 1;
if(nextFileIndex < 0) nextFileIndex = 0;
Expand Down Expand Up @@ -260,7 +287,7 @@ export var ResourcesEditor = function({
<div class="button-group-rounded" id="add-remove-resource-file" style="flex-wrap:nowrap">
<button id="add-resource-file" onclick="${domPath}.onAddNewFile()" title="Add">+</button>
<button id="remove-resource-file" onclick="${domPath}.onRemoveSelectedFile()" title="remove">─</button>
<button id="remove-resource-file" onclick="${domPath}.onGetFromGist()" title="search for new in gist"> ⟳ </button>
<button id="remove-resource-file" onclick="${domPath}.onGetFromGist()" title="find new *.res.json files in gist"> ⟳ </button>
</div>
</span>
</div>
Expand Down Expand Up @@ -313,10 +340,11 @@ export var ResourcesEditor = function({
})
}
if(action === 'push'){
this.getVloatileResource().then(result=> this.onCommitResourceFiles(result.content))
getVloatileResource().then(result=> this.onCommitResourceFiles(result.content))
}
});
this.initResourcesComponent = (file) => {
console.log('INIT RES', {file})
updateUrlParams('selectedResource', 'none');
document.querySelector('resources-component').init({
file,
Expand Down
2 changes: 1 addition & 1 deletion public/version.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"version": "0.4.374"
"version": "0.4.375"
}
25 changes: 12 additions & 13 deletions public/web-components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -520,18 +520,23 @@ class ResourcesComponent extends HTMLElement {
this.isPointerDown = false;
this.onPointerUp = () => {
this.isPointerDown = false;
this.updateSelected();
}
this.onPointerEnter = (evt) => {
if(evt.target.className !== 'select-option' || !this.isPointerDown) return;
this.onSelectResource(evt);
toggleItemSelected(evt.target);
}
const toggleItemSelected = item => {
item.hasAttribute('data-selected') ? item.removeAttribute('data-selected') : item.setAttribute('data-selected', true);
}
this.onSelectOneResource = evt => {
this.isPointerDown = true;
shadowRoot.getElementById('resources-editor-select').focus();
if(evt.target.className !== 'select-option') return;
console.log(this.isControlDown)
console.log('is control down --> ',this.isControlDown)
if(!this.isControlDown) shadowRoot.getElementById('resources-editor-select').childNodes.forEach(item => item.removeAttribute('data-selected'));
evt.target.setAttribute('data-selected', true)
// evt.target.setAttribute('data-selected', true)
toggleItemSelected(evt.target);
this.updateSelected();
}
this.selectAndScrollIntoView = el => {
Expand All @@ -548,7 +553,6 @@ class ResourcesComponent extends HTMLElement {
shadowRoot.getElementById('resources-editor-select').focus();
}, 300)
}
this.isControlDown = false;
this.onKeyDown = evt => {
evt.preventDefault();
evt.stopPropagation()
Expand Down Expand Up @@ -585,10 +589,6 @@ class ResourcesComponent extends HTMLElement {
this.onSelectAll();
}
}
this.onSelectResource = evt => {
evt.target.toggleAttribute('data-selected');
this.updateSelected();
};
this.onSelectAll = () => {
const hasSelected = !!shadowRoot.getElementById('resources-editor-select').querySelector('[data-selected]');
shadowRoot.getElementById('resources-editor-select').childNodes.forEach(item => hasSelected ? item.removeAttribute('data-selected') : item.setAttribute('data-selected', true))
Expand All @@ -601,7 +601,7 @@ class ResourcesComponent extends HTMLElement {
console.log({fakeSelect, allSelected, specificFileId})
this.isBusy('Removing files...');
const fileData = JSON.parse(this.resourcesFileContent);
if(specificFileId && !(specificFileId instanceof PointerEvent)) {
if(specificFileId && typeof specificFileId === 'string') {
console.log({allSelected, specificFileId})
this.selectAfterUpdate = Object.values(allSelected).filter(item => item.id !== specificFileId);
delete fileData[specificFileId];
Expand Down Expand Up @@ -726,10 +726,9 @@ class ResourcesComponent extends HTMLElement {
shadowRoot
.getElementById('resources-editor-select')
.addEventListener('pointerup',this.onPointerUp);
shadowRoot
.getElementById('resources-editor-select').addEventListener('keydown', this.onKeyDown);
shadowRoot
.getElementById('resources-editor-select').addEventListener('keyup', this.onKeyUp);
this.isControlDown = false;
shadowRoot.addEventListener('keydown', this.onKeyDown);
shadowRoot.addEventListener('keyup', this.onKeyUp);
shadowRoot
.getElementById('onRemoveButton')
.removeEventListener('click', this.onRemoveResource);
Expand Down
2 changes: 1 addition & 1 deletion sw.js
View file

Large diffs are not rendered by default.

0 comments on commit 53b1fd9

Please sign in to comment.