Solved

a context menu and disabling few items of it

Posted on 2016-07-29
27
90 Views
Last Modified: 2016-08-01
Hi, i have the following context menu with me:

(function($){
    jQuery.fn.vscontext = function(options){
        var defaults = {
            menuBlock: null,
			leftButton: false,
			rightButton: true,
            offsetX : 8,
            offsetY : 8,
            speed : 'fast'
        };
        var options = $.extend(defaults, options);
        var menu_item = options.menuBlock;
        return this.each(function(){
            	$(this).bind("contextmenu",function(e){
				return false;
		});
            	$(this).mousedown(function(e){
                        var offsetX = e.pageX  + options.offsetX;
                        var offsetY = e.pageY + options.offsetY;
				if((e.button == 2 && options.rightButton == true) || ($.browser.msie && e.button == 1 && options.leftButton == true) || (!$.browser.msie && e.button == 0 && options.leftButton == true)){
                            $(menu_item).show(options.speed);
                            $(menu_item).css('display','block');
                            $(menu_item).css('top',offsetY);
                            $(menu_item).css('left',offsetX);
			}else {
                            $(menu_item).hide(options.speed);
                        }
		});
                $(menu_item).hover(function(){}, function(){$(menu_item).hide(options.speed);})
                
        });
    };
})(jQuery);

Open in new window


now the issue lies is when i right click on the folders i want to disable make copy/rename/delete

<div class="vs-context-menu">
        <ul>
			
            <li class="regenerate"><a class="insidelink" data-place="0" data-program="5034" data-desk="1031" id="menu_1" data-fancybox-width="300" data-fancybox-height="200" data-fancybox-type="iframe">Regenerate</a></li>
			<li class="rename seprator"><a class="fancybox" data-program="5034" data-desk="1031" id="menu_2" data-fancybox-width="450" data-fancybox-height="300" data-fancybox-type="iframe">Rename</a></li>
            <li class="copy"><a class="makecopy" data-program="5034" data-delete="0" data-desk="1031" id="menu_3" data-fancybox-width="300" data-fancybox-height="100" data-fancybox-type="iframe">Make Copy</a></li>
            <li class="delete seprator"><a class="deleteFile" data-program="5034" data-delete="1" data-desk="1031" id="menu_5" data-fancybox-width="300" data-fancybox-height="100" data-fancybox-type="iframe">Delete</a></li>
			<li class="email"><a class="fancybox" data-program="5034" data-desk="1031" id="menu_6" data-fancybox-width="500" data-fancybox-height="500" data-fancybox-type="iframe">Email</a></li>
			
        </ul>
    </div>

Open in new window


i want to
0
Comment
Question by:myselfrandhawa
  • 14
  • 13
27 Comments
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41735777
when i right click on the folders
Which 'folders' are you talking about? And what is the code which fires the menu?
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41736045
here is the working link for you and this is what i am trying to do:

http://gr-group.in/filefolder/file_explorer.cfm

Open in new window


now i am trying to do few things

1. as how i am selecting the txt File, i want to do a same like selecting a folder

2. disable the context menu items on folders right click, only keep regenerate and email enabled.

3. can i select 2 or more files from one folder and merge them, i would like to add one more link called merge to context menu, which will let me select 2 or more items from same folder, not from multiple folders and if i can disable merge the folders right click
0
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 41736384
First, I have to create in your css a class called 'disabled' to render the disabled state; something like this:
.disabled{
    color: #ccc !important;
}
.disabled:hover{
    background: #eee !important;
    color: #ccc !important;
}

Open in new window

I'm not sure if !important clause is needed but I added to be sure.
Then, we need to modify plugin code this way (you can just copy the code, create a file called 'vscontext.jquery.cust.js', paste the code in this file and inlcude the file in the page commenting out the original plugin):
/**
 *  jQuery Very Simple Context Menu Plugin
 *  @requires jQuery v1.3 or 1.4
 *  http://intekhabrizvi.wordpress.com/
 *
 *  Copyright (c)  Intekhab A Rizvi (intekhabrizvi.wordpress.com)
 *  Licensed under GPL licenses:
 *  http://www.gnu.org/licenses/gpl.html
 *
 *  Version: 1.1
 *  Dated : 28-Jan-2010
 *  Version 1.1 : 2-Feb-2010 : Some Code Improvment
 */

