⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Superfish Menu CI plugin



ezgoen
  • profile picture
  • Member

Posted 15 April 2013 - 06:42 AM

 

Hi Folks,

 

There is a new version - now with a breadcrumb trail!

 

I've create a new post and attached the new file.

Full documentation is inside the archive! 

 

Please note, I've UPDATED the code and commented on it here.

 


While not strictly grocerycrud  I'm sharing here in an effort to give back a little.


 


I needed a simple menu system and I've used the Superfish jquery library before.


I did merge it into the fuelcms menu but I wasnt happy with it.


 


This is simpler to use and really easy to get a good looking menu out of a few lines of code.

 

here's all you have to do to use the library (after you've installed as per the included instructions)

 


 

$this->load->library('superfish',
                            array('container_tag_id'=>'admin_menu', 
                                  'container_tag_id'=>'nav',
                                  'container_tag_class'=>'sf-menu',
                                  'background_color'=>'FFD833',
                                  'highlight_color'=>'FAC101',
                                  'text_color'=>'670001'));    

//make a shortcut to superfish 
$SuperFish=$this->superfish;  //the same name as the load->library statement

$SuperFish->set_menu_item('home','Home',$active_item);
$SuperFish->set_menu_item('admin/usr_accounts','Administrative Tasks/Manage User Accounts',$active_item);
$SuperFish->set_menu_item('admin/site_man','Administrative Tasks/Perform Site Management Tasks',$active_item);

$menu=$SuperFish->render();


 

 


Note the change in my example - I made a small mistake  that Elgger picked up.  Thanks Elgger



 


the following is only necessary if you want to merge css and js with grocery crud


 

 


        //merge our includes 

        $arr=$menu->includes->css_files;

        foreach ($arr as $key => $value){

            $css_files[$key]=$value;

        }

        $arr=$menu->includes->js_files;

        foreach ($arr as $key => $value){

            $js_files[$key]=$value;

        }





        $output->inline.=$menu->includes->inline;

        $output->js_files=$js_files;

        $output->css_files=$css_files;

        

        $output->menu=$menu->output;
 

 

 



I've updated the code. (The attached file has been modified to include the change)


 


To do a vanilla render :


 

 

$menu=$this->superfish->render(); //or if you made a shortcut like above
//$menu=SuperFish->render();
 

 

 

 


To render AND merge with crud output


 


 

$output=$this->menu->renderToCrud($output);//or if you made a shortcut like above
//$output=$SuperFish->renderToCrud($output)
 

 



 


and in your template , if you've done the above merge :


 


 

<?php print $menu; ?>
 
 

 

 


Feedback is welcome but so is maintenance - if its broke feel free to fix it


if you need help just ask


 


Hope its useful to someone


 


Cheers


 


Ez


davidoster
  • profile picture
  • Member

Posted 15 April 2013 - 10:49 AM

I like this approach because it can be as dynamic as someone needs and depending on the user connecting (if we assume that we also have an authentication library) makes the creation of the menus extremely easy!

 

Thank you for sharing!


davidoster
  • profile picture
  • Member

Posted 15 April 2013 - 11:43 AM

Two (2) questions,

1.

    a. Can you give an example using the fourth parameter on set_menu_item, $attributes.

    b. If I want to include within the <a> tag a style="" how can I do it?

2. I noticed you have under assets/superfish a folder named images. This is for images that we can include on our menus? And how do we define them per menu item?


ezgoen
  • profile picture
  • Member

Posted 15 April 2013 - 21:44 PM

 

Hi David/George/GCNinja ;)

 

Note that I've updated the code - to make it easier to merge with crud output.

 

in answer to question 1 a:

 a. Can you give an example using the fourth parameter on set_menu_item, $attributes.

 

Here's a menu line I'm using myself while I'm debugging my site code

 

 

$this->menu->set_menu_item('admin/show_session','Developer/Show Session data',$active_item,array('target'=>"_blank"));
 


in answer to question 1 b:

 


If I want to include within the <a> tag a style="" how can I do it?

 

 

Here's the same menu line with some really ugly extra styling

(excuse the formatting, inline css can get long)

 

 

$this->menu->set_menu_item('admin/show_session','Developer/Show Session data',$active_item,
                 array('target'=>"_blank", 
                        'style'=>'border: 1px solid black;text-align:right;font-weight:bold;background:red;color:yellow;'));
 

 

 

 

In answer to question 2

 


 a. Can you give an example using the fourth parameter on set_menu_item, $attributes.

 

 

Thats a superfish (the jQuery lib)  image directory - the use of files in there is according to the superfish css files from Joel Birch 

 

