ourrss-modal.html

<dom-module id="ourrss-modal">
	<template>
		<style>
			

			:host,
			*,
			*::before,
			*::after {
				box-sizing: border-box;
			}

			:host {
				font-family: 'Roboto', sans-serif;
				position: fixed;
				display: flex;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				overflow: hidden;
				/* scroll */
				padding: 1rem;
				z-index: 2147483647;
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				/* font-smoothing: antialiased; */
			}

			:host([hidden]) {
				display: none;
			}

			/* Click-to-escape target */

			.overlay {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				cursor: pointer;
				background: rgba(0, 0, 0, 0.2);
			}

			:host(:not([visible])) .overlay {
				/* opacity: 0; */
				transition: opacity 200ms ease;
				transition-delay: 100ms;
			}

			:host([visible]) .overlay {
				opacity: 1;
				transition: opacity 300ms ease;
			}

			.modal {
				direction: rtl;
				transition: transform 175ms cubic-bezier(0.4, 0.0, 1, 1),
				opacity 120ms ease;
				display: inline-block;
				position: relative;
				background: white;
				margin: auto;
				overflow: none;
				z-index: 1;
				box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
				0 1px 18px 0 rgba(0, 0, 0, 0.12),
				0 3px 5px -1px rgba(0, 0, 0, 0.4);


				width: 70%;
				height: 20%;
				background-color: #FFF;
				color: #212121;
				font-size: 150%;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

				transition: all 0.2s ease-in-out;
				cursor: pointer;
				/* @apply(--simple-modal); */
			}

			:host .modal::-webkit-scrollbar {
				width: .25em;
			}

			:host .modal::-webkit-scrollbar-track {
				background: #555;
				box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
			}

			:host .modal::-webkit-scrollbar-thumb {
				background-color: #0288d1;
				outline: 1px solid #555;
			}


			.modal.settings {
				overflow: overlay;
				width: 100%;
				height: 75%;
				padding-left: 2rem;
				padding-right: 2rem;
			}

			:host(:not([visible])) .modal {
				transform: translateZ(0) scale(0.9, 0.9);
				transition: transform 175ms cubic-bezier(0.4, 0.0, 1, 1),
				opacity 120ms ease;
			}

			:host([visible]) .modal {
				opacity: 1;
				transform: translateZ(0) scale(1);
				transition: transform 140ms cubic-bezier(0.0, 0.0, 0.2, 1),
				opacity 100ms ease;
				transition-delay: 150ms
			}

			.title {
				text-align: center;
				line-height: 1;
			}

			.modal__content {
				padding: 40px;
				/* var(--simple-modal-padding, ); */
				overflow: auto;

			}

			.modal__close:hover {
				opacity: 1;
			}

			:host .content {
				height: 100%;
				width: 100%;
				direction: ltr;
			}

			:host button {
				color: #B3E5FC;
				background: #0288D1;
				padding: 1rem;
				font-size: 1.5rem;
				width: 100%;
				height: 50%;
				cursor: pointer;
				border: none;
			}

			:host button:focus {
				border: none;
			}

			:host input {
				border: 0;
				font-size: 2rem;
				line-height: 35px;
				width: 100%;
				height: 50%;
				text-align: center;
				padding: 10px;
				background: transparent;
				color: rgb(0, 0, 0);
			}

			:host input:focus {
				background: #eee;
				border: none;
			}

			:host .container {
				width: 100%;
				height: 100%;
				bottom: 0px;
				margin-bottom: 0px;
				position: absolute;
				text-align: center;
			}

			a {
				color: #026da7;
				font-family: roboto;
				text-decoration: none;
			}
			:host .padTop1 {
				padding-top: 1rem
			}
		</style>



		<div id="overlay" class="overlay" on-tap="_close">
		</div>

		<div class="modal" id="modal">

			<h1 class="title">Border Collies</h1>

			<div class="content">
				Frisbees and treats!
			</div>
		</div>
	</template>



	<script>

		class OurrssModal extends HTMLElement {

			setProperties() {

				this.is = 'ourrss-modal'

				this.active = {
					type: Boolean,
					notify: true,
					value: false
				}

				this.visible = {
					type: Boolean,
					reflectToAttribute: true,
					readonly: true,
					value: false
				}

				this.hidden = {
					type: Boolean,
					reflectToAttribute: true,
					readonly: true,
					value: true
				}

			}

			// Fires when an instance was removed from the document.
			detachedCallback() {
				console.log('instance was removed.')
			}

			// Fires when an attribute was added, removed, or updated.
			attributeChangedCallback(attr, oldVal, newVal) {

				/* console.log(`ourrss-modal attr changed 
				 	-attr: ${attr}
				 	-oldVal: ${oldVal}
				 	-newVal:${newVal}`) */


				switch (attr) {
					case 'title': {
						this.dom.title.textContent = newVal
						break
					}
					case 'content': {
						if (newVal === 'addFeed') {
							console.log('addFeed')
							this.addFeed()
						}
						else if (newVal === 'settings') {
							console.log('settings')
							this.settings()
						}

						break
					}
					default: {
						//console.log(`ourrss-modal attr not handled: ${attr}`)
					}
				}
			}

			// Fires when an instance was inserted into the document.
			attachedCallback() {
				var template = this.owner.querySelector('template')
				var clone = document.importNode(template.content, true)
				this.root = this.createShadowRoot()
				this.root.appendChild(clone)
				this.registerElements()
			}

			// Fires when an instance of the element is created.
			createdCallback() {
				this.setProperties()
			}

			parseAttributes() {
				//this.name = this.getAttribute('name');
				this.dom.title.textContent = this.getAttribute('title')
				//this.dom.content.innerHTML = this.getAttribute('content')

			}

			registerElements() {

				this.dom = {}
				this.dom.modal = this.root.querySelector('#modal')
				this.dom.overlay = this.root.querySelector('#overlay')
				this.dom.title = this.root.querySelector('.title')
				this.dom.content = this.root.querySelector('.content')
				this.dom.listen = this.root.ownerDocument.querySelector('ourrss-listen')

				this.addListeners()

			}

			addListeners() {

				this.dom.modal.onclick = (e) => {
					console.log('modal click')
				}

				this.dom.overlay.onclick = (e) => {
					console.log('overlay click')

					this.setAttribute('hidden', true)
					this.setAttribute('title', '')
					this.visible = false
					this.active = false
					this.dom.modal.classList.remove('settings')
					this.dom.content.innerHTML = ''
					this.ownerDocument.body.style.overflow = 'auto'
				}

				this.parseAttributes()
			}


			//Helpers Below
			settings() {

				this.ownerDocument.body.style.overflow = 'hidden'
				this.removeAttribute('hidden')
				this.setAttribute('title', 'Settings')
				this.dom.content.innerHTML = ''

				const cont = document.createElement('div')
				const html = `<div class="padTop1">
					<a class="export" href="#">Export Feeds</a> : Creates a json file of feeds added.
					<input class="expDir" type="file" webkitdirectory style="display:none" />
					<br/><br/>
					<a class="import" href="#">Import Feeds</a> : Reads an export from other Ourrss instances.
					<input class="impFile" type="file" style="display:none" />
					<br/><br/>
					<a class="fireGet" href="#">Get Firebase</a> : Sync feeds from Firebase
					<input class="fireGet" type="file" style="display:none" />
					<br/><br/>
					<a class="firePut" href="#">Put Firebase</a> : Sync feeds to Firebase
					<input class="firePut" type="file" style="display:none" />
				</div>`

				cont.innerHTML = html

				const content = cont.childNodes[0]
				const exp = content.querySelector('.export')
				const imp = content.querySelector('.import')
				const fireGet = content.querySelector('.fireGet')
				const firePut = content.querySelector('.firePut')

				exp.onclick = (e) => {
					e.cancelBubble = true

					const dir = content.querySelector('.expDir')
					dir.onchange = () => {
						const path = dir.files[0].path
						console.log(path)
						Util.exportFeeds(path)
							.then(x => console.log(x))
							.catch(x => console.log(x))
					}
					dir.click()
				}

				imp.onclick = (e) => {
					e.cancelBubble = true
					
					const file = content.querySelector('.impFile')
					file.onchange = () => {
						const path = file.files[0].path
						console.log(path)
						Util.importFeeds(path)
							.then(x => this.dom.listen.setAttribute('mk-all', x))
							.catch(x => console.log(x))
					}
					file.click()
				}

				this.dom.modal.classList.add('settings')
				this.dom.content.innerHTML = ''

				const fire = document.createElement('ourrss-firebase')
				fire.classList.add('firebase')


				fireGet.onclick = (e) => fire.setAttribute('fireGet', true)
				firePut.onclick = (e) => fire.setAttribute('firePut', true)
				
				this.dom.content.appendChild(fire)
				this.dom.content.appendChild(content)
				this.removeAttribute('hidden')


			}


			addFeed() {

				this.ownerDocument.body.style.overflow = 'hidden'
				this.removeAttribute('hidden')
				this.removeAttribute('title')
				this.dom.content.innerHTML = ''

				const add = (e, input) => {
					e.cancelBubble = true
					//e.preventDefault()
					const url = input.value

					if (!url) {
						console.error('No URL provided')
						return false;
					}

					console.log(`Getting feed: ${url}`);
					ipc.send('getFeed', url);
					ipc.once('getFeedRes', (event, rss) => this.dom.listen.setAttribute('mk-card', rss.title))

					input.value = ''
					this.dom.overlay.click()
				}

				const cont = document.createElement('div')
				const html = `<div class="container">
					<input id="feedURL" placeholder="Paste Feed URL" />
					<button>Add Feed</button>
				</div>`

				cont.innerHTML = html
				const content = cont.childNodes[0]
				const input = content.querySelector('input')
				content.querySelector('button').onclick = (e) => add(e, input)


				this.dom.content.appendChild(content)
				this.removeAttribute('hidden')


			}


		}
		if (document.createElement('ourrss-modal').constructor !== OurrssModal) {
			OurrssModal.prototype.owner = (document._currentScript || document.currentScript).ownerDocument;
			document.registerElement('ourrss-modal', OurrssModal);
		}

	</script>
</dom-module>