Team:Peking/jqueryplugins4

From 2010.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
<style type="text/css">
<!--jquerycorner-->
<!--jquerycorner-->
// TODO: alter variable/property naming so that less string manipulation is required.
// TODO: alter variable/property naming so that less string manipulation is required.
Line 308: Line 309:
-
 
+
</style>
</html>
</html>

Revision as of 14:25, 19 September 2010

\n\ ', /*MSIE*/ //////////////////////////////////////////////////////////////////////////////////////// /*MSIE*/ //// function converts css percentage values to ie-proprietary css "expressions" it is /*MSIE*/ //// necessary because standards-challenged browsers (ie6) don't support height by /*MSIE*/ //// percentage, but do by "expression". pass it a css string and it then converts it, /*MSIE*/ //// if the rendering engine is ie6. For standards-capable browsers, it just passes /*MSIE*/ //// the unedited css on. Yet another example of MSIE littering the web with crap code. /*MSIE*/ //////////////////////////////////////////////////////////////////////////////////////// /*MSIE*/ procStyles : function(STRstyle) { /*MSIE*/ // if MSIE6, then process /*MSIE*/ if (jQuery.browser.msie && jQuery.browser.version == '6.0') { /*MSIE*/ // regex to id percentage values in the styling strings /*MSIE*/ var RGXcentVal = /\d{1,3}\%{1}/g; /*MSIE*/ // split stying into arrays split by percentage values /*MSIE*/ var ARRcentVals = STRstyle.match(RGXcentVal); /*MSIE*/ var ARRcutCents = STRstyle.split(RGXcentVal); /*MSIE*/ if(ARRcentVals) { /*MSIE*/ // create an empty string to build new styling into /*MSIE*/ var STRnewStyle = ''; /*MSIE*/ // loop through percent values, convert to expressions and reassemble arrays into new styling string /*MSIE*/ for (var i=0; i0) ? 'expression(this.parentNode.'+offsetProp+'*0.' + NUMthisVal + ' + \'px\')' : '0px'; /*MSIE*/ STRnewStyle += ARRcutCents[i] + ARRcentVals[i]; /*MSIE*/ } /*MSIE*/ // add remaining string length to new styling string? /*MSIE*/ if (ARRcutCents.length > ARRcentVals.length) { STRnewStyle += ARRcutCents[ARRcutCents.length-1]; } /*MSIE*/ // substitute new styling string for old styling /*MSIE*/ STRstyle = STRnewStyle; /*MSIE*/ } /*MSIE*/ } /*MSIE*/ // return the appropriate stying string. /*MSIE*/ return STRstyle; /*MSIE*/ } }; //////////////////////////////////////////////////////////////////////////////////////////// //// plugin for adding/removing quadcorner markup/styling and settings //////////////////////////////////////////////////////////////////////////////////////////// jQuery.fn.setQuadBg = function(OBJsettings) { DOMparentObj = this; var ARRcornerClasses = ['rndCornersTopLeft', 'rndCornersTopRight', 'rndCornersBottomLeft', 'rndCornersBottomRight']; var STRcornerMarkup = '