In short I haven't messed around with it but it should be pretty easy to use.

 

You could use inline styles like the answer to 1B (above) or perhaps coding some css styles using extra or alternate images in /assets/superfish/theme/superfish_css.php will help you override and extend the image use.

 

 

Hope that answers your questions well enough.

 

This menu system is largely glue tying a few different technologies together.

There's not very much original code, just enough to tie a few things together.

Its probably not entirely complete - I needed it - built it to do what I wanted and then

thought maybe some can use this.

I'd be really happy if it got sucked up and included with gc.

 

Cheers

 

 

EZ


davidoster
  • profile picture
  • Member

Posted 15 April 2013 - 22:21 PM

Thank you very much for the explanations.

Well to be honest I don't see a point to include it on the GC itself since it is a CI library and can be  extended and expanded without having to wait the very next version of GC, which sometimes can be late.

For my liking I would prefer it to stay as a library and develop it as such.


ezgoen
  • profile picture
  • Member

Posted 16 April 2013 - 01:31 AM

 

Your right of course - its CI 

 Also I'll have an update shortly 

I'm integrating it as we type - and I realized I wanted a breadcrumb trail.

Its finished - just testing it now - will post the update later on today (hopefully)

 

To print the bread crumb trail - one just dumps the contents of an additional member of the results.

 

I'll explain in more detail when I post it

 

Cheers,

 

Ez


ezgoen
  • profile picture
  • Member

Posted 16 April 2013 - 03:51 AM

I spoke too soon

 

Its not really a breadcrumb trail - more of an alternate visualization of where one is in the menu - not quite the same thing.

 

I didnt like the default in superfish which is affected by

 

 

 

pathLevels: 1,
 

 

 

but I still wanted my user to know where they were so I set 

 

pathLevels: 0,

 

and display my "version" of a breadcrumb which is really just the menu path to the current item.

 

I'm still working on it 

 

had some interruptions - maybe not finished testing till tomorrow

 

Cheers,

 

Ez


davidoster
  • profile picture
  • Member

Posted 16 April 2013 - 06:22 AM

Thanks for your efforts.

Now we are a step closer from integrating your system with an auth library and then have a nearly (not that near but anyway just for the sake of saying it!!!) full blown system with user authentication, user groups and CRUD in one system.


ezgoen
  • profile picture
  • Member

Posted 17 April 2013 - 05:05 AM

Well just for the sake of saying it - a basic auth setup really isnt that hard.

If *someone* in the whole grocerycrud world would create a

login crud form - say some sort of dynamic version of this :

 

 

  <div class="flexigrid crud-form" style='width: 100%;'>
	<div class="mDiv">
		<div class="ftitle">
			<div class='ftitle-left'>
				Login to perform Administrative Functions		</div>		
			<div class='clear'></div>				
		</div>
		<div title="Minimize/Maximize" class="ptogtitle">
			<span></span>
		</div>	
	</div>
<div id='main-table-box'>
	<?php 
		echo validation_errors(); 
		echo form_open('login_verify');
		echo "\n";
	?>
	<div class='form-div'>
					<div class='form-field-box odd' id="username_field_box">
				<div class='form-display-as-box' id="username_display_as_box">
					Username<span class='required'>*</span>  :
				</div>
				<div class='form-input-box' id="username_input_box">
					<input id='field-username' name='username' type='text' value="mwanicki" maxlength='20' size="20" />				</div>
				<div class='clear'></div>	
			</div>
					<div class='form-field-box even' id="password_field_box">
				<div class='form-display-as-box' id="password_display_as_box">
					Password<span class='required'>*</span>  :
				</div>
				<div class='form-input-box' id="password_input_box">
					<input id='field-password' name='password' type='password' value='' maxlength='100' />				</div>
				<div class='clear'></div>	
			</div>
						
		<div id='report-error' class='report-div error'></div>
		<div id='report-success' class='report-div success'></div>		
	</div>
		<div class="pDiv">
		<div class='form-button-box'>
			<input type='submit' value='Login' class="btn btn-large"/>
		</div>
		<div class='form-button-box'>
			<input type='cancel' value='Cancel'  class="btn btn-large" />
		</div>				
		<div class='form-button-box'>
			<div class='small-loading' id='FormLoading'>Login in, validating...</div>
		</div>		
		<div class='clear'></div>	
	</div>
	<?php echo form_close(); ?>
</div>
</div>	

 

Thats the actual hard-coded template I use ;)

 