(function ($) {
	jQuery.fn.vscontext = function (options) {
		var defaults = {
			menuBlock: null,
			offsetX: 8,
			offsetY: 8,
			speed: 'slow'
		};
		var options = $.extend(defaults, options);
		var menu_item = '.' + options.menuBlock;
		return this.each(function () {
			$(this).bind("contextmenu", function (e) {
				return false;
			});
			$(this).mousedown(function (e) {
				var offsetX = e.pageX + options.offsetX;
				var offsetY = e.pageY + options.offsetY;
				var elem = document.elementFromPoint(e.pageX, e.pageY);
				if (e.button == "2") {
					console.log($(menu_item).attr('class'));
					$(menu_item).show(options.speed);
					$(menu_item).css('display', 'block');
					$(menu_item).css('top', offsetY);
					$(menu_item).css('left', offsetX);
					if ($(elem).hasClass('dir')) {
						console.log('dir');
						$('.rename a, .delete a, .copy a').addClass('disabled');
					} else {
						console.log('file');
						$('.rename a, .delete a, .copy a').removeClass('disabled');
					}
				} else {
					$(menu_item).hide(options.speed);
				}
			});
			$(menu_item).hover(function () {}, function () {
				$(menu_item).hide(options.speed);
			});

		});
	};
})(jQuery);

Open in new window


You can see the code in action here: http://test.webintenerife.com/context-menu.php

Last, you have to slightly modify the code which fire events for your menu items. This is an example for deleteFile event:
$('.makecopy,.deleteFile').click(function () {
	if (!$(this).hasClass('disabled')) {
		var dataprogram = $(this).attr('data-program');
		var datadesk = $(this).attr('data-desk');
		var isdelete = $(this).attr('data-delete');
		var cusip = $(this).attr('data-cusip');
		var parts = cusip.split('/');
		var answer = parts[parts.length - 1];
		var month = parts[1];
		var detection = parts[2];
		if (isdelete == 1) {
			sURL = $(this).attr('data-url') + '&programid=' + dataprogram + '&tradedeskid=' + datadesk + '&cusip=' + answer + '&month=' + month + '&delete=' + isdelete + '&folder=' + detection
			$.ajax({
				url: sURL,
				beforeSend: function () {
					$('.classToMsg').html('Deleting ' + answer + ' PDF').show();
				},
				complete: function () {
					$('.classToMsg').html('').hide();
				}
			});
		} else {
			sURL = $(this).attr('data-url') + '&programid=' + dataprogram + '&tradedeskid=' + datadesk + '&cusip=' + answer + '&month=' + month + '&folder=' + detection
			$.ajax({
				url: sURL,
				beforeSend: function () {
					$('.classToMsg').html('Copying ' + answer + ' PDF').show();
				},
				complete: function () {
					$('.classToMsg').html('').hide();
				}
			});
		}
	}
});

Open in new window

Notice the if clause to check if the item is disabled: the event will be fired only if the menu item is not disabled. In my testing page the code to delete or copy is just this:
$('.makecopy,.deleteFile').click(function () {
	if (!$(this).hasClass('disabled')) {
		alert('copying or deleting');
	}
});

Open in new window

0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41736482
This is cool, but i am not able to select a directory just like i do with file a text file and then i do right click and perform functions

so how can i do same with dir
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41736698
Sorry, but I'm not sure to understand the issue: I don't remember it were different before...
Btw, let me ask where you are including the vscontext.jquery.js plugin: I don't find the reference to it in the page  source.
In modifications I did there is nothing which should prevent the correct behavior: in the plugin my code is executed only if the e.button == "2" (that is the right button) nd the other modification refers only to menu items deleteFile and makeCopy. Which is the code that would allow to select a folder?
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41736870
i just copied ur code to the main contexct.js fie,

only difference is where the
 e.button == 2

Open in new window

