diff --git a/README.md b/README.md index 0967e6e..cbe629d 100644 --- 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 index 44c7ac8..7fb7571 100644 --- 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 index 5e0fa69..bbb2db7 100644 --- 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 index 0921c8f..8d33901 100644 --- 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 index 4076ceb..7e390b9 100644 --- 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; } \ No newline at end of file diff --git a/web/index.html b/web/index.html index af5d99f..f296930 100644 --- a/web/index.html +++ b/web/index.html @@ -20,10 +20,11 @@ + -
+
@@ -31,7 +32,10 @@
- + Welcome! +
+
+
diff --git a/web/js/CacheUMLExplorer.js b/web/js/CacheUMLExplorer.js index ffcf0d8..9ea06a6 100644 --- 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é UML explorer v" + + "[NOT-BUILT]"/*build.replace:"pkg.version"*/ + + "
for InterSystems Caché" + + "
By Nikita Savchenko" + + "
" + + "Project page / Bug tracker" + + "

Enjoy!" + ); + }); + enableSVGDownload(this.classTree); }; \ No newline at end of file diff --git a/web/js/UI.js b/web/js/UI.js new file mode 100644 index 0000000..42f9916 --- /dev/null +++ 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; + } + +}; \ No newline at end of file