Initial commit.

web/public/src/app/controllers.js

@@ -0,0 +1,105 @@
+export class FilesController {
+  constructor($scope, UserService, files) {
+    $scope.$root.user = UserService.get();
+    files.$promise.then(function() {
+      $scope.$root.loadingView = false;
+    });
+    $scope.header = 'full';
+    if (!$scope.$root.files) {
+      $scope.$root.files = files;
+    }
+    $scope.remove = function(file) {
+      $scope.$root.files.some(function(existingFile, index) {
+        if (file.id === existingFile.id) {
+          file.$remove(function() {
+            $scope.$root.showDropdown = false;
+            $scope.$root.files.splice(index, 1);
+          });
+          return true;
+        }
+        return false;
+      });
+    };
+  }
+}
+FilesController.$inject = ['$scope', 'UserService', 'files'];
+
+export class FileController {
+  constructor ($scope, $rootScope, $routeParams, ReconnectingWebSocket, file) {
+    file.$promise.then(function() {
+      $scope.$root.loadingView = false;
+      $scope.header = 'small';
+      $scope.file = file;
+      $scope.direct = '/file/' + file.id + '/' + file.name;
+      $rootScope.pageTitle = ' - ' + file.name;
+      if (file.status === 'uploading') {
+        file.percent = 0;
+        var ws = new ReconnectingWebSocket('wss://' + window.location.hostname + window.settings.api + '/file/' + file.id);
+        ws.onmessage = function (msg) {
+          var evt = JSON.parse(msg.data);
+          $rootScope.$broadcast(evt.type, evt.data);
+        };
+        ws.onopen = function() {
+          ws.send(JSON.stringify({authorization: window.user.token}));
+        };
+        $rootScope.$on('file-progress', function(evt, data) {
+          $scope.file.percent = data.complete;
+        });
+        $rootScope.$on('file-added', function(evt, data) {
+          $scope.file = data;
+        });
+        $rootScope.$on('file-accepted', function(evt, data) {
+          $scope.file = data;
+        });
+      }
+    }, function() {
+      $rootScope.navError = true;
+      $scope.$root.loadingView = false;
+    });
+  }
+}
+FileController.$inject = ['$scope', '$rootScope', '$routeParams', 'WebSocket',  'file'];
+
+export class ProController {
+  constructor ($scope, $http, UserService) {
+    $scope.$root.loadingView = false;
+    $scope.user = UserService.get();
+    $scope.header = 'full';
+    $scope.cancel = function() {
+      $http.post('/pro/cancel').success(function() {
+        window.location.reload(true);
+      }).error(function(data) {
+        console.log(new Error(data));
+      });
+    };
+  }
+}
+ProController.$inject = ['$scope', '$http', 'UserService'];
+
+export class AccountController {
+  constructor ($scope, UserService, SettingService) {
+    $scope.$root.loadingView = false;
+    $scope.$root.user = UserService.get();
+    $scope.submit = function(form) {
+      $scope.updated = false;
+      $scope.error = false;
+      SettingService.update(form).then(function() {
+        $scope.updated = true;
+        delete $scope.user.new_password;
+        delete $scope.user.current_password;
+      }, function(response) {
+        $scope.error = response.data.error.message;
+      });
+    };
+  }
+}
+AccountController.$inject = ['$scope', 'UserService', 'SettingService'];
+
+export class BillingController {
+  constructor ($scope, UserService, TransactionService) {
+    $scope.$root.loadingView = false;
+    $scope.$root.user = UserService.get();
+    $scope.transactions = TransactionService.query();
+  }
+}
+BillingController.$inject = ['$scope', 'UserService', 'TransactionService'];

web/public/src/app/directives.js

