add base api and gui

.gitignore

@@ -0,0 +1,3 @@
+build
+node_modules
+.DS_Store

Gruntfile.js

@@ -0,0 +1,62 @@
+module.exports = function (grunt) {
+
+    //console.log(grunt.file.readJSON('src/build.json'))
+    var buildconf = grunt.file.readJSON('src/build.json')
+    // Project configuration.
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+        uglify: {
+            options: {
+                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+            },
+            build: {
+                src: 'build/htdocs/<%= pkg.name %>.js',
+                dest: 'build/htdocs/<%= pkg.name %>.min.js'
+            }
+        },
+        coffee: {
+            compile: {
+                files: {
+                    'build/htdocs/<%= pkg.name %>.js': buildconf.coffee
+                }
+            }
+            /*,
+            glob_to_multiple: {
+                expand: true,
+                flatten: true,
+                cwd: 'src/',
+                src: ['*.coffee'],
+                dest: 'build/htdocs/',
+                ext: '.js'
+            }*/
+        },
+        copy: {
+            main: {
+                files: buildconf.copy
+            },
+        },
+        concat: {
+            tags: {
+                src: buildconf.tags,
+                dest: 'build/htdocs/resources/tags/antos_tags.js'
+            },
+            themes:{
+                src:buildconf.themes,
+                dest:'build/htdocs/resources/themes/antos/antos.css'
+            }
+        },
+        clean: ['build/htdocs/*']
+    });
+
+    // Load the plugin that provides the "uglify" task.
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    // coffee support
+    grunt.loadNpmTasks('grunt-contrib-coffee');
+    // Default task(s).
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+
+    grunt.registerTask('default', ['coffee']);
+    grunt.registerTask('build', ['coffee:compile', 'copy:main', 'concat:tags', 'concat:themes']);
+};

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "antos",
+  "version": "0.0.1",
+  "description": "Web-based OS",
+  "main": "src/antos.js",
+  "scripts": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lxsang/antos.git"
+  },
+  "keywords": [
+    "OS",
+    "jquery",
+    "riot"
+  ],
+  "author": "Xuan Sang LE",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lxsang/antos/issues"
+  },
+  "homepage": "https://github.com/lxsang/antos#readme",
+  "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-contrib-clean": "^1.1.0",
+    "grunt-contrib-coffee": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-uglify": "^3.0.1"
+  }
+}

src/antos.coffee

@@ -0,0 +1,46 @@
+# run the code
+_API = this.OS.API
+_GUI = this.OS.GUI
+this.OS.boot()
+_GUI.loadTheme "antos"
+scheme = null
+_API.resource "schemes/test.html", (x) ->
+    return null unless x
+    scheme =  $.parseHTML x 
+    ($ "#wrapper").append scheme
+    riot.mount $ "#button", $ "#wrapper"
+    osmenu = {child:[
+        {text:"",icon:"fa fa-circle", child:[
+            {text:"About"},
+            {text:"System Preferences", icon:"fa fa-commenting"},
+             {text:"Applications",child:[{text:"Terminal"},{text:"Text edit"}]},
+             {text:"Logout"}
+             ]}
+        ],
+    onselect: (item)-> console.log item}
+    appmenu = {child:[
+        {text:"Text edit", child:[
+            {text:"About"},
+            {text:"Preferences"},
+             {text:"Exit"}
+             ]},
+        {text:"File",child:[
+            {text:"Open"},{text:"Save"}]}
+        ],
+    onselect: (item)-> console.log item}
+    systray = {child:[
+        {text:"Sun 22:57 6 August 2017"},
+        {text:"",icon:"fa fa-search"},
+        {text:"",icon:"fa fa-commenting"}
+        
+    ],
+    onselect: (item)-> console.log item}
+
+    riot.mount ($ "#syspanel", $ "#wrapper"),{osmenu:osmenu,appmenu:appmenu,systray:systray}
+
+    docks = {items:[
+        {icon:"fa fa-cogs"},
+        {icon:"fa fa-life-ring"},
+        {icon:"fa fa-cubes"}
+    ]}
+    riot.mount ($ "#sysdock", $ "#wrapper"), docks

