wbase 0.0.14 → 0.0.15

data/app/assets/javascripts/wbase/admin/jquery.chartjs.init.js

@@ -0,0 +1,231 @@
+/**
+Template Name: Ubold Dashboard
+Author: CoderThemes
+Email: coderthemes@gmail.com
+File: Chartjs
+*/
+
+
+!function($) {
+    "use strict";
+
+    var ChartJs = function() {};
+
+    ChartJs.prototype.respChart = function(selector,type,data, options) {
+        // get selector by context
+        var ctx = selector.get(0).getContext("2d");
+        // pointing parent container to make chart js inherit its width
+        var container = $(selector).parent();
+
+        // enable resizing matter
+        $(window).resize( generateChart );
+
+        // this function produce the responsive Chart JS
+        function generateChart(){
+            // make chart width fit with its container
+            var ww = selector.attr('width', $(container).width() );
+            switch(type){
+                case 'Line':
+                    new Chart(ctx, {type: 'line', data: data, options: options});
+                    break;
+                case 'Doughnut':
+                    new Chart(ctx, {type: 'doughnut', data: data, options: options});
+                    break;
+                case 'Pie':
+                    new Chart(ctx, {type: 'pie', data: data, options: options});
+                    break;
+                case 'Bar':
+                    new Chart(ctx, {type: 'bar', data: data, options: options});
+                    break;
+                case 'Radar':
+                    new Chart(ctx, {type: 'radar', data: data, options: options});
+                    break;
+                case 'PolarArea':
+                    new Chart(ctx, {data: data, type: 'polarArea', options: options});
+                    break;
+            }
+            // Initiate new chart or Redraw
+
+        };
+        // run function - render chart at first load
+        generateChart();
+    },
+    //init
+    ChartJs.prototype.init = function() {
+        //creating lineChart
+        var lineChart = {
+            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September"],
+            datasets: [
+                {
+                    label: "Sales Analytics",
+                    fill: false,
+                    lineTension: 0.1,
+                    backgroundColor: "$brand-primary",
+                    borderColor: "$brand-primary",
+                    borderCapStyle: 'butt',
+                    borderDash: [],
+                    borderDashOffset: 0.0,
+                    borderJoinStyle: 'miter',
+                    pointBorderColor: "$brand-primary",
+                    pointBackgroundColor: "#fff",
+                    pointBorderWidth: 1,
+                    pointHoverRadius: 5,
+                    pointHoverBackgroundColor: "$brand-primary",
+                    pointHoverBorderColor: "#eef0f2",
+                    pointHoverBorderWidth: 2,
+                    pointRadius: 1,
+                    pointHitRadius: 10,
+                    data: [65, 59, 80, 81, 56, 55, 40, 35, 30]
+                }
+            ]
+        };
+
+        var lineOpts = {
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        max: 100,
+                        min: 20,
+                        stepSize: 10
+                    }
+                }]
+            }
+        };
+
+        this.respChart($("#lineChart"),'Line',lineChart, lineOpts);
+
+        //donut chart
+        var donutChart = {
+            labels: [
+                "Desktops",
+                "Tablets",
+                "Mobiles"
+            ],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: [
+                        "$brand-primary",
+                        "#5fbeaa",
+                        "#ebeff2"
+                    ],
+                    hoverBackgroundColor: [
+                        "$brand-primary",
+                        "#5fbeaa",
+                        "#ebeff2"
+                    ],
+                    hoverBorderColor: "#fff"
+                }]
+        };
+        this.respChart($("#doughnut"),'Doughnut',donutChart);
+
+
+        //Pie chart
+        var pieChart = {
+            labels: [
+                "Desktops",
+                "Tablets",
+                "Mobiles"
+            ],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: [
+                        "$brand-primary",
+                        "#5fbeaa",
+                        "#ebeff2"
+                    ],
+                    hoverBackgroundColor: [
+                        "$brand-primary",
+                        "#5fbeaa",
+                        "#ebeff2"
+                    ],
+                    hoverBorderColor: "#fff"
+                }]
+        };
+        this.respChart($("#pie"),'Pie',pieChart);
+
+
+        //barchart
+        var barChart = {
+            labels: ["January", "February", "March", "April", "May", "June", "July"],
+            datasets: [
+                {
+                    label: "Sales Analytics",
+                    backgroundColor: "rgba(95, 190, 170, 0.3)",
+                    borderColor: "#5fbeaa",
+                    borderWidth: 1,
+                    hoverBackgroundColor: "rgba(95, 190, 170, 0.6)",
+                    hoverBorderColor: "#5fbeaa",
+                    data: [65, 59, 80, 81, 56, 55, 40,20]
+                }
+            ]
+        };
+        this.respChart($("#bar"),'Bar',barChart);
+
+
+        //radar chart
+        var radarChart = {
+            labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+            datasets: [
+                {
+                    label: "Desktops",
+                    backgroundColor: "rgba(179,181,198,0.2)",
+                    borderColor: "rgba(179,181,198,1)",
+                    pointBackgroundColor: "rgba(179,181,198,1)",
+                    pointBorderColor: "#fff",
+                    pointHoverBackgroundColor: "#fff",
+                    pointHoverBorderColor: "rgba(179,181,198,1)",
+                    data: [65, 59, 90, 81, 56, 55, 40]
+                },
+                {
+                    label: "Tablets",
+                    backgroundColor: "rgba(255,99,132,0.2)",
+                    borderColor: "rgba(255,99,132,1)",
+                    pointBackgroundColor: "rgba(255,99,132,1)",
+                    pointBorderColor: "#fff",
+                    pointHoverBackgroundColor: "#fff",
+                    pointHoverBorderColor: "rgba(255,99,132,1)",
+                    data: [28, 48, 40, 19, 96, 27, 100]
+                }
+            ]
+        };
+        this.respChart($("#radar"),'Radar',radarChart);
+
+        //Polar area chart
+        var polarChart = {
+            datasets: [{
+                data: [
+                    11,
+                    16,
+                    7,
+                    18
+                ],
+                backgroundColor: [
+                    "#5fbeaa",
+                    "#1a2942",
+                    "$brand-primary",
+                    "#ebeff2"
+                ],
+                label: 'My dataset', // for legend
+                hoverBorderColor: "#fff"
+            }],
+            labels: [
+                "Series 1",
+                "Series 2",
+                "Series 3",
+                "Series 4"
+            ]
+        };
+        this.respChart($("#polarArea"),'PolarArea',polarChart);
+    },
+    $.ChartJs = new ChartJs, $.ChartJs.Constructor = ChartJs
+
+}(window.jQuery),
+
+//initializing
+function($) {
+    "use strict";
+    $.ChartJs.init()
+}(window.jQuery);
+