@@ -0,0 +1,121 @@
+import $ from 'jquery';
+
+export function appHeader() {
+  return {
+    restrict: 'E',
+    templateUrl: '/build/partials/header.html',
+    replace: true,
+    link: function postLink(scope) {
+      scope.userMD5 = window.user.md5;
+      scope.email = window.user.email;
+      scope.pro = (window.user.type === 'Pro');
+    }
+  };
+}
+
+
+export function appFooter() {
+  return {
+    restrict: 'E',
+    templateUrl: '/build/partials/footer.html',
+    replace: true,
+    link: function postLink(scope) {
+      scope.userMD5 = window.user.md5;
+      scope.email = window.user.email;
+      scope.pro = (window.user.type === 'Pro');
+    }
+  };
+}
+
+
+export function menuDropdown() {
+  return function($scope, element) {
+    $scope.$root.overlayClick = function overlayClick() {
+      $scope.$root.showDropdown = false;
+      $('.dropdown').hide();
+    };
+    var activeDropdown = $(element).find('.dropdown');
+    element.on('click', function(e) {
+      if (activeDropdown.not(':visible').length > 0) {
+        $('.dropdown').hide();
+        $scope.$root.showDropdown = true;
+        activeDropdown.show();
+      } else if (e.target === element.find('img')[0]) {
+        $scope.$root.showDropdown = false;
+        activeDropdown.hide();
+      }
+      $scope.$apply();
+    });
+  };
+}
+
+
+export function searchShortcut ($document) {
+  return function($scope, element) {
+    $document.bind('keypress', function(event) {
+      if(event.which === 47) {
+        if (['INPUT', 'TEXTAREA'].indexOf(document.activeElement.tagName) < 0) {
+          element[0].focus();
+          event.preventDefault();
+        }
+      }
+    });
+  };
+}
+
+
+export function stripeSubscribe($http) {
+  const handler = window.StripeCheckout.configure({
+    key: window.settings.stripePublic,
+    image: '/images/stripe-128.png',
+    token: function(token) {
+      $http.post('/pro/create', {stripeToken: token})
+      .success(function(data) {
+        if (data.status === 'active') {
+          window.user.plan = 'Pro';
+          window.location.reload(true);
+        }
+      })
+      .error(function() {
+        alert('Error upgrading your account');
+      });
+    }
+  });
+  return function(scope, element) {
+    element.on('click', function() {
+      // Open Checkout with further options
+      handler.open({
+        name: 'Hostr',
+        email: window.user.email,
+        description: 'Hostr Pro Monthly',
+        amount: 600,
+        currency: 'USD',
+        panelLabel: 'Subscribe {{amount}}',
+        billingAddress: false
+      });
+    });
+  };
+}
+
+// angular.module('hostr').directive('clippy', ['files', function factory() {
+//   return function(scope, element, attrs) {
+//     element = element[0];
+//     var client = new ZeroClipboard(element);
+//     client.on('ready', function(readyEvent) {
+//       element.addEventListener('click', function(event) {
+//         event.preventDefault();
+//       });
+//
+//       client.on( 'aftercopy', function( event ) {
+//         if (element.innerHTML == 'Copy Link') {
+//           element.innerHTML = 'Copied!';
+//           setTimeout(function() {
+//             if (element) {
+//               element.innerHTML = 'Copy Link';
+//             }
+//           }, 1500);
+//         }
+//       });
+//     });
+//   }
+// }]);

web/public/src/app/directives/dropzone.js