src/build.json

@@ -0,0 +1,47 @@
+{
+    "coffee": [
+        "src/define.coffee",
+        "src/core/apis/api.coffee",
+        "src/core/apis/handlers/InBrowserHandler.coffee",
+        "src/core/gui/gui.coffee",
+        "src/antos.coffee"
+    ],
+    "copy": [{
+            "expand": true,
+            "flatten": true,
+            "src": [
+                "src/libs/*",
+                "src/index.html"
+            ],
+            "dest": "build/htdocs/"
+        },
+        {
+            "expand": true,
+            "flatten": true,
+            "src": [
+                "src/core/gui/schemes/*"
+            ],
+            "dest": "build/htdocs/resources/schemes"
+        },
+        {
+            "expand": true,
+            "flatten": true,
+            "src": [
+                "src/core/gui/themes/antos/fonts/*"
+            ],
+            "dest": "build/htdocs/resources/themes/antos/fonts"
+        }
+    ],
+    "tags":[
+        "src/core/gui/tags/afx-button.js",
+        "src/core/gui/tags/afx-menu.js",
+        "src/core/gui/tags/afx-sys-panel.js",
+        "src/core/gui/tags/afx-apps-dock.js"
+    ],
+    "themes":[
+        "src/core/gui/themes/antos/font-awesome.css",
+        "src/core/gui/themes/antos/ubuntu-regular.css",
+        "src/core/gui/themes/antos/hermit-light.css",
+         "src/core/gui/themes/antos/antos.css"
+    ]
+}

src/core/apis/api.coffee

@@ -0,0 +1,26 @@
+#define the base API functions
+self = this
+_API = self.OS.API
+self.OS.API = 
+    # the handler object could be a any remote or local handle to
+    # fetch user data, used by the API to make requests
+    # handlers are defined in /src/handlers
+    handler: new Object()
+
+    #request a user data
+    request: (query,callback) ->
+        # definition here
+        handle.request query,callback
+
+    systemConfig: ->
+        _API.request 'config', (result) ->
+            console.log  result
+    
+    resource: (resource,callback) ->
+        path = "resources/#{resource}"
+        $.get path 
+        .done (data) -> 
+            callback(data) 
+        .fail ->
+            alert "cannot get data"
+            callback(null)

src/core/apis/handlers/InBrowserHandler.coffee

@@ -0,0 +1,6 @@
+self = this
+_API = self.OS.API
+
+self.OS.API.handler =
+    request: ( query ) ->
+        $.ajax {}

src/core/gui/gui.coffee

@@ -0,0 +1,23 @@
+
+self = this
+_GUI = self.OS.GUI
+_API = self.OS.API
+self.OS.GUI =
+    tagPath: "resources/tags/"
+    init: () ->
+        query = 
+            path: 'VFS/get'
+            data: "#{_GUI.tagPath}/tags.json"
+        self.OS.API.request query, ()->
+            
+    loadScheme: (name, call) ->
+        path = _GUI.tagPath + name + ".html"
+        $.getScript path
+        .done (script, status) ->
+            call(script, status)
+        .fail (jqxhr, settings, exception) ->
+            _GUI.systemReport exception
+    loadTheme: (name) ->
+        path = "resources/themes/#{name}/#{name}.css"
+        $ "<link/>", { rel: "stylesheet", type: "text/css", href: path}
+        .appendTo "head"

src/core/gui/schemes/test.html

@@ -0,0 +1,10 @@
+
+<afx-sys-panel id = "syspanel"></afx-sys-panel>
+<!--div class = "afx-clear"></div-->
+<div id = "workspace">
+    <afx-apps-dock id="sysdock"></afx-apps-dock>
+    <div id = "desktop">
+        <afx-button onclick="alert('im clicked')" text="This is a button" icon="fa fa-camera-retro fa-lg" id="button">
+        </afx-button>
+    </div>
+</div>

src/core/gui/tags/afx-apps-dock.js