, it is replaced with
if((e.button == 2 && options.rightButton == true) || ($.browser.msie && e.button == 1 && options.leftButton == true) || (!$.browser.msie && e.button == 0 && options.leftButton == true)){

Open in new window


the code works, but if u see clearly when you left click on the file, u see it selected

i want the same, that i should be able to select the folder and then it will open too and right click will behave just like your above code
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737033
Why did you use this line?
if((e.button == 2 && options.rightButton == true) || ($.browser.msie && e.button == 1 && options.leftButton == true) || (!$.browser.msie && e.button == 0 && options.leftButton == true)){

Open in new window

In plain english, this line of code means: "if the user click the right button or the left button", that is every mouse button be clicked open the menu. Try to use only
if((e.button == 2 && options.rightButton == true)

Open in new window

and see if this mkes the folder be selected on left click.

Anyway, where you're including the plugin? nd what is the code which changes the css of folders to make them selected?
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737497
you can see the css as import venobox.css

i will update the code the right click o the menu
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737599
I see you updated the code and now the folders are correctly selected. About the source, I was looking for vscontext.jquery.js and I didn't realize the code for the menu is in venobox.js :)

Any other issue?
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737651
yes but the issue for selecting the folders is this

I have the following code for ul and li, it works all good. you noticed the files have id as the attribute whose class is file. that is missing from the anchor link whose class is dir

i want to add the id too to the dir anchor link too. the following is the html of my code

<ul>
  <li><a class="dir" data-place="-1" data-month="5034">July-2016</a>
    <ul>
      <li><a class="dir" data-place="-1" data-month="July-2016">complete</a></li>
      <li><a class="dir" data-place="+1" data-month="July-2016">overview</a>
        <ul>
          <li><a id="5034/July-2016/overview/1 - Copy (2).txt" class="file" >1 - Copy (2).txt</a></li>
          <li><a id="5034/July-2016/overview/1 - Copy.txt" class="file" >1 - Copy.txt</a></li>
          <li><a id="5034/July-2016/overview/1.txt" class="file" >1.txt</a></li>
          <li><a id="5034/July-2016/overview/2 - Copy (2).txt" class="file" >2 - Copy (2).txt</a></li>
          <li><a id="5034/July-2016/overview/2 - Copy.txt" class="file" >2 - Copy.txt</a></li>
          <li><a id="5034/July-2016/overview/2.txt" class="file" >2.txt</a></li>
          <li><a id="5034/July-2016/overview/3 - Copy (2).txt" class="file" >3 - Copy (2).txt</a></li>
          <li><a id="5034/July-2016/overview/3 - Copy.txt" class="file" >3 - Copy.txt</a></li>
          <li><a id="5034/July-2016/overview/3.txt" class="file" >3.txt</a></li>
        </ul>
      </li>
      <li><a class="dir" data-place="+1" data-month="July-2016">summary</a>
        <ul>
          <li><a id="5034/July-2016/summary/22.txt" class="file" >22.txt</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Open in new window


$( "a.dir" ).click( function(){
                var jLink = $( this );
                var jSelected = $( "a.selected" );
                // Remove the selected class.
                jSelected.removeClass( "selected" );        
                // Set the selected status on new link.
                jLink.addClass( "selected" );   
                var jSubDir = jLink.next( "ul" );
                ShowFile(jLink.attr("id"));
                // Toggle the sub-directory list.
                jSubDir.toggle();
            }               
            );


        // Hoop up the file click handler.
        $( "a.file" ).click(function(){
                var jLink = $( this );
                var jSelected = $( "a.selected" );
                // Remove the selected class.
                jSelected.removeClass( "selected" );        
                // Set the selected status on new link.
                jLink.addClass( "selected" );       
                // Show file name.
                $( "span#filename" ).text( jLink.text() );
                // Load file.
                ShowFile( jLink.attr( "id" ) );
                var strFileData =  jLink.attr( "id" );
                $('div.vs-context-menu ul li a').attr("data-cusip", strFileData);
            }
            );


        // The file might start off with some default elements.
        // Show all the selected elements including all of the 
        // parent directories.
        $( "a.selected" ).each(function(intI){
                var jLink = $( this );
                var jParents = jLink.parents( "ul" );
                var jSubDir = jLink.next( "ul" );
                // Show the current dir (this will only 
                // work if this is a directory link).
                jSubDir.show();
                // Show all the parents to show them.
                jParents.show();
                // If this is the first one, then we want to load the file.
                alert(intI);
                if (intI == 0){ 
                    // Show the file name.
                    $( "span#filename" ).text( jLink.text() );
                    // Load the file.
                    ShowFile( jLink.attr( "id" ) );
                }
            }               
            );
    });
for dir class at least this should come, because it does not have file associated

id="5034/July-2016/overview"

the showFile Function

function ShowFile( strPath ){
    // Check to see if there is an AJAX request already in 
    // progress that needs to be stopped.
    if (objHttpFileDataRequest){    
        // Abort the AJAX request.
        objHttpFileDataRequest.abort();
    }

    // Use AJAX to get the text of the file and store the
    // new AJAX request object into the global variable.
    objHttpFileDataRequest = $.get(
        "index.cfm",
        {
            getdata: 1,
            file: strPath //encodeURI( strPath )
        },
        function( strFileData ){
            $( "pre#fileoutput" ).html('<iframe src="http://gr-group.in/filefolder/' + strPath + '" type="text/plain" width="100%" height="100%"></iframe>');
            window.location.hash = "content";
        }
        );

}

Open in new window

0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737754
I'm a bit confused: isn't this a totally unrelated issue?
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737763
no it is not, in the view source of the link i shared there is also a script.js file which does the selection of the files work too, probably that might seems a bit unrrelated

but here is the reference question to it

https://www.experts-exchange.com/questions/28960280/Selecting-the-folders-with-current-script-as-follows.html

i updated some of the code to select folders too but how do i bring ID to the a tag who has a class of DIR
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737773
@myselfrandhawa, in your question you wrote this:
now the issue lies is when i right click on the folders i want to disable make copy/rename/delete
The problem is now solved so this question can be closed. The issue you refer to, adding id to the anchors, is related to the menu for sure but it is a different aspect of the general problem 'How to manage this context menu'.
In addition, I can't understand what you mean saying you want to add id to the anchor link: the function ShowFile already uses the id to get file contents from the server...
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737781
here i can  choose the answer, you gave and that helped solved my issue. Next the question which i shared with you might be wrong

but the main issue is i have tha anchor tag which on looks like this

http://prntscr.com/c0b8cq
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737788
Maybe I'm a bit stupid today but still I don't understand :(
The anchor is
<a class="dir selected" data-place="+1" data-month="July-2016" href="javascript:void( 0 );">overview</a>

Open in new window


and how do you wish it be instead?
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737789
can u update ur answer on the question i shared
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737792
like this

<a id="5034/July-2016/overview" class="file" href="javascript:void( 0 );">overview</a>

Open in new window

for overview folder

for summary folder it will be like above but overview will be replaced by summary and like this
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737809
Ah, ok, now I got it. So you have to dd some code in the piece of code which builts the directory tree in order to add that id: can you share the function which builds and print the directory tree?
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737815
i had already at the top see comment ID: 41737651
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737877
In the javascript I don't see the code which builds the directory tree: I only see an each loop for a.selected which shows children list.
I think there is a misunderstanding, so I ask the question in another way: is this markup hardcoded or dinamically built?
<ul>
  <li><a class="dir" data-place="-1" data-month="5034">July-2016</a>
    <ul>
      <li><a class="dir" data-place="-1" data-month="July-2016">complete</a></li>
      <li><a class="dir" data-place="+1" data-month="July-2016">overview</a>
        <ul>
          <li><a id="5034/July-2016/overview/1 - Copy (2).txt" class="file" >1 - Copy (2).txt</a></li>
          <li><a id="5034/July-2016/overview/1 - Copy.txt" class="file" >1 - Copy.txt</a></li>
          <li><a id="5034/July-2016/overview/1.txt" class="file" >1.txt</a></li>
          <li><a id="5034/July-2016/overview/2 - Copy (2).txt" class="file" >2 - Copy (2).txt</a></li>
          <li><a id="5034/July-2016/overview/2 - Copy.txt" class="file" >2 - Copy.txt</a></li>
          <li><a id="5034/July-2016/overview/2.txt" class="file" >2.txt</a></li>
          <li><a id="5034/July-2016/overview/3 - Copy (2).txt" class="file" >3 - Copy (2).txt</a></li>
          <li><a id="5034/July-2016/overview/3 - Copy.txt" class="file" >3 - Copy.txt</a></li>
          <li><a id="5034/July-2016/overview/3.txt" class="file" >3.txt</a></li>
        </ul>
      </li>
      <li><a class="dir" data-place="+1" data-month="July-2016">summary</a>
        <ul>
          <li><a id="5034/July-2016/summary/22.txt" class="file" >22.txt</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Open in new window

If it is dynamically built, what is the code which builds it?
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737898
dynamically build and id the each is missing for files, can we do it for dirctories
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737936
In the code you posted I don't see the function which builds that markup...
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737944
that is build using coldfusion dynamic language, so do i need to do something over there, but do i need to write something on jquery end
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41737984
Maybe you could tell it before :)
Ok, let me think about a bit...
0
 
LVL 15

Author Comment

by:myselfrandhawa
ID: 41737992
i did tried it and it created the ID

so thanks for once in all. i will accept your answer.

Thanks for your patience
0
 
LVL 15

Author Closing Comment

by:myselfrandhawa
ID: 41737995
Thanks a ton
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41738145
Ah, I see. Wonderful! Thanks for points and godd luck with your project.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now