php - How do I turn this commonly used javascript code into a plugin? -

overview

i developing wordpress based website allows visitor upload images @ few different places on page. have (after lot of trial , error) got working code but, code differs between each 'upload' area, thought trying make re-usable in form of 'plugin'.

my background

i self-taught programmer prone lots of mistakes , doing things in illogical ways plus writing thousand lines of code when 1 line have sufficed.

history of problem (please skip section see code below)

i thought include bit of history don't fall foul of x-y problem. have 4 places on webpage visitors can upload site. 3 of these image uploads should allow visitor 'crop' image. i'm using jquery plugins plupload , jcrop in order provide functionality.

initially attempted write code in way page included relevant code in dom @ execution time. in order have multiple plupload instances on same page created 1 "dynamic variable" , called code this...

var dynamicpartofvar = "imageuploadareaone"; imagemanipulationobject["imageuploader"+dynamicpartofvar] = new plupload.uploader(plupload_init); 

this worked (of fashion) found out if code in dom isn't being cache'd browser. went down route of having separate js file each upload area , 'including' them , passing in relevant variables with:

wp_localize_script("imageuploadareaone", "inputvar", $relevantvariablearray); wp_enqueue_script("imageuploadareaone"); 

however, realised if 'pass in' different variables same file make 1 set of code , (for instance) pass variable called "allowcropping" enable/disable jcrop etc.

issue

i have code such (just example):

var isadmin = inputvar.isadmin; var notadmin = inputvar.notadmin; var thisuser = inputvar.thisuser; var ajaxurl = inputvar.ajaxurl; imagemanipulationobject["imageuploader"+dynamicpartofvar] = new plupload.uploader(plupload_init);    imagemanipulationobject["progressloader"+dynamicpartofvar] = $('#progressloader'+dynamicpartofvar).percentageloader({width: 170, height: 170, progress:0.0});  /* **************************** */ // hide cropping div when user selects different image /* **************************** */ $('.imageselection').on('click', function() {        closecropwindow(); }); $('.imagethumb').on('click', function() {        closecropwindow(); }); 

html example

<div id="maincropdivid<?php echo $this->dynamicpartofvar; ?>">     <div class="outercropdiv">      <div id="innercropdivid<?php echo $this->dynamicpartofvar; ?>" class="innercropdiv">     <img class="croppingimage" id="croppingimageid<?php echo $this->dynamicpartofvar; ?>" alt="cropping image" src="<?php echo $currenturl; ?>"/>      <div class="jtcentrediv">     <form id="cropimg<?php echo $this->dynamicpartofvar; ?>" name="cropimg" method="post" action="<?php echo $getpartofurl; ?>">     <input type="hidden" id="x_<?php echo $this->dynamicpartofvar; ?>" name="x">     <input type="hidden" id="y_<?php echo $this->dynamicpartofvar; ?>" name="y">     <input type="hidden" id="w_<?php echo $this->dynamicpartofvar; ?>" name="w">     <input type="hidden" id="h_<?php echo $this->dynamicpartofvar; ?>" name="h">     <input type="hidden" name="typeofimage" value="<?php echo $this->typeofimage; ?>">     <input type="hidden" id="imageidtocrop<?php echo $this->dynamicpartofvar; ?>" name="imageidtocrop" value="">      <input id="performcropbutton<?php echo $this->dynamicpartofvar; ?>" type="submit" value="crop image">     </form>     </div>      </div><!-- @end #innercropdivid -->       </div><!-- @end .outercropdiv -->      <div style="clear:both;">&nbsp;</div>     </div> <!-- @end #maincropdivid -->  

assuming wrapping in 'plugin' way go. how go doing that? want able pass in variables plugin including several dom elements (i.e. pass plugin div holds image needs cropped, div holds preview of image, div holds uploaded image etc). plus other variables such whether allow 'cropping' or not.

thank help.

you need create new js file (that going plugin) piece of code necessary

(function ($) { $.fn.myfunctionplugin= function (options) { var defaults = {     };     var settings = $.extend(true, {}, defaults, options); }  function dosomthing() { //code here } } (jquery)); 

add reference plugin on page(in same way add reference jquery or other third party js)

<script src="...reference" type="text/javascript"></script> 

add script segment on same page

<script type="text/javascript"> $(function() {     var options = {actiontoperform:"...",//this may controller action performed  idcalss="....." //class of item on view want pass in}   $('.someclass').jsfunction(options);  }); 

ps: please refer book jquery in action second edition page 205

reference simple jquery plugin writing: jquery plugin example