@@ -0,0 +1,7 @@
+<afx-apps-dock>
+    <afx-button each={ items } icon = {icon} text = {text}>
+    </afx-button>
+    <script>
+        this.items = opts.items
+    </script>
+</afx-apps-dock>

src/core/gui/tags/afx-button.js

@@ -0,0 +1,16 @@
+<afx-button>
+    <button disabled={ enable == "false" } onclick="{ onclick }"  > 
+        <i class = { icon } ></i> 
+        { opts.text }
+    </button>
+    <script>
+        this.enable = opts.enable
+        this.icon = opts.icon
+        this.onclick = function(e) {
+            if(opts.onclick)
+            {
+                e.preventDefault()
+            } 
+        }
+    </script>
+</afx-button>

src/core/gui/tags/afx-menu.js

@@ -0,0 +1,34 @@
+<afx-menu>
+    <ul>
+        <li class="afx-corner-fix"></li>
+        <li each={ items } class = {child != null ? "afx-submenu":""}>
+            <a href="#" onclick = {parent.onselect}>
+                <i class = {icon} ></i>{ text }
+            </a>
+            
+            <afx-menu if={child != null} child={child} observable = {parent.observable} ></afx-menu>
+        </li>
+         <li class="afx-corner-fix"></li>
+    </ul>
+    <script>
+        this.items = opts.child
+        if(opts.observable)
+            this.observable = opts.observable
+        else
+        {
+            this.observable = riot.observable()
+            this.observable.on('select',function(data){
+                if(opts.onselect)
+                    opts.onselect(data)
+            })
+        }
+
+        onselect(event)
+        {
+            
+           this.observable.trigger('select',event.item)
+           event.preventDefault()
+        }
+
+    </script>
+</afx-menu>

src/core/gui/tags/afx-sys-panel.js

@@ -0,0 +1,13 @@
+<afx-sys-panel>
+    <div>
+        <afx-menu child={osmenu.child} onselect = {osmenu.onselect} class="afx-panel-os-menu"></afx-menu>
+        <afx-menu child={appmenu.child} onselect = {appmenu.onselect} class = "afx-panel-os-app"></afx-menu>
+        <afx-menu child={systray.child} onselect = {systray.onselect} class = "afx-panel-os-stray"></afx-menu>
+    </div>
+    
+    <script>
+        this.osmenu = opts.osmenu
+        this.appmenu = opts.appmenu
+        this.systray = opts.systray
+    </script>
+</afx-sys-panel>

src/core/gui/themes/antos/antos.css