'; var STRcontWrapMarkup = '
'; if (OBJsettings == 'remove') { var wrapperDom = DOMparentObj.find('div.rndCornersContentWrapper'); if (wrapperDom.length) { // move actual content elements to original parent (unwrap) wrapperDom.children().each(function(){ jQuery(this).remove().appendTo(DOMparentObj); }); // remove all IMMEDIATE injected markup (don't screw up nested elements, alter only the target). DOMparentObj.children().each(function() { var thisChild = jQuery(this); if ( thisChild.hasClass('rndCornersContentWrapper') || thisChild.hasClass('rndCornersTopLeft') || thisChild.hasClass('rndCornersTopRight') || thisChild.hasClass('rndCornersBottomLeft') || thisChild.hasClass('rndCornersBottomRight') ) { thisChild.remove(); } }); } } if (typeof(OBJsettings) == 'object') { // classify the parent container DOMparentObj.addClass('railCornerParentContainer'); // unless otherwise indicated, remove the backup background image. if (!OBJsettings.keepBg) { DOMparentObj.css('backgroundImage', 'none'); } // wrap the original content in its own div DOMparentObj.contents().wrapAll(STRcontWrapMarkup); /*MSIE*/ // do we neeed special handholding for ie6 png support /*MSIE*/ var helpIeNotSuck = (jQuery.browser.msie && jQuery.browser.version == '6.0'); for (var i=0; i', STRthisClass); /*MSIE*/ if (helpIeNotSuck && thisImgIsPng) { /*MSIE*/ STRthisCornerMarkup = STRthisCornerMarkup.replace('','
 
'); /*MSIE*/ STRthisCornerMarkup = STRthisCornerMarkup.replace('', 'filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + OBJsettings.img + '\', sizingMethod=\'image\');'); /*MSIE*/ } else { STRthisCornerMarkup = STRthisCornerMarkup.replace('', ''); STRthisCornerMarkup = STRthisCornerMarkup.replace('', thisImg); /*MSIE*/ } // perform offfset enforcement if specified var STRthisStyle = ''; if (OBJsettings.biasL || OBJsettings.biasT) { // assert horizontal bias if(OBJsettings.biasL) { if (/Left$/.test(STRthisClass)) { STRthisStyle += 'width:'+OBJsettings.biasL+'%;left:'+0+'%;'; } else { STRthisStyle += 'width:'+(100-parseInt(OBJsettings.biasL))+'%;left:'+OBJsettings.biasL+'%;'; } } // assert horizontal bias if(OBJsettings.biasT) { if (/^rndCornersTop/.test(STRthisClass)) { STRthisStyle += 'height:'+OBJsettings.biasT+'%;top:'+0+'%;'; } else { STRthisStyle += 'height:'+(100-parseInt(OBJsettings.biasT))+'%;top:'+OBJsettings.biasT+'%;'; } } } STRthisCornerMarkup = STRthisCornerMarkup.replace('', quadBg.procStyles(STRthisStyle)); STRthisCornerMarkup = STRthisCornerMarkup.replace(' style=""', ''); // prepend element DOMparentObj.prepend(STRthisCornerMarkup); } /*MSIE*/ // post process png images for IE /*MSIE*/ if (helpIeNotSuck) { /*MSIE*/ var setImgSize = function(imgSrc) { /*MSIE*/ var imgFile = imgSrc.match(/[^\/]+\.\w+$/); /*MSIE*/ var loaderImg = document.createElement('img'); /*MSIE*/ loaderImg.onload = function() { /*MSIE*/ jQuery('img.rndCornersImg[srcjQuery='+imgFile+']').each(function(){ /*MSIE*/ jQuery(this).css({width: this.offsetWidth + 'px', height: this.offsetHeight + 'px', visibility: 'visible'}); /*MSIE*/ jQuery(this).attr('src', quadBg.STRblankGifSrc); /*MSIE*/ }); /*MSIE*/ this.parentNode.removeChild(this); /*MSIE*/ }; /*MSIE*/ loaderImg = document.getElementsByTagName('body')[0].appendChild(loaderImg); /*MSIE*/ loaderImg.style.visibility = 'hidden'; /*MSIE*/ loaderImg.src = imgSrc; /*MSIE*/ }; /*MSIE*/ setImgSize(OBJsettings.img); /*MSIE*/ } } // return jquery return DOMparentObj; }; //////////////////////////////////////////////////////////////////////////////////////////// //// plugin applies quadcorner markup/styling via CSS (within "this" context). //////////////////////////////////////////////////////////////////////////////////////////// jQuery.fn.applyCssQuadBg = function() { this.find('*').each(function(){ // decorate iterated element var element = $(this); // determine if element has CSS background, containing the querystring keyword var hasQuadBg = ( ( element.css('background') && /[\?\&]qcImg\=/.test(element.css('background')) ) || ( element.css('background-image') && /[\?\&]qcImg\=/.test(element.css('background-image')) ) ); // if the element styling indicates a corner image, apply it appropriately if (hasQuadBg) { // get the complete css propery string applicable. longhand trunmps shorthand var cssStr = element.css('background-image') || element.css('background'); // strip the css string down to the url property alone var imgStr = cssStr.split('url(')[1].split(')')[0].replace('"','').replace('\'',''); // get the base image location var baseImg = imgStr.split('#')[0].split('?')[0]; // construct object to pass constructor info on to the processing function. var cnrSpecs = {}; // get the default image cnrSpecs.img = imgStr.split(/[\?\&]qcImg\=/)[1].split('&')[0]; // get the top left image override, if there is one. cnrSpecs.imgTL = (/[\?\&]qcImgTL\=[^\&]+/.test(imgStr)) ? imgStr.match(/[\?\&]qcImgTL\=[^\&]+/)[0].split('=')[1] : null; // get the top right image override, if there is one. cnrSpecs.imgTR = (/[\?\&]qcImgTR\=[^\&]+/.test(imgStr)) ? imgStr.match(/[\?\&]qcImgTR\=[^\&]+/)[0].split('=')[1] : null; // get the bottom right image override, if there is one. cnrSpecs.imgBR = (/[\?\&]qcImgBR\=[^\&]+/.test(imgStr)) ? imgStr.match(/[\?\&]qcImgBR\=[^\&]+/)[0].split('=')[1] : null; // get the bottom left image override, if there is one. cnrSpecs.imgBL = (/[\?\&]qcImgTL\=[^\&]+/.test(imgStr)) ? imgStr.match(/[\?\&]qcImgTL\=[^\&]+/)[0].split('=')[1] : null; // get left biasing cnrSpecs.biasL = (/[\?\&](qcBiasL|qcBiasR)\=\d+/.test(imgStr)) ? ((/[\?\&]qcBiasL\=\d+/.test(imgStr)) ? imgStr.match(/[\?\&]qcBiasL\=\d+/)[0].split('=')[1] : 100 - imgStr.match(/[\?\&]qcBiasR\=\d+/)[0].split('=')[1]) : null; // get top biasing cnrSpecs.biasT = (/[\?\&](qcBiasT|qcBiasB)\=\d+/.test(imgStr)) ? ((/[\?\&]qcBiasT\=\d+/.test(imgStr)) ? imgStr.match(/[\?\&]qcBiasT\=\d+/)[0].split('=')[1] : 100 - imgStr.match(/[\?\&]qcBiasB\=\d+/)[0].split('=')[1]) : null; // detemerine whether or not to keep the original background styling cnrSpecs.keepBg = !!(/[\?\&]qcKeepBg\=true/.test(imgStr)); // process all image properties for correct pathing for (var i in cnrSpecs) { if (i.indexOf('img') != -1 && cnrSpecs[i]) { cnrSpecs[i] = (/^\.\/|^\./.test(cnrSpecs[i])) ? cnrSpecs[i] : (baseImg.substring(0, baseImg.lastIndexOf('/'))+'/'+cnrSpecs[i]); } } } element.setQuadBg(cnrSpecs); }); }; //////////////////////////////////////////////////////////////////////////////////////////// //// plugin provides quadcorners-safe (nondestructive) HTML method, like $().html(). //////////////////////////////////////////////////////////////////////////////////////////// jQuery.fn.HTML = function(arg) { // if element contains a quadcorners content wrapper as an immediate child, shift target element, to it. var target = (this.children('div.rndCornersContentWrapper').length) ? $(this.children('div.rndCornersContentWrapper')[0]) : this; // if new HTML has been specified, make sure it gets processed for any quadCorner styling automatically. if (arg) { // first - insert the innerhtml. target.html(arg); // second, apply quadCorners throughout element contents (on a delay or styling is ignored). setTimeout( function() { target.applyCssQuadBg(); }, 10 ); } // finally, return the completed markup. return target.html(arg); }; jQuery(document).ready(function() { jQuery('body').applyCssQuadBg(); }); //////////////////////////////////////////////////////////////////////////////////////////// //// write in supporting inline styles. //////////////////////////////////////////////////////////////////////////////////////////// /*MSIE*/ document.write(quadBg.procStyles(quadBg.STRinlineStyling)); })();