Merge pull request #119 from btzr-io/preact

OSD (WIP)

CHANGELOG.md

@@ -1,3 +1,20 @@
-* Release 0.1.0
-	* Fixed Bug #79: Replace fundamentally broken AppCache with Service Workers
-	* Fixed Bug #91: Add Internationalization.
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+### Added
+
+### Changed
+
+### Removed
+
+### Fixed
+
+## [0.0.0] - 2017-07-12
+
+### Fixed
+* Fixed Bug #79: Replace fundamentally broken AppCache with Service Workers
+* Fixed Bug #91: Add Internationalization.

package.json

@@ -53,14 +53,16 @@
     "less-loader": "^4.1.0",
     "preact-cli": "^2.2.1",
     "prettier": "^1.11.1",
-    "pretty-quick": "^1.4.1"
+    "pretty-quick": "^1.4.1",
+    "worker-loader": "^1.1.1"
   },
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.5",
     "@fortawesome/fontawesome-free-brands": "^5.0.9",
     "@fortawesome/fontawesome-free-solid": "^5.0.9",
     "@fortawesome/react-fontawesome": "^0.0.18",
     "history": "^4.7.2",
+    "openseadragon": "^2.3.1",
     "preact": "^8.2.7",
     "preact-compat": "^3.18.0",
     "preact-router": "^2.6.0",

preact.config.js

@@ -4,4 +4,9 @@ export default function(config, env, helpers) {
   if (env.production) {
     config.output.publicPath = './'
   }
+
+  config.module.loaders.push({
+    test: /\.worker\.js$/,
+    use: { loader: 'worker-loader' },
+  })
 }

src/assets/js/libuntar.js

@@ -0,0 +1,8 @@
+// Copyright (c) 2017 Matthew Brennan Jones <[email protected]>
+// This software is licensed under a MIT License
+// https://github.com/workhorsy/uncompress.js
+// Based on the information from:
+// https://en.wikipedia.org/wiki/Tar_(computing)
+"use strict";
+(function(){function e(h,d,c){return h.slice(d,d+c)}var a=null;"object"===typeof window?a=window:"function"===typeof importScripts&&(a=self);a.tarGetEntries=function(h,d){for(var c=new Uint8Array(d),b=0,a=[];b+512<c.byteLength;){var f=saneMap(e(c,b+0,100),String.fromCharCode);f=f.join("").replace(/\0/g,"");if(0===f.length)break;var k=parseInt(saneJoin(saneMap(e(c,b+124,12),String.fromCharCode),""),8),g=saneMap(e(c,b+156,1),String.fromCharCode)|0;0!==g&&5!==g||a.push({name:f,size:k,is_file:0==g,offset:b});
+b+=k+512;0<b%512&&(b=512*((b/512|0)+1))}return a};a.tarGetEntryData=function(a,d){var c=new Uint8Array(d);return e(c,a.offset+512,a.size)}})();

src/components/app/style.less

@@ -1,23 +1,4 @@
 .app {
   background: var(--bg-color);
   color: var(--text-color);
-  /* transition: background 0.15s ease; */
-}
-
-.themeDark {
-  /* Css vars */
-  --main-color: #1976d2;
-  --bg-color: #2f3542;
-  --text-color: white;
-  --text-message-color: #a4b0be;
-  --menu-bg-color: #1f232b;
-}
-
-.themeLight {
-  /* Css vars */
-  --main-color: #1976d2;
-  --bg-color: #fff;
-  --text-color: #3c3d3f;
-  --text-message-color: #727b85;
-  --menu-bg-color: #eee;
 }

src/components/app/view.jsx

@@ -1,13 +1,11 @@
 import { h, Component } from 'preact'
 import { Router, route } from 'preact-router'
 import { requireBrowserFeatures } from '../../utils/browser'
-import createHashHistory from 'history/createHashHistory';
+import createHashHistory from 'history/createHashHistory'
 
 // Routes
-import Files from '../../routes/files'
 import Welcome from '../../routes/welcome'
