-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
Added Vault Dropdown ⬇️
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
[submodule "Assets/WebGLTemplates/FloatingDropdown"] | ||
path = Assets/WebGLTemplates/FloatingDropdown | ||
url = https://github.com/fielddaylab/FloatingDropdown.git |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
| ||
using System; | ||
using System.Runtime.InteropServices; | ||
|
||
using UnityEngine; | ||
using UnityEngine.SceneManagement; | ||
|
||
using Zavala; | ||
|
||
/// <summary> | ||
/// Note: This class is designed to be used with the `vault-floating-dropdown` jslib pluggin. | ||
/// This script will remove the dropdown elment from the DOM after the target scene has been unloaded. | ||
/// </summary> | ||
public class VaultDropdownToggle : MonoBehaviour { | ||
public string sceneToDisplay = "TitleScreen"; | ||
|
||
[DllImport("__Internal")] | ||
private static extern void DisableVaultButton(); | ||
|
||
private void OnEnable() { | ||
SceneManager.sceneUnloaded += OnSceneUnloaded; | ||
} | ||
|
||
private void OnSceneUnloaded(Scene current) { | ||
if(current.name != sceneToDisplay) return; | ||
Debug.Log("[VaultDropdownToggle] remove vault button"); | ||
DisableVaultButton(); | ||
} | ||
|
||
private void OnDisable() { | ||
SceneManager.sceneUnloaded -= OnSceneUnloaded; | ||
} | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
mergeInto(LibraryManager.library, { | ||
DisableVaultButton: function () { | ||
var vaultDropdown = document.querySelector('floating-dropdown'); | ||
console.log("Debug [JSPlugin > DisableVaultButton]"); | ||
if (vaultDropdown) { | ||
vaultDropdown.remove(); | ||
} else { | ||
console.warn("[Vault Plugin] Failed attempt to remove element <floating-dropdown>") | ||
} | ||
}, | ||
}); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
public/* |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
# FloatingDropdown | ||
Simple reusable web component for web games linking to the [Vault](https://vault.fielddaylab.wisc.edu/) | ||
|
||
This repository houses a reusable HTML component for the Vault floating dropdown on free browser-based games. There are two pieces used for this component: | ||
1. The HTML template used to display the component on the dom | ||
2. the Unity javascript plugin to be used to remove the button after exiting the title screen. | ||
|
||
## 1. Adding the Component | ||
This example illustrates how this component can be added to a project | ||
|
||
### Step 1: Add a custom component to the header of the index file | ||
|
||
```javascript | ||
<script src="FloatingDropdown/index.js"></script> | ||
``` | ||
|
||
### Step 2: Add the custom element to the body of the file | ||
|
||
This element uses ***slots*** to make the component more flexible. If you are unfamiliar with slots, you can read more [here](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots#adding_flexibility_with_slots) | ||
|
||
Example of Template: | ||
```javascript | ||
<body> | ||
<floating-dropdown> | ||
<style> /* Add custom fonts here */ </style> | ||
<img slot="header" src="/path/to/header/image" alt="Vault Games Library" width="250px"> | ||
<span slot="desc" class="content"> | ||
Put the body text here | ||
</span> | ||
<span slot="button-label"> | ||
Put button label here | ||
</span> | ||
</floating-dropdown> | ||
<div id="BrainPOPsnapArea"> | ||
... | ||
|
||
``` |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
// This is where the custom component is defined | ||
fetch('FloatingDropdown/template.html') | ||
.then(stream => stream.text()) | ||
.then(text => define(text)) | ||
|
||
/** | ||
* Sets up the custom component as defined in the FloatingDropdown template | ||
* | ||
* @param {string} html the outerHTML attribute of the floating dropdown element defined in `index.html` | ||
*/ | ||
function define(html) { | ||
class FloatingDropdown extends HTMLElement { | ||
constructor() { | ||
self = super(); | ||
} | ||
|
||
connectedCallback() { | ||
const parser = new DOMParser(); | ||
const doc = parser.parseFromString(html, "text/html"); | ||
|
||
const template = doc.getElementById("floating-dropdown"); | ||
//Custom element | ||
const dropdown = template.content.cloneNode(true); | ||
|
||
const shadowRoot = this.attachShadow({mode: "open"}) | ||
shadowRoot.appendChild(dropdown); | ||
|
||
// Apply external styles to the shadow dom | ||
const styles = document.createElement("link"); | ||
styles.setAttribute("rel", "stylesheet"); | ||
styles.setAttribute("href", "FloatingDropdown/styles.css"); | ||
|
||
shadowRoot.appendChild(styles); | ||
} | ||
} | ||
customElements.define("floating-dropdown", FloatingDropdown); | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
#header { | ||
content: ""; | ||
position: absolute; | ||
transform: translate(-50%, 0%); | ||
|
||
pointer-events: none; | ||
|
||
top: 16px; | ||
left: 50%; | ||
z-index: 100; | ||
} | ||
|
||
#dropdown { | ||
content: ""; | ||
background-color: #001e2a; | ||
|
||
display: grid; | ||
box-sizing: border-box; | ||
|
||
border-bottom-left-radius: 7px; | ||
border-bottom-right-radius: 7px; | ||
|
||
margin: 0px auto; | ||
padding-top: 256px; | ||
padding-left: 16px; | ||
padding-right: 16px; | ||
width: 275px; | ||
height: 300px; | ||
|
||
position: absolute; | ||
transform: translate(-50%, -75%); | ||
/* transform: translate(-50%, 0%); */ | ||
top: 0px; | ||
left: 50%; | ||
z-index: 10; | ||
|
||
align-content: end; | ||
justify-items: center; | ||
|
||
&:hover, | ||
&:focus { | ||
transition: 0.3s; | ||
transform: translate(-50%, 0%); | ||
} | ||
|
||
& > * { | ||
opacity: 0; | ||
} | ||
|
||
&:hover > * { | ||
opacity: 100; | ||
transition: 0.5s ease-in; | ||
} | ||
} | ||
|
||
#vault-button { | ||
border: none; | ||
padding: 5px; | ||
margin: 0px auto 15px auto; | ||
justify-content: center; | ||
align-items: center; | ||
|
||
border-bottom-right-radius: 32px; | ||
border-bottom-left-radius: 32px; | ||
border-top-right-radius: 32px; | ||
background-color: #00ecd0; | ||
|
||
width: 200px; | ||
height: 40px; | ||
|
||
font-size: 18px; | ||
font-weight: bolder; | ||
text-decoration: none; | ||
line-height: 2px; | ||
letter-spacing: 3px; | ||
|
||
& > span { | ||
color: #001e2a; | ||
font-size: 18px; | ||
font-weight: bolder; | ||
|
||
line-height: 2px; | ||
letter-spacing: 3px; | ||
} | ||
|
||
cursor: pointer; | ||
|
||
&:hover { | ||
scale: 1.1; | ||
} | ||
} | ||
|
||
a { | ||
text-decoration: none; | ||
} | ||
|
||
.content { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
p.content { | ||
color: white; | ||
text-decoration: none; | ||
|
||
font-family: "brandon-grotesque", sans-serif; | ||
font-size: 24px; | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<template id="floating-dropdown"> | ||
<div id="header"> | ||
<slot name="header"><h2>Header</h2></slot> | ||
</div> | ||
<div id="dropdown"> | ||
<p class="content"><slot name="desc">Description Here</slot></p> | ||
<a href="https://vaultlearninggames.org/" target="_blank" class="content"> | ||
<button id="vault-button"> | ||
<slot name="button-label">Press Me</slot> | ||
</button> | ||
</a> | ||
</div> | ||
</template> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.