PencilCode · dinukadesilva · Aug 10, 2015 · Aug 10, 2015 · Aug 10, 2015 · Aug 10, 2015
diff --git a/content/editor.html b/content/editor.html
@@ -14,6 +14,7 @@
 <link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/droplet.css">
 <link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/font-awesome.css">
 <link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/tooltipster/css/tooltipster.css">
+<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/pencilcode-contextmenu/src/dist/pencilcode-contextmenu.css">
 </head>
 <body id="pencildoc">
 <div id="overflow">

diff --git a/content/lib/pencilcode-contextmenu/Gruntfile.js b/content/lib/pencilcode-contextmenu/Gruntfile.js
@@ -0,0 +1,41 @@
+
+module.exports = function(grunt) {
+  'use strict';
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    uglify: {
+      all: {
+        files: {
+          "src/dist/pencilcode-contextmenu.js": [
+            "src/dev/pencilcode-contextmenu.js"
+          ]
+        },
+        options: {
+          preserveComments: false,
+          screwIE8: true,
+          report: 'min',
+          beautify: {
+            beautify: true
+          }
+        }
+      }
+    },
+    less: {
+      all: {
+        options: { compress: true },
+        files: {
+          "src/dist/pencilcode-contextmenu.css": "src/dev/pencilcode-contextmenu.less"
+        }
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+
+
+  grunt.registerTask('build',['uglify', 'less']);
+};
+
diff --git a/content/lib/pencilcode-contextmenu/bower.json b/content/lib/pencilcode-contextmenu/bower.json
@@ -0,0 +1,25 @@
+{
+  "name": "pencilcode-contextmenu",
+  "description": "",
+  "main": "index.js",
+  "authors": [
+    "Dinuka De Silva <[email protected]>"
+  ],
+  "license": "ISC",
+  "homepage": "https://github.com/Dinuka2013513/pencilcode",
+  "moduleType": [
+    "amd",
+    "globals"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.1.4",
+    "font-awesome": "~4.5.0"
+  }
+}
diff --git a/content/lib/pencilcode-contextmenu/package.json b/content/lib/pencilcode-contextmenu/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "pencilcode-contextmenu",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Dinuka De Silva <[email protected]>",
+  "license": "ISC",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-concat": "^0.5.1",
+    "grunt-contrib-less": "^1.1.0",
+    "grunt-contrib-uglify": "^0.11.0"
+  }
+}
diff --git a/content/lib/pencilcode-contextmenu/src/dev/pencilcode-contextmenu.js b/content/lib/pencilcode-contextmenu/src/dev/pencilcode-contextmenu.js
@@ -0,0 +1,167 @@
+(function($) {
+
+    function clearRightClickMenus(){
+      $('.right-click-menu').css('display','none');
+      $('.right-click-active').removeClass('right-click-active');
+    }
+
+
+
+    //Listeners tomanage Right CLick Menu
+    (function (){
+      function clickInsideElement( e, className ) {
+        var el = e.srcElement || e.target;
+
+        if ( el.classList.contains(className) ) {
+          return el;
+        } else {
+          while ( el = el.parentNode ) {
+            if ( el.classList && el.classList.contains(className) ) {
+              return el;
+            }
+          }
+        }
+
+        return false;
+      }
+
+      //Listens for click events.
+      (function () {
+        document.addEventListener( "click", function(e) {
+          var clickeElIsLink = clickInsideElement( e, 'right-click-menu' );
+
+          if ( !clickeElIsLink ) {
+              clearRightClickMenus();
+          }
+        });
+      })();
+
+      //Listens for keyup events.
+      (function () {
+        window.onkeyup = function(e) {
+          if ( e.keyCode === 27 ) {
+            clearRightClickMenus();
+          }
+        }
+      })();
+
+      //Window resize event listener
+      (function () {
+        window.onresize = function(e) {
+          clearRightClickMenus();
+        };
+      })();
+    })();
+
+
+  /*  $(document).ready(function () {
+      $('.right-click-menu').on('mouseenter', function(){
+          console.log("Mouse enter");
+          //mouseOverActiveElement = true; 
+      }).on('mouseleave', function(){ 
+          console.log("Mouse leave");
+          //mouseOverActiveElement = false; 
+          //clearRightClickMenus();
+      }).on('focus', function(){ 
+          console.log("Mouse focus");
+          //mouseOverActiveElement = false; 
+          //clearRightClickMenus();
+      }).on('focusout', function(){ 
+          console.log("Mouse focusout");
+          //mouseOverActiveElement = false; 
+          //clearRightClickMenus();
+      }).on('blur', function(){ 
+          console.log("Mouse blur");
+          //mouseOverActiveElement = false; 
+          //clearRightClickMenus();
+      }).on('click', function(){ 
+          console.log("Mouse click");
+          //mouseOverActiveElement = false; 
+          //clearRightClickMenus();
+      })
+    });*/
+
+    $.fn.extend({
+      closeRightClickMenu: function () {
+        clearRightClickMenus();
+      },
+      addRightClickMenu:function (menus) {
+        this.each(function() {
+          function getMenu(menus) {
+            var menu=$('<ul/>', {class: 'menu-list'});
+            menus.forEach(function(m) {
+              var li=$('<li/>',{class:'menu-item'}).appendTo(menu);
+              var menuContent = $('<div/>', {class:'menu-item-content'}).appendTo(li);
+              var menuLink=$('<a/>',{text:m.name}).appendTo(menuContent);
+              li.on('click',function(e){
+                e.stopPropagation();
+                e.preventDefault();
+                m.action(e);
+              });
+
+              if(m.options) {
+                menuContent.append(getMenu(m.options));
+                menuContent.append(
+                  $('<span/>', {class: "left-icon"}).append(
+                    $('<a/>',{class:"more-options-icon"}).append(
+                      $('<i/>',{class:"fa fa-caret-right"})
+                      )
+                    )
+                  );
+              }
+            });
+            return menu;
+          }
+
+          function getRightClickMenuDiv(){
+            var rightClickMenuDiv = $('.right-click-menu');
+            if(rightClickMenuDiv.length==0){
+              rightClickMenuDiv=$('<div/>',{class:"right-click-menu"}).appendTo($('body'));
+            }
+            rightClickMenuDiv.on('mouseleave', function(){ 
+                //console.log("Mouse leave");
+                clearRightClickMenus();
+            });
+            return rightClickMenuDiv;
+          }
+
+          $(this).on('contextmenu', function(e) {
+            e.stopPropagation();
+            e.preventDefault();
+
+            clearRightClickMenus();
+            var left, top;
+
+            $(this).addClass('right-click-active');
+            var menu=getRightClickMenuDiv();
+            menu.html(getMenu(menus));
+
+            var clickCoordsX = e.pageX;
+            var clickCoordsY = e.pageY;
+            var menuWidth = menu.offsetWidth + 4;
+            var menuHeight = menu.offsetHeight + 4;
+            var windowWidth = window.innerWidth;
+            var windowHeight = window.innerHeight;
+
+            if ( (windowWidth - clickCoordsX) < menuWidth) {
+              left = windowWidth - menuWidth + "px";
+            } else {
+              left = clickCoordsX + "px";
+            }
+
+            if ((windowHeight - clickCoordsY) < menuHeight) {
+              top = windowHeight - menuHeight + "px";
+            } else {
+              top = clickCoordsY + "px";
+            }
+
+            $(menu).css('display', 'block')
+              .css('left',left)
+              .css('top',top);
+
+            e.preventDefault();
+          });
+        });
+      }
+    });
+})(jQuery);
diff --git a/content/lib/pencilcode-contextmenu/src/dev/pencilcode-contextmenu.less b/content/lib/pencilcode-contextmenu/src/dev/pencilcode-contextmenu.less
@@ -0,0 +1,58 @@
+.right-click-menu,.directory .item div.right-click-menu{
+  display: none;
+  z-index: 50;
+  position: fixed;
+  padding: 0px;
+  ul.menu-list{
+    position: relative;
+    list-style-type: none;
+    line-height: 20px;
+    margin: 0px;
+    padding: 0px;
+    width: 100px;
+    box-shadow: rgb(100, 100, 100) 1px 1px 10px 1px;
+    border-top: #D7D6D6 solid 5px;
+    border-bottom: #D7D6D6 solid 5px;
+
+    & > li.menu-item {
+
+	  & > .menu-item-content ul.menu-list{
+	    display: none;
+	  }
+	  &:hover {
+
+	    & > .menu-item-content ul.menu-list{
+	      display: inline-block;
+	      left: 100%;
+	      position: absolute;
+	    }
+	  }
+
+	  .menu-item-content {
+	  	padding-left: 5px;
+	  	padding-right: 5px;
+	  	color: rgb(112, 112, 114);
+	    background-color: white;
+	    font-size: 12px;
+        border-left: 3px solid white;
+
+	  	&:hover {
+	      background-color: #D7D6D6;
+          border-left: 3px solid #736f6f;
+	  	}
+
+	  	.left-icon {
+  		    padding-left: 20px;
+    		padding-right: 5px;
+	  		a.more-options-icon {
+		      float: right;
+		      padding-left: 5px;
+		    }
+	  	}
+
+
+	  }
+
+    }
+  }
+}
diff --git a/content/lib/pencilcode-contextmenu/src/dist/pencilcode-contextmenu.css b/content/lib/pencilcode-contextmenu/src/dist/pencilcode-contextmenu.css