├── .bowerrc ├── src ├── app │ ├── resources │ │ ├── img │ │ │ ├── logo.png │ │ │ ├── favicon.ico │ │ │ ├── ws-160x35.png │ │ │ ├── screenshot.png │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── muscle.svg │ │ │ ├── account-favorite.svg │ │ │ ├── party-mask.svg │ │ │ ├── paint-brush-2.svg │ │ │ └── paint-palette.svg │ │ ├── fonts │ │ │ └── origami │ │ │ │ ├── origami_making.eot │ │ │ │ ├── origami_making.otf │ │ │ │ ├── origami_making.ttf │ │ │ │ ├── origami_making.woff │ │ │ │ └── origami_making.svg │ │ └── css │ │ │ ├── app.css │ │ │ ├── main.css │ │ │ └── example.css │ ├── dev.js │ ├── app.js │ ├── temp.js │ ├── template │ │ ├── temp.html │ │ ├── dev.html │ │ └── main.html │ ├── dev.html │ ├── index.html │ ├── temp.html │ ├── data │ │ └── countries.json │ └── widgets │ │ ├── Temp.js │ │ ├── Main.js │ │ └── Dev.js └── profiles │ └── app.profile.js ├── .gitignore ├── bower.json ├── config.json ├── deploy.sh ├── .travis.yml ├── CHANGELOG ├── LICENSE ├── gulpfile.js ├── index.html ├── package.json └── README.md /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "src" 3 | } -------------------------------------------------------------------------------- /src/app/resources/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/img/logo.png -------------------------------------------------------------------------------- /src/app/resources/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/img/favicon.ico -------------------------------------------------------------------------------- /src/app/resources/img/ws-160x35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/img/ws-160x35.png -------------------------------------------------------------------------------- /src/app/resources/img/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/img/screenshot.png -------------------------------------------------------------------------------- /src/app/resources/img/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/img/favicon-16x16.png -------------------------------------------------------------------------------- /src/app/resources/img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/img/favicon-32x32.png -------------------------------------------------------------------------------- /src/app/resources/fonts/origami/origami_making.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/fonts/origami/origami_making.eot -------------------------------------------------------------------------------- /src/app/resources/fonts/origami/origami_making.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/fonts/origami/origami_making.otf -------------------------------------------------------------------------------- /src/app/resources/fonts/origami/origami_making.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/fonts/origami/origami_making.ttf -------------------------------------------------------------------------------- /src/app/resources/fonts/origami/origami_making.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/websemantics/semantic-dojo/HEAD/src/app/resources/fonts/origami/origami_making.woff -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | /dist 3 | /src/dijit 4 | /src/dojo 5 | /src/dojox 6 | /src/jquery 7 | /src/less 8 | /src/semantic-dojo-styles 9 | /src/semantic 10 | /src/util 11 | /node_modules 12 | /src/app/temp.js 13 | /src/app/temp.html 14 | /src/app/resources/less/temp.less 15 | /src/app/template/temp.html 16 | /src/app/widgets/Temp.js 17 | -------------------------------------------------------------------------------- /src/app/resources/img/muscle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/resources/img/account-favorite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/dev.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Dev Page 3 | * 4 | * @link http://websemantics.ca/ibuild 5 | * @link http://ibuild.io 6 | * @author WebSemantics, Inc. 7 | * @author Adnan M.Sagar, PhD. 8 | * @copyright 2012-2015 Web Semantics, Inc. 9 | * @since August 28th 2015 10 | * @package SemanticDojo\Main 11 | */ 12 | 13 | define([ "./widgets/Dev", 14 | "dojo/domReady!" ], 15 | function (Dev) { 16 | 17 | var app = {}; 18 | app.dev = new Dev().placeAt(document.body); 19 | app.dev.startup(); 20 | 21 | return app; 22 | }); 23 | -------------------------------------------------------------------------------- /src/app/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Fron Page 3 | * 4 | * @link http://websemantics.ca/ibuild 5 | * @link http://ibuild.io 6 | * @author WebSemantics, Inc. 7 | * @author Adnan M.Sagar, PhD. 8 | * @copyright 2012-2015 Web Semantics, Inc. 9 | * @since August 28th 2015 10 | * @package SemanticDojo\Main 11 | */ 12 | 13 | define([ "./widgets/Main", 14 | "dojo/domReady!" ], 15 | function (Main) { 16 | 17 | var app = {}; 18 | app.main = new Main().placeAt(document.body); 19 | app.main.startup(); 20 | 21 | return app; 22 | }); 23 | -------------------------------------------------------------------------------- /src/app/resources/css/app.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Semantic Dojo Styles 3 | * 4 | * @author Adnan M.Sagar, PhD. 5 | * @copyright 2002-2015 Web Semantics, Inc. (http://websemantics.ca) 6 | * @license http://www.opensource.org/licenses/mit-license.php MIT 7 | * @link http://websemantics.ca 8 | * @package websemantics/semantic-dojo 9 | */ 10 | 11 | /* 12 | Credits: 13 | - https://github.com/Esri/dojo-theme-flat 14 | - https://github.com/Semantic-Org/Semantic-UI 15 | - http://www.dafont.com/origami-making.font 16 | */ 17 | 18 | @import 'example.css'; 19 | @import 'main.css'; 20 | -------------------------------------------------------------------------------- /src/app/resources/img/party-mask.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/resources/img/paint-brush-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/temp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * For development of individual widgets purposes only 3 | * 4 | * @link http://websemantics.ca/ibuild 5 | * @link http://ibuild.io 6 | * @author WebSemantics, Inc. 7 | * @author Adnan M.Sagar, PhD. 8 | * @copyright 2012-2015 Web Semantics, Inc. 9 | * @since August 28th 2015 10 | * @package SemanticDojo\Main 11 | */ 12 | 13 | define([ "./widgets/Temp", 14 | "dojo/domReady!" ], 15 | function (Main) { 16 | var app = {}; 17 | app.main = new Main().placeAt(document.body); 18 | app.main.startup(); 19 | return app; 20 | }); 21 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Semantic Dojo", 3 | "version": "0.2.0", 4 | "homepage": "https://github.com/websemantics/semantic-dojo", 5 | "authors": [ 6 | "Adnan M.Sagar, PhD. " 7 | ], 8 | "license": "MIT", 9 | "ignore": [ 10 | "**/.*", 11 | "node_modules", 12 | "src/dojo", 13 | "src/dijit", 14 | "src/dojox", 15 | "src/util" 16 | ], 17 | "dependencies": { 18 | "dojo": "1.10.4", 19 | "dijit": "1.10.4", 20 | "dojox": "1.10.4", 21 | "util": "dojo-util#1.10.4", 22 | "less": "*", 23 | "jquery": "*", 24 | "semantic-dojo-styles" : "*" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/resources/img/paint-palette.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "", 3 | 4 | "paths": { 5 | "source": { 6 | "config" : "../../semantic/src/theme.config", 7 | "definitions" : "../../semantic/src/definitions/", 8 | "site" : "../../semantic/src/site/", 9 | "themes" : "../../semantic/src/themes/", 10 | "assets" : "../../themes" 11 | }, 12 | "output": { 13 | "packaged" : "", 14 | "uncompressed" : "components/", 15 | "compressed" : "components/", 16 | "themes" : "themes/", 17 | "assets" : "themes/" 18 | }, 19 | "clean" : "dist/" 20 | }, 21 | 22 | "permission" : false, 23 | "rtl": false 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/app/template/temp.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 7 | 8 | 9 |
10 | 11 |


