Glyph Inspector App

.gitmodules

@@ -0,0 +1,9 @@
+[submodule "lib/ufoJS"]
+	path = lib/ufoJS
+	url = [email protected]:graphicore/ufoJS.git
+[submodule "lib/obtainJS"]
+	path = lib/obtainJS
+	url = [email protected]:graphicore/obtainJS.git
+[submodule "lib/zip"]
+	path = lib/zip
+	url = https://github.com/gildas-lormeau/zip.js

app/fileUploader/app-controller.js

@@ -0,0 +1,78 @@
+define([
+	'../../../lib/zip/WebContent/zip'
+    , '../glyphInspector/file-service'
+], function(Zip) {
+	"use strict";
+	function FileUploaderController($scope, fileService) {
+		this.$scope = $scope;
+		this.$scope.name = 'fileUploader';
+		this.requiredFeaturesAvailable();
+        this.$scope.uploaderText = "Drop down .ufo zip here";
+		this.$scope.file;
+		this.$scope.$watch('file', this.onFileReady.bind(this));
+        this.fileService = fileService;
+
+	}
+
+	FileUploaderController.$inject = ['$scope', 'fileService'];
+	var _p = FileUploaderController.prototype;
+
+	_p.requiredFeaturesAvailable = function() {
+		this.$scope.requiredFeaturesAvailable = (
+			!!window.File &&
+			!!window.FileReader &&
+			!!window.FileList &&
+			!!window.Blob &&
+			!!window.localStorage);
+	}
+
+    _p.filesReady = function() {
+        this.fileService.setFilename(this.$scope.fileName);
+        this.fileService.ready();
+        this.$scope.uploaderText = "Uploaded " + localStorage.length + " files";
+
+        this.$scope.$apply();
+    }
+
+	_p.onFileReady = function(newFile, oldFile) {
+        var self = this;
+		var recursiveUnzip = function(reader, entries) {
+            if (entries.length == 0) {
+                self.filesReady();
+            } else {
+                var current = entries.pop();
+                var currentName = current.filename;
+
+                if (!current.directory) {
+                    current.getData(new zip.TextWriter(), function(text) {
+                            localStorage.setItem(currentName, text);
+                            reader.close(function() {
+                                if (entries.length >= 0) 
+                                    recursiveUnzip(reader, entries);
+                            });
+
+                        }, function(current, total) {
+                    });
+                } else if (entries.length >= 0){
+                    recursiveUnzip(reader, entries);
+                }
+            }
+		};
+
+		if (newFile){
+           this.$scope.uploaderText = "loading...";
+            zip.workerScriptsPath = '.../../../lib/zip/WebContent/';
+			zip.createReader(new zip.Data64URIReader(newFile), function(reader) {
+				  reader.getEntries(function(entries) {
+					if (entries.length) {
+					 	recursiveUnzip(reader, entries);
+					}
+				  });
+				}, function(error) {
+
+			});
+		}
+	}
+
+	return FileUploaderController;
+})

app/fileUploader/app-directive.js

@@ -0,0 +1,78 @@
+define([
+    'require/text!./fileUploader.tpl'
+    ], function(
+    template
+) {
+    "use strict";
+    function FileUploaderDirective(mainCtrl) {
+
+       var processDragOverOrEnter = function(event) {
+            if (event != null) {
+              event.preventDefault();
+            }
+//            event.dataTransfer.effectAllowed = 'copy';
+            return false;
+          };
+
+        var checkSize = function(size, attrs) {
+            var _ref;
+            if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
+              return true;
+            } else {
+              alert("File must be smaller than " + attrs.maxFileSize + " MB");
+              return false;
+            }
+          };
+
+        var isTypeValid = function(validMimeTypes, type) {
+            if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
+              return true;
+            } else {
+              alert("Invalid file type.  File must be one of following types " + validMimeTypes);
+              return false;
+            }
+          };
+
+        return {
+            restrict: 'E' // only matches element names
+          , controller: 'FileUploaderController'
+          , replace: false
+          , template: template
+          , scope: {
+                model: '=FileModel',
+                drop: '&'
+            }
+          , link: function(scope, element, attrs) {
+              var validMimeTypes = attrs.type;
+              element.bind('dragover', processDragOverOrEnter);
+              element.bind('dragenter', processDragOverOrEnter);
+              return element.bind('drop', function(event) {
+                var file, name, reader, size, type;
+                if (event != null) {
+                  event.preventDefault();
+                }
+                reader = new FileReader();
+                reader.onload = function(evt) {
+                  if (checkSize(size, attrs) && isTypeValid(validMimeTypes, type)) {
+                    return scope.$apply(function() {
+                      localStorage.clear();
+                      scope.file = evt.target.result;
+                      scope.fileName = name;
+                    });
+                  }
+                };
+                file = event.dataTransfer.files[0];
+                name = file.name;
+                type = file.type;
+                size = file.size;
+                reader.readAsDataURL(file);
+                return false;
+            });
+          }
+        };
+    }
+
+    FileUploaderDirective.$inject = [];
+
+    return FileUploaderDirective;
+})