But it would be cool if it was dynamic, say it was created with a call to the crud like this:

 public function authenticate()
    {
        if($this->session->userdata('logged_in'))   {
	 //If session, redirect to secret page
	  redirect(site_url("/secret_pages"));			 
	}
   
        $crud = new grocery_CRUD();
 
        $crud->set_table('users');
        $crud->fields('id','username','password','permission_level');
        
        //this is a (proposed) new method that alters the way the crud 
        //deals with THIS table. the prototype might be
        //void set_auth_mode( user_field_name, password_field_name )
        $crud->set_auth_mode('username','password'); 

        //this is where you make a decision - do some of it for them?
        //goes against what the crud is all about - but easy enough

        //give them a callback so they can hash the password 
        //using whatever method they want 
        //eg void callback_auth_hash( mixed $callback ) 
        $crud->callback_auth_hash( mixed $callback );

   //OR

        //do nothing at all except creating and displaying the form 
        //and give them a callback with whatever data the user entered
        //they can authenticate and return success or failure from there.
        //personally I'd do it this way - its more in keeping with the crud idea.


        //at this point the default would be to show the login form
        //and authenticate as required
        //The developer could just access the login state via a session variable
        //leave the logic to them ;)

        $output = $crud->render();
 
        $this->_example_output($output);                
    }
 

 

The rest is pretty easy - for most developers to handle.

 

I'm a codeigniter newbie but a developer for over 20 years - I've learned not to make wheels, there's plenty of them around.

for instance, here http://www.codefactorycr.com/login-with-codeigniter-php.html

which is a pretty good coedigniter tutorial in its own right - as well as presenting solid examples on how to do authentication.

 

 

 

Anyhow - thats my $0.02 worth,

 

What do you think Maestro??

 

Cheers

 

Ez


davidoster
  • profile picture
  • Member

Posted 17 April 2013 - 11:08 AM

Well most of us, CI developers that is, we use the ion-auth library for CI and works like a charm!

And with minimal effort you make a login screen like this (sorry its greek but you get the point!):

1rYafwC.png

 

And under the hood we have checking of user rights, groups if logged in or not etc etc. And with that with simple if/switch everything works out nicely.

With your dynamic menus it's even easier!


ezgoen
  • profile picture
  • Member

Posted 18 April 2013 - 00:50 AM

Thanks for that :)

 

I need to get my current effort finished and its only single login for the owner so I'm all good for now.

 

But a quick scan of the docs for ion http://benedmunds.com/ion_auth/

shows its pretty decent and supports a varied configuration. I will definitely take a more detailed

look at some time in the future

 

I still like my idea that grocerycrud provide the login screen in-keeping with whatever gc theme is curently set

and let the users/developers roll their own mechanism. (or use someone elses)

 

Cheers,

 

Ez


ezgoen
  • profile picture
  • Member

Posted 19 April 2013 - 02:57 AM

Hi Folks:

 

Here is a New Version 1.1 - includes breadcrumbs!

Also includes code cleanup, some things done a little better.

Better comments and documentation.

 

Here's a link to the file [attachment=515:phpSuperFish_v1.1.zip]

 