12 | 13 |
14 |
16 | 17 |
19 | 20 |
21 | 22 |
-------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | # This bash file will deploy the dist folder to the project gh-page 3 | set -e 4 | 5 | # Base directory for this entire project 6 | BASEDIR=$(cd $(dirname $0) && pwd) 7 | 8 | # Destination directory for built code 9 | DISTDIR="$BASEDIR/dist" 10 | 11 | # run the build script 12 | ./build.sh 13 | 14 | # Create a new Git repo in dist folder 15 | cd "$DISTDIR" 16 | git init 17 | 18 | # Set user details 19 | git config user.name "ibuild.io" 20 | git config user.email "ibuild@ibuild.io" 21 | 22 | # First commit, .. horray! 23 | git add . 24 | git commit -m "Deploy to gh-pages" 25 | 26 | # Force push ... 27 | git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:gh-pages > /dev/null 2>&1 28 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | script: bash ./deploy.sh 2 | before_script: 3 | - npm install -g bower 4 | - bower install 5 | env: 6 | global: 7 | - GH_REF: github.com/websemantics/semantic-dojo.git 8 | - secure: ipnod23DN9ejT6OGQWStyfH/m471DjTwQTc1VzBXIgfzGSzYZBRE5w3zFwBufXcswZznXOTl17IEtjeZieR5JE/nb7AgSTl+Ij88ZAsOQSpjfDfJYLX66JlEyTuLkTzfAmeXj6lFv74Xowga9BkdAvgDLG6OHS8WpKxgbf2++CWbwi2FpdmpGgmht1k8MxFxHdeHf9l7R3OWhseEDrV2wd3zXoE7d1VAl15YOuo0XGfpcNfjjFBYFs+8RwCOxLRam9z5+UewU0sDjg19q+Te4pCb5QSONx7THePRnDgff/A/ej5dy/fILKtmtEb3S5CIBIf0oNp0K/LU2yXMM4hVjofqZRZ41/R9MYoxl6rPxAcATtFyliSIyvTrtZfDXPOakTrrl3VUwgcrswujV+M8/b/iehnzJRHtA4GuPlWwn14khpwhQTk72gN0pyXqlWyJdGLewJUXVSjHGU0lkX98WjQDW79ph+Vss5o9ahoerwTxdsJ3Xo1yp1xhl6+CHQGBNOctzyIoAcQ6qQHK5p+Bv096JwhjrwIdtvGuNeDlKmGfYU790SbnXhfjnpTSGCmUeKK4pK1PqiUG3XSTgyeQQPIRj4hymQvIL7d69mJZ/j2TEW/fCcN3yh4rv4J2pVb2dSuAGKAMvGIrPv2iEw8SLr0gzpQnZTR72nIuH44g4Fs= 9 | -------------------------------------------------------------------------------- /CHANGELOG: -------------------------------------------------------------------------------- 1 | 0.2.1 2 | date: 2016-03-30 3 | changes: 4 | - Fix issues with font icons in 'dist' 5 | - Make 'dist' folder self-contained app 6 | - Add deploy script to 'gh-pages' 7 | - Add Travis-CI support 8 | 9 | 0.2.0 10 | date: 2016-03-29 11 | changes: 12 | - Greatly improve build script 13 | - Add CHANGELOG file 14 | - Move Semantic-Dojo less styles into a bower package 15 | - Add examples for TooltipDialog dropdown menus (Semantic UI and Dijit). 16 | - Optimize build process 17 | 18 | 0.1.1 19 | date: 2015-08-31 20 | changes: 21 | - Update demo app 22 | - Optimize build process 23 | 24 | 0.1.0 25 | date: 2015-08-26 26 | changes: 27 | - Textbox 28 | - TextArea 29 | - Select 30 | - Button 31 | - Progress Bar 32 | - Tooltip 33 | - DialogTooltip 34 | - Tab 35 | - Sliders 36 | - Color Palette 37 | - RadioButton 38 | - Checkbox. 39 | - Use [Bower](http://bower.io/) for dependancies. 40 | - Merged main project and `gh-pages` into one codebase. 41 | -------------------------------------------------------------------------------- /src/app/dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Semantic Dojo Dev 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Web Semantics, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Semantic Dojo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/app/temp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Semantic Dojo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Set-up 3 | *******************************/ 4 | 5 | var 6 | gulp = require('gulp-help')(require('gulp')), 7 | gulpif = require('gulp-if'), 8 | less = require('gulp-less'), 9 | chmod = require('gulp-chmod'), 10 | requireDotFile = require('require-dot-file'), 11 | minifyCSS = require('gulp-minify-css'), 12 | replace = require('gulp-replace'), 13 | config; 14 | 15 | 16 | /******************************* 17 | Config 18 | *******************************/ 19 | 20 | try { 21 | config = requireDotFile('config.json'); 22 | } 23 | catch(error) { 24 | if(error.code === 'MODULE_NOT_FOUND') { 25 | console.error('No config.json file found'); 26 | } 27 | } 28 | 29 | var 30 | output = config.paths.output, 31 | source = config.paths.source; 32 | 33 | gulp.task('default', function() { 34 | 35 | console.info('Building Assets'); 36 | 37 | gulp.src(source.themes + '/**/assets/**/*.*') 38 | .pipe(gulp.dest(output.themes)); 39 | 40 | console.info('Building Semantic-Dojo'); 41 | 42 | gulp.src(["src/semantic-dojo-styles/src/semantic-dojo.less"]) 43 | .pipe(less()) 44 | .pipe(replace(config.paths.source.themes, config.paths.output.themes)) 45 | .pipe(replace(config.paths.source.assets, config.paths.output.assets)) 46 | .pipe(minifyCSS()) 47 | .pipe(gulp.dest('dist')); 48 | 49 | }); 50 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Semantic Dojo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/profiles/app.profile.js: -------------------------------------------------------------------------------- 1 | var profile = (function(){ 2 | return { 3 | basePath: "../", 4 | localeList: 'ar,ca,cs,da,de,el,en,en-gb,en-us,es,es-es,fi,fi-fi,fr,fr-fr,he,he-il,hu,it,it-it,ja,ja-jp,ko,ko-kr,nl,nl-nl,nb,pl,pt,pt-br,pt-pt,ru,sk,sl,sv,th,tr,zh,zh-tw,zh-cn', 5 | releaseName: "app", 6 | action: "release", 7 | layerOptimize: "closure", 8 | optimize: "closure", 9 | cssOptimize: "comments", 10 | mini: true, 11 | stripConsole: "all", 12 | selectorEngine: "lite", 13 | defaultConfig: { 14 | hasCache:{ 15 | "dojo-built": 1, 16 | "dojo-loader": 1, 17 | "dom": 1, 18 | "host-browser": 1, 19 | "config-selectorEngine": "lite" 20 | }, 21 | async: 1 22 | }, 23 | staticHasFeatures: { 24 | "config-deferredInstrumentation": 0, 25 | "config-dojo-loader-catches": 0, 26 | "config-tlmSiblingOfDojo": 0, 27 | "dojo-amd-factory-scan": 0, 28 | "dojo-combo-api": 0, 29 | "dojo-config-api": 1, 30 | "dojo-config-require": 0, 31 | "dojo-debug-messages": 0, 32 | "dojo-dom-ready-api": 1, 33 | "dojo-firebug": 0, 34 | "dojo-guarantee-console": 1, 35 | "dojo-has-api": 1, 36 | "dojo-inject-api": 1, 37 | "dojo-loader": 1, 38 | "dojo-log-api": 0, 39 | "dojo-modulePaths": 0, 40 | "dojo-moduleUrl": 0, 41 | "dojo-publish-privates": 0, 42 | "dojo-requirejs-api": 0, 43 | "dojo-sniff": 1, 44 | "dojo-sync-loader": 0, 45 | "dojo-test-sniff": 0, 46 | "dojo-timeout-api": 0, 47 | "dojo-trace-api": 0, 48 | "dojo-undef-api": 0, 49 | "dojo-v1x-i18n-Api": 1, 50 | "dom": 1, 51 | "host-browser": 1, 52 | "extend-dojo": 1 53 | }, 54 | packages:[{ 55 | name: "dojo", 56 | location: "dojo" 57 | },{ 58 | name: "dijit", 59 | location: "dijit" 60 | },{ 61 | name: "dojox", 62 | location: "dojox" 63 | },{ 64 | name: "app", 65 | location: "app" 66 | }], 67 | layers: { 68 | "dojo/dojo": { 69 | include: [ "dojo/dojo", "dojo/i18n", "dojo/domReady","app/app"], 70 | customBase: true, 71 | boot: true 72 | } 73 | } 74 | }; 75 | })(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semantic-dojo", 3 | "version": "0.2.0", 4 | "title": "Semantic Dojo", 5 | "description": "A responsive Dojo theme that harnesses the style awesomeness of Semantic UI Framework for powerful and modern Web apps.", 6 | "homepage": "http://websemantics.ca", 7 | "author": "Adnan M.Sagar, PhD. ", 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/websemantics/semantic-dojo.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/websemantics/semantic-dojo.git/issues" 15 | }, 16 | "peerDependencies": { 17 | "better-console": "*", 18 | "del": "*", 19 | "extend": "*", 20 | "gulp": "*", 21 | "gulp-autoprefixer": "*", 22 | "gulp-chmod": "*", 23 | "gulp-clone": "*", 24 | "gulp-concat": "*", 25 | "gulp-concat-css": "*", 26 | "gulp-copy": "*", 27 | "gulp-flatten": "*", 28 | "gulp-header": "*", 29 | "gulp-help": "*", 30 | "gulp-if": "*", 31 | "gulp-less": "*", 32 | "gulp-minify-css": "*", 33 | "gulp-notify": "*", 34 | "gulp-plumber": "*", 35 | "gulp-print": "*", 36 | "gulp-rename": "*", 37 | "gulp-replace": "*", 38 | "gulp-rtlcss": "*", 39 | "gulp-uglify": "*", 40 | "gulp-util": "*", 41 | "gulp-watch": "*", 42 | "map-stream": "*", 43 | "require-dot-file": "*", 44 | "yamljs": "*" 45 | }, 46 | "dependencies": { 47 | "better-console": "*", 48 | "del": "^1.2.0", 49 | "extend": "^2.0.1", 50 | "gulp": "^3.9.0", 51 | "gulp-autoprefixer": "^2.3.1", 52 | "gulp-chmod": "^1.2.0", 53 | "gulp-clone": "^1.0.0", 54 | "gulp-concat": "^2.6.0", 55 | "gulp-concat-css": "^2.2.0", 56 | "gulp-copy": "0.0.2", 57 | "gulp-flatten": "^0.1.0", 58 | "gulp-header": "^1.2.2", 59 | "gulp-help": "^1.6.0", 60 | "gulp-if": "^1.2.5", 61 | "gulp-json-editor": "^2.2.1", 62 | "gulp-less": "^3.0.3", 63 | "gulp-minify-css": "^1.2.0", 64 | "gulp-notify": "^2.2.0", 65 | "gulp-plumber": "^1.0.1", 66 | "gulp-print": "^1.1.0", 67 | "gulp-prompt": "^0.1.2", 68 | "gulp-rename": "^1.2.2", 69 | "gulp-replace": "^0.5.3", 70 | "gulp-rtlcss": "^0.1.4", 71 | "gulp-uglify": "^1.2.0", 72 | "gulp-util": "^3.0.6", 73 | "gulp-watch": "^4.3.1", 74 | "jquery": "^2.1.4", 75 | "map-stream": "^0.1.0", 76 | "mkdirp": "^0.5.1", 77 | "require-dot-file": "^0.4.0", 78 | "run-sequence": "^1.1.0", 79 | "wrench": "https://github.com/derekslife/wrench-js/tarball/156eaceed68ed31ffe2a3ecfbcb2be6ed1417fb2", 80 | "yamljs": "^0.2.3" 81 | }, 82 | "devDependencies": { 83 | "github": "^0.2.4", 84 | "gulp-concat-filenames": "^1.0.0", 85 | "gulp-debug": "^2.0.1", 86 | "gulp-git": "^1.2.4", 87 | "gulp-tap": "^0.1.3", 88 | "merge-stream": "^0.1.7" 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/app/data/countries.json: -------------------------------------------------------------------------------- 1 | { 2 | "identifier": "id", 3 | "label": "name", 4 | "items": [ 5 | { "id": "AF", "name":"Africa", "type":"continent", "population":"900 million", "area": "30,221,532 sq km", 6 | "timezone": "-1 UTC to +4 UTC", 7 | "children":[{"_reference":"EG"}, {"_reference":"KE"}, {"_reference":"SD"}] }, 8 | { "id": "EG", "name":"Egypt", "type":"country" }, 9 | { "id": "KE", "name":"Kenya", "type":"country", 10 | "children":[{"_reference":"Nairobi"}, {"_reference":"Mombasa"}] }, 11 | { "id": "Nairobi", "name":"Nairobi", "type":"city" }, 12 | { "id": "Mombasa", "name":"Mombasa", "type":"city" }, 13 | { "id": "SD", "name":"Sudan", "type":"country", 14 | "children":{"_reference":"Khartoum"} }, 15 | { "id": "Khartoum", "name":"Khartoum", "type":"city" }, 16 | { "id": "AS", "name":"Asia", "type":"continent", 17 | "children":[{"_reference":"CN"}, {"_reference":"IN"}, {"_reference":"RU"}, {"_reference":"MN"}] }, 18 | { "id": "CN", "name":"China", "type":"country" }, 19 | { "id": "IN", "name":"India", "type":"country" }, 20 | { "id": "RU", "name":"Russia", "type":"country" }, 21 | { "id": "MN", "name":"Mongolia", "type":"country" }, 22 | { "id": "OC", "name":"Oceania", "type":"continent", "population":"21 million", 23 | "children":{"_reference":"AU"}}, 24 | { "id": "AU", "name":"Australia", "type":"country", "population":"21 million"}, 25 | { "id": "EU", "name":"Europe", "type":"continent", 26 | "children":[{"_reference":"DE"}, {"_reference":"FR"}, {"_reference":"ES"}, {"_reference":"IT"}] }, 27 | { "id": "DE", "name":"Germany", "type":"country" }, 28 | { "id": "FR", "name":"France", "type":"country" }, 29 | { "id": "ES", "name":"Spain", "type":"country" }, 30 | { "id": "IT", "name":"Italy", "type":"country" }, 31 | { "id": "NA", "name":"North America", "type":"continent", 32 | "children":[{"_reference":"MX"}, {"_reference":"CA"}, {"_reference":"US"}] }, 33 | { "id": "MX", "name":"Mexico", "type":"country", "population":"108 million", "area":"1,972,550 sq km", 34 | "children":[{"_reference":"Mexico City"}, {"_reference":"Guadalajara"}] }, 35 | { "id": "Mexico City", "name":"Mexico City", "type":"city", "population":"19 million", "timezone":"-6 UTC"}, 36 | { "id": "Guadalajara", "name":"Guadalajara", "type":"city", "population":"4 million", "timezone":"-6 UTC" }, 37 | { "id": "CA", "name":"Canada", "type":"country", "population":"33 million", "area":"9,984,670 sq km", 38 | "children":[{"_reference":"Ottawa"}, {"_reference":"Toronto"}] }, 39 | { "id": "Ottawa", "name":"Ottawa", "type":"city", "population":"0.9 million", "timezone":"-5 UTC"}, 40 | { "id": "Toronto", "name":"Toronto", "type":"city", "population":"2.5 million", "timezone":"-5 UTC" }, 41 | { "id": "US", "name":"United States of America", "type":"country" }, 42 | { "id": "SA", "name":"South America", "type":"continent", 43 | "children":[{"_reference":"BR"}, {"_reference":"AR"}] }, 44 | { "id": "BR", "name":"Brazil", "type":"country", "population":"186 million" }, 45 | { "id": "AR", "name":"Argentina", "type":"country", "population":"40 million" } 46 | ]} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ``` 2 | __________________________ 3 | |░░░░░░░░░░░░░░░░░░░░░░░░░░| 4 | |░░░░░░░░░|` ,|░░░░░░░░| 5 | |░░░░░░░| |░░░░░░░| __ _________ __ _________ 6 | |░░░░░░░| |░░░░░░░░░░░░░░| | | |_________| |__| |_________| 7 | |░░░░░░░| `|░░░░░░░░░░| ______| | _________ __ _________ 8 | |░░░░░░░░░░| |░░░░░░░| ( ___ | ( ___ ) | | ( ___ ) 9 | |░░░░░░░░░░░░░░| |░░░░░░| | | | | | | | | | | | | | | 10 | |░░░░░░░| `.,. .|░░░░░░| | | | | | | | | | | | | | | 11 | |░░░░░░░░| |░░░░░░░░| | | | | | | | | | | | | | | 12 | |░░░░░░░░░░░░░░░░░░░░░░░░░░| | |___| | | |___| | | | | |___| | 13 | |░░░░░░░░░░░░░░░░░░░░░░░░░░| (_________) (_________) | | (_________) 14 | | | 15 | TOOLKIT |\_/ / 16 | \___/ 17 | ``` 18 | > Last update: 2 August 2016 19 | 20 | [![Build Status](https://travis-ci.org/websemantics/semantic-dojo.svg?branch=master)](https://travis-ci.org/websemantics/semantic-dojo) 21 | 22 | A responsive Dojo theme that harnesses the style awesomeness of [Semantic UI](http://semantic-ui.com/) Framework with [Dojo Toolkit](https://dojotoolkit.org/) powerful UI widgets, for modern Web apps. 23 | 24 | A new method of building Dijit Themes following the Semantic UI approach with a similar folder structure throught this project. 25 | 26 | Dijit widgets directly import and inherint CSS from their Semantic UI conterparts, if any! 27 | 28 | Try [live demo](http://websemantics.github.io/semantic-dojo). 29 | ------ 30 | ![Screenshot](https://raw.githubusercontent.com/websemantics/semantic-dojo/master/src/app/resources/img/screenshot.png "Screenshot") 31 | 32 | ## Install 33 | 34 | This will generate the master Semantic Dojo styles at `dist/semantic-dojo.css`, assets at `dist/themes` and compiled Dojo app at `dist/src/app` 35 | 36 | Clone locally 37 | ``` 38 | git clone https://github.com/websemantics/semantic-dojo 39 | ``` 40 | 41 | Run build script 42 | ``` 43 | ./build.sh 44 | ``` 45 | 46 | View `index.html` or `src/app/index.html` 47 | 48 | ## Guide 49 | 50 | [Semantic UI](http://semantic-ui.com/) is an awesome CSS framework that provides a wide range of UI components. A powerful feature of Semantic UI is the ability to build various themes to each of its compoenents. For example, the Button widget comes with a varity of themes for example, flat default, basic, github, raised and many more. 51 | 52 | [Semantic Dojo](https://github.com/websemantics/semantic-dojo) brings these awesome features to Dojo Toolkit, allowing those who love DTK to build modern Web apps. 53 | 54 | To test different themes for the supported widgets, go to 'less/theme.config' and change the Button theme for example from 'default' to 'raised': `@button : 'raised';`, refresh and enjoy! 55 | 56 | This will build the dojo app to `dist/app` folder, and also run `gulp` for Semantic Dojo. 57 | 58 | ## Development 59 | 60 | To contribute to Semantic Dojo, follow the installation steps above then edit: 61 | 62 | - The main dev page, `src/app/dev.html` 63 | - Semantic Dojo home page, `src/app/index.html` 64 | 65 | ## Logo 66 | 67 | ![Semantic Dojo](https://raw.githubusercontent.com/websemantics/semantic-dojo/master/src/app/resources/img/logo.png "Semantic Dojo") 68 | 69 | ## Credits 70 | 71 | Few of this themes elements have been a port from [Dojo Flat Theme](https://github.com/Esri/dojo-theme-flat) with adjucements for the Semantic UI generic styles and user experince. 72 | 73 | ## Open Source Projects Used 74 | 75 | * Semantic Dojo Styles 76 | https://github.com/websemantics/semantic-dojo-styles 77 | * Dojo Flat Theme - https://github.com/Esri/dojo-theme-flat 78 | * Semantic UI - https://github.com/Semantic-Org/Semantic-UI 79 | * Dojo Boilerplate - https://github.com/csnover/dojo-boilerplate 80 | -------------------------------------------------------------------------------- /src/app/widgets/Temp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main Widget 3 | * 4 | * For development of individual widgets purposes only 5 | * 6 | * @link http://websemantics.ca/ibuild 7 | * @link http://ibuild.io 8 | * @author WebSemantics, Inc. 9 | * @author Adnan M.Sagar, PhD. 10 | * @copyright 2012-2015 Web Semantics, Inc. 11 | * @since August 28th 2015 12 | * @package SemanticDojo\Main 13 | */ 14 | 15 | define(["dojo/_base/declare", 16 | "dojo", 17 | "dojo/on", 18 | "dojo/dom", 19 | "dijit/registry", 20 | "dijit/_WidgetBase", 21 | "dijit/_TemplatedMixin", 22 | "dijit/_WidgetsInTemplateMixin", 23 | "dojo/text!../template/temp.html", 24 | "dijit/form/Select", 25 | "dijit/form/VerticalSlider", 26 | "dijit/form/CheckBox", 27 | "dijit/form/RadioButton", 28 | "dijit/form/HorizontalSlider", 29 | "dijit/form/HorizontalRule", 30 | "dijit/form/HorizontalRuleLabels", 31 | "dijit/form/TextBox", 32 | "dijit/form/Textarea", 33 | "dijit/form/ValidationTextBox", 34 | "dijit/layout/ContentPane", 35 | "dijit/layout/TabContainer", 36 | "dijit/form/DropDownButton", 37 | "dijit/DropDownMenu", 38 | "dijit/MenuItem", 39 | "dijit/TooltipDialog", 40 | "dijit/Tooltip", 41 | "dijit/form/Form", 42 | "dijit/ColorPalette", 43 | "dijit/ProgressBar", 44 | "dijit/layout/BorderContainer", 45 | "dijit/Tree", 46 | "dijit/tree/ForestStoreModel", 47 | "dojo/data/ItemFileWriteStore" 48 | 49 | ], function (declare, dojo, on, dom, registry, WidgetBase, TemplatedMixin,WidgetsInTemplateMixin, 50 | template, Select, VerticalSlider, CheckBox,RadioButton, HorizontalSlider, 51 | HorizontalRule,HorizontalRuleLabels,TextBox, Textarea, ValidationTextBox, 52 | ContentPane, TabContainer,DropDownButton, DropDownMenu, MenuItem, TooltipDialog,Tooltip, Form, 53 | ColorPalette, ProgressBar, BorderContainer, Tree, ForestStoreModel, ItemFileWriteStore) { 54 | return declare([WidgetBase, TemplatedMixin, WidgetsInTemplateMixin], { 55 | 56 | templateString: template, 57 | 58 | widgetsInTemplate: true, 59 | 60 | postCreate: function () { 61 | 62 | this.inherited(arguments); 63 | 64 | 65 | 66 | 67 | 68 | /* 69 | 70 | var tooltipDialog2 = new TooltipDialog({ 71 | content: '\ 72 |
\ 73 | \ 74 | Inbox\ 75 |
1
\ 76 | \ 77 | \ 78 | Spam\ 79 |
51
\ 80 | \ 81 | \ 82 | Updates\ 83 |
1
\ 84 | \ 85 |
\ 86 |
\ 87 | \ 88 | \ 89 |
\ 90 |
\ 91 |
\ 92 | ' 93 | }); 94 | 95 | this['tooltipdialogButton2'].set("dropDown", tooltipDialog2); 96 | 97 | */ 98 | 99 | 100 | 101 | 102 | // var menu = new DropDownMenu({ style: "display: none;"}); 103 | // var menuItem1 = new MenuItem({ 104 | // label: "Save", 105 | // iconClass:"dijitEditorIcon dijitEditorIconSave", 106 | // onClick: function(){ alert('save'); } 107 | // }); 108 | // menu.addChild(menuItem1); 109 | 110 | // var menuItem2 = new MenuItem({ 111 | // label: "Cut", 112 | // iconClass:"dijitEditorIcon dijitEditorIconCut", 113 | // onClick: function(){ alert('cut'); } 114 | // }); 115 | 116 | // menu.addChild(menuItem2); 117 | // menu.startup(); 118 | 119 | // var button = new DropDownButton({ 120 | // label: "hello!", 121 | // name: "programmatic2", 122 | // dropDown: menu, 123 | // id: "progButton" 124 | // }).startup(); 125 | 126 | // this['dropDownButtonContainer'].appendChild(button.domNode); 127 | 128 | // --------------------------------------------------------------- 129 | // Remove loading ... 130 | // --------------------------------------------------------------- 131 | dojo.destroy("loading"); 132 | 133 | }, 134 | startup: function () { 135 | this.inherited(arguments); 136 | } 137 | }); 138 | }); -------------------------------------------------------------------------------- /src/app/resources/css/main.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Semantic Dojo Styles 3 | * 4 | * @author Adnan M.Sagar, PhD. 5 | * @copyright 2002-2015 Web Semantics, Inc. (http://websemantics.ca) 6 | * @license http://www.opensource.org/licenses/mit-license.php MIT 7 | * @link http://websemantics.ca 8 | * @package websemantics/semantic-dojo 9 | */ 10 | 11 | 12 | @font-face { 13 | font-family: 'Conv_origami_making'; 14 | src: url('../fonts/origami/origami_making.eot'); 15 | src: local('☺'), url('../fonts/origami/origami_making.woff') format('woff'), url('../fonts/origami/origami_making.ttf') format('truetype'), url('../fonts/origami/origami_making.svg') format('svg'); 16 | font-weight: normal; 17 | font-style: normal; 18 | } 19 | 20 | /********************************************************************************* 21 | Flay Theme 22 | *********************************************************************************/ 23 | 24 | html, body { 25 | height: 100%; 26 | width: 100%; 27 | margin: 0; 28 | padding: 0; 29 | } 30 | 31 | body { 32 | font-family: Lato, 'Helvetica Neue', Arial; 33 | background-color: #ffffff; 34 | } 35 | 36 | * { outline: none !important; } 37 | 38 | *.unselectable{ 39 | -moz-user-select: -moz-none; 40 | -khtml-user-select: none; 41 | -webkit-user-select: none; 42 | -ms-user-select: none; 43 | user-select: none; 44 | } 45 | 46 | #container{ 47 | width: 100%; 48 | height: 100%; 49 | overflow: hidden; 50 | padding: 0px; 51 | margin: 0px; 52 | } 53 | 54 | #header { 55 | height: 50px; 56 | background: #ffffff; 57 | border:none!important; 58 | padding:15px; 59 | overflow: hidden; 60 | } 61 | 62 | #header h3 { 63 | width:100%; 64 | } 65 | 66 | #center { 67 | border:none!important; 68 | padding: 0px; 69 | } 70 | 71 | .secondary { 72 | color: #999; 73 | } 74 | 75 | .completed, 76 | .in-progress, 77 | .almost, 78 | .not-started { 79 | font-size: 11px; 80 | color: white; 81 | border-left: 1px solid #ddd; 82 | } 83 | 84 | .completed { 85 | background: #468847; 86 | } 87 | 88 | .in-progress { 89 | background: #F89406; 90 | } 91 | 92 | .almost { 93 | background: #3A87AD; 94 | } 95 | 96 | .not-started { 97 | background: #B94A48; 98 | } 99 | 100 | header {} 101 | 102 | header h2 { 103 | font-size: 26px; 104 | text-align: center; 105 | margin: 15px; 106 | } 107 | 108 | .content-wrapper { 109 | margin: 6px auto; 110 | position: relative; 111 | z-index: 1; 112 | } 113 | 114 | .section-title { 115 | background: none repeat scroll 0 0 #00B9F2; 116 | color: white; 117 | display: block; 118 | float: left; 119 | padding: 4px 15px; 120 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); 121 | margin-bottom: 0; 122 | } 123 | 124 | .content-table { 125 | width: 100%; 126 | text-align: left; 127 | border-spacing: 0; 128 | background-color: #f8f8f8; 129 | border-collapse: collapse; 130 | margin: 0; 131 | table-layout: fixed; 132 | 133 | } 134 | .content-table > tbody > tr > td, 135 | .content-table > thead > tr > th { 136 | padding: 8px 8px 8px 15px; 137 | text-align: left; 138 | vertical-align: middle; 139 | } 140 | 141 | .content-table > thead > tr > th { 142 | font-size: 16px; 143 | } 144 | 145 | .content-table > tbody > tr:nth-child(odd) { 146 | background-color: #f5f5f5; 147 | } 148 | 149 | 150 | /********************************************************************************* 151 | Custmom Styles 152 | *********************************************************************************/ 153 | 154 | .origami { 155 | font-family: 'Conv_origami_making', Lato, 'Helvetica Neue', Arial!important; 156 | } 157 | 158 | #example .example > h4:first-child { 159 | font-size: 18px; 160 | margin: 0em 0em 0em; 161 | } 162 | 163 | .claro .container.head { 164 | background-color: #00B5AD; 165 | height: 55vh; 166 | margin-left: auto !important; 167 | margin-right: auto !important; 168 | min-height: 400px; 169 | -webkit-box-align: center; 170 | -webkit-align-items: center; 171 | -ms-flex-align: center; 172 | align-items: center; 173 | display: -webkit-box; 174 | display: -webkit-flex; 175 | display: -ms-flexbox; 176 | display: flex; 177 | -webkit-box-pack: center; 178 | -webkit-justify-content: center; 179 | -ms-flex-pack: center; 180 | justify-content: center; 181 | } 182 | 183 | .head h1.title { 184 | font-size: 3.75em; 185 | font-weight: 100; 186 | } 187 | 188 | .ui.inverted { 189 | color:#ffffff; 190 | } 191 | 192 | .ui label { 193 | padding-left: 5px; 194 | } 195 | 196 | .field label { 197 | display: block; 198 | margin: 0em 0em 0.28571429rem 0em; 199 | color: rgba(0, 0, 0, 0.87); 200 | font-size: 0.92857143em; 201 | font-weight: bold; 202 | text-transform: none; 203 | } 204 | -------------------------------------------------------------------------------- /src/app/widgets/Main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main Widget 3 | * 4 | * Contains index.html content 5 | * 6 | * @link http://websemantics.ca/ibuild 7 | * @link http://ibuild.io 8 | * @author WebSemantics, Inc. 9 | * @author Adnan M.Sagar, PhD. 10 | * @copyright 2012-2015 Web Semantics, Inc. 11 | * @since August 28th 2015 12 | * @package SemanticDojo\Main 13 | */ 14 | 15 | define(["dojo/_base/declare", 16 | "dojo", 17 | "dijit/registry", 18 | "dijit/_WidgetBase", 19 | "dijit/_TemplatedMixin", 20 | "dijit/_WidgetsInTemplateMixin", 21 | "dojo/text!../template/main.html", 22 | "dijit/form/Select", 23 | "dijit/form/VerticalSlider", 24 | "dijit/form/CheckBox", 25 | "dijit/form/RadioButton", 26 | "dijit/form/HorizontalSlider", 27 | "dijit/form/HorizontalRule", 28 | "dijit/form/HorizontalRuleLabels", 29 | "dijit/form/TextBox", 30 | "dijit/form/Textarea", 31 | "dijit/form/ValidationTextBox", 32 | "dijit/layout/ContentPane", 33 | "dijit/layout/TabContainer", 34 | "dijit/form/DropDownButton", 35 | "dijit/TooltipDialog", 36 | "dijit/Tooltip", 37 | "dijit/form/Form", 38 | "dijit/ColorPalette", 39 | "dijit/ProgressBar", 40 | "dijit/layout/BorderContainer", 41 | "dijit/Tree", 42 | "dijit/tree/ForestStoreModel", 43 | "dojo/data/ItemFileWriteStore" 44 | 45 | ], function (declare, dojo, registry, WidgetBase, TemplatedMixin,WidgetsInTemplateMixin, 46 | template, Select, VerticalSlider, CheckBox,RadioButton, HorizontalSlider, 47 | HorizontalRule,HorizontalRuleLabels,TextBox, Textarea, ValidationTextBox, 48 | ContentPane, TabContainer,DropDownButton,TooltipDialog,Tooltip, Form, 49 | ColorPalette, ProgressBar, BorderContainer, Tree, ForestStoreModel, ItemFileWriteStore) { 50 | return declare([WidgetBase, TemplatedMixin, WidgetsInTemplateMixin], { 51 | templateString: template, 52 | widgetsInTemplate: true, 53 | 54 | postCreate: function () { 55 | 56 | this.inherited(arguments); 57 | // ---------------------------------------------------- 58 | // Colored Vertical Sliders 59 | // ---------------------------------------------------- 60 | 61 | var colors = ['red','orange','yellow','olive','green','teal','blue','violet','purple','pink','brown','grey','black']; 62 | for (var i = 0; i < colors.length; i++) { 63 | var color = colors[i]; 64 | new VerticalSlider({ 65 | name: "default vertical slider", 66 | 'class': color ,value: Math.floor((Math.random() * 100) + 1), 67 | intermediateChanges: true, 68 | style: "margin:10px 30px 10px 10px;height:240px;float:left", 69 | showButtons: false 70 | }, this['vs_' + (i+1)]); 71 | } 72 | 73 | // ---------------------------------------------------- 74 | // Create Horizontal Sliders 75 | // ---------------------------------------------------- 76 | 77 | new HorizontalSlider({ 78 | name: "default horizontal slider", 79 | value: 50, 'class' : 'orange', 80 | style: "margin:10px 10px 30px", 81 | showButtons:false 82 | }, this["hs_1"]); 83 | 84 | var sliderRulesH = new HorizontalRule({ 85 | count: 11, 86 | style: { height: "5px" } 87 | }); 88 | 89 | var sliderRuleLabelsH = new HorizontalRuleLabels({ 90 | labels: ["low", "mid", "high"] 91 | }); 92 | 93 | var horizontalSliderAdvanced = new HorizontalSlider({ 94 | name: "default horizontal slider", 95 | value: 50, 'class' : 'yellow', 96 | style: "margin:10px 10px 30px" 97 | }, this["hs_2"]); 98 | 99 | sliderRulesH.placeAt(horizontalSliderAdvanced.containerNode); 100 | sliderRuleLabelsH.placeAt(horizontalSliderAdvanced.containerNode); 101 | 102 | // ---------------------------------------------------- 103 | // Create Tabs 104 | // ---------------------------------------------------- 105 | 106 | var tcpnestedBottom1 = new ContentPane({ 107 | title: "Tab 1", 108 | content: "  Nested tab container(bottom)" 109 | }); 110 | var tcpnestedBottom2 = new ContentPane({ 111 | title: "Tab 2" 112 | }); 113 | var tcpnestedBottom3 = new ContentPane({ 114 | title: "Tab 3" 115 | }); 116 | var tcnestedBottom = new TabContainer({ 117 | tabPosition: "top", 118 | nested: true 119 | }); 120 | tcnestedBottom.addChild(tcpnestedBottom1); 121 | tcnestedBottom.addChild(tcpnestedBottom2); 122 | tcnestedBottom.addChild(tcpnestedBottom3); 123 | 124 | tcnestedBottom.startup(); 125 | 126 | var tcbp1 = new ContentPane({title: "Tab 1",content: tcnestedBottom}); 127 | var tcbp2 = new ContentPane({title: "Tab2"}); 128 | var tcbp3 = new ContentPane({title: "Tab 3"}); 129 | var tcbp4 = new ContentPane({title: "Tab 4"}); 130 | var tcbp5 = new ContentPane({title: "Tab 5"}); 131 | var tcb = new TabContainer({ 132 | region : 'center', 133 | tabPosition: "top"},this.tabContainer); 134 | 135 | tcb.addChild(tcbp1); 136 | tcb.addChild(tcbp2); 137 | tcb.addChild(tcbp3); 138 | tcb.addChild(tcbp4); 139 | tcb.addChild(tcbp5); 140 | 141 | // ---------------------------------------------------- 142 | // Create Tooltip 143 | // ---------------------------------------------------- 144 | new Tooltip({ 145 | connectId: this['tooltipAbove'], 146 | label: "tooltip: above", 147 | position: ['above'] 148 | }); 149 | new Tooltip({ 150 | connectId: this['tooltipAboveCentered'], 151 | label: "tooltip: above centered", 152 | position: ['above-centered'] 153 | }); 154 | new Tooltip({ 155 | connectId: this['tooltipBelow'], 156 | label: "tooltip: below", 157 | position: ['below'] 158 | }); 159 | new Tooltip({ 160 | connectId: this['tooltipBelowCentered'], 161 | label: "tooltip: below centered", 162 | position: ['below-centered'] 163 | }); 164 | new Tooltip({ 165 | connectId: this['tooltipBefore'], 166 | label: "tooltip: before", 167 | position: ['before'] 168 | }); 169 | new Tooltip({ 170 | connectId: this['tooltipAfter'], 171 | label: "tooltip: after", 172 | position: ['after'] 173 | }); 174 | 175 | // ---------------------------------------------------- 176 | // Create Tooltip Dialog 177 | // ---------------------------------------------------- 178 | 179 | var tooltipDialog1 = new TooltipDialog({ 180 | content: '
This tooltip dialog has an action bar.