data/app/assets/javascripts/wbase/admin/jquery.charts-sparkline.js

@@ -0,0 +1,149 @@
+/**
+* Theme: Ubold Admin Template
+* Author: Coderthemes
+* Component: Sparkline Chart
+* 
+*/
+$( document ).ready(function() {
+    
+    var DrawSparkline = function() {
+        $('#sparkline1').sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
+            type: 'line',
+            width: $('#sparkline1').width(),
+            height: '165',
+            chartRangeMax: 50,
+            lineColor: '#5fbeaa',
+            fillColor: 'rgba(95, 190, 170, 0.3)',
+            highlightLineColor: 'rgba(0,0,0,.1)',
+            highlightSpotColor: 'rgba(0,0,0,.2)',
+        });
+    
+        $('#sparkline1').sparkline([25, 23, 26, 24, 25, 32, 30, 24, 19], {
+            type: 'line',
+            width: $('#sparkline1').width(),
+            height: '165',
+            chartRangeMax: 40,
+            lineColor: '$brand-primary',
+            fillColor: 'rgba(93, 156, 236, 0.3)',
+            composite: true,
+            highlightLineColor: 'rgba(0,0,0,.1)',
+            highlightSpotColor: 'rgba(0,0,0,.2)',
+        });
+    
+        $('#sparkline2').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
+            type: 'bar',
+            height: '165',
+            barWidth: '10',
+            barSpacing: '3',
+            barColor: '#fb6d9d'
+        });
+        
+        $('#sparkline3').sparkline([20, 40, 30, 10], {
+            type: 'pie',
+            width: '165',
+            height: '165',
+            sliceColors: ['#dcdcdc', '$brand-primary', '#36404a', '#5fbeaa']
+        });
+    
+        $('#sparkline4').sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
+            type: 'line',
+            width: $('#sparkline1').width(),
+            height: '165',
+            chartRangeMax: 50,
+            lineColor: '#fb6d9d',
+            fillColor: 'transparent',
+            highlightLineColor: 'rgba(0,0,0,.1)',
+            highlightSpotColor: 'rgba(0,0,0,.2)'
+        });
+    
+        $('#sparkline4').sparkline([25, 23, 26, 24, 25, 32, 30, 24, 19], {
+            type: 'line',
+            width: $('#sparkline1').width(),
+            height: '165',
+            chartRangeMax: 40,
+            lineColor: '$brand-primary',
+            fillColor: 'transparent',
+            composite: true,
+            highlightLineColor: 'rgba(0,0,0,1)',
+            highlightSpotColor: 'rgba(0,0,0,1)'
+        });
+    
+        $('#sparkline6').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
+            type: 'bar',
+            height: '165',
+            barWidth: '10',
+            barSpacing: '3',
+            barColor: '#5fbeaa'
+        });
+    
+        $('#sparkline6').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
+            type: 'line',
+            width: $('#sparkline1').width(),
+            height: '165',
+            lineColor: '#fb6d9d',
+            fillColor: 'transparent',
+            composite: true,
+            highlightLineColor: 'rgba(0,0,0,.1)',
+            highlightSpotColor: 'rgba(0,0,0,.2)'
+        });
+        
+        
+    },
+        DrawMouseSpeed = function () {
+            var mrefreshinterval = 500; // update display every 500ms
+            var lastmousex=-1; 
+            var lastmousey=-1;
+            var lastmousetime;
+            var mousetravel = 0;
+            var mpoints = [];
+            var mpoints_max = 30;
+            $('html').mousemove(function(e) {
+                var mousex = e.pageX;
+                var mousey = e.pageY;
+                if (lastmousex > -1) {
+                    mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
+                }
+                lastmousex = mousex;
+                lastmousey = mousey;
+            });
+            var mdraw = function() {
+                var md = new Date();
+                var timenow = md.getTime();
+                if (lastmousetime && lastmousetime!=timenow) {
+                    var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
+                    mpoints.push(pps);
+                    if (mpoints.length > mpoints_max)
+                        mpoints.splice(0,1);
+                    mousetravel = 0;
+                    $('#sparkline5').sparkline(mpoints, {
+                        tooltipSuffix: ' pixels per second',
+                        type: 'line',
+                        width: $('#sparkline1').width(),
+                        height: '165',
+                        chartRangeMax: 50,
+                        lineColor: '#1e88e5',
+                        fillColor: 'rgba(30, 136, 229, 0.3)',
+                        highlightLineColor: 'rgba(24,147,126,.1)',
+                        highlightSpotColor: 'rgba(24,147,126,.2)',
+                    });
+                }
+                lastmousetime = timenow;
+                setTimeout(mdraw, mrefreshinterval);
+            }
+            // We could use setInterval instead, but I prefer to do it this way
+            setTimeout(mdraw, mrefreshinterval); 
+        };
+    
+    DrawSparkline();
+    DrawMouseSpeed();
+    
+    var resizeChart;
+
+    $(window).resize(function(e) {
+        clearTimeout(resizeChart);
+        resizeChart = setTimeout(function() {
+            DrawSparkline();
+            DrawMouseSpeed();
+        }, 300);
+    });
+});