@@ -0,0 +1,154 @@
+import Dropzone from 'dropzone';
+
+function guid() {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+               .toString(16)
+               .substring(1);
+  }
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
+         s4() + '-' + s4() + s4() + s4();
+}
+
+export default function dropzone(FileService, $cacheFactory) {
+  var dropOverlay = document.getElementById('filedrop-overlay');
+  var dropzoneEl;
+  var errorTimeout;
+  return function($scope) {
+    $scope.$on('$viewContentLoaded', function() {
+      if (!dropzoneEl) {
+        $scope.$root.uploadingFiles = [];
+        var clickable = [].slice.call(document.querySelectorAll('.choose-file'));
+
+        dropzoneEl = new Dropzone(document.body, {
+            url: window.settings.apiURL + '/file',
+            maxFilesize: window.user.maxFileSize / 1024 / 1024,
+            maxThumbnailFilesize: 5,
+            thumbnailWidth: 150,
+            thumbnailHeight: 98,
+            parallelUploads: 1,
+            uploadMultiple: false,
+            clickable: clickable.length ? clickable : false,
+            autoDiscover: false,
+            headers: {'Authorization': ':' + window.user.token},
+            previewsContainer: false
+        });
+        dropzoneEl.on('thumbnail', function(file, thumbnail){
+          file.thumbnail = thumbnail;
+          $scope.$apply();
+        });
+        dropzoneEl.on('addedfile', function(file){
+          var id = guid();
+          file.guid = id;
+          $scope.$root.uploadingFiles.push(file);
+          $scope.$apply();
+        });
+        dropzoneEl.on('sending', function(file, xhr) {
+          xhr.setRequestHeader('hostr-guid', file.guid);
+        });
+        dropzoneEl.on('uploadprogress', function(file, progress) {
+          $scope.$root.progress = {
+            name: file.name,
+            percent: progress,
+            status: 'Uploading'
+          };
+          if (progress === 100) {
+            $scope.$root.progress.status = 'Processing';
+          }
+          $scope.$apply();
+        });
+        dropzoneEl.on('complete', function(file){
+          delete $scope.$root.progress;
+          $scope.$apply();
+          $scope.$root.uploadingFiles.some(function(uploadingFile, index) {
+            if (uploadingFile.guid === file.guid) {
+              $scope.$root.uploadingFiles.splice(index, 1);
+              $scope.$apply();
+              return true;
+            }
+            return false;
+          });
+        });
+        dropzoneEl.on('error', function(evt, error){
+          if (error.error) {
+            $scope.$root.uploadError = 'Error uploading file: ' + evt.name + '. ' + error.error.message;
+          }
+          else if (evt.name) {
+            $scope.$root.uploadError = 'Error uploading file: ' + evt.name + '. ' + error;
+          } else {
+            if (error[0] !== '<') {
+              $scope.$root.uploadError = 'Uknown error during upload';
+            }
+          }
+          $scope.$apply();
+          clearTimeout(errorTimeout);
+          errorTimeout = setTimeout(function() {
+            $scope.$root.uploadError = '';
+            $scope.$apply();
+          }, 5000);
+        });
+
+        var addFile = function(newFile) {
+          if (!$scope.$root.files.some(function (file) {
+              return file.id === newFile.id;
+            })) {
+            var cache = $cacheFactory.get('files-cache');
+            cache.removeAll();
+            var file = new FileService(newFile);
+            $scope.$root.files.unshift(file);
+            $scope.$root.user.uploads_today++;
+            $scope.$apply();
+          }
+        };
+
+        dropzoneEl.on('success', function(file, response){
+          addFile(response);
+        });
+        $scope.$on('file-added', function(event, data){
+          addFile(data);
+        });
+        $scope.$on('file-accepted', function(event, data){
+          $scope.$root.uploadingFiles.some(function(file) {
+            if (file.guid === data.guid) {
+              file.id = data.id;
+              file.href = data.href;
+              $scope.$apply();
+              return true;
+            }
+          });
+        });
+        $scope.$on('file-deleted', function(evt, data) {
+          $scope.$root.files.forEach(function(file, index) {
+            if(data.id === file.id) {
+              delete $scope.$root.files[index];
+              $scope.$digest();
+            }
+          });
+        });
+
+        document.body.addEventListener('dragenter', function(){
+          dropOverlay.style.display = 'block';
+        });
+
+        dropOverlay.addEventListener('dragleave', function(event){
+          if (event.target.outerText !== 'Drop files to upload' || event.x === 0) {
+            dropOverlay.style.display = 'none';
+          }
+        });
+
+        dropOverlay.addEventListener('drop', function(){
+          dropOverlay.style.display = 'none';
+        });
+      } else {
+        var clicker = [].slice.call(document.querySelectorAll('.choose-file'));
+        if (clicker) {
+          clicker.forEach(function(el) {
+            el.addEventListener('click', function() {
+              return dropzoneEl.hiddenFileInput.click();
+            });
+          });
+        }
+      }
+    });
+  };
+}

web/public/src/app/directives/lazy-src.js

