Enyo Whiteboard Template

by veeramarni

HTML

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://blancboard.com/resources/js/raphael.js"></script>
<script src="http://use.typekit.net/c/f45a0b/1w;sketchnote-text,2,ZR5:P:n4/d?3bb2a6e53c9684ffdc9a9bf2195b2a62ec19c67c2541de178ac90e67dc909139bb6a264ef93a5e2017d5893f33a65232658402da1d3275c06341b6b537845ba11f1cb57e22536184bdc0b662a8d12ade16e6dff707714ba7f31c3d65d935917"></script>
<link rel="stylesheet" href="http://blancboard.com/resources/css/learnora-icon.css">

CSS

/* main page */
 .sketchbook-page-image {
     background-image: url('https://mighty.ws/assets/linedpaper.png');
 }
 /** menu button */
 .menu-button {
     width: 60px;
     height: 60px;
     display: block;
     border: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
.menu-button.active, .menu-button.pressed {
	background-image: none;
	border-top: none;
	box-shadow: none;
}

 .menu-button-enabled .menu-button {
     background-size:60px 180px;
     background-color: blue;
     cursor: pointer;
 }
 .menu-button-active .menu-button {
     background-size:60px 180px;
     background-color: yellow;
     cursor: pointer;
 }
.meetings-button .menu-button {
    background: url('https://mighty.ws/assets/ic_meetings.png') no-repeat;
    background-size:60px 180px; 
}
.files-button .menu-button {
    background: url('https://mighty.ws/assets/ic_files.png') no-repeat;
    background-size:60px 180px;  
}
.settings-button .menu-button {
    background: url('https://mighty.ws/assets/ic_settings.png') no-repeat;
    background-size:60px 180px;  
}
.invite-button .menu-button {
    background: url('https://mighty.ws/assets/ic_invite.png') no-repeat;
    background-size:60px 180px;  
}
.add-button .menu-button {
    background: url('https://mighty.ws/assets/ic_add.png') no-repeat;
    background-size:60px 180px;  
}
.left-button .menu-button {
    background: url('https://mighty.ws/assets/ic_left.png') no-repeat;
    background-size:60px 180px;  
}
.filemenu-button .menu-button {
    background: url('https://mighty.ws/assets/ic_menu.png') no-repeat;
    background-size:60px 180px;  
}
.pages-button .menu-button {
    background: url('https://mighty.ws/assets/ic_pages.png') no-repeat;
    background-size:60px 180px;  
}
.palette-button .menu-button {
    background: url('https://mighty.ws/assets/ic_palette.png') no-repeat;
    background-size:60px 180px;  
}
.pen-button .menu-button {
    background: url('https://mighty.ws/assets/ic_pen.png') no-repeat;
   ...

JavaScript

//Enyo Whiteboard  Template
blanc = {};
enyo.ready(function () {
    blanc.app = new blanc.AppLargeView;
    blanc.app.renderInto(document.body);

});
enyo.kind({
    name: "blanc.App",
    kind: "enyo.Control",
    handlers: {
        onPageChanged: "pageChanged"
    },
    published: {
        menuModel: null,
        orientation: "landscape"
    },
    create: function () {
        this.inherited(arguments);
        this.setMenuModel(new blanc.MenuModel);
        blanc.Session.isAuthenticated() && this.menuModel.processSignin();
    },
    pageChanged: function (a, b) {
        logInfo("pageChanged from App is notified");
        return this.menuModel.pageChanged(a, b), this.updateMenu(), !0
    }
    ,updateMenu: function() {
    }
});
enyo.kind({
    name: "blanc.AppLargeView",
    kind: "blanc.App",
    components: [{
        kind: "FittableRows",
        style: "width: 100%; height: 100%;",
        components: [{
            name: "statusBar",
            classes: "status-bar"
        }, {
            fit: true,
            name: "panels",
            kind: "enyo.Panels",
            draggable: false,
            components: [{
                name: "app",
                style: "position:relative;",
                components: [{
                    name: "main",
                    kind: "blanc.MainLarge"
                }, {
                    name: "rightTop",
                    kind: "blanc.RightTopMenu",
                    classes: "righttop-menu-container",
                    onMenuClicked: "menuClicked"
                }, {
                    name: "leftBottom",
                    kind: "blanc.LeftBottomMenu",
                    classes: "leftbottom-menu-container",
                    onMenuClicked: "menuClicked"
                }, {
                    name: "palettePopup",
                    kind: "blanc.Palette",
                    onHide: "paletteHidden"
                }, ]
            }]
        }]
    }],
    create: function () {
...