first commit

Evgeny- · Jun 20, 2018 · 42693b0 · 42693b0
commit 42693b0
Show file tree

Hide file tree

Showing 38 changed files with 101,199 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+
+/1.pdf
+/2.pdf
+/compressor.html
+/image.html
+/node_modules/
+.idea
+/.idea
+/temp/app.es6.js
+/temp/app.js
+/fonts/
+/images/
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,128 @@
+module.exports = function(grunt) {
+   var jsTemp = 'temp/app.js';
+
+   var jsVendors = [
+      "scripts/vendors/angular.min.js",
+      "scripts/vendors/jquery-3.2.1.min.js",
+      "scripts/vendors/rangeslider.js",
+      //"scripts/vendors/pdf.worker.js",
+      "scripts/vendors/pdf.js",
+      "scripts/vendors/pako.min.js",
+      "scripts/vendors/jszip.min.js",
+      "scripts/vendors/UPNG.js",
+      "scripts/vendors/UZIP.js",
+      "scripts/vendors/image-compressor.js",
+   ];
+
+   var jsPriority = [
+      "scripts/app/app.js",
+
+      "scripts/app/models/*.js",
+
+      "build/templates.js",
+
+      "scripts/app/directives/*.js",
+      "scripts/app/filters/*.js",
+      "scripts/app/controllers/*.js",
+      "scripts/app/controllers/*/*.js"
+   ];
+
+   grunt.initConfig({
+      concat: {
+         rel :{
+            src: jsVendors.concat([jsTemp]),
+            dest: 'build/scripts.js'
+         },
+         temp :{
+            src: jsPriority,
+            dest: 'temp/app.es6.js'
+         }
+      },
+
+      watch: {
+         jsTemp: {
+            files: jsPriority,
+            tasks: ['concat:temp', 'babel'] //, 'uglify'
+         },
+         jsAll: {
+            files: [jsTemp],
+            tasks: ['concat:rel'] //, 'uglify'
+         },
+         less: {
+            files: ['styles/**.less', 'styles/*/*.less'],
+            tasks: ['less']
+         },
+         templates: {
+            files: ['templates/*.html', 'templates/*/*.html'],
+            tasks: ['ngtemplates']
+         },
+         /*build: {
+            files: ['build/*.*', 'index.html'],
+            tasks: ['assets_inline']
+         }*/
+      },
+
+      babel: {
+         options: {
+            sourceMap: false,
+            presets: ['env']
+         },
+         dist: {
+            files: {
+               'temp/app.js': 'temp/app.es6.js'
+            }
+         }
+      },
+
+      uglify : {
+         my_target: {
+            files: {
+               'build/scripts.js' : ['build/scripts.js']
+            }
+         }
+      },
+
+      ngtemplates: {
+         App: {
+            src: ['templates/*.html', 'templates/*/*.html'],
+            dest: 'build/templates.js',
+            options:  {}
+         }
+      },
+
+      less: {
+         options: {
+            compress: true,
+            ieCompat: true
+         },
+         styles: {
+            files: {
+               'build/styles.css': ['styles/@includes.less']
+            }
+         }
+      },
+
+      assets_inline: {
+         options: {
+            inlineSvg: true,
+            inlineSvgBase64: true,
+            inlineImg: true,
+            inlineLinkTags: true
+         },
+         all: {
+            files: {
+               'compressor.html': 'index.html'
+            }
+         }
+      }
+   });
+
+   ['grunt-contrib-concat', 'grunt-contrib-watch', 'grunt-assets-inline', 'grunt-babel',
+      'grunt-contrib-uglify', 'assemble-less', 'grunt-angular-templates']
+      .forEach(function(task) {
+         grunt.loadNpmTasks(task);
+      });
+
+   grunt.registerTask('default', ['ngtemplates', 'concat:temp', 'babel', 'concat:rel', 'less', 'watch']); //, 'uglify'
+   grunt.registerTask('build', ['ngtemplates', 'concat:temp', 'babel', 'concat:rel', 'less', 'uglify', 'assets_inline']); //
+};
diff --git a/bg.png b/bg.png
diff --git a/build/scripts.js b/build/scripts.js
diff --git a/build/styles.css b/build/styles.css
diff --git a/build/templates.js b/build/templates.js
diff --git a/index.html b/index.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html lang="en" ng-app="App">
+
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+   <title>Compressor</title>
+
+   <link rel="stylesheet" href="build/styles.css"/>
+   <style>
+      [ng-cloak] { display: none; }
+   </style>
+   <script src="build/scripts.js"></script>
+</head>
+
+<body ng-controller="Main">
+
+<div class="content">
+   <div class="picker-container">
+      <div class="picker-item-container">
+         <div class="picker-item" file-picker="handleDocument">
+            <div class="picker-item-title">Document images</div>
+            <div class="picker-item-description">
+               Images with text (e.g. certificates)<br>
+               Supported formats .pdf, .jpg, .png, .gif</div>
+            <div class="picker-item-button-container">
+               <button class="picker-item-button -secondary">Pick image</button>
+            </div>
+         </div>
+      </div>
+
+      <div class="picker-item-container">
+         <div class="picker-item" file-picker="handlePhoto">
+            <div class="picker-item-title">Photos and pictures</div>
+            <div class="picker-item-description">
+               Images without text (e.g. photos)<br>
+               Supported formats .pdf, .jpg, .png, .gif</div>
+            <div class="picker-item-button-container">
+               <button class="picker-item-button -secondary">Pick photo</button>
+            </div>
+         </div>
+      </div>
+
+      <div class="picker-item-container">
+         <div class="picker-item" file-picker="handleFile">
+            <div class="picker-item-title">Other files</div>
+            <div class="picker-item-description">
+               Non pictures files<br>All formats are supported</div>
+            <div class="picker-item-button-container">
+               <button class="picker-item-button -secondary">Pick file</button>
+            </div>
+         </div>
+      </div>
+   </div>
+
+   <div class="files-table-container">
+      <table class="files-table" ng-if="files.length">
+         <tr>
+            <th width="100px">Type</th>
+            <th>File name</th>
+            <th width="70px">Orig size</th>
+            <th width="70px">New size</th>
+            <th width="70px">Diff</th>
+            <th colspan="2"></th>
+         </tr>
+
+         <tr ng-repeat="file in files">
+            <td ng-bind="file.getType()"></td>
+            <td ng-bind="file.getName()"></td>
+            <td ng-bind="file.getOriginalSize()|bytes"></td>
+            <td ng-bind="file.getNewSize()|bytes"></td>
+            <td ng-bind="file.getSizeDiff() ? file.getSizeDiff() + '%' : 'TBD'"></td>
+            <td width="30px">
+               <a ng-click="editFile(file)" ng-if="file.editable">Edit</a>
+            </td>
+            <td width="70px">
+               <a ng-click="file.download()">Download</a>
+            </td>
+         </tr>
+
+         <tr ng-if="files.length > 1">
+            <td colspan="2"><b>Overall</b></td>
+            <td><b ng-bind="getOverallOriginalSize()|bytes"></b></td>
+            <td><b ng-bind="getOverallNewSize()|bytes"></b></td>
+            <td><b ng-bind="getOverallDiffString()"></b></td>
+            <td></td>
+            <td></td>
+         </tr>
+      </table>
+   </div>
+
+   <div class="buttons-container" ng-if="files.length">
+      <button ng-click="downloadArchive()">Download archive</button>
+   </div>
+</div>
+
+<div class="editor-container" ng-show="editorOpened">
+   <div class="editor">
+      <div class="editor-buttons">
+         <button ng-click="closeEditor()" class="-secondary">Cancel</button>
+         <button ng-click="applyFile()">Accept</button>
+      </div>
+      <div class="editor-slider">
+         <input class="js-range" type="range" min="0" max="100" step="10">
+         <div class="-right">High</div>
+         <div class="-left" ng-if="getFile().isDoc">Low colors</div>
+         <div class="-left" ng-if="getFile().isImage">Low quality</div>
+      </div>
+      <div class="editor-text" ng-show="!inProgress">
+         {{ getFile().getOriginalSize()|bytes }} 🠦 {{ getFile().getNewSize()|bytes }}
+         <b>Saved {{ getFile().getSizeDiff() }}%</b>
+      </div>
+      <div class="editor-text" ng-show="inProgress">
+         Processing...
+      </div>
+
+      <div class="editor-image-preview">
+         <img ng-src="{{ getFilePreview() }}">
+      </div>
+   </div>
+
+   <div class="editor-overlay" ng-click="closeEditor()"></div>
+</div>
+
+</body>
+</html>
diff --git a/lenna.png b/lenna.png
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "compressor",
+  "devDependencies": {
+    "assemble-less": "*",
+    "babel-core": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "grunt-angular-templates": "*",
+    "grunt-assets-inline": "*",
+    "grunt-babel": "^7.0.0",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-uglify": "*",
+    "grunt-contrib-watch": "*"
+  }
+}