README.md

@@ -63,7 +63,7 @@ Version 2.0
 - [x] Different views (List, Grid)
 - [ ] Show storage usage statistics (free/used)
 - [ ] Sort Files
-- [x] Zip / Unzip
+- [ ] Zip / Unzip
 - [ ] Image Thumbnails
 - [ ] FTP Browser
 - [ ] Preferences

build/manifest.webapp

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0",
+  "version": "1.0.0",
   "name": "Hawk",
   "description": "Keep an eye on your files with a full-featured file manager",
   "launch_path": "/index.html",
@@ -30,9 +30,6 @@
     "device-storage:music": {
       "access": "readwrite",
       "description": "We need access to your files in order to give you the functionality of listing, reading, opening and writing files in your storage"
-    },
-    "tcp-socket": {
-      "description": "FTP Browser: Used to connect to FTP servers"
     }
   },
   "installs_allowed_from": [

build/style.css

@@ -490,11 +490,6 @@ nav i {
   box-sizing: border-box;
   background: #f8f8f8;
 }
-.toolbar button {
-  flex: 1;
-  width: auto;
-  background-position: center center;
-}
 .breadcrumb {
   display: flex;
   flex: 1;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hawk",
-  "version": "1.2.0",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -26,12 +26,7 @@
   },
   "homepage": "https://github.com/mdibaiee/",
   "dependencies": {
-    "jszip": "2.5.0",
+    "jszip": "2.5.0"
-    "mime": "1.3.4",
-    "react": "15.0.0",
-    "react-dom": "15.0.0",
-    "react-hammerjs": "0.4.5",
-    "react-redux": "1.0.1"
   },
   "devDependencies": {
     "babel": "^5.8.23",
@@ -49,7 +44,7 @@
     "immutable": "^3.7.5",
     "less-plugin-clean-css": "^1.5.1",
     "lodash": "^3.10.1",
-    "react": "^15.0.0",
+    "react": "^0.13.3",
     "react-redux": "^1.0.1",
     "redux": "^1.0.1",
     "redux-devtools": "^1.1.2",

src/js/actions/compress.js

@@ -1,9 +1,9 @@
 import { COMPRESS, DECOMPRESS } from './types';
 
-export function compress(file, name) {
+export function compress(file) {
   return {
     type: COMPRESS,
-    file, name
+    file
   }
 }
 

src/js/api/auto.js

@@ -1,14 +0,0 @@
-import * as ftp from './ftp';
-import * as files from './files';
-
-['getFile', 'children', 'isDirectory', 'readFile', 'writeFile',
- 'createFile', 'createDirectory', 'remove', 'move', 'copy'].forEach(method => {
-   exports[method] = (...args) => {
-     return window.ftpMode ? ftp[method](...args) : files[method](...args);
-   }
- });
-
-let CACHE = files.CACHE;
-let FTP_CACHE = ftp.FTP_CACHE;
-
-export { CACHE, FTP_CACHE };

src/js/api/files.js

@@ -34,14 +34,7 @@ export async function getFile(dir = '/') {
 
   if (dir === '/' || !dir) return parent;
 
-  let file = await parent.get(normalize(dir));
+  return await parent.get(normalize(dir));
-
-  Object.defineProperty(file, 'type', {
-    value: type(file),
-    enumerable: true
-  });
-
-  return file;
 }
 
 export async function children(dir, gatherInfo) {
@@ -51,32 +44,11 @@ export async function children(dir, gatherInfo) {
   if (!parent.path) {
     parent.path = dir.slice(0, dir.lastIndexOf('/') + 1);
   }
-  if (parent.path.endsWith(parent.name)) {
-    Object.defineProperty(parent, 'path', {
-      value: normalize(parent.path.slice(0, -parent.name.length)),
-      enumerable: true
-    });
-  }
-
   let childs = await parent.getFilesAndDirectories();
 
-  for (let child of childs) {
-    Object.defineProperty(child, 'type', {
-      value: type(child),
-      enumerable: true
-    });
-
-    if (child.path && child.path.endsWith(child.name)) {
-      Object.defineProperty(child, 'path', {
-        value: normalize(child.path.slice(0, -child.name.length)),
-        enumerable: true
-      });
-    }
-  }
-
   if (gatherInfo && !window.needsShim) {
     for (let child of childs) {
-      if (child.type === 'Directory') {
+      if (type(child) === 'Directory') {
         let subchildren;
         try {
           subchildren = await shimDirectory(child).getFilesAndDirectories();
@@ -120,14 +92,6 @@ export async function readFile(path) {
 }
 
 export async function writeFile(path, content) {
-  try {
-    let file = await getFile(path);
-
-    return Promise.reject(new Error('File already exists: ' + path));
-  } catch(e) {
-
-  }
-
   let request = sdcard().addNamed(content, path);
 
   return new Promise((resolve, reject) => {
@@ -137,55 +101,27 @@ export async function writeFile(path, content) {
   });
 }
 
-export async function createFile(path = '') {
+export async function createFile(...args) {
-  const parentPath = path.split('/').slice(0, -1).join('/');
+  let parent = await root();
-  let filename = path.slice(path.lastIndexOf('/') + 1);
-  let parent = await getFile(parentPath);
 
-  if (!parent.createFile) {
+  return await parent.createFile(...args);
-    parent = await root();
-    filename = path;
-  }
-
-  CACHE[parentPath] = null;
-  return await parent.createFile(filename);
 }
 
-export async function createDirectory(path) {
+export async function createDirectory(...args) {
-  const parentPath = path.split('/').slice(0, -1).join('/');
+  let parent = await root();
-  let filename = path.slice(path.lastIndexOf('/') + 1);
-  let parent = await getFile(parentPath);
 
-  if (!parent.createDirectory) {
+  return parent.createDirectory(...args).then(() => {
-    parent = await root();
-    filename = path;
-  }
-
-  CACHE[parentPath] = null;
-
-  return parent.createDirectory(filename).then(() => {
     if (window.needsShim) {
-      return createFile(path + '/.empty');
+      return createFile(args[0] + '/.empty');
     }
   });
 }
 
-export async function remove(file, deep = true) {
+export async function remove(file, deep) {
-  // const method = deep ? 'removeDeep' : 'remove';
-  const method = 'removeDeep';
   let path = normalize(file);
-  const parentPath = path.split('/').slice(0, -1).join('/');
+  let parent = await root();
-  let filename = path.slice(path.lastIndexOf('/') + 1);
-  let parent = await getFile(parentPath);
 
-  if (!parent[method]) {
+  return parent[deep ? 'removeDeep' : 'remove'](path);
-    parent = await root();
-    filename = path;
-  }
-
-  CACHE[parentPath] = null;
-
-  return parent[method](filename);
 }
 
 export async function move(file, newPath) {

src/js/api/ftp.js

@@ -1,338 +0,0 @@
-import { refresh } from 'actions/files-view';
-import { bind } from 'store';
-import EventEmitter from 'events';
-import { humanSize, reportError, normalize, type, getLength } from 'utils';
-
-export let FTP_CACHE = {};
-let socket;
-let connection = new EventEmitter();
-connection.setMaxListeners(99);
-
-export let queue = Object.assign([], EventEmitter.prototype);
-
-export async function connect(properties = {}) {
-  let { host, port, username, password } = properties;
-
-  let url = encodeURI(host);
-  socket = navigator.mozTCPSocket.open(url, port);
-
-  socket.ondata = e => {
-    console.log('<', e.data);
-    connection.emit('data', e.data);
-  }
-
-  socket.onerror = e => {
-    connection.emit('error', e.data);
-  }
-
-  socket.onclose = e => {
-    connection.emit('close', e.data);
-  }
-
-  return new Promise((resolve, reject) => {
-    socket.onopen = () => {
-      send(`USER ${username}`);
-      send(`PASS ${password}`);
-      resolve(socket);
-
-      window.ftpMode = true;
-    }
-
-    socket.onerror = reject;
-    socket.onclose = reject;
-  });
-}
-
-export async function disconnect() {
-  socket.close();
-  window.ftpMode = false;
-}
-
-export function listen(ev, fn) {
-  socket.listen(ev, fn);
-}
-
-export function send(command, ...args) {
-  args = args.filter(arg => arg);
-  let cmd = command + (args.length ? ' ' : '') + args.join(' ');
-
-  console.log('>', cmd);
-  socket.send(cmd + '\n');
-}
-
-export async function cwd(dir = '') {
-  send('CWD', dir);
-}
-
-const PWD_REGEX = /257 "(.*)"/;
-export async function pwd() {
-  return new Promise((resolve, reject) => {
-    connection.on('data', function listener(data) {
-      if (data.indexOf('current directory') === -1) return;
-      let dir = data.match(PWD_REGEX)[1];
-      resolve(normalize(dir));
-
-      connection.removeListener('data', listener);
-    });
-
-    send('PWD');
-  });
-}
-
-export async function pasv() {
-  return new Promise((resolve, reject) => {
-    connection.on('data', function listener(data) {
-      if (data.indexOf('Passive') === -1) return;
-
-      // format: |||port|
-      let port = parseInt(data.match(/\|{3}(\d+)\|/)[1]);
-
-      connection.removeListener('data', listener);
-
-      resolve(port);
-    });
-
-    send('EPSV');
-  });
-}
-
-const LIST_EXTRACTOR = /(.*?)\s+(\d+)\s+(\w+)\s+(\w+)\s+(\w+)\s+(\w+)\s+(\d+)\s+(\d+:?\d+)+\s+(.*)/;
-export async function list(dir = '') {
-  let index = queue.push(port => {
-    return secondary({ host: socket.host, port }).then(({data}) => {
-      send('LIST', dir);
-
-      return data.then(items => {
-        return items.split('\n').map(item => {
-          if (item.indexOf('total') > -1 || !item) return;
-
-          let match = item.match(LIST_EXTRACTOR);
-
-          return {
-            path: normalize(dir + '/'),
-            type: match[1][0] === 'd' ? 'Directory' : 'File',
-            permissions: match[1].slice(1),
-            links: +match[2],
-            owner: match[3],
-            group: match[4],
-            size: +match[5],
-            lastModification: {
-              month: match[6],
-              day: match[7],
-              time: match[8]
-            },
-            name: match[9]
-          }
-        }).filter(item => item);
-      }, reportError)
-    });
-  });
-
-  return handleQueue(index - 1);
-}
-
-export async function namelist(dir = '') {
-  let index = queue.push(port => {
-    return secondary({ host: socket.host, port }).then(({data}) => {
-      send('NLST', dir);
-
-      return data.then(names => names.split('\n'), reportError);
-    });
-  });
-
-  return handleQueue(index - 1);
-}
-
-export async function secondary(properties = {}) {
-  let { host, port } = properties;
-
-  let url = encodeURI(host);
-
-  send('TYPE', 'I');
-
-  return new Promise((resolve, reject) => {
-    let alt = navigator.mozTCPSocket.open(url, port);
-
-    alt.onopen = e => {
-      let data = new Promise((resolve, reject) => {
-        let d = '';
-        alt.ondata = e => {
-          d += e.data;
-        }
-        alt.onerror = e => {
-          reject(e.data);
-        }
-        alt.onclose = e => {
-          console.log('<<', d);
-          resolve(d);
-        }
-      });
-      resolve({data});
-    }
-  })
-}
-
-const BUFFER_SIZE = 32000;
-export async function secondaryWrite(properties = {}, content) {
-  let { host, port } = properties;
-
-  let url = encodeURI(host);
-
-  send('TYPE', 'I');
-
-  return new Promise((resolve, reject) => {
-    let alt = navigator.mozTCPSocket.open(url, port);
-
-    alt.onopen = () => {
-      console.log('>>', content);
-      let step = 0;
-
-      (function send() {
-        if (!content) return;
-
-        let chunk = content.slice(0, BUFFER_SIZE);
-        content = content.slice(BUFFER_SIZE);
-
-        if (alt.send(chunk)) {
-          send();
-        } else {
-          alt.ondrain = () => {
-            console.log('drain');
-            send();
-          }
-        }
-      }());
-    }
-
-    alt.onclose = () => {
-      resolve();
-    }
-  })
-}
-
-export async function children(dir = '', gatherInfo) {
-  dir = normalize(dir);
-  if (FTP_CACHE[dir]) return FTP_CACHE[dir];
-
-  let childs = gatherInfo ? await list(dir) : await namelist(dir);
-
-  FTP_CACHE[dir] = childs;
-
-  return childs;
-}
-
-export async function getFile(path = '') {
-  path = normalize(path);
-
-  let ls = await list(path);
-
-  return ls[0];
-}
-
-export async function isDirectory(path = '') {
-  return (await getFile(path)).type === 'Directory';
-}
-
-export async function readFile(path = '') {
-  path = normalize(path);
-
-  let index = queue.push(port => {
-    return secondary({ host: socket.host, port }).then(({data}) => {
-      send('RETR', path);
-
-      return data;
-    });
-  })
-
-  return handleQueue(index - 1);
-}
-
-export async function writeFile(path = '', content) {
-  let index;
-  path = normalize(path);
-
-  if (type(content) === 'Blob') {
-    let reader = new FileReader();
-
-    index = queue.push(port => {
-      return new Promise((resolve, reject) => {
-        reader.addEventListener('loadend', () => {
-          send('TYPE', 'I');
-          send('STOR', path);
-
-          secondaryWrite({ host: socket.host, port }, reader.result)
-          .then(resolve, reject);
-        });
-
-        reader.readAsBinaryString(content);
-      })
-    });
-  } else {
-    index = queue.push(port => {
-      send('STOR', path);
-      return secondaryWrite({ host: socket.host, port }, content);
-    });
-  }
-
-  return handleQueue(index - 1);
-}
-
-export async function createFile(path = '') {
-  return writeFile(path, '');
-}
-
-export async function createDirectory(path = '') {
-  path = normalize(path);
-
-  send('MKD', path);
-}
-
-export async function remove(path = '') {
-  path = normalize(path);
-
-  let ls = await list(path);
-  send('DELE', path);
-  send('DELE', path + '/*.*');
-  send('RMD', path);
-}
-
-export async function move(file, newPath = '') {
-  let path = normalize(file.path + file.name);
-  newPath = normalize(newPath);
-
-  send('RNFR', path);
-  send('RNTO', newPath);
-}
-
-export async function copy(file, newPath = '') {
-  let path = normalize(file.path + file.name);
-  newPath = normalize(newPath);
-
-  let content = await readFile(path);
-  console.log(content);
-
-  return writeFile(newPath, content);
-}
-
-const LOOP_INTERVAL = 100;
-(function loopQueue() {
-  if (queue.length) {
-    pasv().then(queue[0]).then(result => {
-      queue.emit('done', {listener: queue[0], result});
-      queue.splice(0, 1);
-      loopQueue();
-    });
-  } else {
-    setTimeout(loopQueue, LOOP_INTERVAL);
-  }
-}());
-
-async function handleQueue(index) {
-  let fn = queue[index];
-
-  return new Promise(resolve => {
-    queue.on('done', ({listener, result}) => {
-      if (listener === fn) resolve(result);
-    });
-  });
-}

src/js/components/breadcrumb.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import changedir from 'actions/changedir';
 import { bind } from 'store';
-import Hammer from 'react-hammerjs';
 
 @connect(props)
 export default class Breadcrumb extends Component {
@@ -11,6 +9,7 @@ export default class Breadcrumb extends Component {
     let els = [];
 
     if (this.props.search) {
+      console.log('search');
       els = [
         <span key='000'>Search: {this.props.search}</span>
       ]
@@ -26,9 +25,7 @@ export default class Breadcrumb extends Component {
         let style = { zIndex: sumLength - index };
 
         return (
-          <Hammer onTap={bind(changedir(path))} key={index}>
+          <span key={index} onClick={bind(changedir(path))} style={style}>{dir}</span>
-            <span style={style}>{dir}</span>
-          </Hammer>
         );
       }));
 
@@ -42,9 +39,7 @@ export default class Breadcrumb extends Component {
           let style = { zIndex: arr.length - index};
 
           return (
-            <Hammer onTap={bind(changedir(path))} key={key}>
+            <span key={key} className='history' onClick={bind(changedir(path))} style={style}>{dir}</span>
-              <span className='history' style={style}>{dir}</span>
-            </Hammer>
           )
         });
 
@@ -62,7 +57,7 @@ export default class Breadcrumb extends Component {
   }
 
   componentDidUpdate() {
-    let container = this.refs.container;
+    let container = React.findDOMNode(this.refs.container);
     let currents = container.querySelectorAll('span:not(.history)');
 
     container.scrollLeft = currents[currents.length - 1].offsetLeft;

src/js/components/dialog.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import { template } from 'utils';
-import Hammer from 'react-hammerjs';
 
 export default class Dialog extends Component {
   render() {
@@ -10,11 +8,10 @@ export default class Dialog extends Component {
 
     let buttons = this.props.buttons.map((button, i) => {
       return (
-        <Hammer onTap={button.action.bind(this)}>
+        <button className={button.className + ' btn'} key={i}
-          <button className={button.className + ' btn'} key={i}>
+                onClick={button.action.bind(this)}>
-            {button.text}
+          {button.text}
-          </button>
+        </button>
-        </Hammer>
       )
     });
 
@@ -48,7 +45,7 @@ export default class Dialog extends Component {
   componentDidUpdate() {
     if (!this.props.value) return;
 
-    let input = this.refs.input;
+    let input = React.findDOMNode(this.refs.input);
 
     input.value = this.props.value;
   }

src/js/components/directory.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import changedir from 'actions/changedir';
 import store from 'store';
 import entry from './mixins/entry';
-import Hammer from 'react-hammerjs';
 
 export default class Directory extends Component {
   constructor() {
@@ -24,18 +22,17 @@ export default class Directory extends Component {
                                              : this.peek.bind(this);
 
     return (
-      <Hammer onTap={clickHandler}>
+      <div className='directory' ref='container'
-        <div className='directory' ref='container'
+           onClick={clickHandler}
-             onContextMenu={this.contextMenu.bind(this)}>
+           onContextMenu={this.contextMenu.bind(this)}>
 
-          {input}
+        {input}
-          {label}
+        {label}
 
-          <i></i>
+        <i></i>
-          <p>{this.props.name}</p>
+        <p>{this.props.name}</p>
-          <span>{this.props.children ? this.props.children + ' items' : ''}</span>
+        <span>{this.props.children ? this.props.children + ' items' : ''}</span>
-        </div>
+      </div>
-      </Hammer>
     );
   }
 
@@ -44,7 +41,6 @@ export default class Directory extends Component {
 
     let file = store.getState().get('files')[this.props.index];
 
-    const path = file.path.endsWith(file.name) ? file.path : file.path + file.name;
+    store.dispatch(changedir(file.path.replace(/^\//, '') + file.name));
-    store.dispatch(changedir(path));
   }
 }

src/js/components/file-list.js

@@ -1,11 +1,10 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import File from './file';
 import Directory from './directory';
 import store from 'store';
 import { type } from 'utils';
-import Hammer from 'react-hammerjs';
+import Hammer from 'hammerjs';
 import changedir from 'actions/changedir';
 
 @connect(props)
@@ -21,7 +20,7 @@ export default class FileList extends Component {
 
     let els = files.map((file, index) => {
       let selected = activeFile.indexOf(file) > -1;
-      if (file.type === 'File') {
+      if (type(file) === 'File') {
         return <File selectView={selectView} selected={selected} key={index} index={index} name={file.name} size={file.size} type={file.type} />;
       } else {
         return <Directory selectView={selectView} selected={selected} key={index} index={index} name={file.name} children={file.children} type={file.type} />
@@ -31,21 +30,24 @@ export default class FileList extends Component {
     let className= `file-list ${view}`;
 
     return (
-      <Hammer onSwipe={this.swipe} options={{ direction: Hammer.DIRECTION_RIGHT }}>
+      <div className={className} ref='container'>
-        <div className={className} ref='container'>
+        {els}
-          {els}
+      </div>
-        </div>
-      </Hammer>
     );
   }
 
-  swipe(e) {
+  componentDidMount() {
-    let current = store.getState().get('cwd');
+    let container = React.findDOMNode(this.refs.container);
-    let up = current.split('/').slice(0, -1).join('/');
+    let touch = Hammer(container);
 
-    if (up === current) return;
+    touch.on('swipe', e => {
+      let current = store.getState().get('cwd');
+      let up = current.split('/').slice(0, -1).join('/');
 
-    store.dispatch(changedir(up));
+      if (up === current) return;
+
+      store.dispatch(changedir(up));
+    }).set({direction: Hammer.DIRECTION_RIGHT});
   }
 }
 
@@ -57,3 +59,10 @@ function props(state) {
     view: state.get('settings').view || 'list'
   }
 }
+
+async function getFiles(dir) {
+  let storage = navigator.getDeviceStorage('sdcard');
+  let root = await storage.get(dir);
+
+  return await root.getFilesAndDirectories();
+}

src/js/components/file.js

@@ -1,10 +1,7 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import store from 'store';
 import { humanSize } from 'utils';
 import entry from './mixins/entry';
-import Hammer from 'react-hammerjs';
-import mime from 'mime';
 
 export default class File extends Component {
   constructor() {
@@ -25,18 +22,17 @@ export default class File extends Component {
                                              : this.open.bind(this);
 
     return (
-      <Hammer onTap={clickHandler}>
+      <div className='file' ref='container'
-        <div className='file' ref='container'
+           onClick={clickHandler}
-             onContextMenu={this.contextMenu.bind(this)}>
+           onContextMenu={this.contextMenu.bind(this)}>
 
-          {input}
+        {input}
-          {label}
+        {label}
 
-          <i></i>
+        <i></i>
-          <p>{this.props.name}</p>
+        <p>{this.props.name}</p>
-          <span>{humanSize(this.props.size)}</span>
+        <span>{humanSize(this.props.size)}</span>
-        </div>
+      </div>
-      </Hammer>
     );
   }
 
@@ -45,13 +41,12 @@ export default class File extends Component {
 
     let file = store.getState().get('files')[this.props.index];
 
-    const type = mime.lookup(file.name);
+    let name = file.type === 'application/pdf' ? 'view' : 'open';
-    let name = type === 'application/pdf' ? 'view' : 'open';
     new MozActivity({
       name,
       data: {
-        blob: file,
+        type: file.type,
-        type
+        blob: file
       }
     })
   }

src/js/components/header.js

@@ -1,11 +1,9 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import { toggle } from 'actions/navigation';
 import { show } from 'actions/dialog';
 import { search } from 'actions/files-view';
 import { bind } from 'store';
 import { connect } from 'react-redux';
-import Hammer from 'react-hammerjs';
 
 @connect(props)
 export default class Header extends Component {
@@ -13,22 +11,16 @@ export default class Header extends Component {
     let i;
 
     if (this.props.search) {
-      i = <Hammer onTap={bind(search())}>
+      i = <button onClick={bind(search())}><i className='icon-cross' /></button>
-            <button><i className='icon-cross' /></button>
-          </Hammer>
     } else {
-      i = <Hammer onTap={bind(show('searchDialog'))}>
+      i = <button onClick={bind(show('searchDialog'))}><i className='icon-search tour-item' /></button>
-            <button><i className='icon-search tour-item' /></button>
-          </Hammer>
     }
 
     return (
       <header>
-        <Hammer onTap={bind(toggle())}>
+        <button className='drawer tour-item' onTouchStart={bind(toggle())}>
-          <button className='drawer tour-item'>
+          <i className='icon-menu'></i>
-            <i className='icon-menu'></i>
+        </button>
-          </button>
-        </Hammer>
         <h1>Hawk</h1>
 
         {i}

src/js/components/menu.js

@@ -1,6 +1,4 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import Hammer from 'react-hammerjs';
 
 export const MENU_WIDTH = 245;
 
@@ -13,11 +11,7 @@ export default class Menu extends Component {
       let enabled = typeof item.enabled === 'function' ? item.enabled() : true
       let className = enabled ? '' : 'disabled';
 
-      return (
+      return <li key={index} className={className} onClick={item.action.bind(this)}>{item.name}</li>
-        <Hammer key={index} onTap={item.action.bind(this)}>
-          <li className={className}>{item.name}</li>
-        </Hammer>
-      );
     });
     let className = 'menu ' + (active ? 'active' : '');
 

src/js/components/mixins/entry.js

@@ -11,7 +11,7 @@ export default {
     e.stopPropagation();
 
     let file = store.getState().get('files')[this.props.index];
-    let rect = this.refs.container.getBoundingClientRect();
+    let rect = React.findDOMNode(this.refs.container).getBoundingClientRect();
     let {x, y, width, height} = rect;
 
     let left = window.innerWidth / 2 - MENU_WIDTH / 2,
@@ -34,7 +34,7 @@ export default {
     let current = (store.getState().get('activeFile') || []).slice(0);
     let file = store.getState().get('files')[this.props.index];
 
-    let check = this.refs.check;
+    let check = React.findDOMNode(this.refs.check);
 
     if (current.indexOf(file) > -1) {
       current.splice(current.indexOf(file), 1);

src/js/components/navigation.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import { hide as hideNavigation } from 'actions/navigation';
 import camelCase from 'lodash/string/camelCase';
@@ -70,6 +69,9 @@ export default class Navigation extends Component {
             <input id='showDirectoriesFirst' type='checkbox' defaultChecked={settings.showDirectoriesFirst} />
             <label htmlFor='showDirectoriesFirst'>Show Directories First</label>
           </li>
+          <li className='coming-soon'>
+            <label>Advanced Preferences</label>
+          </li>
         </ul>
 
         <p>External</p>

src/js/components/root.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import ReactDOM from 'react-dom';
 import FileList from 'components/file-list';
 import Navigation from 'components/navigation';
 import Header from 'components/header';
@@ -11,7 +10,6 @@ import Spinner from 'components/spinner';
 import { connect } from 'react-redux';
 import { hideAll as hideAllMenus } from 'actions/menu';
 import { hideAll as hideAllDialogs} from 'actions/dialog';
-import Hammer from 'react-hammerjs';
 
 import tour from 'tour';
 import changedir from 'actions/changedir';
@@ -29,39 +27,36 @@ let DeleteDialog = connect(state => state.get('deleteDialog'))(Dialog);
 let ErrorDialog = connect(state => state.get('errorDialog'))(Dialog);
 let CreateDialog = connect(state => state.get('createDialog'))(Dialog);
 let SearchDialog = connect(state => state.get('searchDialog'))(Dialog);
-let CompressDialog = connect(state => state.get('compressDialog'))(Dialog);
 
 export default class Root extends Component {
   render() {
     return (
-      <Hammer onTap={this.onClick.bind(this)}>
+      <div onTouchStart={this.touchStart.bind(this)}
-        <div onTouchStart={this.touchStart.bind(this)}>
+           onClick={this.onClick.bind(this)}>
-          <Header />
+        <Header />
-          <Breadcrumb />
+        <Breadcrumb />
-          <Navigation />
+        <Navigation />
-          <FileList />
+        <FileList />
-          <Toolbar />
+        <Toolbar />
 
-          <FileMenu id='file-menu' />
+        <FileMenu id='file-menu' />
-          <MoreMenu id='more-menu' />
+        <MoreMenu id='more-menu' />
 
-          <RenameDialog />
+        <RenameDialog />
-          <DeleteDialog />
+        <DeleteDialog />
-          <ErrorDialog />
+        <ErrorDialog />
-          <CreateDialog />
+        <CreateDialog />
-          <SearchDialog />
+        <SearchDialog />
-          <CompressDialog />
 
-          <Spinner />
+        <Spinner />
 
-          <div className='swipe-instruction tour-item'></div>
+        <div className='swipe-instruction tour-item'></div>
 
-          <div className='tour-dialog'>
+        <div className='tour-dialog'>
-            Hello! Tap each highlighted button to get an understanding of how they work.
+          Hello! Tap each highlighted button to get an understanding of how they work.
-          </div>
-          <button id='skip-tour'>Skip</button>
         </div>
-      </Hammer>
+        <button id='skip-tour'>Skip</button>
+      </div>
     );
   }
 

src/js/components/spinner.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 
 @connect(props)

src/js/components/toolbar.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import { refresh, selectView } from 'actions/files-view';
 import { show as showDialog } from 'actions/dialog';
 import { show as showMenu } from 'actions/menu';
@@ -7,33 +6,22 @@ import { active } from 'actions/file';
 import settings from 'actions/settings';
 import store, { bind } from 'store';
 import { MENU_WIDTH } from './menu';
-import Hammer from 'react-hammerjs';
 
 export default class Toolbar extends Component {
   render() {
     return (
       <div className='toolbar'>
-        <Hammer onTap={this.goUp}>
+        <button className='icon-back tour-item' onClick={this.goUp} />
-          <button className='icon-back tour-item' />
+        <button className='icon-plus tour-item' onClick={this.newFile} />
-        </Hammer>
+        <button className='icon-refresh tour-item' onClick={bind(refresh())} />
-        <Hammer onTap={this.newFile}>
+        <button className='icon-select tour-item' onClick={this.selectView} />
-          <button className='icon-plus tour-item'/>
+        <button className='icon-more tour-item' onClick={this.showMore.bind(this)} ref='more' />
-        </Hammer>
-        <Hammer onTap={bind(refresh())}>
-          <button className='icon-refresh tour-item'/>
-        </Hammer>
-        <Hammer onTap={this.selectView}>
-          <button className='icon-select tour-item'/>
-        </Hammer>
-        <Hammer onTap={this.showMore.bind(this)}>
-          <button className='icon-more tour-item' ref='more'/>
-        </Hammer>
       </div>
     );
   }
 
   showMore() {
-    let rect = this.refs.more.getBoundingClientRect();
+    let rect = React.findDOMNode(this.refs.more).getBoundingClientRect();
     let {x, y, width, height} = rect;
 
     let left = x + width - MENU_WIDTH,

src/js/dialogs.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { hide, hideAll, show } from 'actions/dialog';
 import { rename, remove, create, active } from 'actions/file';
 import { search } from 'actions/files-view';
-import { compress } from 'actions/compress';
 import store, { bind } from 'store';
 
 const INVALID_NAME = 'Please enter a valid name.';
@@ -17,7 +16,7 @@ export default {
       {
         text: 'File',
         action() {
-          let input = this.refs.input;
+          let input = React.findDOMNode(this.refs.input);
 
           if (!input.value) {
             this.props.dispatch(hideAll());
@@ -38,7 +37,7 @@ export default {
       {
         text: 'Directory',
         action() {
-          let input = this.refs.input;
+          let input = React.findDOMNode(this.refs.input);
 
           if (!input.value) {
             this.props.dispatch(hideAll());
@@ -59,7 +58,7 @@ export default {
       {
         text: 'Cancel',
         action() {
-          let input = this.refs.input;
+          let input = React.findDOMNode(this.refs.input);
           this.props.dispatch(hideAll());
           input.value = '';
         }
@@ -74,7 +73,7 @@ export default {
       {
         text: 'Cancel',
         action() {
-          let input = this.refs.input;
+          let input = React.findDOMNode(this.refs.input);
           this.props.dispatch(hideAll());
           input.value = '';
         }
@@ -82,7 +81,7 @@ export default {
       {
         text: 'Rename',
         action() {
-          let input = this.refs.input;
+          let input = React.findDOMNode(this.refs.input);
 
           if (!input.value) {
             this.props.dispatch(hideAll());
@@ -136,7 +135,7 @@ export default {
       {
         text: 'Cancel',
         action() {
-          let input = this.refs.input;
+          let input = React.findDOMNode(this.refs.input);
           this.props.dispatch(hideAll());
           input.value = '';
         }
@@ -144,13 +143,12 @@ export default {
       {
         text: 'Search',
         action() {
-          let input = this.refs.input;
+          let input = React.findDOMNode(this.refs.input);
 
           if (!input.value) {
             this.props.dispatch(hideAll());
             this.props.dispatch(active());
-            this.props.dispatch(show('errorDialog',
+            this.props.dispatch(show('errorDialog', {description: INVALID_SEARCH}));
-                                {description: INVALID_SEARCH}));
             return;
           }
 
@@ -162,45 +160,5 @@ export default {
         className: 'success'
       }
     ]
-  },
-  compressDialog: {
-    title: 'Archive',
-    description: 'Enter your desired archive name',
-    input: true,
-    buttons: [
-      {
-        text: 'Cancel',
-        action() {
-          let input = this.refs.input;
-          this.props.dispatch(hideAll());
-          input.value = '';
-        }
-      },
-      {
-        text: 'Create',
-        action() {
-          let input = this.refs.input;
-
-          if (!input.value) {
-            this.props.dispatch(hideAll());
-            this.props.dispatch(active());
-            this.props.dispatch(show('errorDialog',
-                                {description: INVALID_NAME}));
-            return;
-          }
-
-          if (input.value.slice(-4) !== '.zip') {
-            input.value += '.zip';
-          }
-
-          let activeFile = store.getState().get('activeFile');
-          this.props.dispatch(compress(activeFile, input.value))
-          this.props.dispatch(hideAll());
-          this.props.dispatch(active());
-          input.value = '';
-        },
-        className: 'success'
-      }
-    ]
   }
 }

src/js/main.js

@@ -1,22 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import * as ftp from 'api/ftp';
 import Root from 'components/root';
 import store from 'store';
 import { Provider } from 'react-redux';
 import './activities';
 
-ftp.connect({
-  host: '192.168.1.5',
-  port: 21,
-  username: 'mahdi',
-  password: 'heater0!'
-}).then(socket => {
-  window.socket = socket;
-  window.ftp = ftp;
-}, console.error.bind(console))
-
 let wrapper = document.getElementById('wrapper');
-ReactDOM.render(<Provider store={store}>
+React.render(<Provider store={store}>{() => <Root />}</Provider>, wrapper);
-  <Root />
-</Provider>, wrapper);

src/js/menus.js

@@ -71,20 +71,21 @@ const entryMenu = {
       enabled() {
         let active = store.getState().get('activeFile');
 
-        return active && active[0].name.slice(-4) === '.zip';
+        if (active) console.log(active[0].name);
+        return active && active[0].name.indexOf('.zip') > -1;
       },
       action() {
         let active = store.getState().get('activeFile');
 
         store.dispatch(decompress(active));
-        store.dispatch(hideAll());
       }
     },
     {
       name: 'Archive',
       action() {
-        store.dispatch(hideAll());
+        let active = store.getState().get('activeFile');
-        store.dispatch(show('compressDialog'));
+
+        store.dispatch(compress(active));
       }
     }
   ]
@@ -167,8 +168,9 @@ const moreMenu = {
     {
       name: 'Archive',
       action() {
-        store.dispatch(hideAll());
+        let active = store.getState().get('activeFile');
-        store.dispatch(show('compressDialog'));
+
+        store.dispatch(compress(active));
       }
     }
   ]

src/js/reducers/all.js

@@ -32,7 +32,6 @@ export default function(state = new Immutable.Map(), action) {
     deleteDialog: dialog(state, action, 'deleteDialog'),
     errorDialog: dialog(state, action, 'errorDialog'),
     createDialog: dialog(state, action, 'createDialog'),
-    searchDialog: dialog(state, action, 'searchDialog'),
+    searchDialog: dialog(state, action, 'searchDialog')
-    compressDialog: dialog(state, action, 'compressDialog')
   });
 }

src/js/reducers/cwd.js

@@ -1,5 +1,5 @@
 import { CHANGE_DIRECTORY, REFRESH, SETTINGS } from 'actions/types';
-import { children, CACHE, FTP_CACHE } from 'api/auto';
+import { children, CACHE } from 'api/files';
 import store from 'store';
 import { reportError, normalize } from 'utils';
 import { listFiles } from 'actions/files-view';
@@ -13,7 +13,6 @@ export default function(state = '', action) {
 
   if (action.type === REFRESH) {
     CACHE[state] = null;
-    FTP_CACHE[state] = null;
   }
 
   if (action.type === REFRESH || action.type === SETTINGS) {

src/js/reducers/files.js

@@ -1,7 +1,7 @@
 import { LIST_FILES, RENAME_FILE, DELETE_FILE, CREATE_FILE, MOVE_FILE, COPY_FILE, SEARCH, COMPRESS, DECOMPRESS } from 'actions/types';
 import zip from 'jszip';
 import { refresh } from 'actions/files-view';
-import * as auto from 'api/auto';
+import { move, remove, sdcard, createFile, readFile, writeFile, createDirectory, getFile, copy, children } from 'api/files';
 import { show } from 'actions/dialog';
 import store, { bind } from 'store';
 import { reportError, type, normalize } from 'utils';
@@ -39,7 +39,7 @@ export default function(state = [], action) {
   }
 
   if (action.type === CREATE_FILE) {
-    let fn = action.directory ? auto.createDirectory : auto.createFile;
+    let fn = action.directory ? createDirectory : createFile;
     fn(action.path).then(boundRefresh, reportError);
 
     return state;
@@ -48,7 +48,7 @@ export default function(state = [], action) {
   if (action.type === RENAME_FILE) {
     let all = Promise.all(action.file.map(file => {
       let cwd = store.getState().get('cwd');
-      return auto.move(file, cwd + '/' + action.name);
+      return move(file, cwd + '/' + action.name);
     }));
 
     all.then(boundRefresh, reportError);
@@ -57,7 +57,7 @@ export default function(state = [], action) {
 
   if (action.type === MOVE_FILE) {
     let all = Promise.all(action.file.map(file => {
-      return auto.move(file, action.newPath + '/' + file.name);
+      return move(file, action.newPath + '/' + file.name);
     }));
 
     all.then(boundRefresh, reportError);
@@ -66,7 +66,7 @@ export default function(state = [], action) {
 
   if (action.type === COPY_FILE) {
     let all = Promise.all(action.file.map(file => {
-      return auto.copy(file, action.newPath + '/' + file.name);
+      return copy(file, action.newPath + '/' + file.name);
     }));
 
     all.then(boundRefresh, reportError);
@@ -76,7 +76,7 @@ export default function(state = [], action) {
   if (action.type === DELETE_FILE) {
     let all = Promise.all(action.file.map(file => {
       let path = normalize((file.path || '') + file.name);
-      return auto.remove(path, true);
+      return remove(path, true);
     }))
 
     all.then(boundRefresh, reportError);
@@ -88,33 +88,38 @@ export default function(state = [], action) {
     let cwd = store.getState().get('cwd');
 
     let all = Promise.all(action.file.map(function addFile(file) {
+      console.log('addFile', file);
       let path = normalize((file.path || '') + file.name);
       let archivePath = path.slice(cwd.length);
       // directory
-      console.log(file);
+      if (!(file instanceof Blob)) {
-      if (file.type === 'Directory') {
         let folder = archive.folder(file.name);
 
-        return auto.children(path).then(files => {
+        return children(path).then(files => {
-          files = files.filter(file => file);
-
           return Promise.all(files.map(child => {
             return addFile(child);
+
+            // return readFile(childPath).then(content => {
+            //   let blob = new Blob([content]);
+            //   folder.file(child.name, blob);
+            // });
           }));
-        });
+        })
       }
 
-      return auto.readFile(path).then(content => {
+      return readFile(path).then(content => {
-        archive.file(archivePath, content);
+        archive.file(archivePath + '/' + file.name, content);
       });
     }))
 
     all.then(() => {
-      let blob = archive.generate({ type: 'blob' });
+      let buffer = archive.generate({ type: 'nodebuffer' });
+      console.log(buffer);
+      let blob = new Blob([buffer], { type: 'application/zip' });
 
       let cwd = store.getState().get('cwd');
-      let path = normalize(cwd + '/' + action.name);
+      let path = normalize(cwd + '/archive.zip');
-      return auto.writeFile(path, blob);
+      return writeFile(path, blob);
     }).then(boundRefresh).catch(reportError);
 
     return state;
@@ -123,7 +128,7 @@ export default function(state = [], action) {
   if (action.type === DECOMPRESS) {
     let file = action.file[0];
     let path = normalize((file.path || '') + file.name);
-    auto.readFile(path).then(content => {
+    readFile(path).then(content => {
       let archive = new zip(content);
       let files = Object.keys(archive.files);
 
@@ -134,7 +139,7 @@ export default function(state = [], action) {
         let cwd = store.getState().get('cwd');
         let filePath = normalize(cwd + '/' + name);
 
-        return auto.writeFile(filePath, blob);
+        return writeFile(filePath, blob);
       }));
 
       all.then(boundRefresh, reportError);
@@ -143,3 +148,7 @@ export default function(state = [], action) {
 
   return state;
 }
+
+function mov(file, newPath) {
+  return
+}

src/js/reducers/search.js

@@ -2,7 +2,7 @@ import { SEARCH, CHANGE_DIRECTORY, REFRESH } from 'actions/types';
 import store from 'store';
 import { reportError } from 'utils';
 import { listFiles } from 'actions/files-view';
-import { children } from 'api/auto';
+import { children } from 'api/files';
 import { type, normalize } from 'utils';
 
 export default function(state = '', action) {

src/js/utils.js

@@ -27,8 +27,7 @@ export function getKey(object = store.getState().toJS(), key) {
 
 export function reportError(err) {
   console.error(err);
-  let msg = err.message || err.target.error.message;
+  let action = show('errorDialog', {description: err.message});
-  let action = show('errorDialog', {description: msg});
   store.dispatch(action);
 }
 
@@ -51,17 +50,3 @@ export function humanSize(size) {
     }
   }
 }
-
-export function getLength(string) {
-  var byteLen = 0;
-  for (var i = 0; i < string.length; i++) {
-    var c = string.charCodeAt(i);
-    byteLen += c < (1 <<  7) ? 1 :
-               c < (1 << 11) ? 2 :
-               c < (1 << 16) ? 3 :
-               c < (1 << 21) ? 4 :
-               c < (1 << 26) ? 5 :
-               c < (1 << 31) ? 6 : Number.NaN;
-  }
-  return byteLen;
-}

src/less/components/toolbar.less

@@ -11,10 +11,4 @@
   box-sizing: border-box;
 
   background: @light-gray;
-
-  button {
-    flex: 1;
-    width: auto;
-    background-position: center center;
-  }
 }

src/manifest.webapp

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0",
+  "version": "1.0.0",
   "name": "Hawk",
   "description": "Keep an eye on your files with a full-featured file manager",
   "launch_path": "/index.html",
@@ -30,9 +30,6 @@
     "device-storage:music": {
       "access": "readwrite",
       "description": "We need access to your files in order to give you the functionality of listing, reading, opening and writing files in your storage"
-    },
-    "tcp-socket": {
-      "description": "FTP Browser: Used to connect to FTP servers"
     }
   },
   "installs_allowed_from": [