' + 181 | '
' + 182 | '
' + 183 | '' + 184 | '
' + 185 | '
' + 186 | '
' 187 | }); 188 | 189 | this['tooltipdialogButton1'].set("dropDown", tooltipDialog1); 190 | 191 | var tooltipDialog2 = new TooltipDialog({ 192 | content: '
This is the content.

' 193 | }); 194 | 195 | this['tooltipdialogButton2'].set("dropDown", tooltipDialog2); 196 | 197 | var tooltipDialog3 = new TooltipDialog({ 198 | content: '
This tooltip dialog has an action bar.

' + 199 | '
' + 200 | '
' + 201 | '' + 202 | '
' + 203 | '
' + 204 | '
' 205 | }); 206 | 207 | this['tooltipdialogButton3'].set("dropDown", tooltipDialog3); 208 | 209 | var tooltipDialog4 = new TooltipDialog({ 210 | content: '
This is the content.

' 211 | }); 212 | this['tooltipdialogButton4'].set("dropDown", tooltipDialog4); 213 | 214 | // --------------------------------------------------------------- 215 | // Remove loading ... 216 | // --------------------------------------------------------------- 217 | dojo.destroy("loading"); 218 | 219 | 220 | }, 221 | startup: function () { 222 | this.inherited(arguments); 223 | // ---------------------------------------------------- 224 | // Semantic UI 225 | // ---------------------------------------------------- 226 | $('.popup').popup({on: 'hover'}); 227 | $(".close.icon").click(function(){ 228 | $(this).parent().hide(); 229 | }); 230 | 231 | } 232 | }); 233 | }); -------------------------------------------------------------------------------- /src/app/resources/css/example.css: -------------------------------------------------------------------------------- 1 | 2 | /********************************************************************************* 3 | Semantic Home styles 4 | *********************************************************************************/ 5 | 6 | @media only screen and (max-width: 992px) { 7 | html { 8 | overflow-x: visible; 9 | -webkit-overflow-scrolling: auto; 10 | } 11 | } 12 | #example > .pusher { 13 | display: block; 14 | min-height: 0px; 15 | flex-direction: initial; 16 | } 17 | #example > .pusher > .full.height { 18 | display: block; 19 | flex: none !important; 20 | } 21 | 22 | /*-------------- 23 | Masthead 24 | ---------------*/ 25 | 26 | #example.index .masthead.segment.zoomed h1 { 27 | text-shadow: 0px 0px 4px rgba(0, 0, 0, 0); 28 | color: rgba(255, 255, 255, 1); 29 | } 30 | #example.index .masthead.zoomed:after { 31 | opacity: 0; 32 | } 33 | #example.index .masthead.zoomed { 34 | background-color: #25282A; 35 | } 36 | 37 | #example.index .masthead { 38 | position: relative; 39 | overflow: hidden; 40 | text-align: center; 41 | padding: 0em; 42 | color: rgba(255, 255, 255, 0.9); 43 | margin-bottom: 0px; 44 | border-bottom: none; 45 | 46 | background-color: #000000; 47 | background-position: 50% 50%; 48 | -webkit-transform: translate3d(0, 0, 0); 49 | transform: translate3d(0, 0, 0); 50 | } 51 | #example.index .masthead:after { 52 | position: absolute; 53 | top: 0px; 54 | left: 0px; 55 | z-index: -1; 56 | width: 100%; 57 | height: 100%; 58 | content: ''; 59 | background-size: cover; 60 | 61 | opacity: 0.45; 62 | } 63 | #example.index .masthead.bg1:after { 64 | background-image: url("/images/backgrounds/1.jpg"); 65 | } 66 | #example.index .masthead.bg2:after { 67 | background-image: url("/images/backgrounds/2.jpg"); 68 | } 69 | #example.index .masthead.bg3:after { 70 | background-image: url("/images/backgrounds/3.jpg"); 71 | } 72 | #example.index .masthead.bg4:after { 73 | background-image: url("/images/backgrounds/4.jpg"); 74 | } 75 | #example.index .masthead.bg5:after { 76 | background-image: url("/images/backgrounds/5.jpg"); 77 | } 78 | #example.index .masthead.bg6:after { 79 | background-image: url("/images/backgrounds/6.jpg"); 80 | } 81 | #example.index .masthead.bg7:after { 82 | background-image: url("/images/backgrounds/7.jpg"); 83 | } 84 | #example.index .masthead.bg8:after { 85 | background-image: url("/images/backgrounds/8.jpg"); 86 | } 87 | #example.index .masthead.bg9:after { 88 | background-image: url("/images/backgrounds/9.jpg"); 89 | } 90 | #example.index .masthead.bg10:after { 91 | background-image: url("/images/backgrounds/10.jpg"); 92 | } 93 | #example.index .masthead.bg11:after { 94 | background-image: url("/images/backgrounds/11.jpg"); 95 | } 96 | #example.index .masthead.bg12:after { 97 | background-image: url("/images/backgrounds/12.jpg"); 98 | } 99 | #example.index .masthead.bg13:after { 100 | background-image: url("/images/backgrounds/13.jpg"); 101 | } 102 | #example.index .masthead.bg14:after { 103 | background-image: url("/images/backgrounds/14.jpg"); 104 | } 105 | 106 | 107 | #example.index .masthead, 108 | #example.index .masthead:after { 109 | -ms-transition: 110 | background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s, 111 | opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s 112 | ; 113 | -moz-transition: 114 | background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s, 115 | opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s 116 | ; 117 | -webkit-transition: 118 | background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s, 119 | opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s 120 | ; 121 | transition: 122 | background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s, 123 | opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s 124 | ; 125 | } 126 | #example.index .masthead .container { 127 | height: 55vh; 128 | margin-left: auto !important; 129 | margin-right: auto !important; 130 | min-height: 600px; 131 | 132 | -webkit-box-align: center; 133 | -webkit-align-items: center; 134 | -ms-flex-align: center; 135 | align-items: center; 136 | display: -webkit-box; 137 | display: -webkit-flex; 138 | display: -ms-flexbox; 139 | display: flex; 140 | -webkit-box-pack: center; 141 | -webkit-justify-content: center; 142 | -ms-flex-pack: center; 143 | justify-content: center; 144 | } 145 | #example .masthead .container { 146 | padding: 15rem 0em; 147 | } 148 | #example.index .following.bar iframe.github { 149 | margin-top: 0px; 150 | } 151 | #example.index .following.bar .menu .item { 152 | display: block; 153 | } 154 | #example.index.pushed .masthead, 155 | #example.index.pushed .following.bar { 156 | -webkit-transform: translate3d(0, 0, 0); 157 | -moz-transform: translate3d(0, 0, 0); 158 | transform: translate3d(0, 0, 0); 159 | } 160 | 161 | #example.index > .pusher > .footer { 162 | padding-left: 0em; 163 | } 164 | 165 | #example.index .light.following.bar { 166 | padding: 1em 0em; 167 | background-color: #FFFFFF; 168 | border-bottom: 1px solid #DDDDDD; 169 | box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04); 170 | } 171 | 172 | #example.index .masthead.segment .typed-cursor { 173 | position: relative; 174 | top: -0.05em; 175 | left: -0.25em; 176 | visibility: hidden; 177 | opacity: 1; 178 | -webkit-animation: blink 0.7s infinite; 179 | -moz-animation: blink 0.7s infinite; 180 | animation: blink 0.7s infinite; 181 | -webkit-transition: opacity 0.7s ease; 182 | -moz-transition: opacity 0.7s ease; 183 | transition: opacity 0.7s ease; 184 | } 185 | #example.index .masthead.segment .typed-cursor.stop { 186 | opacity: 0; 187 | -moz-animation-duration: 0s; 188 | -webkit-animation-duration: 0s; 189 | animation-duration: 0s; 190 | } 191 | @keyframes blink { 192 | 0% { opacity:1; } 193 | 50% { opacity:0; } 194 | 100% { opacity:1; } 195 | } 196 | @-webkit-keyframes blink { 197 | 0% { opacity:1; } 198 | 50% { opacity:0; } 199 | 100% { opacity:1; } 200 | } 201 | @-moz-keyframes blink { 202 | 0% { opacity:1; } 203 | 50% { opacity:0; } 204 | 100% { opacity:1; } 205 | } 206 | 207 | #example.index .vertical.segment { 208 | box-shadow: none; 209 | } 210 | 211 | #example.index .masthead.segment h1 { 212 | font-size: 3em; 213 | color: rgba(255, 255, 255, 1); 214 | line-height: 1.2; 215 | margin: 0px 0px 0px; 216 | padding-bottom: 0px; 217 | -moz-perspective: 500px; 218 | -webkit-perspective: 500px; 219 | perspective: 500px; 220 | 221 | text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 222 | 223 | -moz-transform-style: preserve-3d; 224 | -webkit-transform-style: preserve-3d; 225 | transform-style: preserve-3d; 226 | } 227 | #example.index .masthead.segment h1 .tagline { 228 | font-size: 0.75em; 229 | } 230 | #example.index .masthead.segment h1 > .library { 231 | display: block; 232 | font-size: 1.75em; 233 | font-weight: bold; 234 | } 235 | #example.index .masthead.segment h1 b { 236 | display: inline-block; 237 | font-weight: 500; 238 | } 239 | #example.index .masthead.segment h1 .text { 240 | display: inline-block; 241 | font-weight: 300; 242 | margin-left: -0.4em; 243 | } 244 | #example.index .masthead h2 { 245 | font-weight: normal; 246 | margin: 0px 0 16px 0px; 247 | font-size: 1.75em; 248 | border-bottom: none; 249 | line-height: 1; 250 | } 251 | #example.index .masthead p { 252 | font-size: 1.5em; 253 | margin: 1em 0em 1.5em; 254 | padding: 0px; 255 | } 256 | #example.index .ui.header { 257 | font-weight: normal; 258 | } 259 | 260 | #example.index .introduction { 261 | position: relative; 262 | clear: both; 263 | display: block; 264 | text-align: center; 265 | } 266 | #example.index .introduction .buttons { 267 | margin-top: 3em; 268 | } 269 | 270 | 271 | #example.index .advertisement { 272 | display: none !important; 273 | padding-left: 0; 274 | position: absolute; 275 | left: auto; 276 | right: 6em; 277 | top: 50%; 278 | transform: translateY(-50%); 279 | vertical-align: top; 280 | } 281 | #example.index .fixed.launch.button { 282 | display: none; 283 | top: 100px; 284 | } 285 | #example.index .main.menu { 286 | top: 0px; 287 | } 288 | #example.index pre.console { 289 | height: 120px; 290 | } 291 | 292 | /*-------------- 293 | Intro 294 | ---------------*/ 295 | 296 | #example .intro.segment h1 + p { 297 | font-size: 22px; 298 | } 299 | 300 | /*-------------- 301 | Demo 302 | ---------------*/ 303 | 304 | #example .demo.row .example > .ui.label:not(.empty) { 305 | margin-bottom: 1em; 306 | } 307 | #example .demo.row .ui.progress { 308 | margin-bottom: 2.5em; 309 | } 310 | #example .demo.row h4 { 311 | font-weight: bold !important; 312 | margin: 0em 0em 1em !important; 313 | } 314 | #example .demo.row .example { 315 | clear: both; 316 | padding-top: 3em; 317 | margin-top: 3em; 318 | } 319 | #example .demo.row .ui.menu, 320 | #example .demo.row .ui.card { 321 | width: 100%; 322 | } 323 | #example .demo.row .ui.card { 324 | width: 100%; 325 | max-width: 400px; 326 | } 327 | 328 | /*-------------- 329 | Features 330 | ---------------*/ 331 | 332 | #example.index .hidden.code { 333 | visibility: hidden; 334 | } 335 | 336 | #example.index .demo.row .example { 337 | clear: both; 338 | padding-top: 1.5em; 339 | margin-top: 1.5em; 340 | } 341 | #example.index .demo.row .example:first-child { 342 | margin-top: 0; 343 | padding-top: 0; 344 | } 345 | #example.index .demo.row .example:last-child { 346 | margin-bottom: 0em; 347 | } 348 | 349 | /*-------------- 350 | Following 351 | ---------------*/ 352 | 353 | #example.index .following.bar { 354 | position: fixed; 355 | top: 0px; 356 | z-index: 900; 357 | left: 0%; 358 | padding: 2em 0em; 359 | width: 100%; 360 | box-shadow: 0px 0px 0px 0px transparent; 361 | border-bottom: 1px solid transparent; 362 | transition: 363 | padding 0.5s ease, 364 | background 0.5s ease, 365 | box-shadow 0.5s ease, 366 | border 0.5s ease 367 | ; 368 | } 369 | #example.index .following.bar > .menu .item { 370 | transition: all 0.5s ease; 371 | } 372 | #example.index.pushed .following.bar .menu .item, 373 | #example.index.pushed .following.bar { 374 | transition: none; 375 | } 376 | #example.index .following.bar .additional.item[data-site="learn"]:hover { 377 | color: #D9499A; 378 | } 379 | #example.index .following.bar span.additional.item { 380 | cursor: default; 381 | color: rgba(0, 0, 0, 0.2); 382 | } 383 | #example.index .following.bar .inverted span.additional.item { 384 | color: rgba(255, 255, 255, 0.2); 385 | } 386 | #example.index .following.bar .column > .menu { 387 | margin-top: 0px; 388 | height: 35px; 389 | } 390 | #example.index .following.bar .network.menu .item { 391 | font-weight: bold; 392 | } 393 | #example.index .following.bar .item iframe { 394 | margin-left: 10px; 395 | } 396 | #example.index .following.bar .network.menu .view-ui { 397 | margin-right: 1em; 398 | } 399 | #example.index .light.following.bar .network.menu .view-ui { 400 | color: #00B5AD; 401 | } 402 | #example.index .light.following.bar .inverted.network.menu .view-ui { 403 | color: #6DFFFF; 404 | } 405 | #example.index .following .logo { 406 | float: left; 407 | width: 35px; 408 | margin-right: 1em; 409 | } 410 | #example.index .following .logo .side { 411 | width: 35px; 412 | } 413 | #example .masthead .version.label:after { 414 | background-color: #000000 !important; 415 | } 416 | #example.index .following .version.label { 417 | margin: 0.25em 0px 0px 1em; 418 | } 419 | 420 | 421 | /*-------------- 422 | Stripes 423 | ---------------*/ 424 | 425 | #example.index .stripe .grid .row { 426 | margin: 2rem 0rem; 427 | } 428 | #example.index .feature.stripe .grid .row { 429 | margin: 0rem; 430 | } 431 | #example.index .feature.stripe .column { 432 | display: flex; 433 | -ms-flex-direction: column; 434 | -webkit-flex-direction: column; 435 | -moz-flex-direction: column; 436 | flex-direction: column; 437 | } 438 | #example.index .feature.stripe p { 439 | -webkit-flex: 1 0 auto; 440 | -moz-flex: 1 0 auto; 441 | -ms-flex: 1 0 auto; 442 | flex: 1 0 auto; 443 | margin: 0.5em 0em 2em; 444 | } 445 | #example .stripe .ui.vertical.divider { 446 | font-size: 1rem; 447 | } 448 | #example.index .feature.stripe .icon.header .icon.image { 449 | width: auto; 450 | height: 65px; 451 | margin-bottom: 20px; 452 | } 453 | #example.index .stripe .icon.header .icon.image { 454 | height: 65px; 455 | margin-bottom: 20px; 456 | } 457 | #example.index .community.stripe { 458 | box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1); 459 | padding: 4em 0; 460 | } 461 | #example.index .stripe .icon.header i.icon { 462 | font-size: 2em; 463 | } 464 | 465 | 466 | /* Final */ 467 | #example.index .final.stripe { 468 | border-top: 1px solid #DDDDDD; 469 | background-color: #F8F8F8; 470 | } 471 | 472 | /* Alternate */ 473 | #example .alternate.stripe { 474 | background-color: #F2F3F5; 475 | } 476 | 477 | /* Inverted */ 478 | #example.index .inverted.stripe { 479 | background-color: #1B1C1D; 480 | } 481 | #example.index .inverted.stripe p { 482 | color: #FFFFFF; 483 | } 484 | 485 | 486 | /*-------------- 487 | Legacy? 488 | ---------------*/ 489 | 490 | /* content */ 491 | #example .solid, 492 | #example .stripe { 493 | background-color: #FFFFFF; 494 | padding: 10em 0px; 495 | border-radius: 0em; 496 | margin: 0em; 497 | -webkit-transform: translate3d(0, 0, 0); 498 | transform: translate3d(0, 0, 0); 499 | } 500 | #example .theming.stripe { 501 | -webkit-transform: none; 502 | transform: none; 503 | } 504 | 505 | #example .stripe h1 { 506 | font-size: 40px; 507 | } 508 | #example .stripe h2 { 509 | font-size: 26px; 510 | } 511 | #example .stripe h3 { 512 | font-size: 20px; 513 | } 514 | #example .feature.stripe { 515 | padding: 3em 0em; 516 | } 517 | #example .theming.stripe .left.aligned.column { 518 | padding-top: 8em; 519 | } 520 | #example .theming.stripe .hljs.code { 521 | height: 483px; 522 | max-height: 483px; 523 | } 524 | #example .theming .source.grid { 525 | display: none !important; 526 | margin: 2rem 2rem -4rem; 527 | } 528 | #example .theming .source.grid.visible { 529 | display: block; 530 | display: flex !important; 531 | } 532 | 533 | #example .theming.stripe .buttons { 534 | vertical-align: top; 535 | } 536 | #example .theming.stripe .button { 537 | margin-bottom: 0.5em; 538 | } 539 | #example .stripe .column > p { 540 | font-size: 16px; 541 | line-height: 1.6; 542 | margin: 1em 0em; 543 | } 544 | 545 | #example .dark.stripe { 546 | background-color: #333333; 547 | background: url(/images/dark-bg.png) repeat; 548 | color: #FFFFFF; 549 | } 550 | #example .stripe .column > .label { 551 | margin-bottom: 1em; 552 | } 553 | 554 | #example .solid { 555 | background-color: #FFFFFF; 556 | -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); 557 | -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); 558 | box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); 559 | } 560 | #example .solid .column { 561 | color: #555555; 562 | } 563 | #example .solid .column p b { 564 | color: rgba(0, 0, 0, 0.9); 565 | } 566 | #example .solid .column p { 567 | color: rgba(0, 0, 0, 0.5); 568 | } 569 | 570 | /*-------------- 571 | Promo 572 | ---------------*/ 573 | 574 | #example.index .promo.stripe { 575 | padding: 3em 0em; 576 | } 577 | 578 | 579 | /*-------------- 580 | Newsletter 581 | ---------------*/ 582 | 583 | #example.index .email.stripe { 584 | padding: 5em 0em; 585 | } 586 | #example.index .email.stripe p { 587 | margin: -0.5em 0em 1em; 588 | } 589 | #example.index .email.stripe .input { 590 | width: 450px; 591 | } 592 | #example.index .email.stripe .submit.button { 593 | margin-left: 1em; 594 | } 595 | 596 | @media only screen and (max-width : 400px) { 597 | #example.index .advertisement { 598 | display: none; 599 | margin-left: -130px !important; 600 | } 601 | #example.index .carbonad { 602 | width: 260px !important; 603 | } 604 | #example.index .masthead.segment h1 { 605 | font-size: 1.75em !important; 606 | } 607 | #example.index .feature.stripe { 608 | padding: 1em; 609 | } 610 | } 611 | 612 | @media only screen and (max-width : 600px) { 613 | #example.index .solid, 614 | #example.index .stripe { 615 | padding: 4em 0em; 616 | } 617 | #example.index .masthead.segment h1 .text { 618 | margin-left: 0em; 619 | } 620 | #example.index .following.bar { 621 | display: none; 622 | } 623 | #example.index .masthead:before { 624 | display: none; 625 | } 626 | #example.index .following.bar .column { 627 | text-align: center; 628 | } 629 | #example.index .following .logo { 630 | float: none; 631 | } 632 | #example.index .codebase.stripe { 633 | display: none; 634 | } 635 | #example.index .following .version.label { 636 | vertical-align: top; 637 | margin-top: 0em; 638 | } 639 | #example .masthead .container { 640 | padding: 6rem 0rem; 641 | } 642 | #example.index .masthead.segment h1 { 643 | font-size: 2.25em; 644 | } 645 | #example.index .email.stripe .input { 646 | width: 100%; 647 | } 648 | #example.index .following .secondary.menu { 649 | display: none; 650 | } 651 | #example.index .email.stripe .submit.button { 652 | margin-top: 0.5em; 653 | } 654 | #example.index .stripe .icon.header .icon.image { 655 | height: 50px; 656 | } 657 | #example.index .stripe { 658 | padding: 2em 0em !important; 659 | } 660 | } 661 | 662 | @media only screen and (max-width : 650px) { 663 | #example.index .fixed.launch.button { 664 | display: none; 665 | } 666 | #example .stripe h1 { 667 | font-size: 32px; 668 | } 669 | } 670 | @media only screen and (min-width : 650px) { 671 | #example .theming .source.button { 672 | display: none; 673 | } 674 | #example.index .main.menu { 675 | display: none; 676 | } 677 | 678 | #example.index .fixed.launch.button { 679 | display: none; 680 | } 681 | } 682 | 683 | 684 | 685 | /* Homepage */ 686 | @media only screen and (max-width : 810px) { 687 | #example.index .masthead.segment h1 > .library { 688 | font-size: 1.75em; 689 | } 690 | #example.index .feature.stripe p { 691 | height: auto; 692 | min-height: 0px; 693 | } 694 | #example.index .container { 695 | margin-left: 0em; 696 | margin-right: 0em; 697 | } 698 | #example .solid, #example .stripe { 699 | padding: 6em 0em; 700 | } 701 | #example.index .masthead .container { 702 | margin-top: 50px; 703 | } 704 | #example.index .following.bar span.additional.item { 705 | display: none; 706 | visibility: hidden !important; 707 | } 708 | #example.index .following.bar .network.menu .view-ui { 709 | margin-right: 0.75em; 710 | } 711 | #example.index .masthead .container { 712 | min-height: 350px; 713 | height: auto; 714 | } 715 | } 716 | 717 | 718 | @media only screen and (max-width : 1040px) { 719 | #example.index .following.bar .network.menu .view-ui { 720 | margin-right: 0.5em; 721 | } 722 | } 723 | 724 | 725 | @media only screen and (max-width: 1300px) { 726 | #example.index .advertisement { 727 | position: absolute; 728 | top: auto; 729 | left: 50%; 730 | bottom: 2rem; 731 | margin-left: -175px; 732 | -webkit-transform: none; 733 | -moz-transform: none; 734 | -ms-transform: none; 735 | transform: none; 736 | } 737 | #example.index .inverted.advertisement .carbonad-img { 738 | margin-top: 0px; 739 | } 740 | #example.index #carbonads-container { 741 | float: none; 742 | } 743 | #example.index .carbonad { 744 | width: 340px; 745 | } 746 | #example.index .carbonad-text, 747 | #example.index .carbonad-tag { 748 | float: none; 749 | display: block; 750 | text-align: left; 751 | margin-left: 160px; 752 | width: 170px; 753 | } 754 | } 755 | 756 | -------------------------------------------------------------------------------- /src/app/resources/fonts/origami/origami_making.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20090914 at Fri Aug 21 16:46:33 2015 6 | By www-data 7 | 8 | 9 | 10 | 25 | 27 | 29 | 31 | 33 | 35 | 37 | 40 | 43 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 83 | 85 | 87 | 89 | 91 | 93 | 95 | 97 | 100 | 102 | 104 | 106 | 108 | 110 | 112 | 114 | 116 | 118 | 120 | 122 | 124 | 126 | 128 | 130 | 132 | 134 | 136 | 138 | 140 | 142 | 144 | 146 | 148 | 150 | 152 | 154 | 156 | 158 | 160 | 162 | 164 | 166 | 168 | 170 | 172 | 174 | 176 | 178 | 180 | 182 | 184 | 186 | 188 | 190 | 192 | 194 | 196 | 198 | 200 | 202 | 204 | 206 | 208 | 210 | 212 | 214 | 216 | 218 | 220 | 222 | 224 | 226 | 228 | 230 | 232 | 234 | 236 | 239 | 240 | 241 | -------------------------------------------------------------------------------- /src/app/widgets/Dev.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Dev Widget 3 | * 4 | * Contains a list of all dijit supported widgets and their semantic ui conterparts 5 | * 6 | * @link http://websemantics.ca/ibuild 7 | * @link http://ibuild.io 8 | * @author WebSemantics, Inc. 9 | * @author Adnan M.Sagar, PhD. 10 | * @copyright 2012-2015 Web Semantics, Inc. 11 | * @since August 28th 2015 12 | * @package SemanticDojo\Main 13 | */ 14 | 15 | define(["dojo/_base/declare", 16 | "dojo", 17 | "dojo/dom", 18 | "dojo/query", 19 | "dojo/dom-construct", 20 | "dijit/_WidgetBase", 21 | "dijit/_TemplatedMixin", 22 | "dijit/_WidgetsInTemplateMixin", 23 | "dojo/text!../template/dev.html", 24 | "dojo/_base/lang", 25 | "dojo/aspect", 26 | "dojo/dnd/Source", 27 | "dijit/layout/BorderContainer", 28 | "dijit/layout/TabContainer", 29 | "dijit/layout/AccordionContainer", 30 | "dijit/layout/ContentPane", 31 | "dijit/form/ValidationTextBox", 32 | "dijit/form/NumberTextBox", 33 | "dijit/form/CurrencyTextBox", 34 | "dijit/form/TimeTextBox", 35 | "dijit/form/Textarea", 36 | "dijit/form/Button", 37 | "dijit/form/ToggleButton", 38 | "dijit/form/DropDownButton", 39 | "dijit/form/CheckBox", 40 | "dijit/form/RadioButton", 41 | "dijit/form/Select", 42 | "dijit/form/ComboBox", 43 | "dijit/form/MultiSelect", 44 | "dijit/form/ComboButton", 45 | "dijit/form/DateTextBox", 46 | "dijit/form/HorizontalSlider", 47 | "dijit/form/VerticalSlider", 48 | "dijit/form/HorizontalRule", 49 | "dijit/form/VerticalRule", 50 | "dijit/form/HorizontalRuleLabels", 51 | "dijit/form/VerticalRuleLabels", 52 | "dijit/form/NumberSpinner", 53 | "dijit/form/TextBox", 54 | "dijit/Menu", 55 | "dijit/MenuItem", 56 | "dijit/TooltipDialog", 57 | "dijit/ProgressBar", 58 | "dijit/Dialog", 59 | "dijit/Tooltip", 60 | "dijit/MenuBar", 61 | "dijit/MenuBarItem", 62 | "dijit/form/Form", 63 | "dijit/MenuSeparator", 64 | "dijit/PopupMenuItem", 65 | "dijit/PopupMenuBarItem", 66 | "dijit/DropDownMenu", 67 | "dijit/CheckedMenuItem", 68 | "dijit/ColorPalette", 69 | "dijit/TitlePane", 70 | "dijit/Tree", 71 | "dijit/tree/ObjectStoreModel", 72 | "dijit/tree/dndSource", 73 | "dojo/store/Memory", 74 | "dijit/InlineEditBox", 75 | "dijit/Editor", 76 | "dijit/_editor/_Plugin", 77 | "dijit/_editor/plugins/AlwaysShowToolbar", 78 | "dijit/_editor/plugins/FontChoice", // 'fontName','fontSize','formatBlock' 79 | "dijit/_editor/plugins/TextColor", 80 | "dijit/_editor/plugins/LinkDialog", 81 | "dijit/_editor/plugins/FullScreen", 82 | "dijit/_editor/plugins/ViewSource", 83 | "dijit/_editor/plugins/NewPage", 84 | "dijit/_editor/plugins/Print", 85 | "dijit/_editor/plugins/TabIndent", 86 | "dijit/_editor/plugins/ToggleDir" 87 | ], 88 | function (declare, dojo, dom, query, domConstruct, WidgetBase, TemplatedMixin, 89 | WidgetsInTemplateMixin, template, lang, aspect, Source, BorderContainer, 90 | TabContainer,AccordionContainer,ContentPane,ValidationTextBox,NumberTextBox, 91 | CurrencyTextBox,TimeTextBox,Textarea,Button,ToggleButton,DropDownButton,CheckBox, 92 | RadioButton,Select,ComboBox,MultiSelect,ComboButton,DateTextBox,HorizontalSlider, 93 | VerticalSlider,HorizontalRule,VerticalRule,HorizontalRuleLabels,VerticalRuleLabels, 94 | NumberSpinner,TextBox,Menu, MenuItem,TooltipDialog,ProgressBar,Dialog,Tooltip, 95 | MenuBar,MenuBarItem,Form,MenuSeparator,PopupMenuItem,PopupMenuBarItem,DropDownMenu, 96 | CheckedMenuItem,ColorPalette,TitlePane,Tree,ObjectStoreModel,dndSource,Memory, 97 | InlineEditBox,Editor) { 98 | return declare([WidgetBase, TemplatedMixin, WidgetsInTemplateMixin], { 99 | templateString: template, 100 | widgetsInTemplate: true, 101 | 102 | postCreate: function () { 103 | 104 | this.inherited(arguments); 105 | 106 | //************************************* 107 | // Forms 108 | //************************************* 109 | 110 | //programmatically create horizontal sliders 111 | new HorizontalSlider({ 112 | name: "default horizontal slider", 113 | "class": "make-disabled", 114 | value: 5, 115 | minimum: -10, 116 | maximum: 10, 117 | intermediateChanges: true, 118 | style: "margin:10px 10px 30px", 119 | showButtons:false 120 | }, this.horizontalSliderNormal); 121 | 122 | var sliderRulesH = new HorizontalRule({ 123 | count: 11, 124 | style: { height: "5px" } 125 | }); 126 | 127 | var sliderRuleLabelsH = new HorizontalRuleLabels({ 128 | labels: ["low", "mid", "high"] 129 | }); 130 | 131 | var horizontalSliderAdvanced = new HorizontalSlider({ 132 | name: "default horizontal slider", 133 | "class": "make-disabled", 134 | value: 5, 135 | minimum: -10, 136 | maximum: 10, 137 | intermediateChanges: true, 138 | discreteValues: 11, 139 | style: "margin:10px 10px 30px" 140 | }, this.horizontalSliderAdvancedNormal); 141 | 142 | sliderRulesH.placeAt(horizontalSliderAdvanced.containerNode); 143 | sliderRuleLabelsH.placeAt(horizontalSliderAdvanced.containerNode); 144 | 145 | //programmatically create vertical sliders 146 | new VerticalSlider({ 147 | name: "default vertical slider", 148 | "class": "make-disabled", 149 | value: 5, 150 | minimum: -10, 151 | maximum: 10, 152 | intermediateChanges: true, 153 | style: "margin:10px 30px 10px 10px;height:240px;float:left", 154 | showButtons: false 155 | }, this.verticalSliderNormal); 156 | 157 | 158 | var sliderRulesV = new VerticalRule({ 159 | count: 11, 160 | style: { width: "5px" } 161 | }); 162 | 163 | var sliderRuleLabelsV = new VerticalRuleLabels({ 164 | labels: ["low", "mid", "high"] 165 | }); 166 | 167 | var verticalSliderAdvanced = new VerticalSlider({ 168 | name: "default vertical slider", 169 | "class": "make-disabled", 170 | value: 5, 171 | minimum: -10, 172 | maximum: 10, 173 | intermediateChanges: true, 174 | discreteValues: 11, 175 | style: "margin:10px 30px 10px 10px;height:240px;float:left" 176 | }, this.verticalSliderAdvancedNormal); 177 | 178 | sliderRulesV.placeAt(verticalSliderAdvanced.containerNode); 179 | sliderRuleLabelsV.placeAt(verticalSliderAdvanced.containerNode); 180 | 181 | // Colored Sliders 182 | var colors = ['red','orange','yellow','olive','green','teal','blue','violet','purple','pink','brown','grey','black']; 183 | for (var i = 0; i < colors.length; i++) { 184 | var color = colors[i]; 185 | new VerticalSlider({ 186 | name: "default vertical slider", 187 | "class": color + " make-disabled",value: Math.floor((Math.random() * 100) + 1), 188 | intermediateChanges: true, 189 | style: "margin:10px 30px 10px 10px;height:240px;float:left", 190 | showButtons: false 191 | }, this['verticalSliderNormal' + (i+1)]); 192 | } 193 | 194 | //programmatically create number spinners 195 | new NumberSpinner({ 196 | value: 1000, 197 | "class": "make-disabled", 198 | smallDelta: 10, 199 | constraints: { min: 9, max: 1550, places: 0 } 200 | }, this.numberSpinnerNormal); 201 | 202 | this.dropdownbutton1.startup(); 203 | this.combobutton1.startup(); 204 | 205 | //************************************* 206 | // Layout 207 | //************************************* 208 | 209 | this.Accordion.startup(); 210 | /* borderContainer */ 211 | var bc = new BorderContainer({ style: "height: 100%; width: 100%;", liveSplitters: true, gutters:true }); 212 | var bcp1 = new ContentPane({ 213 | region: "top", 214 | content: "Top Panel" 215 | }); 216 | 217 | bc.addChild(bcp1); 218 | 219 | var bcp2 = new ContentPane({ 220 | region: "leading", 221 | content: "Leading Panel", 222 | splitter: true 223 | }); 224 | bc.addChild(bcp2); 225 | var bcp3 = new ContentPane({ 226 | region: "center", 227 | content: "Center Panel" 228 | }); 229 | bc.addChild(bcp3); 230 | var bcp4 = new ContentPane({ 231 | region: "trailing", 232 | content: "Trailing Panel" 233 | }); 234 | bc.addChild(bcp4); 235 | var bcp5 = new ContentPane({ 236 | region: "bottom", 237 | content: "Bottom Panel" 238 | }); 239 | bc.addChild(bcp5); 240 | this.borderContainer.appendChild(bc.domNode); 241 | bc.startup(); 242 | 243 | /* tabContainers */ 244 | 245 | /* top */ 246 | var tcpnestedTop1 = new ContentPane({ 247 | title: "Tab 1", 248 | content: "nested tab container(top)" 249 | }); 250 | var tcpnestedTop2 = new ContentPane({ 251 | title: "Tab 2" 252 | }); 253 | var tcpnestedTop3 = new ContentPane({ 254 | title: "Tab 3", 255 | closable: true 256 | }); 257 | var tcnestedTop = new TabContainer({ 258 | tabPosition: "top", 259 | nested: true 260 | }); 261 | tcnestedTop.addChild(tcpnestedTop1); 262 | tcnestedTop.addChild(tcpnestedTop2); 263 | tcnestedTop.addChild(tcpnestedTop3); 264 | 265 | tcnestedTop.startup(); 266 | 267 | var tcp1 = new ContentPane({ 268 | title: "Tab 1", 269 | content: tcnestedTop 270 | }); 271 | var tcp2 = new ContentPane({ 272 | title: "Tab 2" 273 | }); 274 | var tcp3 = new ContentPane({ 275 | title: "Tab 3", 276 | closable: true 277 | }); 278 | var tcp4 = new ContentPane({ 279 | title: "Tab 4", 280 | closable: true 281 | }); 282 | var tct = new TabContainer({ 283 | style: "height: 240px; width: 450px;", 284 | tabPosition: "top-h" 285 | }, this.tabContainerTop); 286 | 287 | tct.addChild(tcp1); 288 | tct.addChild(tcp2); 289 | tct.addChild(tcp3); 290 | tct.addChild(tcp4); 291 | tct.startup(); 292 | /* left */ 293 | var tcpnestedLeft1 = new ContentPane({ 294 | title: "Tab 1", 295 | content: "nested tab container(left)" 296 | }); 297 | var tcpnestedLeft2 = new ContentPane({ 298 | title: "Tab 2" 299 | }); 300 | var tcpnestedLeft3 = new ContentPane({ 301 | title: "Tab 3" 302 | }); 303 | var tcnestedLeft = new TabContainer({ 304 | tabPosition: "left", 305 | nested: true 306 | }); 307 | tcnestedLeft.addChild(tcpnestedLeft1); 308 | tcnestedLeft.addChild(tcpnestedLeft2); 309 | tcnestedLeft.addChild(tcpnestedLeft3); 310 | 311 | tcnestedLeft.startup(); 312 | 313 | var tclp1 = new ContentPane({ 314 | title: "Tab 1", 315 | content: tcnestedLeft 316 | }); 317 | var tclp2 = new ContentPane({ 318 | title: "Tab 2", 319 | content: "some content" 320 | }); 321 | var tclp3 = new ContentPane({ 322 | title: "Tab 3", 323 | content: "some content", 324 | closable: true 325 | }); 326 | var tcl = new TabContainer({ 327 | "class": "make-disabled", 328 | style: "height: 240px; width: 350px;", 329 | tabPosition: "left-h"//, 330 | //tabStrip: true 331 | }, this.tabContainerLeft); 332 | 333 | tcl.addChild(tclp1); 334 | tcl.addChild(tclp2); 335 | tcl.addChild(tclp3); 336 | 337 | tcl.startup(); 338 | /* right */ 339 | var tcpnestedRight1 = new ContentPane({ 340 | title: "Tab 1", 341 | content: "nested tab container(right)" 342 | }); 343 | var tcpnestedRight2 = new ContentPane({ 344 | title: "Tab 2" 345 | }); 346 | var tcpnestedRight3 = new ContentPane({ 347 | title: "Tab 3" 348 | }); 349 | var tcnestedRight = new TabContainer({ 350 | tabPosition: "right", 351 | nested: true 352 | }); 353 | tcnestedRight.addChild(tcpnestedRight1); 354 | tcnestedRight.addChild(tcpnestedRight2); 355 | tcnestedRight.addChild(tcpnestedRight3); 356 | 357 | tcnestedRight.startup(); 358 | 359 | var tcrp1 = new ContentPane({ 360 | title: "Tab 1", 361 | content: tcnestedRight 362 | }); 363 | var tcrp2 = new ContentPane({ 364 | title: "Tab 2", 365 | closable: true 366 | }); 367 | var tcrp3 = new ContentPane({ 368 | title: "Tab 3" 369 | }); 370 | 371 | var tcr = new TabContainer({ 372 | style: "height: 240px; width: 450px;", 373 | tabPosition: "right-h" 374 | }, this.tabContainerRight); 375 | 376 | tcr.addChild(tcrp1); 377 | tcr.addChild(tcrp2); 378 | tcr.addChild(tcrp3); 379 | 380 | tcr.startup(); 381 | /* bottom */ 382 | var tcpnestedBottom1 = new ContentPane({ 383 | title: "Tab 1", 384 | content: "nested tab container(bottom)" 385 | }); 386 | var tcpnestedBottom2 = new ContentPane({ 387 | title: "Tab 2" 388 | }); 389 | var tcpnestedBottom3 = new ContentPane({ 390 | title: "Tab 3" 391 | }); 392 | var tcnestedBottom = new TabContainer({ 393 | tabPosition: "bottom", 394 | nested: true 395 | }); 396 | tcnestedBottom.addChild(tcpnestedBottom1); 397 | tcnestedBottom.addChild(tcpnestedBottom2); 398 | tcnestedBottom.addChild(tcpnestedBottom3); 399 | 400 | tcnestedBottom.startup(); 401 | 402 | var tcbp1 = new ContentPane({ 403 | title: "Tab 1", 404 | content: tcnestedBottom 405 | }); 406 | var tcbp2 = new ContentPane({ 407 | title: "Tab2" 408 | }); 409 | var tcbp3 = new ContentPane({ 410 | title: "Tab 3" 411 | }); 412 | var tcbp4 = new ContentPane({ 413 | title: "Tab 4" 414 | }); 415 | var tcbp5 = new ContentPane({ 416 | title: "Tab 5" 417 | }); 418 | var tcbp6 = new ContentPane({ 419 | title: "Tab 6" 420 | }); 421 | var tcbp7 = new ContentPane({ 422 | title: "Tab 7" 423 | }); 424 | var tcbp8 = new ContentPane({ 425 | "class": "make-disabled", 426 | title: "Tab 8" 427 | }); 428 | var tcb = new TabContainer({ 429 | style: "height: 240px; width: 450px;", 430 | //tabPosition: "bottom-h" 431 | tabPosition: "bottom" 432 | }, this.tabContainerBottom); 433 | 434 | tcb.addChild(tcbp1); 435 | tcb.addChild(tcbp2); 436 | tcb.addChild(tcbp3); 437 | tcb.addChild(tcbp4); 438 | tcb.addChild(tcbp5); 439 | tcb.addChild(tcbp6); 440 | tcb.addChild(tcbp7); 441 | tcb.addChild(tcbp8); 442 | tcb.startup(); 443 | 444 | //************************************* 445 | // Other 446 | //************************************* 447 | 448 | this.initMenuBar(); 449 | //tooltip dialog 450 | var myDialog = new Dialog({ 451 | title: "My Dialog", 452 | content: "Test content.", 453 | style: "width: 300px" 454 | }); 455 | 456 | var tooltipDialog1 = new TooltipDialog({ 457 | content: '
This tooltip dialog has an action bar.

