Skip to content

Commit

Permalink
Merge pull request #8518 from google/placeholder-tags
Browse files Browse the repository at this point in the history 
tags.html: Add ability to add and remove placeholder tags
  • Loading branch information
@m4rc1e
m4rc1e authored Nov 21, 2024
2 parents 91bd600 + 803e524 commit 950f1b3
Showing 1 changed file with 138 additions and 93 deletions.
231 changes: 138 additions & 93 deletions .ci/tags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,88 @@
<script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>


<body>
<div id="app">
<link v-for="family in uniqueFamilies" :href="familyLink(family)" rel="stylesheet">

<h1>Google Fonts Tagger</h1>
<!-- Navbar -->
<div style="max-height: 3rem" class="navbar bg-base-100 fixed left-0 top-0 shadow">
<a class="btn btn-ghost btn-sm text-xl">GF Tagger</a>
<ul class="menu menu-horizontal px-1">
<li>
<details>
<summary>File</summary>
<ul class="shadow w-36">
<li><a @click="saveCSV">Export CSV</a></li>
<li><a @click="prCSV">Open PR</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary>Edit</summary>
<ul class="shadow w-56">
<li><a @click="AddPlaceHolderTags">Insert placeholder tags</a></li>
<li><a @click="RemovePlaceHolderTags">Remove placeholder tags</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary>{{ CurrentCategory }}</summary>
<ul class="shadow">
<div class="cont" style="max-height: 16rem; overflow: scroll">
<li v-for="category in sortedCategories()">
<a @click="CurrentCategory = category">{{ category }}</a>
</li>
</div>
</ul>
</details>
</li>
<li>
<form @submit.prevent="loadCSV">
<div class="join" style="padding-top: 12px;">
<input class="join-item input input-sm input-bordered w-full max-w-xs" v-model="commit" required placeholder="refs/heads/main">
<button class="join-item btn btn-sm">checkout</button>
</div>
</form>
</li>
</ul>
</div>

<div id="panel">
<div class="panel-tile">
<form @submit.prevent="loadCSV">
<label>Checkout Commit:</label>
<input v-model="commit" required placeholder="refs/heads/main">
<button>Checkout</button>
</form>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>

<label>Current tag:</label>
<select v-model="CurrentCategory" style="max-width: 300px;">
<option v-for="category in sortedCategories()" :key="category" :value="category">
{{ category }}
</option>
</select>
</div>
<!-- Add font panel -->
<div id="panel" class="fixed top-20 right-0 bg-base-100 p-5 shadow">
<div class="panel-tile">
<form @submit.prevent="AddTag">
<label>Add Tag:</label>
<input v-model="newTag" required placeholder="Tag Name">
<button>Add</button>
</form>
</div>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>

<div class="panel-tile">
<div class="label label-xs">
<span class="label-text label-xs">Add Tag</span>
</div>
<div class="join">
<input class="join-item input input-xs input-bordered w-full max-w-xs" v-model="newTag" required placeholder="/Expressive/Funky">
<button class="join-item btn btn-xs">Add</button>
</div>
</form>
<div class="divider"></div>
<form @submit.prevent="AddFamily">
<label>Add family:</label>
<input list="items" v-model="newFamily" required placeholder="Family Name">
<datalist id="items">
<option v-for="family in uniqueFamilies" :value="family">
</datalist>
<input v-model="newWeight" required placeholder="Score">
<button>Add</button>
<div class="label lavel-xs">
<span class="label-text label-xs">Add Family</span>
</div>
<div class="join">
<input class="join-item input input-xs input-bordered w-full max-w-xs" list="items" v-model="newFamily" required placeholder="Family Name">
<datalist id="items">
<option v-for="family in uniqueFamilies" :value="family">
</datalist>
<input class="join-item input input-xs input-bordered btn-square" v-model="newWeight" required placeholder="Score">
<button class="join-item btn btn-xs">Add</button>
</div>
</form>
</div>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
<div class="divider"></div>

<div class="panel-tile" style="max-height: 100px; overflow: scroll;">
<label>History</label>
<div v-if="isEdited">
Expand All @@ -56,39 +93,57 @@ <h1>Google Fonts Tagger</h1>
<p style="font-size: 10pt;">No changes</p>
</div>
</div>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
<div class="panel-tile">
<button @click="prCSV">Open Pull Request</button>
<button style="float: right;" @click="saveCSV">Save CSV</button>
</div>

</div>

