mouse track color same as click, grunt watch task master
mouse track color same as click, grunt watch task

--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -2,32 +2,36 @@
 
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
-        concat: {
-            options: {
-                separator: ';'
-            },
-            dist: {
-                src: ['bower_components/socket.io-client/socket.io.js', 'src/js/c.js'],
-                dest: 'dist/<%= pkg.name %>.js'
-            }
-        },
         uglify: {
             options: {
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
             },
-            dist: {
+            distclient: {
                 files: {
-                    'dist/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
+                    'dist/js/<%= pkg.name %>-c.min.js': ['bower_components/socket.io-client/socket.io.js', 'src/js/c.js']
+                }
+            },
+            distaadmin: {
+                files: {
+                    'dist/js/<%= pkg.name %>-a.min.js': ['bower_components/socket.io-client/socket.io.js', 'bower_components/jquery/dist/jquery.min.js', 'bower_components/jquery-ui/jquery-ui.min.js', 'src/js/a.js']
                 }
             }
         },
         cssmin: {
-            dist: {
+            distclient: {
                 options: {
                     banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
                 },
                 files: {
-                        'dist/css/<%= pkg.name %>.min.css': ['src/css/c.css']
+                        'dist/css/<%= pkg.name %>-c.min.css': ['src/css/c.css']
+                }
+            },
+            distadmin: {
+                options: {
+                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
+                },
+                files: {
+                        'dist/css/<%= pkg.name %>-a.min.css': ['src/css/a.css']
                 }
             }
         },
@@ -35,12 +39,12 @@
           main: {
             files: [
                 {expand: true, cwd: 'src/', src: ['admin.html'], dest: 'dist/'},
-                {expand: true, cwd: 'src/js', src: ['a.js'], dest: 'dist/js'},
+                {expand: true, cwd: 'src/img', src: ['*.*'], dest: 'dist/img'},
                 ],
             },
         },
         jshint: {
-            files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
+            files: ['Gruntfile.js', 'src/js/*.js'],
             options: {
                 globals: {
                     jQuery: true,
@@ -51,19 +55,18 @@
             }
         },
         watch: {
-          files: ['<%= jshint.files %>'],
-          tasks: ['jshint']
+          files: ['<%= jshint.files %>', 'src/css/*.css', 'src/*.html', 'src/img/*.*'],
+          tasks: [/*'jshint', */'uglify', 'cssmin', 'copy']
         }
     });
 
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-jshint');
     grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.loadNpmTasks('grunt-contrib-copy');
 
     //grunt.registerTask('test', ['jshint']);
 
-    grunt.registerTask('default', [/*'jshint', */'concat', 'uglify', 'cssmin', 'copy']);
+    grunt.registerTask('default', [/*'jshint', */'uglify', 'cssmin', 'copy']);
 };

file:a/bower.json -> file:b/bower.json
--- a/bower.json
+++ b/bower.json
@@ -14,7 +14,8 @@
     "bower_components"
   ],
   "dependencies": {
-    "socket.io-client": "~1.4.4"
+    "socket.io-client": "~1.4.4",
+    "jquery": "~2.2.2"
   }
 }
 

file:a/index.js -> file:b/index.js
--- a/index.js
+++ b/index.js
@@ -49,8 +49,9 @@
         }
     });
 