' + 458 | '
' + 459 | '
' + 460 | '' + 461 | '
' + 462 | '
' + 463 | '
' 464 | }); 465 | 466 | this.tooltipdialogButton1.set("dropDown", tooltipDialog1); 467 | 468 | var tooltipDialog2 = new TooltipDialog({ 469 | content: '
This is the content.

' 470 | }); 471 | this.tooltipdialogButton2.set("dropDown", tooltipDialog2); 472 | 473 | var tooltipDialog3 = new TooltipDialog({ 474 | content: '
This tooltip dialog has an action bar.

' + 475 | '
' + 476 | '
' + 477 | '' + 478 | '
' + 479 | '
' + 480 | '
' 481 | }); 482 | 483 | this.tooltipdialogButton3.set("dropDown", tooltipDialog3); 484 | 485 | var tooltipDialog4 = new TooltipDialog({ 486 | content: '
This is the content.

' 487 | }); 488 | this.tooltipdialogButton4.set("dropDown", tooltipDialog4); 489 | 490 | //tooltips 491 | new Tooltip({ 492 | connectId: this.tooltipAbove, 493 | label: "tooltip: above", 494 | position: ['above'] 495 | }); 496 | new Tooltip({ 497 | connectId: this.tooltipAboveCentered, 498 | label: "tooltip: above centered", 499 | position: ['above-centered'] 500 | }); 501 | new Tooltip({ 502 | connectId: this.tooltipBelow, 503 | label: "tooltip: below", 504 | position: ['below'] 505 | }); 506 | new Tooltip({ 507 | connectId: this.tooltipBelowCentered, 508 | label: "tooltip: below centered", 509 | position: ['below-centered'] 510 | }); 511 | new Tooltip({ 512 | connectId: this.tooltipBefore, 513 | label: "tooltip: before", 514 | position: ['before'] 515 | }); 516 | new Tooltip({ 517 | connectId: this.tooltipAfter, 518 | label: "tooltip: after", 519 | position: ['after'] 520 | }); 521 | 522 | // tree 523 | this.initTree(); 524 | 525 | // editor 526 | this.initEditBox(); 527 | 528 | // inline edit box 529 | this.initInlineEditBox(); 530 | 531 | // DnD 532 | this.initDnD(); 533 | 534 | // Disable button 535 | 536 | var checkBox = new CheckBox({ 537 | name: "checkBox", 538 | 'style': "font-weight: normal;float:right", 539 | checked: false, 540 | onChange: function(b){ 541 | var disabled = this.get('value') == "on" ? true : false ; 542 | // Get all widgets to be disabled!! 543 | query(".make-disabled").forEach(function(node, idx){ 544 | var widget = dijit.getEnclosingWidget(node); 545 | widget.set("disabled",disabled); 546 | }); 547 | } 548 | }, this["disable-button"]).startup(); 549 | 550 | // --------------------------------------------------------------- 551 | // Remove loading ... 552 | // --------------------------------------------------------------- 553 | dojo.destroy("loading"); 554 | 555 | // ---------------------------------------------------- 556 | // Semantic Ui 557 | // ---------------------------------------------------- 558 | 559 | $('.ui.checkbox').checkbox(); 560 | $('.ui.radio.checkbox').checkbox(); 561 | $('.dropdown').dropdown({transition: 'drop'}); 562 | $('.menu .item').tab(); 563 | $('.ui.accordion').accordion(); 564 | 565 | }, 566 | 567 | initMenuBar: function () { 568 | var pMenuBar = new MenuBar({"class":'make-disabled'}); 569 | 570 | var pSubMenu = new DropDownMenu({}); 571 | 572 | pSubMenu.addChild(new CheckedMenuItem({ 573 | label: "Checked menu item 1" 574 | })); 575 | pSubMenu.addChild(new CheckedMenuItem({ 576 | label: "Checked menu item 2" 577 | })); 578 | pMenuBar.addChild(new PopupMenuBarItem({ 579 | label: "File", 580 | popup: pSubMenu 581 | })); 582 | 583 | var pSubMenu2 = new DropDownMenu({}); 584 | pSubMenu2.addChild(new MenuItem({ 585 | label: "Cut", 586 | iconClass: "dijitEditorIcon dijitEditorIconCut" 587 | })); 588 | pSubMenu2.addChild(new MenuItem({ 589 | label: "Copy", 590 | iconClass: "dijitEditorIcon dijitEditorIconCopy", 591 | disabled: true 592 | })); 593 | pSubMenu2.addChild(new MenuItem({ 594 | label: "Paste", 595 | iconClass: "dijitEditorIcon dijitEditorIconPaste" 596 | })); 597 | pSubMenu2.addChild(new MenuSeparator()); 598 | 599 | var pSubMenu3 = new Menu(); 600 | pSubMenu3.addChild(new MenuItem({ 601 | label: "Submenu item" 602 | })); 603 | pSubMenu3.addChild(new MenuItem({ 604 | label: "Submenu item" 605 | })); 606 | pSubMenu2.addChild(new PopupMenuItem({ 607 | label: "More...", 608 | popup: pSubMenu3 609 | })); 610 | 611 | pMenuBar.addChild(new PopupMenuBarItem({ 612 | label: "Edit", 613 | popup: pSubMenu2 614 | })); 615 | 616 | pMenuBar.addChild(new MenuBarItem({ 617 | label: "Info" 618 | })); 619 | 620 | // pMenuBar.placeAt(wrapper); 621 | // pMenuBar.startup(); 622 | 623 | }, 624 | 625 | initTree: function () { 626 | // Sample code from: http://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html 627 | // Create test store, adding the getChildren() method required by ObjectStoreModel 628 | var treeStore = new dojo.store.Memory({ 629 | data: [ 630 | { id: 'world', name: 'The earth', type: 'planet', population: '6 billion' }, 631 | { 632 | id: 'AF', name: 'Africa', type: 'continent', population: '900 million', area: '30,221,532 sq km', 633 | timezone: '-1 UTC to +4 UTC', parent: 'world' 634 | }, 635 | { id: 'EG', name: 'Egypt', type: 'country', parent: 'AF' }, 636 | { id: 'KE', name: 'Kenya', type: 'country', parent: 'AF' }, 637 | { id: 'Nairobi', name: 'Nairobi', type: 'city', parent: 'KE' }, 638 | { id: 'Mombasa', name: 'Mombasa', type: 'city', parent: 'KE' }, 639 | { id: 'SD', name: 'Sudan', type: 'country', parent: 'AF' }, 640 | { id: 'Khartoum', name: 'Khartoum', type: 'city', parent: 'SD' }, 641 | { id: 'AS', name: 'Asia', type: 'continent', parent: 'world' }, 642 | { id: 'CN', name: 'China', type: 'country', parent: 'AS' }, 643 | { id: 'IN', name: 'India', type: 'country', parent: 'AS' }, 644 | { id: 'RU', name: 'Russia', type: 'country', parent: 'AS' }, 645 | { id: 'MN', name: 'Mongolia', type: 'country', parent: 'AS' }, 646 | { id: 'OC', name: 'Oceania', type: 'continent', population: '21 million', parent: 'world' }, 647 | { id: 'EU', name: 'Europe', type: 'continent', parent: 'world' }, 648 | { id: 'DE', name: 'Germany', type: 'country', parent: 'EU' }, 649 | { id: 'FR', name: 'France', type: 'country', parent: 'EU' }, 650 | { id: 'ES', name: 'Spain', type: 'country', parent: 'EU' }, 651 | { id: 'IT', name: 'Italy', type: 'country', parent: 'EU' }, 652 | { id: 'NA', name: 'North America', type: 'continent', parent: 'world' }, 653 | { id: 'SA', name: 'South America', type: 'continent', parent: 'world' } 654 | ], 655 | getChildren: function (object) { 656 | return this.query({ parent: object.id }); 657 | } 658 | }); 659 | 660 | aspect.around(treeStore, "put", function (originalPut) { 661 | // To support DnD, the store must support put(child, {parent: parent}). 662 | // Since memory store doesn't, we hack it. 663 | // Since our store is relational, that just amounts to setting child.parent 664 | // to the parent's id. 665 | return function (obj, options) { 666 | if (options && options.parent) { 667 | obj.parent = options.parent.id; 668 | } 669 | return originalPut.call(treeStore, obj, options); 670 | } 671 | }); 672 | 673 | // Create the model 674 | var treeModel = new ObjectStoreModel({ 675 | store: treeStore, 676 | query: { id: 'world' } 677 | }); 678 | 679 | // Create the Tree. 680 | var tree = new Tree({ 681 | "class": "make-disabled", 682 | model: treeModel, 683 | dndController: dijit.tree.dndSource 684 | }, this.treeNode); 685 | tree.startup(); 686 | }, 687 | 688 | initEditBox: function () { 689 | var myEditor = new Editor({ 690 | "class": "make-disabled", 691 | height: '300px', 692 | //extraPlugins: [dijit._editor.plugins.AlwaysShowToolbar], 693 | plugins: ['undo', 'redo', '|', 'cut', 'copy', 'paste', 'selectAll', 'delete', '|', 694 | 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'removeFormat', '|', 695 | 'insertOrderedList', 'insertUnorderedList', 'indent', 'outdent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyFull', '|', 696 | 'insertHorizontalRule', 'insertImage', 'createLink', 'unlink', 'foreColor', 'hiliteColor', '|', 697 | 'fontSize', 'formatBlock', 'viewSource', '|', 'newpage', 'fullscreen', 'print', 'tabIndent', 'toggleDir'] 698 | //, 699 | //dir: "rtl" 700 | //disabled: true 701 | }, this.editorNode); 702 | myEditor.startup(); 703 | }, 704 | 705 | initInlineEditBox: function () { 706 | new InlineEditBox({ 707 | "class": "make-disabled", 708 | editor: dijit.form.NumberTextBox, 709 | autoSave: false 710 | }, this.InlineEditBoxNode).startup(); 711 | }, 712 | 713 | initDnD: function () { 714 | var dndList = new Source(this.DnDList, {}); 715 | 716 | dndList.insertNodes(false, [ 717 | "Wrist watch", 718 | "Life jacket", 719 | "Toy bulldozer", 720 | "Vintage microphone", 721 | "TIE fighter" 722 | ]); 723 | } 724 | }); 725 | }); -------------------------------------------------------------------------------- /src/app/template/dev.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

   Semantic Dojo

