diff options
| -rw-r--r-- | templates/web/fixmystreet/common_header_tags.html | 2 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 10 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/fixmystreet.js | 23 | ||||
| -rw-r--r-- | web/js/jquery.placeholder.min.js | 2 | ||||
| -rw-r--r-- | web/js/placeholder_polyfill/placeholder_polyfill.jquery.min.js | 23 | ||||
| -rw-r--r-- | web/js/placeholder_polyfill/placeholder_polyfill.min.css | 2 |
6 files changed, 27 insertions, 35 deletions
diff --git a/templates/web/fixmystreet/common_header_tags.html b/templates/web/fixmystreet/common_header_tags.html index f0c6c76a7..ea952ccdc 100644 --- a/templates/web/fixmystreet/common_header_tags.html +++ b/templates/web/fixmystreet/common_header_tags.html @@ -7,6 +7,8 @@ <script src="[% version('/js/modernizr.custom.76759.js') %]" type="text/javascript" charset="utf-8"></script> +<script src="[% version('/js/jquery.placeholder.min.js') %]" type="text/javascript" charset="utf-8"></script> + <script type="text/javascript" src="[% version('/js/geo.min.js') %]"></script> <script type="text/javascript" src="[% version('/cobrands/fixmystreet/fixmystreet.js') %]"></script> diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index 068f33ab6..b0e312375 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -285,12 +285,22 @@ h4.static-with-rule{ } } :-moz-placeholder { + color:#888888; font: { style:italic; size:0.9375em; } } :-ms-placeholder { + color:#888888; + font: { + style:italic; + size:0.9375em; + } +} +//this only gets used when the browser doesn't support @placeholder +.placeholder { + color:#888888; font: { style:italic; size:0.9375em; diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index aab20fc0b..7b3f4fefe 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -3,15 +3,6 @@ * FixMyStreet JavaScript */ -//test for and load placeholder polyfill if neccessary -Modernizr.load({ - test: Modernizr.input.placeholder, - nope: [ - '/js/placeholder_polyfill/placeholder_polyfill.min.css', - '/js/placeholder_polyfill/placeholder_polyfill.jquery.min.js' - ] -}); - function form_category_onchange() { var cat = $('#form_category'); var args = { @@ -91,6 +82,7 @@ $(function(){ $html.removeClass('no-js').addClass('js'); + // Preload the new report pin document.createElement('img').src = '/i/pin-green.png'; @@ -541,10 +533,13 @@ $.fn.drawer = function(id, ajax) { + + + /* * heightfix the desktop .content div * - * this must be kept as the last thing done so that the + * this must be kept near the end so that the * rendered height is used after any page manipulation (such as tabs) */ if(Modernizr.mq('only screen and (min-width:48em)')) { @@ -552,6 +547,14 @@ $.fn.drawer = function(id, ajax) { heightFix(window, '.content', -176); } } + + + /* + * Placeholder polyfill from https://github.com/mathiasbynens/jquery-placeholder/ + * + * It needs to be at the end or it won't behave as expected + */ + $('input, textarea').placeholder(); }); /* diff --git a/web/js/jquery.placeholder.min.js b/web/js/jquery.placeholder.min.js new file mode 100644 index 000000000..122277a31 --- /dev/null +++ b/web/js/jquery.placeholder.min.js @@ -0,0 +1,2 @@ +/*! http://mths.be/placeholder v2.0.5 by @mathias */ +;(function(f,h,$){var a='placeholder' in h.createElement('input'),d='placeholder' in h.createElement('textarea'),i=$.fn,c=$.valHooks,k,j;if(a&&d){j=i.placeholder=function(){return this};j.input=j.textarea=true}else{j=i.placeholder=function(){var l=this;l.filter((a?'textarea':':input')+'[placeholder]').not('.placeholder').bind({'focus.placeholder':b,'blur.placeholder':e}).data('placeholder-enabled',true).trigger('blur.placeholder');return l};j.input=a;j.textarea=d;k={get:function(m){var l=$(m);return l.data('placeholder-enabled')&&l.hasClass('placeholder')?'':m.value},set:function(m,n){var l=$(m);if(!l.data('placeholder-enabled')){return m.value=n}if(n==''){m.value=n;if(m!=h.activeElement){e.call(m)}}else{if(l.hasClass('placeholder')){b.call(m,true,n)||(m.value=n)}else{m.value=n}}return l}};a||(c.input=k);d||(c.textarea=k);$(function(){$(h).delegate('form','submit.placeholder',function(){var l=$('.placeholder',this).each(b);setTimeout(function(){l.each(e)},10)})});$(f).bind('beforeunload.placeholder',function(){$('.placeholder').each(function(){this.value=''})})}function g(m){var l={},n=/^jQuery\d+$/;$.each(m.attributes,function(p,o){if(o.specified&&!n.test(o.name)){l[o.name]=o.value}});return l}function b(m,n){var l=this,o=$(l);if(l.value==o.attr('placeholder')&&o.hasClass('placeholder')){if(o.data('placeholder-password')){o=o.hide().next().show().attr('id',o.removeAttr('id').data('placeholder-id'));if(m===true){return o[0].value=n}o.focus()}else{l.value='';o.removeClass('placeholder')}}}function e(){var q,l=this,p=$(l),m=p,o=this.id;if(l.value==''){if(l.type=='password'){if(!p.data('placeholder-textinput')){try{q=p.clone().attr({type:'text'})}catch(n){q=$('<input>').attr($.extend(g(this),{type:'text'}))}q.removeAttr('name').data({'placeholder-password':true,'placeholder-id':o}).bind('focus.placeholder',b);p.data({'placeholder-textinput':q,'placeholder-id':o}).before(q)}p=p.removeAttr('id').hide().prev().attr('id',o).show()}p.addClass('placeholder');p[0].value=p.attr('placeholder')}else{p.removeClass('placeholder')}}}(this,document,jQuery));
\ No newline at end of file diff --git a/web/js/placeholder_polyfill/placeholder_polyfill.jquery.min.js b/web/js/placeholder_polyfill/placeholder_polyfill.jquery.min.js deleted file mode 100644 index 0c2f19be5..000000000 --- a/web/js/placeholder_polyfill/placeholder_polyfill.jquery.min.js +++ /dev/null @@ -1,23 +0,0 @@ -/** -* HTML5 placeholder polyfill -* -* code: https://github.com/ginader/HTML5-placeholder-polyfill -* please report issues at: https://github.com/ginader/HTML5-placeholder-polyfill/issues -* -* Copyright (c) 2012 Dirk Ginader (ginader.de) -* Dual licensed under the MIT and GPL licenses: -* http://www.opensource.org/licenses/mit-license.php -* http://www.gnu.org/licenses/gpl.html -* -* Version: 1.8 -*/ -(function(e){var b=false;function c(f,g){if(e.trim(f.val())===""){f.data("placeholder").removeClass(g.hideClass);}else{f.data("placeholder").addClass(g.hideClass); -}}function a(h,g){var f=g.is("textarea");h.css({width:g.innerWidth()-(f?20:4),height:g.innerHeight()-6,lineHeight:g.css("line-height"),whiteSpace:f?"normal":"nowrap",overflow:"hidden"}).offset(g.offset()); -}function d(f){if(b&&window.console&&window.console.log){window.console.log(f);}}e.fn.placeHolder=function(f){var g=this;this.options=e.extend({className:"placeholder",visibleToScreenreaders:true,visibleToScreenreadersHideClass:"placeholder-hide-exept-screenreader",visibleToNoneHideClass:"placeholder-hide"},f); -this.options.hideClass=this.options.visibleToScreenreaders?this.options.visibleToScreenreadersHideClass:this.options.visibleToNoneHideClass;return e(this).each(function(){var h=e(this),l=h.attr("placeholder"),m=h.attr("id"),i,k,j; -i=h.closest("label")[0];h.attr("placeholder","");if(!i&&!m){d("the input element with the placeholder needs an id!");return;}i=i||e('label[for="'+m+'"]'); -if(!i){d("the input element with the placeholder needs a label!");return;}i.removeClass("visuallyhidden").addClass("visuallyhidden-with-placeholder");k=e('<span class="'+g.options.className+'">'+l+"</span>").appendTo(i); -j=(k.width()>h.width());if(j){k.attr("title",l);}a(k,h);h.data("placeholder",k);k.data("input",k);k.click(function(){e(this).data("input").focus();});h.focusin(function(){e(this).data("placeholder").addClass(g.options.hideClass); -});h.focusout(function(){c(e(this),g.options);});c(h,g.options);e(document).bind("fontresize",function(){a(k,h);});if(e.event.special.resize){e("textarea").bind("resize",function(n){a(k,h); -});}else{e("textarea").css("resize","none");}});};e(function(){if("placeholder" in e("<input>")[0]){return;}e("input[placeholder], textarea[placeholder]").placeHolder({visibleToScreenreaders:true}); -});})(jQuery);
\ No newline at end of file diff --git a/web/js/placeholder_polyfill/placeholder_polyfill.min.css b/web/js/placeholder_polyfill/placeholder_polyfill.min.css deleted file mode 100644 index 602cf1fe3..000000000 --- a/web/js/placeholder_polyfill/placeholder_polyfill.min.css +++ /dev/null @@ -1,2 +0,0 @@ -label span.placeholder{position:absolute;font-size:75%;color:#999;font-family:sans-serif;padding:4px 3px;z-index:1}label span.placeholder-hide-exept-screenreader{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden} -label span.placeholder-hide{display:none}label.visuallyhidden-with-placeholder{clip:auto!important;height:auto!important;overflow:visible!important;position:absolute!important;left:-999em}
\ No newline at end of file |