-------------------------------------------------------------------------------

 

   PHP superfish 
 
   A Codeigniter library that creates a superfish menu automatically with just few lines of code.
 
   Copyright (C) 2013  E.z 
 
   LICENSE
 
   Superfish is released with dual licensing, using the GPL v3 (license-gpl3.txt) and the MIT license (license-mit.txt).
   You don't have to do anything special to choose one license or the other and you don't have to notify anyone which license you are using.
   Please see the corresponding license file for details of these licenses.
   You are free to use, modify and distribute this software, but all copyright information must remain.
 
   @package        PHP Superfish
   @copyright      Copyright (c) 2013, E.z
   @license        As Above
   @version        1.1 ****** New version
   @author         E.z <ezgoen@gmail.com>
 
    Credits to 
                 - the creator of the jquery plugin SuperFish
 
                     http://users.tpg.com.au/j_birch/plugins/superfish/
                     http://archive.plugins.jquery.com/project/Superfish
                     https://github.com/joeldbirch/superfish/
               
                 
                 Patrick Fitzgerald - the creater of csscolor.php
 
                     http://www.barelyfitz.com/projects/csscolor/
     
     Installation:
    
        This Package : 
            
            If you're using CI extract it into your CI tree 
            Maybe your root or www - if you're using CI its the parent of the application folder
            assuming www - it should look like this :
            
            /www/
                sf_install.txt (this file)
                sf_readme.txt
            
            /www/application/libraries/
                superfish.php
                index.html
 
            /www/application/config/
                superfish.php
                index.html
                
            /www/assets/
                index.html
                
            /www/assets/superfish/
                index.html
 
            /www/assets/superfish/css
                superfish-crumb.css
                index.html
                
            /www/assets/superfish/images
                index.html
            
            /www/assets/superfish/js
                index.html
 
            /www/assets/superfish/js
                superfish_css.php
                csscolor.php
                index.html
        
    
        
    Superfish jQuery plugin :
  
        Download the latest version if the jquery plugin SuperFish from git
    
        
        extract it to assets/superfish
        when your done you should have 
        assets/superfish/
            changelog.txt
            example.html
            followed.html
            MIT-LICENSE.txt
            README.md
            superfish.jquery.json
            
        assets/superfish/css/
            superfish.css
            superfish-navbar.css
            superfish-vertical.css
            superfish-crumb.css       <-- our file - edit this to change the crumb style
            
        assets/superfish/images/
            arrows-ffffff.png
            
        assets/superfish/js/
            hoverIntent.js
            jquery-1.9.0.min.js 
            superfish.js
            supersubs.js
  
    
      csscolors.php colors library:
   
        You can download the latest version and remove the pear dependancies yourself
        or you can use the included version which has all pear dependancies removed
        
        to install it by creating assets/superfish/theme/
        and placing csscolor.php into there along with superfish_css.php
        so when your done you'll have:
                
        assets/superfish/theme/
            csscolor.php
            superfish_css.php            <-- our file - this controls the color scheme/theme of the menu
    
        to reduce processing superfish_css.php will cache copies if its css 
        and output that rather than computing a new theme.
     
 
    
    Usage :
    
    To load the library in CI 
    
        $this->load->library('superfish',
                            array('container_tag_id'=>'admin_menu', 
                                  'container_tag_id'=>'nav',
                                  'container_tag_class'=>'sf-menu',
                                  'pathLevels'=>0,       
                                  'home_url'=>'/admin',
                                  'base_ref'=>site_url(),
                                  'background_color'=>'FFD833',
                                  'highlight_color'=>'FAC101',
                                  'text_color'=>'670001',
                                  'SESSION'=>$this->session));    
                                
                                
    To build a menu
    
       

 

 /make a shortcut to superfish 
        $SuperFish=$this->superfish;  
        
        //if you're using CI you get your active url like this (remember to $this->load->helper('url')
        $active_item=$this->uri->uri_string();
        
        $SuperFish->set_menu_item('home','Home',$active_item);
        $SuperFish->set_menu_item('admin/usr_accounts','Administrative Tasks/Manage User Accounts',$active_item);
        $SuperFish->set_menu_item('admin/site_man','Administrative Tasks/Perform Site Management Tasks',$active_item);

 

 

    To get the rendered menu:
    
  

 

      $menu=$SuperFish->render();
 

 

        
    To get the menu rendered to your grocerycrud output:
    

 

      $output=$SuperFish->renderToCrud($output);
 

 

    
                                
    In your template put the following where you want the menu to appear                 
           

 

                 <div class="nav">
                     <?php print $menu; ?>
                     <div class="clear"> </div>
                 </div>
 

 

                
                
     The output will be :
                                 
 

 

              <div class="nav">
                     <!-- Start SuperFish Menu  //-->
                         <ul id="nav" class="sf-menu">
                             <li><a href="http://testing/index.php/home" title="Home">Home</a></li>
                             <li>
                                 <a href="#" title="Administrative Tasks" >Administrative Tasks</a>
                                 <ul>
                                     <li><a href="http://testing/index.php/admin/usr_accounts" title="Manage User Accounts">Manage User Accounts</a></li>
                                     <li><a href="http://testing/index.php/admin/site_man" title="Site Management">Site Management</a></li>
                                 </ul>
                             </li>
                         </ul>
                     <!-- End SuperFish Menu  //-->
                     <div class="clear"> </div>
                 </div>
 

 

    
     To render the breadcrumb trail just do this in your template
     a basic stylesheet is in /assets/superfish/css/superfish-crumb.css
    
     Note the breadcrumb trail is experimental - it works for me but I havent 
     texted it extensively and the code is pretty messy :(
    

 

                 <div class="crumb">
                      <?php print $bread_trail; ?>
                     <div class="clear"> </div>
                 </div>
 

 

    

                                     

 

Cheers

 

Ez


davidoster
  • profile picture
  • Member

Posted 19 April 2013 - 07:02 AM

Great work [member=ezgoen]. Thank you for sharing.

Suggestion, Why don't you make a github repository to download from there the library?


ezgoen
  • profile picture
  • Member

Posted 20 April 2013 - 13:28 PM

is it worth it?


davidoster
  • profile picture
  • Member

Posted 21 April 2013 - 00:39 AM

From my point of view, if you do frequent changes then yes it does worth it.