7 |
8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 52 | 53 | 54 | 55 | 56 | 57 | 71 | 72 | 73 | 74 | 75 | 76 | 84 | 85 | 86 | 87 | 88 | 92 | 93 | 94 | 95 | 147 | 148 | 149 | 150 | 155 | 160 | 161 | 162 | 163 | 168 | 173 | 174 | 175 | 176 | 184 | 185 | 186 | 187 | 188 | 193 | 194 | 195 | 196 | 197 | 201 | 209 | 210 | 211 | 212 | 217 | 218 | 219 | 220 | 221 | 232 | 243 | 244 | 245 | 246 | 248 | 249 | 250 | 251 | 252 | 260 | 268 | 269 | 270 | 271 | 276 | 277 | 278 | 279 | 280 | 281 | 289 | 335 | 336 | 337 | 338 | 342 | 352 | 353 | 354 | 355 | 359 | 375 | 376 | 377 | 378 | 385 | 386 | 387 | 388 | 389 | 396 | 397 | 398 | 399 | 400 | 410 | 423 | 424 | 425 | 426 | 429 | 430 | 431 | 432 | 433 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 446 | 450 | 451 | 452 | 453 | 454 | 458 | 459 | 460 | 461 | 462 | 478 | 479 | 480 | 481 | 485 | 505 | 506 | 507 | 508 | 512 | 513 | 514 | 515 | 516 | 520 | 521 | 522 | 523 | 524 | 528 | 529 | 530 | 531 | 532 | 548 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 586 | 587 | 588 | 589 | 590 | 591 | 598 | 615 | 616 | 617 | 618 | 619 | 624 | 635 | 636 | 637 | 638 | 641 | 642 | 643 | 644 | 645 | 652 | 653 | 654 | 655 | 656 | 657 | 661 | 662 | 663 | 664 | 665 | 666 | 672 | 673 | 674 | 675 | 676 | 677 | 683 | 684 | 685 | 686 | 687 | 688 | 692 | 693 | 694 | 695 |
Dijit NameDijit 25 | Semantic
dijit/Dialog 36 | 37 |
38 |
39 |
40 | Content Area 41 |
42 |
43 |
44 |
45 | 46 | 49 |
50 |
51 |
dijit/TooltipDialog (with action bar) 58 |
59 | above-centered 60 |
61 |
62 | below centered 63 |
64 |
65 | before-centered 66 |
67 |
68 | after centered 69 |
70 |
dijit/Tooltip 77 | above | 78 | above centered | 79 | below | 80 | below centered | 81 | before | 82 | after 83 |
fonts/common/FontAwesome 89 | 90 | 91 |
fonts/editor/FontAwesome 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | | RTL | 142 | 143 | 144 | 145 | 146 |
dijit/form/TextBox 151 | 153 | 154 | 156 |
157 | 158 |
159 |
dijit/form/ValidationTextBox 164 | 167 | 169 |
170 | 171 |
172 |
dijit/form/NumberTextBox 177 | 183 |
dijit/form/CurrencyTextBox 189 | 192 |
dijit/form/Textarea,
dijit/form/SimpleTextarea		 198 | 200 | 202 |
203 |
204 | 206 |
207 |
208 |
dijit/form/TimeTextBox 213 | 216 |
dijit/form/Select 222 | 231 | 233 | 242 |
dijit/form/Button 247 |
dijit/form/Button (Other Colors) 253 | 254 | 255 | 256 | 257 | 258 | 259 | 261 | 262 | 263 | 264 | 265 | 266 | 267 |
dijit/form/ToggleButton 272 | 275 |
dijit/form/DropDownButton 282 |
283 | DropDown Button 284 |
285 | DropDown Content 286 |
287 |
288 | 		290 |
291 |
File
292 | 293 |
294 |
New
295 |
296 | ctrl + o 297 | Open... 298 |
299 |
300 | ctrl + s 301 | Save as... 302 |
303 |
304 | ctrl + r 305 | Rename 306 |
307 |
Make a copy
308 |
309 | 310 | Move to folder 311 |
312 |
313 | 314 | Move to trash 315 |
316 |
317 |
Download As...
318 |
319 | 320 | Publish To Web 321 |
322 |
Google Docs
323 |
Google Drive
324 |
Dropbox
325 |
Adobe Creative Cloud
326 |
Private FTP
327 |
Another Service...
328 |
329 |
330 |
E-mail Collaborators
331 |
332 |
333 | 334 |
dijit/form/CheckBox 339 | 340 | 341 | 343 |
344 | 345 | 346 |
347 |
348 | 349 | 350 |
351 |
dijit/form/RadioButton 356 | 357 | 358 | 360 |
361 |
362 |
363 |
364 | 365 |
366 |
367 |
368 |
369 | 370 |
371 |
372 |
373 |
374 |
dijit/form/ComboBox 379 | 384 |
dijit/form/MultiSelect 390 | 395 |
dijit/form/ComboButton 401 |
402 | Get all mail 403 |
404 |
Yahoo
405 |
Google
406 |
Hotmail
407 |
408 |
409 | 		411 |
412 |
Get all mail
413 |
414 | 415 |
416 |
Yahoo
417 |
Google
418 |
Hotmail
419 |
420 |
421 |
422 |
dijit/form/DateTextBox 427 | 428 |
dijit/form/NumberSpinner 434 |
435 |
443 | dijit/layout/BorderContainer (gutters: true)