data/app/assets/javascripts/wbase/admin/jquery.chat.js

@@ -0,0 +1,60 @@
+/**
+* Theme: Ubold Admin Template
+* Author: Coderthemes
+* Chat application 
+*/
+
+!function($) {
+    "use strict";
+
+    var ChatApp = function() {
+        this.$body = $("body"),
+        this.$chatInput = $('.chat-input'),
+        this.$chatList = $('.conversation-list'),
+        this.$chatSendBtn = $('.chat-send .btn')
+    };
+
+    //saves chat entry - You should send ajax call to server in order to save chat enrty
+    ChatApp.prototype.save = function() {
+        var chatText = this.$chatInput.val();
+        var chatTime = moment().format("h:mm");
+        if (chatText == "") {
+            sweetAlert("Oops...", "You forgot to enter your chat message", "error");
+            this.$chatInput.focus();
+        } else {
+            $('<li class="clearfix"><div class="chat-avatar"><img src="assets/images/avatar-1.jpg" alt="male"><i>' + chatTime + '</i></div><div class="conversation-text"><div class="ctext-wrap"><i>John Deo</i><p>' + chatText + '</p></div></div></li>').appendTo('.conversation-list');
+            this.$chatInput.val('');
+            this.$chatInput.focus();
+            this.$chatList.scrollTo('100%', '100%', {
+                easing: 'swing'
+            });
+        }
+    },
+    ChatApp.prototype.init = function () {
+        var $this = this;
+        //binding keypress event on chat input box - on enter we are adding the chat into chat list - 
+        $this.$chatInput.keypress(function (ev) {
+            var p = ev.which;
+            if (p == 13) {
+                $this.save();
+                return false;
+            }
+        });
+
+
+        //binding send button click
+        $this.$chatSendBtn.click(function (ev) {
+           $this.save();
+           return false;
+        });
+    },
+    //init ChatApp
+    $.ChatApp = new ChatApp, $.ChatApp.Constructor = ChatApp
+    
+}(window.jQuery),
+
+//initializing main application module
+function($) {
+    "use strict";
+    $.ChatApp.init();
+}(window.jQuery);