app/fileUploader/app.js

@@ -0,0 +1,17 @@
+define([
+    'webAPI/document'
+  , 'angular'
+  , './app-controller'
+  , './app-directive'
+], function (
+    document
+  , angular
+  , Controller
+  , Directive
+) {
+    "use strict";
+    //return Module
+    return angular.module('fileUploader', [])
+      .controller('FileUploaderController', Controller)
+      .directive('fileUploader', Directive)
+});

app/fileUploader/fileUploader.tpl

@@ -0,0 +1,13 @@
+<div ng-switch="{{requiredFeaturesAvailable}}">
+	<div ng-switch-when="false"><h2>Required features are not supported by this browser.</h2><p>To use this application, upgrade your browser to the latest version.</p></div>
+	<div ng-switcg-when="true">
+        <div class="highlight-module highlight-module--right highlight-module--remember">
+          <div class="highlight-module__container">
+            <div class="highlight-module__content   g-wide--pull-1  ">
+              <p class="highlight-module__title">[ ]</p>
+              <p class="highlight-module__text" ng-model="uploaderText" class="highlight-module__title">{{uploaderText}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+</div>

app/fileViewer/app-controller.js

@@ -0,0 +1,85 @@
+define([
+    './localStorageIO'
+    , 'ufojs/ufoLib/glifLib/GlyphSet'
+    , 'ufojs/tools/pens/SVGPen'
+], function(
+            localStorageIO
+            , GlyphSet
+            , SVGPen
+    ) {
+	"use strict";
+	function FileViewerController($scope, $rootScope, $compile, fileService) {
+		this.$scope = $scope;
+		this.$scope.name = 'FileViewer';
+        this.svgns = 'http://www.w3.org/2000/svg',
+        this.$scope.selectedFile;
+        this.glyphSet;
+        this.$scope.$watch('selectedFile', function (newFile, oldFile) {
+            if (newFile) {
+                var content = localStorage.getItem(newFile);
+                this.$scope.fileName = fileService.getFilename();
+                this.$scope.selectedFileContent = content;
+                if ( this.glyphSet && !fileService.isNewFile() ) {
+                    this.onLoadGlyphSet(newFile, this.glyphSet)
+                } else {
+                    var io = new localStorageIO();
+                    this.glyphSet = GlyphSet.factory(false, io, this.$scope.fileName+'/glyphs');
+                    this.onLoadGlyphSet(newFile, this.glyphSet);
+                }
+            }
+        }.bind(this)
+        );
+	}
+
+	FileViewerController.$inject = ['$scope', '$rootScope', '$compile', 'fileService'];
+	var _p = FileViewerController.prototype;
+
+    _p.initDraw = function() {
+
+    }
+
+    _p.mountSVG = function(svg) {
+        var oldSvg = document.getElementsByTagNameNS(this.svgns, 'svg');
+        if(oldSvg.length)
+            oldSvg[0].parentNode.replaceChild(svg, oldSvg[0]);
+        else
+            document.getElementById('ufoGlyph').appendChild(svg);
+    }
+
+    _p.svgPenFactory = function(glyphset) {
+        var svg = document.createElementNS(this.svgns, 'svg')
+          , pathElement = document.createElementNS(this.svgns, 'path')
+          , gElement = document.createElementNS(this.svgns, 'g')
+          , svgPen = new SVGPen(pathElement, glyphset)
+          ;
+        svg.setAttribute('width', '600px');
+        svg.setAttribute('height', '440px');
+        svg.setAttribute('style', 'background:transparent; margin-left:135px;');
+
+        gElement.setAttribute('transform', 'matrix(0.45, 0, 0, -0.45, 0, 400)');
+//        gElement.setAttribute('transform', 'scale(0.45, 0.45)');
+        gElement.appendChild(pathElement);
+        svg.appendChild(gElement);
+        return svgPen;
+    }
+
+    _p.onLoadGlyphSet = function (newFile, glyphSet) {
+        var fileName = this.$scope.fileName;
+        try {
+            if (newFile.indexOf(fileName+'/glyphs/') > -1) {
+                var glyphName = newFile.replace(fileName+'/glyphs/','')
+                var glyphName = Object.keys(glyphSet.contents).filter(function(key) {return glyphSet.contents[key] === glyphName})[0];
+            }
+        var pen = this.svgPenFactory(glyphSet)
+          , glyph
+          ;
+        glyph = glyphSet.get(glyphName);
+        glyph.draw(true, pen)
+            .then(this.mountSVG.bind(this, pen.path.ownerSVGElement));
+        } catch(e) {
+            console.log(e);   
+        }
+    }
+
+    return FileViewerController;
+})

app/fileViewer/app-directive.js

@@ -0,0 +1,31 @@
+define([
+    'require/text!./fileViewer.tpl'
+    ], function(
+    template
+) {
+    "use strict";
+    function FileViewerDirective($compile) {
+        return {
+            restrict: 'E' // only matches element names
+          , controller: 'FileViewerController'
+          , replace: false
+          , template: template
+          , scope: {
+                model: '=FileModel',
+                drop: '&'
+            }
+          , link: function(scope, element, attrs) {
+              scope.$on('filesReady', function(event) {
+                  scope.filenames = [];
+                  for (var key in localStorage){
+                       scope.filenames.push(key);
+                    }
+                  document.getElementById('fileViwer').style.display = 'block';
+              });
+            return false
+          }
+        };
+    }
+    FileViewerDirective.$inject = ['$compile'];
+    return FileViewerDirective;
+})

app/fileViewer/app.js

@@ -0,0 +1,18 @@
+define([
+    'webAPI/document'
+  , 'angular'
+  , './app-controller'
+  , './app-directive'
+], function (
+    document
+  , angular
+  , Controller
+  , Directive
+) {
+    "use strict";
+    console.log(angular);
+    //return Module
+    return angular.module('FileViewer', [])
+      .controller('FileViewerController', Controller)
+      .directive('fileViewer', Directive)
+});

app/fileViewer/fileViewer.js

@@ -0,0 +1,17 @@
+define([
+    'webAPI/document'
+  , 'angular'
+  , './app-controller'
+  , './app-directive'
+], function (
+    document
+  , angular
+  , Controller
+  , Directive
+) {
+    "use strict";
+    //return Module
+    return angular.module('fileViewer', [])
+      .controller('fileViewerController', Controller)
+      .directive('fileViewer', Directive)
+});

app/fileViewer/fileViewer.tpl

@@ -0,0 +1,16 @@
+<div id="fileViwer" style="display:none;">
+    <div id="glyph-select" class="g-medium--half">
+        <input type="text" ng-model="search" placeholder="search" />
+        <select ng-model="selectedFile" ng-options="file for file in filenames | filter: search"></select>
+    </div>
+    <div id='ufoxml' display='none' class="highlight-module highlight-module--code highlight-module--left g-wide--2">
+            <div class="highlight-module__container">
+              <code class="html g-wide--3"><div class="highlight"><pre ng-bind="selectedFileContent"></pre></div></code>
+            </div>
+    </div>
+    <div class="highlight-module highlight-module--right highlight-module--remember">
+          <div class="highlight-module__container">
+                <div id="ufoGlyph"></div>
+          </div>
+    </div>
+</div>