-import Library from '../../routes/library'
-import Settings from '../../routes/settings'
+import Viewer from '../../routes/viewer'
 
 // Errors
 import Unsupported from '../../routes/unsupported'
@@ -20,6 +18,7 @@ export default class App extends Component {
   state = {
     currentRoute: null,
     compatible: true,
+    hideMenu: false,
   }
 
   constructor(props) {
@@ -32,13 +31,11 @@ export default class App extends Component {
     this.hasErrors()
   }
 
+  /*
   shouldComponentUpdate(props, state) {
-    if (props.settings.night_mode_enabled !== this.props.settings.night_mode_enabled) {
-      // Update theme
-      return true
-    }
-    return false
+      return false
   }
+  */
 
   hasErrors = () => {
     // Test browser features
@@ -49,7 +46,8 @@ export default class App extends Component {
 
   handleRoute = page => {
     const { compatible } = this.state
-    this.setState({ currentRoute: page })
+    this.setState({ currentRoute: page, hideMenu: false })
+
     // Redirect to error
     !compatible && route('/unsupported')
     // Redirect to welcome page
@@ -59,18 +57,11 @@ export default class App extends Component {
   render() {
     const { settings } = this.props
 
-    // Select theme
-    const theme = settings.night_mode_enabled ? style.themeDark : style.themeLight
-
     return (
-      <div id="app" class={`${style.app} ${theme}`}>
-        {this.state.compatible && <Menu />}
+      <div id="app" class={`${style.app}`}>
         <Router onChange={this.handleRoute} history={createHashHistory()}>
           <Welcome path="/" default />
-          <Files path="/files" />
-          <Library path="/library" />
-          <Settings path="/settings" />
-          <Unsupported path="/unsupported" />
+          <Viewer path="/reader" />
         </Router>
       </div>
     )

src/components/button/index.js

@@ -4,22 +4,18 @@ import style from './style'
 import Icon from '../../components/icon'
 
 export default class Button extends Component {
-  state = {}
-
-  handleMouseUp = event => {
-    //console.log(this.props.children[0]);
+  handleClick = event => {
     this.props.onClick && this.props.onClick(event)
   }
 
-  componentDidMount() {
-    //console.log(this.props.text);
-  }
-
   render() {
     const { props, state } = this
     const type = props.type ? style[props.type] : ''
     return (
-      <button class={`${style.comic_button} ${type}`} onMouseUp={this.handleMouseUp}>
+      <button
+        class={`${style.comic_button} ${type}`}
+        onClick={this.handleClick}
+      >
         {' '}
         {props.icon ? <Icon name={props.icon} /> : null}
         {props.children.length > 0 && props.children[0]}

src/components/button/style.less

@@ -1,16 +1,17 @@
 .comic_button {
   border: 0;
   appearance: none;
-  padding: 16px;
+  padding: 12px 32px;
   margin: 16px;
   cursor: pointer;
   word-wrap: break-word;
   color: white;
-  background: var(--main-color);
+  background: #416dea; // var(--main-color);
   font-weight: bold;
   font-family: inherit;
   font-size: 1em;
   max-width: 250px;
+  border-radius: 2.5em;
 }
 
 .comic_button i {

src/components/footer/index.js

@@ -1,6 +1,4 @@
 import { h, Component } from 'preact'
-import style from './style'
-
 export default class Footer extends Component {
   state = {}
 
@@ -14,10 +12,15 @@ export default class Footer extends Component {
 
     return (
       <footer>
-        Copyright &copy; 2017 - {year} Comic Book Reader{' '}
-        <a href="https://github.com/workhorsy/comic_book_reader/tree/preact#contributors">
-          Developers
-        </a>
+        <div>
+          Copyright &copy; 2017 - {year} Comic Book Reader{' '}
+          <a
+            href="https://github.com/workhorsy/comic_book_reader/tree/preact#contributors"
+            native
+          >
+            Developers
+          </a>
+        </div>
       </footer>
     )
   }

src/components/icon/index.js

@@ -3,10 +3,10 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome'
 import style from './style'
 
 console.log(style.icon)
-const Icon = ({ name }) => (
-  <i className={style.icon}>
-    <FontAwesomeIcon icon={name} size="xs" fixedWidth />
-  </i>
-)
+const Icon = ({name, className}) => {
+    return (
+        <FontAwesomeIcon  className={[style.icon, className].join(' ') }icon={name} size="xs" fixedWidth />
+    )
+}
 
 export default Icon

src/components/menu/index.js

@@ -6,27 +6,19 @@ import Icon from '../../components/icon'
 const Item = ({ id, label, icon, href, onClick }) => {
   const action = event => onClick && onClick(event)
   return (
-    <Link id={id} class={style.item} activeClassName={style.active} href={href} onClick={action}>
+    <Link
+      id={id}
+      class={style.item}
+      activeClassName={style.active}
+      href={href}
+      onClick={action}
+    >
       {icon && <Icon name={icon} />}
       <span class={style.label}>{label}</span>
     </Link>
   )
 }
 
-const Slider = ({ closeSlider, open }) => {
-  return (
-    <div class={`${style.slider} ${open ? style.open : ''}`}>
-      <div class={style.items}>
-        <Item icon="folder" label="Files" href="/files" onClick={closeSlider} />
-        <Item icon="bookmark" label="Library" href="/library" onClick={closeSlider} />
-        <Item icon="question-circle" label="About" href="/" onClick={closeSlider} />
-        <hr />
-        <Item icon="cog" label="Settings" href="/settings" onClick={closeSlider} />
-      </div>
-    </div>
-  )
-}
-
 // Internal button
 const Button = ({ label, icon, onClick }) => {
   const action = event => onClick && onClick(event)
@@ -38,17 +30,6 @@ const Button = ({ label, icon, onClick }) => {
   )
 }
 
-//Test data for ComicLibrary ( remove this )
-const TestData = {
-  items: [
-    { title: 'Issue #1', cover: './assets/undefined.png' },
-    { title: 'Issue #2', cover: './assets/undefined.png' },
-    { title: 'Issue #3', cover: './assets/undefined.png' },
-    { title: 'Issue #4', cover: './assets/undefined.png' },
-    { title: 'Issue #5', cover: './assets/undefined.png' },
-  ],
-}
-
 export default class Menu extends Component {
   state = {
     openSlider: false,
@@ -63,25 +44,35 @@ export default class Menu extends Component {
   }
 
   hideSlider = () => {
-      // Fast
-      this.setState({ openSlider: false })
+    // Fast
+    this.setState({ openSlider: false })
   }
 
   closeSlider = () => {
     // Wait
     setTimeout(() => {
-        this.setState({ openSlider: false })
-    }, 250);
+      //this.setState({ openSlider: false })
+    }, 250)
   }
 
   render() {
     let { props, state } = this
     return (
       <nav class={style.comic_menu}>
-        <Item id={style.appName} label={'CBR'} href={'/'} />
-        { <div class={style.overlay} style={ state.openSlider && {height: '100vh', opacity: 0.75}} onClick={this.hideSlider} />}
-        <Button id="btnFileLoad" onClick={this.toggleSlider} icon={'bars'} />
-        <Slider open={state.openSlider} closeSlider={this.closeSlider} />
+        {/* <Button onClick={this.toggleSlider} icon={'bars'} /> */}
+        <Item id={style.appName} label={'CB-Reader'} href={'/'} />
+        <div className={style.links}>
+          <Item label={'Home'} href={'/'} />
+          <Item label={'Docs'} href={'/fix'} />
+          <Item label={'API'} href={'/fix'} />
+        </div>
+        {
+          <div
+            class={style.overlay}
+            style={state.openSlider && { height: '100vh', opacity: 0 }}
+            onClick={this.hideSlider}
+          />
+        }
       </nav>
     )
   }