data/app/assets/javascripts/wbase/admin/jquery.codemirror.init.js

@@ -0,0 +1,66 @@
+
+/**
+* Theme: Ubold Admin Template
+* Author: Coderthemes
+* Code Editors page
+*/
+
+!function($) {
+    "use strict";
+
+    var CodeEditor = function() {};
+
+    CodeEditor.prototype.getSelectedRange = function(editor) {
+        return { from: editor.getCursor(true), to: editor.getCursor(false) };
+    },
+    CodeEditor.prototype.autoFormatSelection = function(editor) {
+        var range = this.getSelectedRange(editor);
+        editor.autoFormatRange(range.from, range.to);
+    },
+    CodeEditor.prototype.commentSelection = function(isComment, editor) {
+        var range = this.getSelectedRange(editor);
+        editor.commentRange(isComment, range.from, range.to);
+    },
+    CodeEditor.prototype.init = function() {
+        var $this = this;
+        //init plugin
+        CodeMirror.fromTextArea(document.getElementById("code"), {
+            mode: {name: "xml", alignCDATA: true},
+            lineNumbers: true
+        });
+        //example 2
+        CodeMirror.fromTextArea(document.getElementById("code2"), {
+            mode: {name: "javascript"},
+            lineNumbers: true,
+            theme: 'ambiance'
+        });
+
+        //example 3
+        var editor = CodeMirror.fromTextArea(document.getElementById("code3"), {
+            mode: {name: "javascript"},
+            lineNumbers: true,
+        });
+        CodeMirror.commands["selectAll"](editor);
+
+        //binding controlls
+        $('.autoformat').click(function(){
+            $this.autoFormatSelection(editor);
+        });
+        
+        $('.commentbtn').click(function(){
+            $this.commentSelection(true, editor);
+        });
+        
+        $('.uncomment').click(function(){
+            $this.commentSelection(false, editor);
+        });
+    },
+    //init
+    $.CodeEditor = new CodeEditor, $.CodeEditor.Constructor = CodeEditor
+}(window.jQuery),
+
+//initializing 
+function($) {
+    "use strict";
+    $.CodeEditor.init()
+}(window.jQuery);