444 | dijit/layout/ContentPane 445 | 		447 |
448 |
449 |
dijit/form/HorizontalSlider 455 |
456 |
457 |
dijit/form/VerticalSlider 463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |
dijit/layout/TabContainer (tabPosition: "top-h") 482 |
483 |
484 | 		486 |
487 | Tab 1 488 | Tab 2 489 | Tab 3 490 | Tab 4 491 |
492 |
493 | First 494 |
495 |
496 | Second 497 |
498 |
499 | Third 500 |
501 |
502 | Forth 503 |
504 |
dijit/layout/TabContainer (tabPosition: "left-h") 509 |
510 |
511 |
dijit/layout/TabContainer (tabPosition: "right-h") 517 |
518 |
519 |
dijit/layout/TabContainer (tabPosition: "bottom") 525 |
526 |
527 |
dijit/layout/AccordionContainer 533 |
534 |
535 |
536 | A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world. 537 |
538 |
539 | There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion. 540 |
541 |
542 | Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

543 | A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily. 544 |
545 |
546 |
547 | 		549 |
550 |
551 | 552 | What is a dog? 553 |
554 |
555 | 556 |
557 |
558 | 559 | What kinds of dogs are there? 560 |
561 |
562 | 563 |
564 |
565 | 566 | How do you acquire a dog? 567 |
568 |
569 |

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