-    socket.on('t:mousemove', function(msg){
-        mouse.push(msg);
+    socket.on('t:mousemove', function(move){
+        move.color = color;
+        mouse.push(move);
         if (mouse.length > 2) {
             mouse.shift();
         }

--- a/src/admin.html
+++ b/src/admin.html
@@ -5,12 +5,13 @@
 <meta content='IE=edge' http-equiv='X-UA-Compatible'>
 <meta content='width=device-width,initial-scale=1' name='viewport'>
 <title>Tracking</title>
+<link href="/css/realtime-mouse-tracking-a.min.css" media="all" rel="stylesheet" />
 </head>
 <body>
-<iframe src="" width="100%" height="2000" frameborder="0" scrolling="no" seamless="seamless"></iframe>
+<iframe src="http://www.nutricia.ro/" width="100%" height="2000" frameborder="0" scrolling="no" seamless="seamless"></iframe>
 <div id="div" style=""></div>
 <script type="text/javascript">
-    (function(i,s,o,g){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/js/a.js');
+    (function(i,s,o,g){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/js/realtime-mouse-tracking-a.min.js');
 </script>
 </body>
 </html>

file:b/src/css/a.css (new)
--- /dev/null
+++ b/src/css/a.css
@@ -1,1 +1,45 @@
-
+#control_panel{

+    position: fixed;;

+    display: block;

+    top:0;

+    left:0;

+    z-index: 3;

+    width:1px;

+    background-color: #23282d;

+    height: 100%;

+    overflow: hidden;

+     -webkit-transition: width 0.5s ease-in; /* Safari */

+    transition: width 0.5s ease-in;

+}

+#control_panel .wrapper{

+    position: absolute;

+    display:block;

+    width:160px;

+    height: auto;

+}

+#control_panel .wrapper h2{

+    color:#fff;

+    margin-top:30px;

+}

+.switcher{

+    position: fixed;

+    display:block;

+    width:64px;

+    height: 64px;

+    background-image: url(../img/1458931119_12.png);

+    background-size: 100%;

+    left:0px;

+    top:50%;

+    z-index:4;

+     -webkit-transition: left 0.5s ease-in; /* Safari */

+    transition: left 0.5s ease-in;

+    cursor: pointer;

+}

+#control_panel.active{

+    width: 160px;

+}

+.switcher.active{

+    left:100px;

+    background-image: url(../img/1458931111_14.png);

+    background-size: 100%;

+}

file:b/src/css/c.css (new)
--- /dev/null
+++ b/src/css/c.css

 Binary files /dev/null and b/src/img/1458931111_14.png differ
 Binary files /dev/null and b/src/img/1458931119_12.png differ
 Binary files /dev/null and b/src/img/Arrows Left circular.png differ
 Binary files /dev/null and b/src/img/arrow_left.ico differ
--- a/src/js/a.js
+++ b/src/js/a.js
@@ -63,7 +63,6 @@
     document.onclick = function(e){
         var _cursorX = - viewportwidth/2 + e.pageX;
         var _cursorY = e.pageY;
-        console.log (_cursorX + " " + _cursorY);
     }
 
     var step = function () {
@@ -84,6 +83,14 @@
             if (cursorX >= click.x - 4 && cursorX <= click.x + 4 && cursorY >= click.y - 4 && cursorY <= click.y + 4) {
                 ctx.strokeStyle = '#EBC167';
                 ctx.fillStyle = '#EB1C8A';
+                /*if ($('#div').html() == '') {
+                    $('#div').html(click.url);
+                    $(document).tooltip({
+                        content: function() {
+                            return click.url;
+                        }
+                    });
+                }*/
             } else {
                 ctx.strokeStyle = '#003300';
                 ctx.fillStyle = click.color;
@@ -98,12 +105,18 @@
             if (move.time < Date.now()) {
                 moves.splice(key, 1);
             }
+            ctx.globalAlpha = 0.5;
             ctx.beginPath();
-            ctx.strokeStyle = '#000000';
+            if (move[0].color != null) {
+                ctx.strokeStyle = move[0].color;
+            } else {
+                ctx.strokeStyle = '#cccccc';
+            }
             x0 = viewportwidth/2 + move[0].x;
             x1 = viewportwidth/2 + move[1].x;
             ctx.moveTo(x0, move[0].y);
             ctx.lineTo(x1, move[1].y);
+            ctx.lineWidth = 0.5;
             ctx.stroke();
         }
     }
@@ -129,3 +142,8 @@
     });
 }
 
+$('body').on('click', '.switcher', function(event) {
+    $(this).toggleClass('active');
+    $("#control_panel").toggleClass('active');
+    /* Act on the event */
+});

--- a/src/js/c.js
+++ b/src/js/c.js
@@ -1,12 +1,4 @@
 var host = "http://node.dev.webstyler.ro/";
-
-/*function loadJs(i,s,o,g,c){
-    a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);
-    a.onload=function(){
-        c();
-    }
-}
-loadJs(window,document,'script',host + 'socket.io-client/socket.io.js', function(){NRTT()});*/
 
 function NRTT() {
     var connected = false;
@@ -82,7 +74,7 @@
     setInterval(function(){
         if (connected && mouseAction.enabled) {
             var x = - viewportwidth/2 + cursorX;
-            cSocket.emit('t:mousemove', {x:x, y:cursorY, url:window.location.href});
+            cSocket.emit('t:mousemove', {x:x, y:cursorY});
         }
     }, mouseAction.interval);
 }

comments