- this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
-
- this.setState({ settingsModal: false })} isOpen={this.state.settingsModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
- this.setState({ settingsModal: false })} setDefaultSettings={() => this.setDefaultSettings()} />
-
- this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
- this.setState({ updateModal: false })} />
-
-
+ this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
+
-
+++{language.credit}
++++ + + this.setState({ settingsModal: false })} isOpen={this.state.settingsModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> + +this.setState({ settingsModal: false })} + setDefaultSettings={() => SettingsFunctions.setDefaultSettings()} + openMarketplace={() => this.setState({ marketplaceModal: true, settingsModal: false })} + openAddons={() => this.setState({ settingsModal: false, addonsModal: true })} + toastLanguage={language.toasts} + /> + this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> + +this.setState({ updateModal: false })} + /> + this.setState({ marketplaceModal: false })} isOpen={this.state.marketplaceModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> + +this.setState({ marketplaceModal: false })} + openSettings={() => this.setState({ marketplaceModal: false, settingsModal: true })} + openAddons={() => this.setState({ marketplaceModal: false, addonsModal: true })} + toastLanguage={language.toasts} + /> + this.setState({ addonsModal: false })} isOpen={this.state.addonsModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> + +this.setState({ addonsModal: false })} + openSettings={() => this.setState({ addonsModal: false, settingsModal: true })} + openMarketplace={() => this.setState({ addonsModal: false, marketplaceModal: true })} + toastLanguage={language.toasts} + /> + this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> + +this.setState({ welcomeModal: false })} + /> +
- {/**/}
-
- );
- }
-}
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 3a72b330..0e1f3a80 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,14 +1,18 @@
+import React from 'react';
import RefreshIcon from '@material-ui/icons/Refresh';
import Gear from '@material-ui/icons/Settings';
import NewReleases from '@material-ui/icons/NewReleases';
-import React from 'react';
export default class Navbar extends React.PureComponent {
render() {
- let refreshHTML = {this.props.language}
-
-
-
@@ -16,7 +20,7 @@ export default class Navbar extends React.PureComponent {
{refreshHTML}
-
-
-
- }
-}
\ No newline at end of file
diff --git a/src/components/modals/Addons.jsx b/src/components/modals/Addons.jsx
new file mode 100644
index 00000000..ed70cd4e
--- /dev/null
+++ b/src/components/modals/Addons.jsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import LocalMallIcon from '@material-ui/icons/LocalMall';
+import { toast } from 'react-toastify';
+import dtf from '@eartharoid/dtf';
+import Item from './marketplace/Item';
+import MarketplaceFunctions from '../../modules/marketplaceFunctions';
+
+export default class Addons extends React.PureComponent {
+ constructor(...args) {
+ super(...args);
+ this.state = {
+ installed: [],
+ item_data: {
+ name: 'Name',
+ author: 'Author',
+ description: 'Description',
+ updated: '???',
+ version: '1.0.0',
+ icon: ''
+ }
+ }
+ }
+
+ async toggle(type, type2, data) {
+ if (type === 'item') {
+ let installed = JSON.parse(localStorage.getItem('installed'));
+ let info = installed.find(i => i.name === data).content;
+ this.setState({
+ current_data: { type: type2, name: data, content: info },
+ item_data: {
+ name: info.data.name,
+ author: info.data.author,
+ description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '')), + updated: dtf('n_D MMM YYYY', info.updated, 'en-GB'), + version: info.data.version, + icon: info.data.screenshot_url + } + }); + document.getElementById('marketplace').style.display = 'none'; + document.getElementById('item').style.display = 'block'; + } else { + document.getElementById('marketplace').style.display = 'block'; + document.getElementById('item').style.display = 'none'; + } + } + + uninstall() { + let installed = JSON.parse(localStorage.getItem('installed')); + + const uninstallStuff = () => { + for (let i = 0; i < installed.length; i++) { + if (installed[i].name === this.state.current_data.name) { + installed.splice(i, 1); + break; + } + } + localStorage.setItem('installed', JSON.stringify(installed)); + toast(this.props.toastLanguage.removed); + this.toggle(); + this.componentDidMount(); + } + + switch (this.state.current_data.type) { + case 'settings': + let oldSettings = JSON.parse(localStorage.getItem('backup_settings')); + localStorage.clear(); + oldSettings.forEach(item => localStorage.setItem(item.name, item.value)); + uninstallStuff(); + break; + default: + try { + localStorage.removeItem(this.state.current_data.type); + uninstallStuff(); + } catch (e) { + console.log('invalid'); + } + } + } + + componentDidMount() { + document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); + document.getElementById('center').classList.toggle('backgroundEffects'); + this.setState({ installed: JSON.parse(localStorage.getItem('installed')) }); + } + + componentWillUnmount() { + document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); + document.getElementById('center').classList.toggle('backgroundEffects'); + } + + render() { + if (this.state.installed.length === 0) { + return
+ ×
+
+ }
+
+ return {this.props.modalLanguage.title}
+
+
+
+
+
+
+ { /*
+ */}
+
+ {this.props.language.added}
+
+
+
+
+ {this.props.language.empty.title}
+{this.props.language.empty.description}
+ +
+ ×
+ - this.uninstall()}>{this.props.language.product.buttons.remove}} data={this.state.item_data} function={()=> this.toggle()} language={this.props.language.product} />
+
;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modals/Marketplace.jsx b/src/components/modals/Marketplace.jsx
new file mode 100644
index 00000000..d2b71f1e
--- /dev/null
+++ b/src/components/modals/Marketplace.jsx
@@ -0,0 +1,265 @@
+import React from 'react';
+import WifiOffIcon from '@material-ui/icons/WifiOff';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import { toast } from 'react-toastify';
+import dtf from '@eartharoid/dtf';
+import Item from './marketplace/Item';
+import MarketplaceFunctions from '../../modules/marketplaceFunctions';
+import * as Constants from '../../modules/constants';
+import Items from './marketplace/Items';
+
+export default class Marketplace extends React.PureComponent {
+ constructor(...args) {
+ super(...args);
+ this.state = {
+ themes: [],
+ settings: [],
+ photo_packs: [],
+ quote_packs: [],
+ see_more: [],
+ see_more_type: '',
+ current_data: {
+ type: '',
+ name: '',
+ content: {}
+ },
+ button: '',
+ featured: {},
+ done: false,
+ item_data: {
+ name: 'Name',
+ author: 'Author',
+ description: 'Description',
+ updated: '???',
+ version: '1.0.0',
+ icon: ''
+ }
+ }
+
+ this.offlineHTML = {this.props.modalLanguage.title}
+
+
+
+
+
+
+ { /*
+ */}
+
+ {this.props.language.added}
+
+ {this.state.installed.map((item) =>
+
+ this.toggle('item', item.type, item.name)}>
+ 
+
)}
+
+
+ {item.content.data.name}
+{item.content.data.author}
+
+ ×
+
;
+ }
+
+ async toggle(type, type2, data) {
+ if (type === 'seemore') {
+ document.getElementById('marketplace').style.display = 'none';
+ document.getElementById('seemore').style.display = 'block';
+ return this.setState({
+ see_more: this.state[type2],
+ see_more_type: type2
+ });
+ }
+
+ if (type === 'item') {
+ let info;
+ try {
+ info = await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`);
+ info = await info.json();
+ } catch (e) {
+ return toast(this.props.toastLanguage.error);
+ }
+
+ this.setState({
+ current_data: { type: type2, name: data, content: info },
+ item_data: {
+ name: info.data.name,
+ author: info.data.author,
+ description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '{this.props.modalLanguage.title}
+
+
+
+
+
+
+
+
+
+ {this.props.language.offline.title}
+{this.props.language.offline.description}
+')), + updated: dtf('n_D MMM YYYY', info.updated, 'en-GB'), + version: info.data.version, + icon: info.data.screenshot_url + } + }); + document.getElementById('marketplace').style.display = 'none'; + document.getElementById('seemore').style.display = 'none'; + document.getElementById('item').style.display = 'block'; + + let button = ; + let installed = JSON.parse(localStorage.getItem('installed')); + if (installed.some(item => item.name === data)) button = ; + this.setState({ button: button }); + } else { + document.getElementById('marketplace').style.display = 'block'; + document.getElementById('item').style.display = 'none'; + document.getElementById('seemore').style.display = 'none'; + } + } + + async getItems() { + let data = await fetch(Constants.MARKETPLACE_URL + '/all'); + data = await data.json(); + let data2 = await fetch(Constants.MARKETPLACE_URL + '/featured'); + data2 = await data2.json(); + this.setState({ + themes: data.data.themes, + settings: data.data.settings, + photo_packs: data.data.photo_packs, + quote_packs: data.data.quote_packs, + see_more: data.data.photo_packs, + featured: data2.data, + done: true + }); + } + + async install() { + let installed = JSON.parse(localStorage.getItem('installed')); + let button; + + const installStuff = () => { + installed.push(this.state.current_data); + localStorage.setItem('installed', JSON.stringify(installed)); + toast(this.props.toastLanguage.installed); + button = ; + this.setState({ button: button }); + } + + switch (this.state.current_data.type) { + case 'settings': + localStorage.removeItem('backup_settings'); + let oldSettings = []; + for (const key of Object.keys(localStorage)) oldSettings.push({name: key, value: localStorage.getItem(key)}); + localStorage.setItem('backup_settings', JSON.stringify(oldSettings)); + this.state.current_data.content.data.settings.forEach(element => localStorage.setItem(element.name, element.value)); + installStuff(); + break; + case 'photo_packs': + localStorage.setItem('photo_packs', JSON.stringify(this.state.current_data.content.data.photos)); + installStuff(); + break; + case 'theme': + localStorage.setItem('theme', this.state.current_data.content.data.theme); + installStuff(); + break; + case 'quote_packs': + localStorage.setItem('quote_packs', JSON.stringify(this.state.current_data.content.data.quotes)); + installStuff(); + break; + default: + console.log('invalid'); + } + } + + uninstall() { + let installed = JSON.parse(localStorage.getItem('installed')); + let button; + + const uninstallStuff = () => { + for (let i = 0; i < installed.length; i++) { + if (installed[i].name === this.state.current_data.name) { + installed.splice(i, 1); + break; + } + } + localStorage.setItem('installed', JSON.stringify(installed)); + toast(this.props.toastLanguage.removed); + button = ; + this.setState({ button: button }); + } + + switch (this.state.current_data.type) { + case 'settings': + let oldSettings = JSON.parse(localStorage.getItem('backup_settings')); + localStorage.clear(); + oldSettings.forEach(item => localStorage.setItem(item.name, item.value)); + uninstallStuff(); + break; + default: + try { + localStorage.removeItem(this.state.current_data.type); + uninstallStuff(); + } catch (e) { + console.log('invalid'); + } + } + } + + componentDidMount() { + document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); + document.getElementById('center').classList.toggle('backgroundEffects'); + if (navigator.onLine === false) return; + this.getItems(); + } + + componentWillUnmount() { + document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); + document.getElementById('center').classList.toggle('backgroundEffects'); + } + + render() { + if (navigator.onLine === false || this.state.done === false) { + return this.offlineHTML; + } + + return
+ ×
+ - this.toggle()} language={this.props.language.product} />
+
;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Settings.jsx b/src/components/modals/Settings.jsx
similarity index 83%
rename from src/components/Settings.jsx
rename to src/components/modals/Settings.jsx
index 45ff35bb..5a910522 100644
--- a/src/components/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import ExpandMore from '@material-ui/icons/ExpandMore';
-import * as SettingsFunctions from '../modules/settingsFunctions';
+import SettingsFunctions from '../../modules/settingsFunctions';
import Checkbox from './settings/Checkbox';
import Slider from './settings/Slider';
import { toast } from 'react-toastify';
@@ -22,7 +22,7 @@ export default class Settings extends React.PureComponent {
case 'customSearchEngine': document.getElementById('searchEngine').value = 'DuckDuckGo'; break;
default: console.log('[ERROR] resetItem requires a key!');
}
- toast('Reset successfully!');
+ toast(this.props.toastLanguage.reset);
}
updateCurrent() {
@@ -108,16 +108,9 @@ export default class Settings extends React.PureComponent {
document.getElementById('customBackgroundHex').innerText = hex;
}*/
+
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
-
- /* document.addEventListener('keyup', (event) => {
- if (event.keyCode === 13) this.saveStuff();
- if (event.keyCode === 27) {
- document.getElementById('root').classList.toggle('backgroundEffects');
- this.props.modalClose();
- }
- });*/
}
componentWillUnmount() {
@@ -130,12 +123,17 @@ export default class Settings extends React.PureComponent {
//if (localStorage.getItem('animations') === 'true') expandClassList = 'all 0.5 ease 0s';
return {this.props.modalLanguage.title}
+
+
+
+
+
+
+ this.toggle('item', 'photo_packs', input)}
+ seeMore={true}
+ seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} />
+ this.toggle('item', 'settings', input)}
+ seeMore={true}
+ seeMoreFunction={() => this.toggle('seemore', 'settings')} />
+ this.toggle('item', 'quote_packs', input)}
+ seeMore={true}
+ seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} />
+ this.toggle('item', 'theme', input)}
+ seeMore={true}
+ seeMoreFunction={() => this.toggle('seemore', 'themes')} />
+
+
+
+ {this.state.featured.title}
+{this.state.featured.name}
+ +
+ this.toggle()} />
+ this.toggle('item', this.state.see_more_type, input)}
+ items={this.state.see_more}
+ />
+
+
- ×
-
{this.props.language.title}
-{this.props.language.description}
+ × +{this.props.modalLanguage.title}
+
+
+
+
+
+
- SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])} />
@@ -147,7 +145,7 @@ export default class Settings extends React.PureComponent {
{this.props.language.time.title}
+SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])}>{this.props.language.time.title}
- SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} />
@@ -160,7 +158,7 @@ export default class Settings extends React.PureComponent {
{this.props.language.greeting.title}
+SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])}>{this.props.language.greeting.title}
- SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
@@ -168,7 +166,7 @@ export default class Settings extends React.PureComponent {
{this.props.language.quote.title}
+SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])}>{this.props.language.quote.title}
- SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
@@ -203,7 +201,7 @@ export default class Settings extends React.PureComponent {
{this.props.language.background.title}
+SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])}>{this.props.language.background.title}
- SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} />
@@ -213,11 +211,17 @@ export default class Settings extends React.PureComponent {
- { /* */ }
+
+
+
+
+
+
+ {/* */}
@@ -243,8 +247,10 @@ export default class Settings extends React.PureComponent {
diff --git a/src/components/Update.jsx b/src/components/modals/Update.jsx
similarity index 78%
rename from src/components/Update.jsx
rename to src/components/modals/Update.jsx
index 93fbb782..fa63e26f 100644
--- a/src/components/Update.jsx
+++ b/src/components/modals/Update.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import * as Constants from '../modules/constants';
+import * as Constants from '../../modules/constants';
export default class Update extends React.PureComponent {
constructor(...args) {
@@ -33,15 +33,18 @@ export default class Update extends React.PureComponent {
}
componentDidMount() {
+ localStorage.setItem('viewedUpdate', true);
this.getUpdate();
}
render() {
- return {this.props.language.searchbar.title}
+SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])}>{this.props.language.searchbar.title}
-
-
Custom Search URL this.resetItem('customSearchEngine')}>Reset
+Custom Search URL this.resetItem('customSearchEngine')}>Reset
{this.props.language.language}
+ return
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/settings/Slider.jsx b/src/components/modals/settings/Slider.jsx
similarity index 85%
rename from src/components/settings/Slider.jsx
rename to src/components/modals/settings/Slider.jsx
index 5e9b3b7d..b48cca11 100644
--- a/src/components/settings/Slider.jsx
+++ b/src/components/modals/settings/Slider.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import * as SettingsFunctions from '../../modules/settingsFunctions';
+import SettingsFunctions from '../../../modules/settingsFunctions';
export default class Slider extends React.PureComponent {
render() {
diff --git a/src/components/settings/Checkbox.jsx b/src/components/settings/Checkbox.jsx
deleted file mode 100644
index db9e8bf4..00000000
--- a/src/components/settings/Checkbox.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import * as SettingsFunctions from '../../modules/settingsFunctions';
-
-export default class Checkbox extends React.PureComponent {
- render() {
- return (
- ;
+ if (localStorage.getItem('analog') === 'true') clockHTML =
×
+ Image of JIF.
+
;
}
}
\ No newline at end of file
diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx
new file mode 100644
index 00000000..0720d1c4
--- /dev/null
+++ b/src/components/modals/Welcome.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import EmailIcon from '@material-ui/icons/Email';
+
+export default class Welcome extends React.PureComponent {
+ render() {
+ return By Mue •
- +
+
+ ×
+
;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modals/marketplace/Item.jsx b/src/components/modals/marketplace/Item.jsx
new file mode 100644
index 00000000..dbd65585
--- /dev/null
+++ b/src/components/modals/marketplace/Item.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+export default class Item extends React.PureComponent {
+ render() {
+ return (
+
+ 
+
+ Marketplace +
+ Submitting Photos +
+ Settings +
+ 
+
+ +
+ Welcome to
+Mue Tab
+
+ Information
+Thank you for downloading Mue Tab,
we hope you enjoy your time with our extension.
Tutorials
+ General Start ++ Marketplace +
+ Submitting Photos +
+ Settings +
Support
+
+
+ + +
+
+
+
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/modals/marketplace/Items.jsx b/src/components/modals/marketplace/Items.jsx
new file mode 100644
index 00000000..1ddf5560
--- /dev/null
+++ b/src/components/modals/marketplace/Items.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class Items extends React.PureComponent {
+ render() {
+ let seeMoreHTML;
+ if (this.props.seeMore === true) seeMoreHTML = ;
+
+ return (
+ +
+
{this.props.data.name}
+ {this.props.button} ++
+
+
+
+ {this.props.language.information}
+-
+
- {this.props.language.last_updated} +
- {this.props.data.updated} +
- {this.props.language.version} +
- {this.props.data.version} +
- {this.props.language.author} +
- {this.props.data.author} +
+
+
+
+
+ -
+
- {this.props.language.notice.title} +
- {this.props.language.notice.description} +
+
{this.props.language.overview}
+ +
+ {seeMoreHTML}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx
new file mode 100644
index 00000000..2949ca69
--- /dev/null
+++ b/src/components/modals/settings/Checkbox.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import SettingsFunctions from '../../../modules/settingsFunctions';
+import CheckboxUI from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+export default class Checkbox extends React.PureComponent {
+ constructor(...args) {
+ super(...args);
+ this.state = {
+ checked: true
+ }
+ }
+
+ render() {
+ const handleChange = () => {
+ SettingsFunctions.setItem(this.props.name);
+ let checked;
+ if (this.state.checked === true) checked = false;
+ else checked = true;
+ this.setState({ checked: checked });
+ }
+
+ let value = localStorage.getItem(this.props.name);
+
+ switch (value) {
+ case 'true': value = true; break;
+ case 'false': value = false; break;
+ default: value = false;
+ }
+
+ this.setState({ checked: value });
+
+ return (
+ {this.props.title}
+
+ {this.props.items.map((item) =>
+
+ this.props.toggleFunction(item.name)}>
+
+
)}
+
+
+ {item.display_name}
+{item.author}
++
-
- SettingsFunctions.setItem(this.props.name)} id={this.props.name + 'Status'} />
-
-
{this.state.time}{this.state.ampm}
; - if (localStorage.getItem('analog') === 'true') clockHTML =
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 8d993b54..1bb908fd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
+import './scss/index.scss';
+import 'react-toastify/dist/ReactToastify.css';
+
ReactDOM.render(