570 |

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

571 |
572 |
573 | 574 | 575 | 576 |
dijit/MenuBar 584 |
585 |
dijit/ProgressBar (normal) 592 |
593 |
594 |
595 |
596 |
597 | 		599 |
600 |
601 |
602 |
603 |
604 |
605 |
606 |
607 |
608 |
609 |
610 |
611 |
612 |
613 |
614 |
dijit/ProgressBar (indeterminate) 620 |
621 |
622 |
623 | 		625 |
626 |
627 |
628 |
629 |
630 |
631 |
632 |
633 |
634 |
dijit/ColorPalette 639 |
640 |
dijit/TitlePane 646 |
647 |

648 | Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum... Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 649 |

650 |
651 |
dijit/Tree 658 |
659 |
660 |
dijit/Editor 667 |
668 |

This instance is created from a div directly with default toolbar and plugins

669 | The following HTML should appear as source: <INPUT TYPE="IMAGE" SRC="javascript:alert('no scripting attacks')"> 670 |
671 |
dijit/InlineEditBox 678 |
679 | 2000 680 |
681 | (Click number to edit) 682 |
dojo/dnd 689 |
    690 |
691 |
696 |
697 |
698 |
699 |
-------------------------------------------------------------------------------- /src/app/template/main.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | SEMANTIC DOJO 6 |

