r563 - in trunk/coser-web/src/main: resources/fr/ifremer/coser/web webapp/WEB-INF/content webapp/js
Author: chatellier Date: 2011-01-24 20:52:01 +0000 (Mon, 24 Jan 2011) New Revision: 563 Log: Add anchor and jquery expander (survey desc). Added: trunk/coser-web/src/main/webapp/js/jquery.expander.js Modified: trunk/coser-web/src/main/resources/fr/ifremer/coser/web/package.properties trunk/coser-web/src/main/resources/fr/ifremer/coser/web/package_fr.properties trunk/coser-web/src/main/webapp/WEB-INF/content/survey.jsp Modified: trunk/coser-web/src/main/resources/fr/ifremer/coser/web/package.properties =================================================================== --- trunk/coser-web/src/main/resources/fr/ifremer/coser/web/package.properties 2011-01-24 19:16:32 UTC (rev 562) +++ trunk/coser-web/src/main/resources/fr/ifremer/coser/web/package.properties 2011-01-24 20:52:01 UTC (rev 563) @@ -50,6 +50,7 @@ message.common.selectindicator=Select an indicator message.common.noresults=No results available message.common.selectspecies=Select a species +message.common.jsreadmore=Read more message.map.citationtitle=Citation message.map.citation=Trenkel V.M., O. Berthel\u00E9, P. Lorance, J.A. Bertrand, A. Brind''Amour, M.L. Cochard, F. Coppin, J.P. Leaut\u00E9, J.C. Mah\u00E9, J. Morin, M.J. Rochet, M. Salaun, A. Souplet & Y. V\u00E9rin, 2009. Grands invert\u00E9br\u00E9s et poissons observ\u00E9s par les campagnes scientifiques. Atlas de distribution. Bilan 2008. Ifremer, Nantes. EMH : 09-003. {0}. 100 p. message.map.downloadaspdf=Download as PDF Modified: trunk/coser-web/src/main/resources/fr/ifremer/coser/web/package_fr.properties =================================================================== --- trunk/coser-web/src/main/resources/fr/ifremer/coser/web/package_fr.properties 2011-01-24 19:16:32 UTC (rev 562) +++ trunk/coser-web/src/main/resources/fr/ifremer/coser/web/package_fr.properties 2011-01-24 20:52:01 UTC (rev 563) @@ -50,6 +50,7 @@ message.common.selectindicator=Selectionnez un indicateur message.common.selectspecies=Selectionnez une esp\u00E8ces message.common.noresults=Aucun r\u00E9sultat disponible +message.common.jsreadmore=Voir la suite message.map.citationtitle=Citation message.map.citation=Trenkel V.M., O. Berthel\u00E9, P. Lorance, J.A. Bertrand, A. Brind''Amour, M.L. Cochard, F. Coppin, J.P. Leaut\u00E9, J.C. Mah\u00E9, J. Morin, M.J. Rochet, M. Salaun, A. Souplet & Y. V\u00E9rin, 2009. Grands invert\u00E9br\u00E9s et poissons observ\u00E9s par les campagnes scientifiques. Atlas de distribution. Bilan 2008. Ifremer, Nantes. EMH : 09-003. {0}. 100 p. message.map.downloadaspdf=T\u00E9l\u00E9charger en PDF Modified: trunk/coser-web/src/main/webapp/WEB-INF/content/survey.jsp =================================================================== --- trunk/coser-web/src/main/webapp/WEB-INF/content/survey.jsp 2011-01-24 19:16:32 UTC (rev 562) +++ trunk/coser-web/src/main/webapp/WEB-INF/content/survey.jsp 2011-01-24 20:52:01 UTC (rev 563) @@ -27,36 +27,90 @@ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><s:text name="message.quality.title" /></title> + <script type="text/javascript" src="<s:url value='/js/jquery.expander.js' />"></script> + <script type="text/javascript"> + $(document).ready(function() { + // override some default options + $('div.expandable').expander({ + slicePoint: 1560, // default is 100 + expandText: '<s:text name="message.common.jsreadmore" />', // default is 'read more...' + collapseTimer: 0, // re-collapses after 5 seconds; default is 0, so no re-collapsing + userCollapseText: '[^]' // default is '[collapse expanded text]' + }); + + }); + </script> </head> <body> <h2> <s:text name="message.survey.maintitle" /> </h2> - - <p><s:text name="message.survey.paragraph1" /></p> - <p><s:text name="message.survey.paragraph2" /></p> - <p> - <p><s:text name="message.survey.dataengintitle" /></p> - <ul> - <li><s:text name="message.survey.dataenginfond" /></li> - <li><s:text name="message.survey.dataenginperche" /></li> - <li><s:text name="message.survey.dataengincasier" /></li> - </ul> - </p> - - <p><s:text name="message.survey.paragraph3" /></p> - <p><s:text name="message.survey.paragraph4" /></p> - <p><s:text name="message.survey.paragraph5" /></p> - <p><s:text name="message.survey.paragraph6" /></p> + <ul> + <li> + <a href="#merdunord"><s:text name="message.survey.merdunord" /></a> + <ul> + <li><a href="#sudmerdunord"><s:text name="message.survey.merdunord.sudmerdunord" /></a></li> + </ul> + </li> + <li> + <a href="#fmancheorientale"><s:text name="message.survey.mancheorientale" /></a> + <ul> + <li><a href="#mancheorientale"><s:text name="message.survey.mancheorientale.mancheorientale" /></a></li> + <li><a href="#baiedesomme"><s:text name="message.survey.mancheorientale.baiedesomme" /></a></li> + </ul> + </li> + <li> + <a href="#mancheoccidentale"><s:text name="message.survey.mancheoccidentale" /></a> + <ul> + <li><a href="#flamanville"><s:text name="message.survey.mancheoccidentale.flamanville" /></a></li> + </ul> + </li> + <li> + <a href="#atlantique"><s:text name="message.survey.atlantique" /></a> + <ul> + <li><a href="#celtique"><s:text name="message.survey.atlantique.celtique" /></a></li> + <li><a href="#gascogne"><s:text name="message.survey.atlantique.gascogne" /></a></li> + <li><a href="#vilaine"><s:text name="message.survey.atlantique.vilaine" /></a></li> + </ul> + </li> + <li> + <a href="#mediterranee"><s:text name="message.survey.mediterranee" /></a> + <ul> + <li><a href="#golfelion"><s:text name="message.survey.mediterranee.golfelion" /></a></li> + <li><a href="#estcorse"><s:text name="message.survey.mediterranee.estcorse" /></a></li> + </ul> + </li> + </ul> + <div class="expandable"> + <p><s:text name="message.survey.paragraph1" /></p> + <p><s:text name="message.survey.paragraph2" /></p> + + <p> + <p><s:text name="message.survey.dataengintitle" /></p> + <ul> + <li><s:text name="message.survey.dataenginfond" /></li> + <li><s:text name="message.survey.dataenginperche" /></li> + <li><s:text name="message.survey.dataengincasier" /></li> + </ul> + </p> + + <p><s:text name="message.survey.paragraph3" /></p> + <p><s:text name="message.survey.paragraph4" /></p> + <p><s:text name="message.survey.paragraph5" /></p> + <p><s:text name="message.survey.paragraph6" /></p> + </div> + <h2> <s:text name="message.survey.detailstitle" /> </h2> <!-- Facade --> + <a name="merdunord"></a> <h3><s:text name="message.survey.merdunord" /></h3> + <a name="sudmerdunord"></a> <h4><s:text name="message.survey.merdunord.sudmerdunord" /></h4> <p><s:text name="message.survey.merdunord.sudmerdunord.desc" /></p> <p> @@ -68,7 +122,9 @@ </p> <!-- Facade --> + <a name="fmancheorientale"></a> <h3><s:text name="message.survey.mancheorientale" /></h3> + <a name="mancheorientale"></a> <h4><s:text name="message.survey.mancheorientale.mancheorientale" /></h4> <p><s:text name="message.survey.mancheorientale.mancheorientale.desc" /></p> <p> @@ -78,6 +134,7 @@ </ul> </p> + <a name="baiedesomme"></a> <h4><s:text name="message.survey.mancheorientale.baiedesomme" /></h4> <p><s:text name="message.survey.mancheorientale.baiedesomme.desc" /></p> <p> @@ -88,7 +145,9 @@ </p> <!-- Facade --> + <a name="mancheoccidentale"></a> <h3><s:text name="message.survey.mancheoccidentale" /></h3> + <a name="flamanville"></a> <h4><s:text name="message.survey.mancheoccidentale.flamanville" /></h4> <p><s:text name="message.survey.mancheoccidentale.flamanville.desc" /></p> <p> @@ -99,7 +158,9 @@ </p> <!-- Facade --> + <a name="atlantique"></a> <h3><s:text name="message.survey.atlantique" /></h3> + <a name="celtique"></a> <h4><s:text name="message.survey.atlantique.celtique" /></h4> <p><s:text name="message.survey.atlantique.celtique.desc" /></p> <p> @@ -109,6 +170,7 @@ </ul> </p> + <a name="gascogne"></a> <h4><s:text name="message.survey.atlantique.gascogne" /></h4> <p><s:text name="message.survey.atlantique.gascogne.desc" /></p> <p> @@ -118,6 +180,7 @@ </ul> </p> + <a name="vilaine"></a> <h4><s:text name="message.survey.atlantique.vilaine" /></h4> <p><s:text name="message.survey.atlantique.vilaine.desc" /></p> <p> @@ -128,7 +191,9 @@ </p> <!-- Facade --> + <a name="mediterranee"></a> <h3><s:text name="message.survey.mediterranee" /></h3> + <a name="golfelion"></a> <h4><s:text name="message.survey.mediterranee.golfelion" /></h4> <p><s:text name="message.survey.mediterranee.golfelion.desc" /></p> <p> @@ -142,6 +207,7 @@ </ul> </p> + <a name="estcorse"></a> <h4><s:text name="message.survey.mediterranee.estcorse" /></h4> <p><s:text name="message.survey.mediterranee.estcorse.desc" /></p> <p> Added: trunk/coser-web/src/main/webapp/js/jquery.expander.js =================================================================== --- trunk/coser-web/src/main/webapp/js/jquery.expander.js (rev 0) +++ trunk/coser-web/src/main/webapp/js/jquery.expander.js 2011-01-24 20:52:01 UTC (rev 563) @@ -0,0 +1,152 @@ +/* + * jQuery Expander plugin + * Version 0.4 (12/09/2008) + * @requires jQuery v1.1.1+ + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + */ + + +(function($) { + + $.fn.expander = function(options) { + + var opts = $.extend({}, $.fn.expander.defaults, options); + var delayedCollapse; + return this.each(function() { + var $this = $(this); + var o = $.meta ? $.extend({}, opts, $this.data()) : opts; + var cleanedTag, startTags, endTags; + var allText = $this.html(); + var startText = allText.slice(0, o.slicePoint).replace(/\w+$/,''); + startTags = startText.match(/<\w[^>]*>/g); + if (startTags) {startText = allText.slice(0,o.slicePoint + startTags.join('').length).replace(/\w+$/,'');} + + if (startText.lastIndexOf('<') > startText.lastIndexOf('>') ) { + startText = startText.slice(0,startText.lastIndexOf('<')); + } + var endText = allText.slice(startText.length); + // create necessary expand/collapse elements if they don't already exist + if (!$('span.details', this).length) { + // end script if text length isn't long enough. + if ( endText.replace(/\s+$/,'').split(' ').length < o.widow ) { return; } + // otherwise, continue... + if (endText.indexOf('</') > -1) { + endTags = endText.match(/<(\/)?[^>]*>/g); + for (var i=0; i < endTags.length; i++) { + + if (endTags[i].indexOf('</') > -1) { + var startTag, startTagExists = false; + for (var j=0; j < i; j++) { + startTag = endTags[j].slice(0, endTags[j].indexOf(' ')).replace(/(\w)$/,'$1>'); + if (startTag == rSlash(endTags[i])) { + startTagExists = true; + } + } + if (!startTagExists) { + startText = startText + endTags[i]; + var matched = false; + for (var s=startTags.length - 1; s >= 0; s--) { + if (startTags[s].slice(0, startTags[s].indexOf(' ')).replace(/(\w)$/,'$1>') == rSlash(endTags[i]) + && matched == false) { + cleanedTag = cleanedTag ? startTags[s] + cleanedTag : startTags[s]; + matched = true; + } + }; + } + } + } + + endText = cleanedTag && cleanedTag + endText || endText; + } + $this.html([ + startText, + '<span class="read-more">', + o.expandPrefix, + '<a href="#">', + o.expandText, + '</a>', + '</span>', + '<span class="details">', + endText, + '</span>' + ].join('') + ); + } + var $thisDetails = $('span.details', this), + $readMore = $('span.read-more', this); + $thisDetails.hide(); + $readMore.find('a').click(function() { + $readMore.hide(); + + if (o.expandEffect === 'show' && !o.expandSpeed) { + o.beforeExpand($this); + $thisDetails.show(); + o.afterExpand($this); + delayCollapse(o, $thisDetails); + } else { + o.beforeExpand($this); + $thisDetails[o.expandEffect](o.expandSpeed, function() { + $thisDetails.css({zoom: ''}); + o.afterExpand($this); + delayCollapse(o, $thisDetails); + }); + } + return false; + }); + if (o.userCollapse) { + $this + .find('span.details').append('<span class="re-collapse">' + o.userCollapsePrefix + '<a href="#">' + o.userCollapseText + '</a></span>'); + $this.find('span.re-collapse a').click(function() { + + clearTimeout(delayedCollapse); + var $detailsCollapsed = $(this).parents('span.details'); + reCollapse($detailsCollapsed); + o.onCollapse($this, true); + return false; + }); + } + }); + function reCollapse(el) { + el.hide() + .prev('span.read-more').show(); + } + function delayCollapse(option, $collapseEl) { + if (option.collapseTimer) { + delayedCollapse = setTimeout(function() { + reCollapse($collapseEl); + option.onCollapse($collapseEl.parent(), false); + }, + option.collapseTimer + ); + } + } + function rSlash(rString) { + return rString.replace(/\//,''); + } + }; + // plugin defaults + $.fn.expander.defaults = { + slicePoint: 100, // the number of characters at which the contents will be sliced into two parts. + // Note: any tag names in the HTML that appear inside the sliced element before + // the slicePoint will be counted along with the text characters. + widow: 4, // a threshold of sorts for whether to initially hide/collapse part of the element's contents. + // If after slicing the contents in two there are fewer words in the second part than + // the value set by widow, we won't bother hiding/collapsing anything. + expandText: 'read more', // text displayed in a link instead of the hidden part of the element. + // clicking this will expand/show the hidden/collapsed text + expandPrefix: '… ', + collapseTimer: 0, // number of milliseconds after text has been expanded at which to collapse the text again + expandEffect: 'fadeIn', + expandSpeed: '', // speed in milliseconds of the animation effect for expanding the text + userCollapse: true, // allow the user to re-collapse the expanded text. + userCollapseText: '[collapse expanded text]', // text to use for the link to re-collapse the text + userCollapsePrefix: ' ', + beforeExpand: function($thisEl) {}, + afterExpand: function($thisEl) {}, + onCollapse: function($thisEl, byUser) {} + }; +})(jQuery);
participants (1)
-
chatellierï¼ users.labs.libre-entreprise.org