fixes, build version, UI info

intersystems-community · Apr 29, 2015 · 0bcac39 · 0bcac39
1 parent 75c93f3
commit 0bcac39
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 # CacheUMLExplorer
-An UML Class explorer for InterSystems Caché. It can build UML class diagram for any class or even for whole package in Caché.
+An UML Class explorer for InterSystems Caché. It is able to build UML class diagram for any class or even for whole package in Caché.
 
 ## Screenshots
 
-![2015-04-21_214058](https://cloud.githubusercontent.com/assets/4989256/7260103/6c1e2a20-e870-11e4-8bf0-9832885be9ab.png)
+![2015-04-21_214058](https://cloud.githubusercontent.com/assets/4989256/7396518/65ba1924-eeaa-11e4-808b-5f648c0011e4.png)
 
 ## Installation
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -60,7 +60,10 @@ gulp.task("gatherLibs", ["clean"], function () {
 gulp.task("gatherScripts", ["clean", "gatherLibs"], function () {
     return gulp.src("web/js/*.js")
         .pipe(concat("CacheUMLExplorer.js"))
-        .pipe(replace(/[^\s]+\/\*build.replace:(.*)\*\//g, "$1"))
+        .pipe(replace(/[^\s]+\/\*build\.replace:(.*)\*\//g, function (part, match) {
+            var s = match.toString();
+            return s.replace(/pkg\.([a-zA-Z]+)/g, function (p,a) { return pkg[a]; });
+        }))
         .pipe(wrap("CacheUMLExplorer = (function(){<%= contents %> return CacheUMLExplorer;}());"))
         .pipe(uglify({
             output: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "CacheUMLExplorer",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "An UML Class explorer for InterSystems Caché",
   "directories": {
     "test": "test"
@@ -18,7 +18,7 @@
     "gulp-minify-css": "^0.3.11",
     "gulp-postcss": "^5.1.3",
     "gulp-rename": "^1.2.0",
-    "gulp-replace": "^0.5.0",
+    "gulp-replace": "^0.5.3",
     "gulp-strip-comments": "^1.0.1",
     "gulp-uglify": "^1.2.0",
     "gulp-wrap": "^0.5.0",

diff --git a/web/css/extras.css b/web/css/extras.css
@@ -140,6 +140,28 @@
     left: 9px;
 }
 
+.icon.info:after {
+    content: "";
+    background-color: #fff;
+    width: 4px;
+    height: 10px;
+    border-radius: 1px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+.icon.info:before {
+    content: "";
+    background-color: #fff;
+    width: 4px;
+    height: 4px;
+    border-radius: 2px;
+    position: absolute;
+    top: 4px;
+    left: 10px;
+}
+
 .icon.scaleNormal:after {
     content: "1:1";
     position: absolute;

diff --git a/web/css/interface.css b/web/css/interface.css
@@ -48,6 +48,41 @@ html, body {
     padding: .5em;
 }
 
+.ui-topRightToolBar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .5em;
+}
+
 #className {
     text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
+}
+
+.central {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: table;
+}
+
+.central > div {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.central > div > div {
+    display: inline-block;
+}
+
+.message {
+    font-size: 14pt;
+    background: rgba(245, 245, 245, 0.9);
+    -webkit-transition: all .2s ease;
+    -moz-transition: all .2s ease;
+    -o-transition: all .2s ease;
+    transition: all .2s ease;
 }
diff --git a/web/index.html b/web/index.html
@@ -20,18 +20,22 @@
     <script type="text/javascript" src="js/CacheUMLExplorer.js"></script>
     <script type="text/javascript" src="js/ClassTree.js"></script>
     <script type="text/javascript" src="js/Source.js"></script>
+    <script type="text/javascript" src="js/UI.js"></script>
     <!-- endbuild -->
 </head>
 <body onload="cue = new CacheUMLExplorer(document.getElementById('treeView'), document.getElementById('classView'))">
-    <div class="ui-body">
+    <div class="ui-body" id="ui-body">
         <div class="ui-sideBlock">
             <div id="treeView">
 
             </div>
         </div>
         <div class="ui-mainBlock">
             <div class="ui-ClassInfo">
-                <span id="className"></span>
+                <span id="className">Welcome!</span>
+            </div>
+            <div class="ui-topRightToolBar">
+                <div id="button.showInfo" class="icon info"></div>
             </div>
             <div class="ui-leftBottomToolBar">
                 <div id="button.downloadSVG" class="icon download"></div>

diff --git a/web/js/CacheUMLExplorer.js b/web/js/CacheUMLExplorer.js
@@ -8,15 +8,20 @@
  */
 var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
 
+    var id = function (e) { return document.getElementById(e); };
+
     this.elements = {
-        className: document.getElementById("className"),
+        uiBody: id("ui-body"),
+        className: id("className"),
         treeViewContainer: treeViewContainer,
         classViewContainer: classViewContainer,
-        zoomInButton: document.getElementById("button.zoomIn"),
-        zoomOutButton: document.getElementById("button.zoomOut"),
-        zoomNormalButton: document.getElementById("button.zoomNormal")
+        zoomInButton: id("button.zoomIn"),
+        zoomOutButton: id("button.zoomOut"),
+        zoomNormalButton: id("button.zoomNormal"),
+        infoButton: id("button.showInfo")
     };
 
+    this.UI = new UI(this);
     this.source = new Source();
     this.classTree = new ClassTree(this, treeViewContainer);
     this.classView = new ClassView(this, classViewContainer);
@@ -43,6 +48,19 @@ CacheUMLExplorer.prototype.init = function () {
         }
     }
 
+    this.elements.infoButton.addEventListener("click", function () {
+        self.UI.displayMessage(
+            "Cach&eacute; UML explorer v"
+            + "[NOT-BUILT]"/*build.replace:"pkg.version"*/
+            + "<br/>for InterSystems Cach&eacute;"
+            + "<br/>By Nikita Savchenko"
+            + "<br/><a target=\"_blank\" href=\"https://github.com/intersystems-ru/UMLExplorer\">"
+            + "Project page</a> / <a target=\"_blank\" "
+            + "href=\"https://github.com/intersystems-ru/UMLExplorer/issues\">Bug tracker</a>"
+            + "<br/><br/>Enjoy!"
+        );
+    });
+
     enableSVGDownload(this.classTree);
 
 };
diff --git a/web/js/UI.js b/web/js/UI.js
@@ -0,0 +1,56 @@
+/**
+ * User interface functions.
+ * @param {CacheUMLExplorer} cacheUMLExplorer
+ * @constructor
+ */
+var UI = function (cacheUMLExplorer) {
+
+    this.cacheUMLExplorer = cacheUMLExplorer;
+    this.BODY = cacheUMLExplorer.elements.uiBody;
+
+    /**
+     * @type {HTMLElement}
+     * @private
+     */
+    this.messageElement = null;
+
+};
+
+/**
+ * Display hovering message.
+ *
+ * @param {string} text
+ * @param {boolean} [removeByClick] - Define whether user be able to remove message by clicking on
+ *                                    it.
+ */
+UI.prototype.displayMessage = function (text, removeByClick) {
+
+    this.removeMessage();
+
+    var self = this,
+        d1 = document.createElement("div"),
+        d2 = document.createElement("div"),
+        d3 = document.createElement("div");
+
+    d1.className = "central message";
+    d1.style.opacity = 0;
+    d3.innerHTML = text;
+    d2.appendChild(d3);
+    d1.appendChild(d2);
+    this.BODY.appendChild(d1);
+    this.messageElement = d1;
+    setTimeout(function () { if (d1) d1.style.opacity = 1; }, 25);
+    if (removeByClick === undefined || removeByClick) d1.addEventListener("click", function () {
+        self.removeMessage();
+    });
+
+};
+
+UI.prototype.removeMessage = function () {
+
+    if (this.messageElement) {
+        this.messageElement.parentNode.removeChild(this.messageElement);
+        this.messageElement = null;
+    }
+
+};