@@ -0,0 +1,222 @@
+import $ from 'jquery';
+
+export default function lazySrc($window, $document) {
+  var lazyLoader = (function() {
+    var images = [];
+    var renderTimer = null;
+    var renderDelay = 100;
+    var win = $($window);
+    var doc = $($document);
+    var documentHeight = doc.height();
+    var documentTimer = null;
+    var documentDelay = 2000;
+    var isWatchingWindow = false;
+
+    // ---
+    // PUBLIC METHODS.
+    // ---
+    function addImage(image) {
+      images.push(image);
+      if (!renderTimer) {
+        startRenderTimer();
+      }
+
+      if (!isWatchingWindow) {
+        startWatchingWindow();
+      }
+    }
+
+    let removeImage = function(image) {
+      for (let i = 0; i < images.length; i++) {
+        if (images[i] === image ) {
+          images.splice(i, 1);
+          break;
+        }
+      }
+      if ( !images.length ) {
+        clearRenderTimer();
+        stopWatchingWindow();
+      }
+    };
+
+    // ---
+    // PRIVATE METHODS.
+    // ---
+
+    function clearRenderTimer() {
+      clearTimeout( renderTimer );
+      renderTimer = null;
+    }
+
+    function checkImages() {
+      var visible = [];
+      var hidden = [];
+      var windowHeight = win.height();
+      var scrollTop = win.scrollTop();
+      var topFoldOffset = scrollTop;
+      var bottomFoldOffset = ( topFoldOffset + windowHeight );
+
+      for (let i = 0; i < images.length; i++) {
+        var image = images[ i ];
+        if ( image.isVisible( topFoldOffset, bottomFoldOffset ) ) {
+          visible.push( image );
+        } else {
+          hidden.push( image );
+        }
+      }
+
+      for (let i = 0; i < visible.length; i++) {
+        visible[ i ].render();
+      }
+
+      images = hidden;
+
+      clearRenderTimer();
+
+      if ( !images.length ) {
+        stopWatchingWindow();
+      }
+    }
+
+    function startRenderTimer() {
+      renderTimer = setTimeout( checkImages, renderDelay );
+    }
+
+    function checkDocumentHeight() {
+      if ( renderTimer ) {
+        return;
+      }
+
+      var currentDocumentHeight = doc.height();
+      if ( currentDocumentHeight === documentHeight ) {
+        return;
+      }
+
+      documentHeight = currentDocumentHeight;
+
+      startRenderTimer();
+    }
+
+    function windowChanged() {
+      if (!renderTimer) {
+        startRenderTimer();
+      }
+    }
+
+    function startWatchingWindow() {
+
+      isWatchingWindow = true;
+
+      win.on( 'resize.lazySrc', windowChanged );
+      win.on( 'scroll.lazySrc', windowChanged );
+
+      documentTimer = setInterval( checkDocumentHeight, documentDelay );
+    }
+
+    function stopWatchingWindow() {
+      isWatchingWindow = false;
+
+      win.off( 'resize.lazySrc' );
+      win.off( 'scroll.lazySrc' );
+
+      clearInterval( documentTimer );
+    }
+
+    return ({
+      addImage: addImage,
+      removeImage: removeImage
+    });
+  })();
+
+  function LazyImage( element ) {
+    var source = null;
+    var isRendered = false;
+    var height = null;
+
+    element = $(element);
+
+    // ---
+    // PUBLIC METHODS.
+    // ---
+    function isVisible( topFoldOffset, bottomFoldOffset ) {
+      if (!element.is(':visible')) {
+        //return( false );
+      }
+
+      bottomFoldOffset = bottomFoldOffset + 50;
+
+      if ( height === null ) {
+        height = element.height();
+      }
+
+      var top = element.offset().top;
+      var bottom = ( top + height );
+
+      return (
+          (
+            ( top <= bottomFoldOffset ) &&
+            ( top >= topFoldOffset )
+          )
+        ||
+          (
+            ( bottom <= bottomFoldOffset ) &&
+            ( bottom >= topFoldOffset )
+          )
+        ||
+          (
+            ( top <= topFoldOffset ) &&
+            ( bottom >= bottomFoldOffset )
+          )
+      );
+
+    }
+
+    function renderSource() {
+      element[ 0 ].src = source;
+      element[ 0 ].classList.add('loaded');
+    }
+
+    function render() {
+      isRendered = true;
+      renderSource();
+    }
+
+    function setSource( newSource ) {
+      source = newSource;
+      if ( isRendered ) {
+        renderSource();
+      }
+    }
+
+    return ({
+      isVisible: isVisible,
+      render: render,
+      setSource: setSource
+    });
+  }
+
+  function link( $scope, element, attributes ) {
+    var lazyImage = new LazyImage( element );
+
+    lazyLoader.addImage( lazyImage );
+
+    attributes.$observe(
+      'lazySrc',
+      function( newSource ) {
+        lazyImage.setSource( newSource );
+      }
+    );
+
+    $scope.$on(
+      '$destroy',
+      function() {
+        lazyLoader.removeImage( lazyImage );
+      }
+    );
+  }
+
+  return ({
+    link: link,
+    restrict: 'A'
+  });
+}