@@ -0,0 +1,185 @@
+html,body{
+    margin: 0;
+    padding: 0;
+    font-family: "Ubuntu";
+    font-size: 13px;
+    width: 100%;
+    height: 100%;
+}
+#wrapper{
+    margin: 0;
+    padding: 0;
+    min-height:100%; 
+    overflow:hidden;
+}
+afx-button button{
+    outline: none;
+    padding: 4px;
+    border: 1px solid #a6a6a6;
+    background-color: white;
+    color: #414339;
+    border-radius: 6px;
+    font-family: "hermitlight";
+    font-size: 13px;
+}
+
+afx-button button[disabled]{
+    color: #a6a6a6;
+}
+
+afx-button button:active {
+    background-color: #2786F3;
+    color: white;
+    border: 1px solid #dedede;
+}
+
+afx-menu {
+    position:relative;
+    display:inline-block;
+    z-index: 100000;
+}
+afx-menu a{
+    text-decoration: none;
+    width: 100%;
+    height: 100%;
+    color: #414339;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+afx-menu ul{
+    padding:0;
+    margin: 0;
+}
+afx-menu afx-menu ul {
+    padding: 0;
+    border:1px solid #a6a6a6;
+    border-radius: 5px;
+    border-top-left-radius: 0px;
+    box-shadow: 2px 2px 2px #cbcbcb;
+    background-color: white;
+}
+afx-menu ul > li{
+    list-style:none;
+    margin:0;
+    position: relative;
+    float: left;
+    padding:3px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+afx-menu  afx-menu {
+    top:100%;
+    left:0;
+    position: absolute;
+    display:none;
+}
+afx-menu  afx-menu i{
+    margin-right: 5px;
+}
+afx-menu  afx-menu li{
+    float:none;
+    width: 150px;
+}
+afx-menu  afx-menu afx-menu{
+    top:-4px;
+    left: 100%;
+}
+
+afx-menu li:hover  {
+    background-color: #2786F3;
+}
+afx-menu li:hover > a {
+    color: white;
+}
+
+afx-menu li:hover > afx-menu
+{
+    display: block;
+}
+afx-menu li.afx-corner-fix{
+    height: 3px;
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+}
+afx-menu li.afx-corner-fix:hover{
+    background-color: transparent;
+}
+
+afx-menu afx-menu .afx-submenu:before {
+    content: "\f054"; 
+    font-family: "FontAwesome";
+    font-size: 10px;
+    left:93%;
+    color: #414339;
+    position:absolute;
+    top:25%;
+ }
+
+afx-sys-panel div{
+     width: 100%;
+     height: 23px;
+     margin:0;
+     padding: 0;
+     background-color: #f6F6F6;
+     border-bottom: 1px solid #9c9C9C;
+     box-shadow: 2px 2px 2px #cbcbcb;
+ }
+
+afx-sys-panel .afx-panel-os-stray{
+    float:right;
+}
+
+afx-sys-panel .afx-panel-os-stray  afx-menu afx-menu{
+    top:-4px;
+    left: -100%;
+}
+
+.afx-clear{
+    clear:both;
+    background-color: transparent;
+    border: 0;
+    height: 1px;
+}
+
+#workspace {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    top: 24px;
+}
+
+afx-apps-dock{
+    float: left;
+    bottom: 3px;
+    top: 3px;
+    width: 32px;
+    background-color:#f6F6F6;
+    position: absolute;
+    padding:2px;
+    padding-top: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border:1px solid #a6a6a6;
+    overflow: hidden;
+    box-shadow: 2px 2px 2px #cbcbcb;
+}
+afx-apps-dock afx-button button{
+    width: 32px;
+    height: 32px;
+    font-size: 19px;
+    margin-bottom: 0px;
+    border:0;
+    background-color: transparent;
+    
+}
+#desktop{
+    position: absolute;
+    top:3px;
+    bottom: 0;
+    margin: 0;
+    left: 40px;
+    right: 0;
+    padding:0px;
+}

src/core/gui/themes/antos/hermit-light.css

@@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 6, 2017 */
+
+
+
+@font-face {
+    font-family: 'HermitLight';
+    src: url('fonts/hermit-light-webfont.woff2') format('woff2'),
+         url('fonts/hermit-light-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

src/core/gui/themes/antos/ubuntu-regular.css

@@ -0,0 +1,39 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 6, 2017 */
+
+
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('fonts/ubuntu-regular-webfont.woff2') format('woff2'),
+         url('fonts/ubuntu-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('fonts/ubuntu-bold-webfont.woff2') format('woff2'),
+         url('fonts/ubuntu-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('fonts/ubuntu-bolditalic-webfont.woff2') format('woff2'),
+         url('fonts/ubuntu-bolditalic-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('ubuntu-italic-webfont.woff2') format('woff2'),
+         url('ubuntu-italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+
+}

src/define.coffee

@@ -0,0 +1,9 @@
+#define the OS object
+self = this
+self.OS or=
+    API: new Object()
+    GUI: new Object()
+    boot: ->
+        #first load the configuration
+        #then load the theme
+        

src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title></title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!--link href="theme/antos/style.css" rel="stylesheet"-->
+        <script src="jquery-3.2.1.min.js"></script>
+        <script src="resources/tags/antos_tags.js" type="riot/tag"></script>
+         <script src="riot.compiler.min.js"> </script>
+        <script src="antos.js"></script>
+    </head>
+    <body>
+        <div id="wrapper" />
+    </body>
+</html>