Link to home
Start Free TrialLog in
Avatar of Coast Line
Coast LineFlag for Canada

asked on

a context menu and disabling few items of it

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
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

when i right click on the folders
Which 'folders' are you talking about? And what is the code which fires the menu?
Avatar of Coast Line

ASKER

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
ASKER CERTIFIED SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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?
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
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?
you can see the css as import venobox.css

i will update the code the right click o the menu
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?
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

I'm a bit confused: isn't this a totally unrelated issue?
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
@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...
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
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?
can u update ur answer on the question i shared
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
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?
i had already at the top see comment ID: 41737651
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?
dynamically build and id the each is missing for files, can we do it for dirctories
In the code you posted I don't see the function which builds that markup...
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
Maybe you could tell it before :)
Ok, let me think about a bit...
i did tried it and it created the ID

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

Thanks for your patience
Thanks a ton
Ah, I see. Wonderful! Thanks for points and godd luck with your project.