web/public/src/app/filters.js

@@ -0,0 +1,33 @@
+export function fileSize() {
+  return function(input) {
+    if (input >= 1073741824) {
+      input = Math.round((input / 1073741824) * 10) / 10 + 'GB';
+    } else {
+      if (input >= 1048576) {
+        input = Math.round((input / 1048576) * 10) / 10 + 'MB';
+      } else {
+        if (input >= 1024) {
+          input = Math.round((input / 1024) * 10) / 10 + 'KB';
+        } else {
+          input = Math.round(input) + 'B';
+        }
+      }
+    }
+    return input;
+  };
+}
+
+
+export function direct() {
+  return function(file) {
+    if(file.name) {
+      if (file.direct && file.name.split('.').pop().toLowerCase() === 'psd') {
+        return file.direct['970x'].replace('/970/', '/').slice(0, -4);
+      } else if (file.direct && file.direct['970x']) {
+        return file.direct['970x'].replace('/970/', '/');
+      } else {
+        return file.href.replace('hostr.co/', 'hostr.co/file/') + '/' + file.name;
+      }
+    }
+  };
+}

web/public/src/app/services.js

@@ -0,0 +1,72 @@
+export class FileService {
+	constructor($resource, $cacheFactory) {
+    var cache = $cacheFactory('files-cache');
+    return $resource(window.settings.apiURL + '/file/:id', {id: '@id'}, {
+      query: {method: 'GET', isArray: true, cache: cache,
+        params: {perpage: 0, all: true}
+      },
+      delete: {method: 'DELETE', isArray: true, cache: cache}
+    });
+	}
+
+	static factory($resource, $cacheFactory) {
+    return new FileService($resource, $cacheFactory);
+  }
+}
+
+export class UserService {
+	constructor($resource) {
+		return $resource(window.settings.apiURL + '/user');
+	}
+
+	static factory($resource) {
+    return new UserService($resource);
+  }
+}
+
+export class EventService {
+	constructor($rootScope, ReconnectingWebSocket) {
+		if (window.user && WebSocket) {
+      let ws = new ReconnectingWebSocket('wss' + window.settings.apiURL.replace('https', '').replace('http', '') + '/user');
+      ws.onmessage = function (msg) {
+        var evt = JSON.parse(msg.data);
+        $rootScope.$broadcast(evt.type, evt.data);
+      };
+      ws.onopen = function() {
+        ws.send(JSON.stringify({authorization: window.user.token}));
+      };
+    }
+    return true;
+	}
+
+	static factory($rootScope, ReconnectingWebSocket) {
+		return new EventService($rootScope, ReconnectingWebSocket);
+	}
+}
+
+export class TransactionService {
+	constructor ($resource, $cacheFactory) {
+    var cache = $cacheFactory('transaction-cache');
+    return $resource(window.settings.apiURL + '/user/transaction/:id', {id: '@id'}, {
+      query: {method: 'GET', isArray: true, cache: cache}
+    });
+  }
+
+	static factory($resource, $cacheFactory) {
+    return new TransactionService($resource, $cacheFactory);
+  }
+}
+
+export class SettingService {
+	constructor ($http) {
+    var service = {};
+    service.update = function(data) {
+      return $http.post(window.settings.apiURL + '/user/settings', data);
+    };
+    return service;
+  }
+
+	static factory($http) {
+    return new SettingService($http);
+  }
+}