<div v-if="sortedFamilies.length === 0">
<p>No families found for this tag. Please add some</p>
</div>
<div class="item" v-for="family in sortedFamilies" :key="family.Family">
<div style="float: left; width: 150px;">
<b>{{ family.Family }}</b>
</div>
<div style="float: left; width: 100px;">
<input style="width: 50px;" v-model.lazy="family.Weight" @change="edited(family)" placeholder="family.Weight">
<button @click="removeFamily(family)">X</button>
</div>
<div v-if="ready" :style="familyStyle(family)" contenteditable="true">
{{ familyPangram(family) }}
</div>
<div v-else>
Loading...
<div class="mt-20">
<div class="item" v-for="family in sortedFamilies" :key="family.Family">
<family-item :family="family" :ready="ready" @edited="edited" @remove="removeFamily"></family-item>
</div>
</div>

</div>
</body>

<script>

Vue.component('family-item', {
props: ['family', 'ready'],
template: `
<div class="item p-1">
<div class="join">
<b class="pr-2">{{ family.Family }}</b>
<input style="width: 3rem;" class="join-item input input-xs input-bordered btn-square" v-model.lazy="family.Weight" @change="edited" placeholder="family.Weight">
<button class="btn btn-xs join-item pr-2" @click="removeFamily">X</button>
</div>
<div v-if="ready" :style="familyStyle" contenteditable="true">
{{ familyPangram }}
</div>
<div v-else>
Loading...
</div>
<div class="divider"></div>
</div>
`,
methods: {
edited() {
this.$emit('edited', this.family);
},
removeFamily() {
this.$emit('remove', this.family);
}
},
computed: {
familyPangram() {
return this.$root.familyPangram(this.family);
},
familyStyle() {
return `font-family: "${this.family.Family}", "Adobe NotDef"; font-size: 32pt;`;
}
}
});

var app = new Vue({
el: '#app',
data() {
Expand Down Expand Up @@ -256,12 +311,31 @@ <h1>Google Fonts Tagger</h1>

this.history.push(`+ ${newFamily.Family},${newFamily["Group/Tag"]},${newFamily.Weight}`);
},
AddPlaceHolderTags() {
this.isEdited = true;
const existingTags = this.sortedFamilies
let seen = new Set();
existingTags.forEach((family) => seen.add(family.Family));
const familiesToAdd = this.uniqueFamilies
familiesToAdd.forEach((family) => {
if (!seen.has(family)) {
this.Families.push({ Family: family, "Group/Tag": this.CurrentCategory, Weight: "" });
}
});
this.history.push(`+ Placeholder tags added for ${this.CurrentCategory}`);
},
RemovePlaceHolderTags() {
this.isEdited = true;
this.Families = this.Families.filter((family) => family.Weight !== "");
this.history.push(`- Placeholder tags removed for all categories`);
},
removeFamily(Family) {
this.isEdited = true;
this.Families = this.Families.filter((t) => t !== Family);
this.history.push(`- ${Family.Family},${Family["Group/Tag"]},${Family.Weight}`);
},
familiesToCSV() {
this.RemovePlaceHolderTags();
this.Families = this.Families.filter((t) => t.Family !== "");
// The sorting function used is case sensitive.
// This means that "A" will come before "a".
Expand All @@ -279,6 +353,7 @@ <h1>Google Fonts Tagger</h1>
{
columns: ["Family", "Group/Tag", "Weight"],
skipEmptyLines: true,
header: false
}
) + "\n";
},
Expand Down Expand Up @@ -338,6 +413,15 @@ <h1>Google Fonts Tagger</h1>
}
} // methods
)
// close open navbar dropdowns when user clicks elsewhere
var details = [...document.querySelectorAll('details')];
document.addEventListener('click', function(e) {
if (!details.some(f => f.contains(e.target))) {
details.forEach(f => f.removeAttribute('open'));
} else {
details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : '');
}
})
</script>


Expand All @@ -346,43 +430,4 @@ <h1>Google Fonts Tagger</h1>
font-family: "Adobe NotDef";
src: url(https://cdn.jsdelivr.net/gh/adobe-fonts/adobe-notdef/AND-Regular.ttf);
}
#app {
font-family: "Roboto", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
margin-top: 60px;
}
#panel {
position: fixed;
top: 0;
right: 0;
padding: 10px;
background-color: white;
box-shadow: 3px 3px 3px lightgray;
}
.panel-tile {
margin-bottom: 10px;
}
.familyy {
padding-top: 10px;
padding-bottom: 10px;
}
.item {
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #000;
}
#edited-panel {
position: fixed;
left: 0px;
top: 0px;
width: 80px;
padding: 5px;
background-color: black;
color: white;
font-weight: bold;
}
</style>

0 comments on commit 950f1b3

Please sign in to comment.