7 |
8 | 9 | 10 |
11 |

12 | A responsive Dojo theme that harnesses the style awesomeness of Semantic UI Framework. 13 | 14 | 0.2.1 15 | 16 |

17 | 18 | 19 | 20 | Github 21 | 22 | 23 | 24 | Download 25 | 26 |
27 |
28 | 29 |
30 |
31 |
32 |

33 | 34 | Unbelievable Theming 35 |

36 |

Build beautiful modern Web apps with the powerful Dojo Toolkit and the awesome Semantic UI Framework. Joining Semantic UI, a development framework for creating beautiful, responsive layouts using human-friendly Web with Dojo, a JavaScript toolkit with an extensive list of powerful UI widgets.This page demonstrates a number of Dijit widgets styled by Semantic UI and work side-by-side with its elements in a perfect harmony of grace and elegance.

37 | 38 |
39 |
40 |
41 | This theme is under active developmenet and altough a number of Dijit compoenents have been imeplemented, more development and testing is still required. For those who find this project useful and would like to contribute, pull requests are all welcomed. 42 |
43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 |

51 | TextBox 52 |

53 |
54 | 56 | 57 |
58 | 59 |
60 | 63 |
64 | 65 |
66 | 68 | 69 |
70 | 71 |
72 | 73 | 75 | 76 |
Search
77 |
78 | 79 |
80 | 82 | 83 | 84 |
85 | 86 |
87 |
88 | http:// 89 |
90 | 92 | 93 | 94 |
95 | 96 |
97 | 99 | 100 | 101 | Add Tags 102 | 103 |
104 |
105 |
106 |

107 | Textarea 108 |

109 |
110 |
111 | 112 |
113 |
114 | 115 | 116 |
117 |
118 |
119 |
120 |

121 | Label 122 |

123 | 124 | 23 New 125 | 126 | Dresses 127 | 128 |
129 | 130 |
131 |
132 |
133 |
134 | 136 |
Please enter a value
137 |
138 |
139 |
140 |
Please enter a value
141 | 143 |
144 |
145 |
146 |
147 |
148 |

149 | ProgressBar 150 |

151 |
152 | 156 |
157 |
158 |
159 |
160 | 161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |

169 | Step 170 |

171 |
172 | 173 | 174 |
175 |
Shipping
176 |
Choose your shipping options
177 |
178 | 179 | 180 | 181 |
182 |
Billing
183 |
Enter billing information
184 |
185 | 186 | 187 | 188 |
189 |
Confirm Order
190 |
Verify order details
191 |
192 | 193 |
194 |
195 |

196 |
197 |
198 |
199 |

200 | Button 201 |

202 |
203 | 204 |
205 | 206 |
207 | 208 |
209 | 210 |
211 | 213 |
214 | 215 |
216 | 217 |
218 | 219 |
220 |
221 | 222 |
223 |
224 | 225 | 226 | 227 |
228 |
229 | 230 |
231 |
232 | 233 | 234 | 235 | 236 |
237 |
238 | 239 | 240 | 241 |
242 |
243 | 244 |
245 |
246 | 247 |
248 |
249 | 250 |
251 | 252 |
253 |
254 | 255 |
256 |
257 | 258 |
259 | 260 | 261 | 262 |
263 | 264 |
265 |
266 | 267 |
268 | 271 | 274 | 277 | 280 |
281 | 282 |
283 |
284 | 285 |
286 |
287 | 289 | 292 | 295 |
296 |
297 | 298 |
299 |
300 | 301 |
302 | 306 | 310 |
311 | 312 |
313 | 315 | 317 | 319 |
320 | 321 |
322 |
323 |

324 | Tooltip 325 |

326 | above | 327 | above centered | 328 | below | 329 | below centered | 330 | before | 331 | after 332 |
333 |
334 |

335 | TooltipDialog 336 |

337 |
above-centered
338 |
below centered
339 |
before-centered
340 |
after centered
341 |
342 |
343 |

344 | TooltipDialog Menu 345 |

346 |
347 | 348 | 349 | 350 |
351 |
352 |
Drama
353 |
Comedy
354 |
Romance
355 |
Documentary
356 |
357 |
358 |
359 |
360 | 361 | 362 | 363 |
364 |
365 |
Drama
366 |
Comedy
367 |
Romance
368 |
Documentary
369 |
370 |
371 |
372 |
373 | 374 | 375 | 376 |
377 |
378 | 379 | Inbox 380 |
1
381 | 382 | 383 | Spam 384 |
51
385 | 386 | 387 | Updates 388 |
1
389 | 390 | 391 | Logout 392 | 393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |

401 | Select 402 |

403 | 412 |
413 |
414 |

415 | ColorPalette 416 |

417 |
418 |
419 |
420 |

421 | CheckBox 422 |

423 |
424 | 425 | 426 |
427 | 428 |
429 | 430 | 431 |
432 |
433 |
434 |

435 | RadioButton 436 |

437 |
438 | 439 | 440 |
441 |
442 | 443 | 444 |
445 |
446 | 447 | 448 |
449 |
450 |
451 |

452 | HorizontalSlider 453 |

454 |
455 |
456 |
457 |
458 |
459 |

460 | TabContainer 461 |

462 |
463 |
464 |
465 |
466 |
467 |
468 |
469 |

470 | Tree 471 |

472 |
473 |
474 | 475 |
476 |
478 | 479 |
481 |
482 | 483 |
484 |
485 |
486 |
487 |

488 | Message 489 |

490 |
491 | 492 | This site uses cookies 493 |
494 |
495 |
496 |
Looking for help?
497 | 501 |
502 |
503 |
504 | 505 |
506 | Was this what you wanted? 507 |
508 |
    509 |
  • It's good to see you again.
    • 510 |
  • Did you know it's been a while?
    • 511 |
512 |
513 |
514 |
Form Completed
515 |

You're all signed up for the newsletter.

516 |
517 |
518 |
Action Forbidden
519 |

You can only sign up for an account once with a given e-mail address.

520 |
521 |
522 | 523 |
524 |
525 | Just one second 526 |
527 |

We're fetching that content for you.

528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 | 536 |
537 |
538 |
539 |

540 | 541 | Clean & Elegant 542 |

543 |
544 |
545 |

Vertical Sliders

546 |

Build themes with support for custom definitions and multiple-levels of theme inheritance.

547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 | 555 |
556 |
557 |
558 |

559 | 560 | All Shapes and Sizes 561 |

562 |

Extremely user friendly, scalable and sexy UI styles that suits all tastes and display sizes.

563 |
564 |
565 | 566 |
567 | 569 | 570 |
571 | 572 |
573 | 575 | 576 |
577 | 578 |
579 | 581 | 582 |
583 | 584 |
585 | 587 | 588 |
589 | 590 |
591 | 593 | 594 |
595 | 596 |
597 | 599 | 600 |
601 |
602 |
603 |
604 | 605 |
606 |
607 |
608 |

609 | 610 | Powerful Grid 611 |

612 |
613 |
614 |

Forms / Grid

615 |

Dijit form elements fully integrated with a customizable and responsive CSS Grid. Read more, ...

616 | 617 | 618 | 619 |
620 |
621 |
622 | 623 | 624 |
625 |
626 | 627 | 628 |
629 |
630 | 631 | 632 |
633 |
634 |
635 |
636 | 637 |
638 |
639 | 640 |
641 |
642 | 643 |
644 |
645 |
646 |
647 | 648 |
649 |
650 | 651 |
652 |
653 | 654 |
655 |
656 |
657 |
658 |
659 |
660 |
661 |
662 | 663 |
664 |
665 |
666 |

667 | 668 | Buttons Party 669 |

670 |

Support for Dijit buttons themes, sizes, colors in a lively display of flexibility and style.

Read more, ...

671 |
672 |
673 |
674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 |
683 | 684 |
685 | 687 | 689 | 691 | 693 | 695 | 697 |
698 | 699 |
700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 |
714 | 715 |
716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 |
730 | 731 |
732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 |
747 | 748 |
749 |
750 |
751 | 752 |
753 |
754 |
755 | 756 |
757 | © 2015 WebSemantics, Inc. Semantic Dojo is licensed under the MIT license. 758 |
759 |
760 |
761 |
762 |
763 | --------------------------------------------------------------------------------