https://ephys.dev/Gender-Unicorn/assets/js/main.js

1'use strict';
2
3/** modal:
4<div class="modal hidden">
5 <div class="modal_content">
6	 <h3>Share your unicorn!</h3>
7	 <fieldset>
8	 <label><span>Here is your share link:</span> <input type="text"></label>
9	 </fieldset>
10	 <button>Ok!</button>
11 </div>
12</div>
13 */
14
15$(function() {
16	var Modal = {
17		modal: null,
18		state: 0, // 0: not created, 1: use dom, -1: use prompt
19		init: function() {
20			var modal = document.createElement('div');
21			modal.classList.add('modal');
22			modal.classList.add('hidden');
23
24			document.body.appendChild(modal);
25			var cssEnabled = getComputedStyle(modal).display === 'none';
26			if (!cssEnabled) {
27				this.state = -1;
28				document.body.removeChild(modal);
29			} else {
30				this.state = 1;
31				this.modal = modal;
32
33				var modalContent = document.createElement('div');
34				modalContent.classList.add('modal_content');
35				modal.appendChild(modalContent);
36
37				modalContent.innerHTML = '<fieldset>' +
38					'<label><span></span><input type="text"></label>' +
39					'</fieldset>';
40
41				var button = document.createElement('button');
42				button.textContent = 'Ok!';
43				button.addEventListener('click', function(e) {
44					e.preventDefault();
45					Modal.close();
46				});
47
48				modalContent.appendChild(button);
49
50				modal.addEventListener('click', function() {
51					Modal.close();
52				});
53
54				modalContent.addEventListener('click', function(e) {
55					e.stopPropagation();
56				});
57			}
58		},
59		show: function(title, content) {
60			if (this.state === 0) {
61				this.init();
62			}
63
64			if (this.state === 1) {
65				this.modal.querySelector('span').textContent = title;
66				var input = this.modal.querySelector('input');
67
68				input.value = content;
69				input.focus();
70				input.setSelectionRange(0, content.length);
71
72				document.body.classList.add('modal_active');
73
74				this.modal.classList.remove('hidden');
75			} else {
76				prompt(title, content);
77			}
78		},
79		close: function() {
80			document.body.classList.remove('modal_active');
81			this.modal.classList.add('hidden');
82		}
83	};
84
85	var ShareLink = {
86		parse: function(b64data) {
87			try {
88				var data = atob(b64data).split(',');
89
90				var ranges = document.querySelectorAll('input[type="range"]');
91				for (var i = 0; i < ranges.length; i++) {
92					ranges[i].value = data[i];
93				}
94
95				var selectedRadio = data[i];
96				var radio = document.querySelector('input[name="assigned_sex"][value="'+selectedRadio+'"]');
97				if (radio != null) {
98					radio.checked = true;
99				}
100			} catch(e) {
101				console.error(e);
102			}
103		},
104		generate: function() {
105			var data = [];
106
107			var ranges = document.querySelectorAll('input[type="range"]');
108			for (var i = 0; i < ranges.length; i++) {
109				data.push(ranges[i].value);
110			}
111
112			var radio = document.querySelector('input[name="assigned_sex"]:checked');
113			if (radio != null) {
114				data.push(radio.value);
115			}
116
117			return btoa(data.join(','));
118		}
119	};
120
121	var controls = document.createElement('div');
122	controls.classList.add('controls');
123
124	var shareButton = document.createElement('button');
125	shareButton.innerHTML = '<img src="assets/img/share_icon.svg"> Share Unicorn';
126
127	shareButton.addEventListener('click', function(e) {
128		var data = ShareLink.generate();
129
130		var path = document.location.protocol + '//' + document.location.host + document.location.pathname + '#' + data;
131		document.location.hash = '#' + data;
132
133		Modal.show('Here is your share link:', path);
134
135		e.preventDefault();
136	});
137
138	controls.appendChild(shareButton);
139	document.querySelector('#unicorn_selection').appendChild(controls);
140
141	if (document.location.hash.length > 1) {
142		ShareLink.parse(document.location.hash.substring(1));
143	}
144
145	Modal.init();
146});