diff options
Diffstat (limited to 'web')
34 files changed, 787 insertions, 112 deletions
diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss index 29b18be1f..a6d9c2c07 100644 --- a/web/cobrands/fixmystreet.com/_colours.scss +++ b/web/cobrands/fixmystreet.com/_colours.scss @@ -19,3 +19,6 @@ $col_click_map_dark: #4B8304; // The "fixed" message on a report page $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; + +$itemlist_item_background: #f6f6f6; +$itemlist_item_background_hover: mix(#fff, $primary, 50%);
\ No newline at end of file diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index ecd729364..820d5ffb5 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -13,21 +13,40 @@ display: none; } -#country_banner { - display: none; +.top_banner { color: $primary_text; background: $primary; - p#international_message { + p { margin: auto; padding: 0.5em 2em; - max-width: 40em; + max-width: 50em; text-align: center; } - #message_close { - float: $right; + a { + color: $primary_text; + text-decoration: underline; } } +.top_banner--donate { + background: #bef; +} + +// The banner interferes with the map moving/placement on mobile, and the top +// bar navigation on desktop (which both assume that .wrapper is at the top of +// the page) so hide there for now +.mappage .top_banner--donate { + display: none; +} + +// This banner is only shown via JavaScript AJAX call +.top_banner--country { + display: none; +} +.top_banner__close { + float: $right; +} + #site-logo { background: url('data:image/png;base64,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') no-repeat; } @@ -167,3 +186,56 @@ } } +.variant1 { + #site-header { + border-top-color: #fff; + background: #fad52a; + } + + #report-cta { + border: none; + background-color: #fff; + color: mix(#fad52a, #000, 50%); + padding: 0.5em 0.5em 0.4em 0.5em; + } + + #site-logo { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png); + background-size: 175px 40px; + } + } + + &.frontpage { + background: #fad52a url(/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg) top center no-repeat; + background-size: 100%; + + #site-header { + border-top-color: #fff; + background: transparent; + } + } + + #front-main #postcodeForm { + background: rgba(255,255,255,0.3); + + input#sub { + @include background(linear-gradient(#49c0ff, #1091d5)); + + &:hover, &:focus { + @include background(linear-gradient(darken(#49c0ff, 10%), darken(#1091d5, 10%))); + } + } + } + + #front-main a#geolocate_link { + background: transparent; + color: inherit; + } + + #front-main + .container { + background: transparent; + } +} diff --git a/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg b/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg Binary files differnew file mode 100644 index 000000000..d0560617c --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg diff --git a/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg b/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg Binary files differnew file mode 100644 index 000000000..9a3a82108 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-home.png b/web/cobrands/fixmystreet.com/images/friendly-logo-home.png Binary files differnew file mode 100644 index 000000000..a80039895 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-logo-home.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png b/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png Binary files differnew file mode 100644 index 000000000..2e4ae4cf7 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png Binary files differnew file mode 100644 index 000000000..ad16a2543 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png Binary files differnew file mode 100644 index 000000000..3e0eb6423 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png Binary files differnew file mode 100644 index 000000000..8f5ceec9a --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png Binary files differnew file mode 100644 index 000000000..487b14ebe --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index 9e8bb5baf..81c3b3d54 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -175,6 +175,12 @@ body.frontpage { background-color: white; width: auto; } + > .form-error { + margin-top: -4em; + } + > .form-error + .tablewrapper { + margin-top: 0; + } } footer { .bordered { @@ -262,6 +268,10 @@ body.twothirdswidthpage { } } +.next-steps--two .next-steps__step { + width: 50%; +} + body.unresponsive-council { .container .content { padding: 0; @@ -312,3 +322,128 @@ body.unresponsive-council { background-size: 60px; } } + +.variant1 { + body { + background: #fad52a url(/cobrands/fixmystreet.com/images/friendly-homepage.jpg) top center no-repeat; + background-size: 100%; + } + + #site-logo { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png); + background-size: 175px 40px; + } + } + + body.frontpage { + background-image: url(/cobrands/fixmystreet.com/images/friendly-homepage.jpg); + + #site-logo { + background: transparent url(/cobrands/fixmystreet.com/images/friendly-logo-home.png) 0 0 no-repeat; + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-home@2.png); + background-size: 300px 60px; + } + } + } + + #front-main { + background: rgba(255, 255, 255, 0.3); + margin-top: 1em; + + #postcodeForm { + background: transparent; + + label { + margin: 1em 0; + } + } + + a#geolocate_link { + height: auto; + padding: 0.5em 0 0.5em 1.5em; + margin-top: 0.5em; + font-weight: bold; + font-size: 1em; + background-size: 16px; + background-position: 0% 50%; + } + } + + body.twothirdswidthpage #front-main, + body.fullwidthpage #front-main { + padding: 3em 2em 6em 2em; + } + + #site-header { + background: transparent; + } + + .nav-menu a, + .nav-menu span { + color: #222; + } + + .nav-menu--main { + font-weight: bold; + span { + color: inherit; + } + + a { + &:hover, + &:focus { + background: rgba(255, 255, 255, 0.2); + } + } + + a.report-a-problem-btn { + background-color: #fff; + color: mix(#fad52a, #000, 50%); + padding: 0.25em 0.5em; + } + } + + .nav-wrapper .nav-wrapper-2 { + border-top-color: #fff; + border-image: none; + } + + body.mappage .nav-wrapper .nav-wrapper-2 { + background: darken(#fad52a, 5%); + } + + body.twothirdswidthpage .container .content footer .tablewrapper { + color: #222; + background: #fad52a; + } + body.fullwidthpage .container .content footer .tablewrapper, + #footer-nav .tablewrapper { + color: #222; + background: transparent; + } + + #footer-nav .tablewrapper ul li a, + #footer-nav .tablewrapper ul li span { + color: #222; + } + + .nav-menu--mysoc { + background: #fff; + } + + #mysoc-logo { + background-image: url(/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png); + background-position: 50% 0%; + background-size: 90px auto; + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png); + background-size: 90px auto; + } + } +} diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 122488646..f01c5142d 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -80,6 +80,10 @@ $(function(){ var cobrand = $('meta[name="cobrand"]').attr('content'); + if (typeof variation !== 'undefined' && variation === 1) { + $('input[name=variant]').val(1); + } + // Deal with switching between mobile and desktop versions on resize var last_type; $(window).resize(function(){ @@ -130,7 +134,9 @@ $(function(){ var banner_text = translation_strings.report_problem_heading; if (cobrand !== 'oxfordshire') { $('#site-header').show(); - banner_text = translation_strings.report_problem_heading; + } + if (typeof variation !== 'undefined' && variation === 1) { + banner_text = 'Click map to request a fix'; } $('.big-green-banner') .removeClass('mobile-map-banner') @@ -180,6 +186,84 @@ $(function(){ //move 'skip this step' link on mobile $('.mobile #skip-this-step').addClass('chevron').wrap('<li>').parent().appendTo('#key-tools'); + // Set up the Dropzone image uploader + if('Dropzone' in window){ + Dropzone.autoDiscover = false; + } + if('Dropzone' in window && $('#form_photo').length){ + var $originalLabel = $('[for="form_photo"]'); + var $originalInput = $('#form_photos'); + var $dropzone = $('<div>').addClass('dropzone'); + + $originalLabel.removeAttr('for'); + $originalInput.hide(); + + $dropzone.insertAfter($originalInput); + var photodrop = new Dropzone($dropzone[0], { + url: '/photo/upload', + paramName: 'photo', + maxFiles: 3, + addRemoveLinks: true, + thumbnailHeight: 150, + thumbnailWidth: 150, + acceptedFiles: 'image/jpeg,image/pjpeg', + dictDefaultMessage: translation_strings.upload_default_message, + dictCancelUploadConfirmation: translation_strings.upload_cancel_confirmation, + dictInvalidFileType: translation_strings.upload_invalid_file_type, + dictMaxFilesExceeded: translation_strings.upload_max_files_exceeded, + + fallback: function(){ + $dropzone.remove(); + $originalLabel.attr('for', 'form_photo'); + $originalInput.show(); + }, + init: function(){ + this.on("addedfile", function(file){ + $('input[type=submit]').prop("disabled", true).removeClass('green-btn'); + }); + this.on("queuecomplete", function(){ + $('input[type=submit]').removeAttr('disabled').addClass('green-btn'); + }); + this.on("success", function(file, xhrResponse) { + var ids = $('input[name=upload_fileid]').val().split(','), + id = (file.server_id = xhrResponse.id), + l = ids.push(id), + newstr = ids.join(','); + $('input[name=upload_fileid]').val(newstr); + }); + this.on("error", function(file, errorMessage, xhrResponse){ + }); + this.on("removedfile", function(file){ + var ids = $('input[name=upload_fileid]').val().split(','), + newstr = $.grep(ids, function(n){ return (n!=file.server_id); }).join(','); + $('input[name=upload_fileid]').val(newstr); + }); + this.on("maxfilesexceeded", function(file){ + this.removeFile(file); + var $message = $('<div class="dz-message dz-error-message">'); + $message.text(translation_strings.upload_max_files_exceeded); + $message.prependTo(this.element); + setTimeout(function(){ + $message.slideUp(250, function(){ + $message.remove(); + }); + }, 2000); + }); + } + }); + + $.each($('input[name=upload_fileid]').val().split(','), function(i, f) { + if (!f) { + return; + } + var mockFile = { name: f, server_id: f }; + photodrop.emit("addedfile", mockFile); + photodrop.createThumbnailFromUrl(mockFile, '/photo/' + f + '.temp.jpeg'); + photodrop.emit("complete", mockFile); + photodrop.options.maxFiles -= 1; + }); + } + /* * Tabs */ @@ -224,6 +308,20 @@ $(function(){ }); } + /* Log in with email button */ + var email_form = $('#js-social-email-hide'), + button = $('<button class="btn btn--social btn--social-email">Log in with email</button>'), + form_box = $('<div class="form-box"></div>'); + button.click(function(e){ + e.preventDefault(); + email_form.fadeIn(500); + form_box.hide(); + }); + form_box.append(button).insertBefore(email_form); + if ($('.form-error').length) { + button.click(); + } + /* * Show on click - pretty generic */ @@ -434,8 +532,8 @@ $.fn.drawer = function(id, ajax) { }).fadeOut(500); }); - $('#message_close').live('click', function() { - $('#country_banner').hide(); + $('.top_banner__close').live('click', function() { + $('.top_banner--country').hide(); $.cookie('has_seen_country_message', 1, {expires: 365, path: '/'}); }); @@ -445,9 +543,8 @@ $.fn.drawer = function(id, ajax) { url: '/country_message', success: function(data) { if ( data ) { - $('#site-header').css('position', 'relative'); $('body').prepend(data); - $('#country_banner').slideDown('slow'); + $('.top_banner--country').slideDown('slow'); } } }); diff --git a/web/cobrands/fixmystreet/images/chevron-grey-left.svg b/web/cobrands/fixmystreet/images/chevron-grey-left.svg index 650eeac26..78d2f8cd2 100644 --- a/web/cobrands/fixmystreet/images/chevron-grey-left.svg +++ b/web/cobrands/fixmystreet/images/chevron-grey-left.svg @@ -1,3 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33"> - <polygon points="26,0 13,0 0,16 13,32 26,32 13,16" fill="#d1d1d1"/> -</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#d1d1d1" d="M62 0H49L36 16l13 16h13L49 16"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/chevron-grey-right.svg b/web/cobrands/fixmystreet/images/chevron-grey-right.svg index 18432eb3b..f94d49b75 100644 --- a/web/cobrands/fixmystreet/images/chevron-grey-right.svg +++ b/web/cobrands/fixmystreet/images/chevron-grey-right.svg @@ -1,3 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33"> - <polygon points="0,0 13,0 26,16 13,32 0,32 13,16" fill="#d1d1d1"/> -</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#d1d1d1" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/chevron-white-left.svg b/web/cobrands/fixmystreet/images/chevron-white-left.svg index 95f9fd8a8..4dc587e79 100644 --- a/web/cobrands/fixmystreet/images/chevron-white-left.svg +++ b/web/cobrands/fixmystreet/images/chevron-white-left.svg @@ -1,3 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33"> - <polygon points="26,0 13,0 0,16 13,32 26,32 13,16" fill="#ffffff"/> -</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#fff" d="M62 0H49L36 16l13 16h13L49 16"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/chevron-white-right.svg b/web/cobrands/fixmystreet/images/chevron-white-right.svg index 43f321782..3aa713765 100644 --- a/web/cobrands/fixmystreet/images/chevron-white-right.svg +++ b/web/cobrands/fixmystreet/images/chevron-white-right.svg @@ -1,3 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33"> - <polygon points="0,0 13,0 26,16 13,32 0,32 13,16" fill="#ffffff"/> -</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#fff" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/cross-14px.png b/web/cobrands/fixmystreet/images/cross-14px.png Binary files differnew file mode 100644 index 000000000..ead0b6913 --- /dev/null +++ b/web/cobrands/fixmystreet/images/cross-14px.png diff --git a/web/cobrands/fixmystreet/images/cross-14px.svg b/web/cobrands/fixmystreet/images/cross-14px.svg new file mode 100644 index 000000000..20c45ead2 --- /dev/null +++ b/web/cobrands/fixmystreet/images/cross-14px.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(-5.000000, -5.000000)" fill="#FFFFFF"> + <path d="M12.0007202,14.6137463 L16.3848133,19 L18.9985595,16.3862537 L14.6151867,12.0014405 L19,7.61590699 L16.3848133,5 L11.9992798,9.38553349 L7.61446651,5 L5.00072024,7.61374627 L9.38553349,11.9992798 L5,16.3848133 L7.61518675,19 L12.0007202,14.6137463 Z"></path> + </g> +</svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/menu-black.svg b/web/cobrands/fixmystreet/images/menu-black.svg index 4bf0d5b07..43fc8c243 100644 --- a/web/cobrands/fixmystreet/images/menu-black.svg +++ b/web/cobrands/fixmystreet/images/menu-black.svg @@ -1,15 +1 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="22px" height="18px" viewBox="0 0 22 18" enable-background="new 0 0 22 18" xml:space="preserve">
-<g>
- <g>
- <path fill-rule="evenodd" clip-rule="evenodd" fill="#000000" d="M2.008,4.017h17.958c1.108,0,2.008-0.899,2.008-2.009
- C21.974,0.899,21.074,0,19.966,0H2.008C0.899,0,0,0.899,0,2.008C0,3.117,0.899,4.017,2.008,4.017z M19.966,6.982H2.008
- C0.899,6.982,0,7.881,0,8.99s0.899,2.009,2.008,2.009h17.958c1.108,0,2.008-0.9,2.008-2.009S21.074,6.982,19.966,6.982z
- M19.966,13.964H2.008C0.899,13.964,0,14.862,0,15.972c0,1.108,0.899,2.009,2.008,2.009h17.958c1.108,0,2.008-0.9,2.008-2.009
- C21.974,14.862,21.074,13.964,19.966,13.964z"/>
- </g>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.008 4.017h17.958c1.108 0 2.008-.9 2.008-2.01C21.974.9 21.074 0 19.966 0H2.008C.898 0 0 .9 0 2.008c0 1.11.9 2.01 2.008 2.01zm17.958 2.965H2.008C.898 6.982 0 7.882 0 8.99S.9 11 2.008 11h17.958c1.108 0 2.008-.9 2.008-2.01s-.9-2.008-2.008-2.008zm0 6.982H2.008c-1.11 0-2.008.898-2.008 2.008 0 1.108.9 2.01 2.008 2.01h17.958c1.108 0 2.008-.9 2.008-2.01 0-1.11-.9-2.008-2.008-2.008z"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/menu-white.svg b/web/cobrands/fixmystreet/images/menu-white.svg index 69e09cef3..ca19952f4 100644 --- a/web/cobrands/fixmystreet/images/menu-white.svg +++ b/web/cobrands/fixmystreet/images/menu-white.svg @@ -1,15 +1 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="22px" height="18px" viewBox="0 0 22 18" enable-background="new 0 0 22 18" xml:space="preserve">
-<g>
- <g>
- <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M2.008,4.017h17.958c1.108,0,2.008-0.899,2.008-2.009
- C21.974,0.899,21.074,0,19.966,0H2.008C0.899,0,0,0.899,0,2.008C0,3.117,0.899,4.017,2.008,4.017z M19.966,6.982H2.008
- C0.899,6.982,0,7.881,0,8.99s0.899,2.009,2.008,2.009h17.958c1.108,0,2.008-0.9,2.008-2.009S21.074,6.982,19.966,6.982z
- M19.966,13.964H2.008C0.899,13.964,0,14.862,0,15.972c0,1.108,0.899,2.009,2.008,2.009h17.958c1.108,0,2.008-0.9,2.008-2.009
- C21.974,14.862,21.074,13.964,19.966,13.964z"/>
- </g>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M2.008 4.017h17.958c1.108 0 2.008-.9 2.008-2.01C21.974.9 21.074 0 19.966 0H2.008C.898 0 0 .9 0 2.008c0 1.11.9 2.01 2.008 2.01zm17.958 2.965H2.008C.898 6.982 0 7.882 0 8.99S.9 11 2.008 11h17.958c1.108 0 2.008-.9 2.008-2.01s-.9-2.008-2.008-2.008zm0 6.982H2.008c-1.11 0-2.008.898-2.008 2.008 0 1.108.9 2.01 2.008 2.01h17.958c1.108 0 2.008-.9 2.008-2.01 0-1.11-.9-2.008-2.008-2.008z"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/spinner-grey-eee.gif b/web/cobrands/fixmystreet/images/spinner-grey-eee.gif Binary files differnew file mode 100644 index 000000000..a0bf05ae9 --- /dev/null +++ b/web/cobrands/fixmystreet/images/spinner-grey-eee.gif diff --git a/web/cobrands/fixmystreet/images/spinner-grey-eee.svg b/web/cobrands/fixmystreet/images/spinner-grey-eee.svg new file mode 100644 index 000000000..cfb63a489 --- /dev/null +++ b/web/cobrands/fixmystreet/images/spinner-grey-eee.svg @@ -0,0 +1 @@ +<svg width='100px' height='100px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(0 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(30 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(60 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(90 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(120 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(150 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(180 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(210 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(240 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(270 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(300 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='48' y='42.5' width='4' height='15' rx='2' ry='2' fill='#999999' transform='rotate(330 50 50) translate(0 -20)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
\ No newline at end of file diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss index b7c208773..36323f295 100644 --- a/web/cobrands/sass/_admin.scss +++ b/web/cobrands/sass/_admin.scss @@ -37,7 +37,7 @@ $button_bg_col: #a1a1a1; // also search bar (tables) display: none; /* TODO: reveal when filtering is implemented */ padding: flip(4px 4px 4px 40px, 4px 40px 4px 4px); background-color: $button_bg_col; - background-image: url('search-icon-white.png'); + background-image: url('/cobrands/zurich/search-icon-white.png'); background-position: flip(14px, right) center; background-repeat: no-repeat; border-bottom: 2px solid $table_border_color; diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 0788a99ed..a833bb7cf 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -6,6 +6,9 @@ $heading-font: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif !defa $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default; $menu-image: 'menu-white' !default; +$itemlist_item_background: #f6f6f6 !default; +$itemlist_item_background_hover: #e6e6e6 !default; + @import "_mixins"; @import "_report_list"; @@ -316,6 +319,9 @@ label{ font-size:1.25em; margin:0.5em 0; } + h2 { + margin: 0 0 0.5em; + } h5 { margin:0 0 1em; font: { @@ -536,8 +542,17 @@ p.label-valid { .wrapper { width:100%; display:table; - caption-side:bottom; + // The 'caption' at large widths will be top, moving the menu up magically + caption-side: bottom; + // This is so absolutely positioned header stuff doesn't overlap banner... + position: relative; } +// ...however position: relative stops the map being clickable (?), so better +// revert it there +body.mappage .wrapper { + position: static; +} + // this is the user's logged in details or the login link etc #user-meta { p { @@ -729,6 +744,33 @@ input.final-submit { float: $right; } +.btn--facebook { + @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff); + + &:visited { + color: #fff; + } + + img { + margin-right: 0.5em; + vertical-align: -0.2em; + height: 1.3em; + width: auto; + } +} + +// Under the button to override its text transform and width +.btn--social { + display: block; + width: 100%; + text-transform: none; + text-align: center; +} + +.js #js-social-email-hide { + display: none; +} + .button-fwd { padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em); background: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg") $right 50% no-repeat; @@ -842,15 +884,11 @@ input.final-submit { margin: 0 0 1em; padding: 0; border-bottom: 0.25em solid $primary; - .update-img { - float: $right; - margin: flip(0.5em 0 0.5em 1em, 0.5em 1em 0.5em 0); // gutter between text and floated image - } } .item-list__item { list-style: none; - background-color: #f6f6f6; + background-color: $itemlist_item_background; margin: 0.25em 0 0; padding: 0.5em 1em; display: block; @@ -871,8 +909,8 @@ input.final-submit { display: block; padding: 0.5em 1em; } - a:hover, a:focus { - background-color: #e6e6e6; + a:hover, a:focus, &.hovered a { + background-color: $itemlist_item_background_hover; text-decoration: none; } } @@ -921,6 +959,35 @@ input.final-submit { } } +.problem-header .update-img, +.item-list .update-img { + float: $right; + margin: flip(0.3em 0 0.5em 1em, 0.3em 1em 0.5em 0); // gutter between text and floated image + width: 33%; +} +.questionnaire-report-reminder .update-img { + float: $left; + margin: flip(0.1em 1em 1em 0, 0.1em 0 1em 1em); + width: 120px; +} + +// A wrapper that's put around .update-imgs if there are more than 1 in a row +.update-img-set { + text-align: center; + margin: 0 0 1em; + + .update-img { + float: none; + display: inline-block; + margin: 0; + width: 31%; + } + + .update-img + .update-img { + margin: flip(0 0 0 0.5em, 0 0.5em 0 0); + } +} + // fancybox gallery images have a magnifying glass in the corner .update-img { a { @@ -946,12 +1013,7 @@ input.final-submit { } .problem-header { - margin-bottom:1em; -} -.problem-header .update-img { - float: $right; - margin-#{$left}: 0.5em; - margin-bottom: 0.5em; + margin-bottom: 1em; } .report_meta_info, @@ -1566,6 +1628,26 @@ table.nicetable { } } +.alerts__nearby-activity { + background-color: #f6f6f6; + margin: 1em -1em; + padding: 1em; + + & > :first-child { + margin-top: 0; + } +} + +.alerts__nearby-activity__photos { + white-space: nowrap; + overflow: hidden; + + a { + margin-right: 0.5em; + text-decoration: none; // avoid underline showing between images + } +} + .confirmation-header { padding: 140px 0 2em; text-align: center; @@ -1628,12 +1710,6 @@ table.nicetable { border-radius: 3px; padding: 1em 1em 1px 1em; // basically no padding-bottom, as children have their own margin-bottom instead margin-bottom: 2em; - - .update-img { - width: 120px; - float: left; - margin: 0.1em 1em 1em 0; - } } .questionnaire-report-reminder__report-title { @@ -1665,7 +1741,8 @@ table.nicetable { display: flex; // fancy full-width buttons for browsers that support flexbox input { - display: none; + position: absolute; + left: -999px; } label { @@ -1755,3 +1832,4 @@ table.nicetable { @import "_admin"; @import "_fixedthead"; +@import "_dropzone"; diff --git a/web/cobrands/sass/_dropzone.scss b/web/cobrands/sass/_dropzone.scss new file mode 100644 index 000000000..8c482d0cf --- /dev/null +++ b/web/cobrands/sass/_dropzone.scss @@ -0,0 +1,204 @@ +$dropzone-link-color: #0BA7D1; // match default `a` styling +$dropzone-link-color--awakened: #0D7CCE; // match default `a:hover` styling +$dropzone-border-color: #888; // match default form inputs +$dropzone-border-color--awakened: $dropzone-link-color--awakened; +$dropzone-border-color--full: #bf002a; +$dropzone-border-radius: 0.25em; // match default form inputs +$dropzone-background-color: #fff; +$dropzone-background-color--awakened: mix($dropzone-link-color, $dropzone-background-color, 10%); +$dropzone-background-color--full: mix($dropzone-border-color--full, $dropzone-background-color, 10%); + +.dropzone { + @include clearfix(); + border: 0.125em solid $dropzone-border-color; + background-color: $dropzone-background-color; + border-radius: $dropzone-border-radius; + padding: 1.5em; + text-align: center; +} + +.dz-clickable { + cursor: pointer; + + * { + cursor: auto; + } + + .dz-message, + .dz-message *, + .dz-remove, + .dz-cancel { + cursor: pointer; + } + + .dz-message u { + color: $dropzone-link-color; + } +} + +.dz-clickable:hover, +.dz-drag-hover { + border-color: $dropzone-link-color--awakened; + background-color: $dropzone-background-color--awakened; + + .dz-remove, + .dz-cancel { + border-color: $dropzone-background-color--awakened; + } + + .dz-message u { + color: $dropzone-link-color--awakened; + } +} + +.dz-max-files-reached { + cursor: auto; + + &:hover { + border-color: $dropzone-border-color; + background-color: $dropzone-background-color; + + .dz-remove, + .dz-cancel { + border-color: $dropzone-background-color; + } + } + + &.dz-drag-hover { + border-color: $dropzone-border-color--full; + background-color: $dropzone-background-color--full; + + .dz-remove, + .dz-cancel { + border-color: $dropzone-background-color--full; + } + } + + .dz-message.dz-default { + display: none; + } + + .dz-preview { + margin-top: 0; + } +} + +.dz-message { + margin-bottom: 1.5em; + + &:last-child { + margin-bottom: 0; + } +} + +.dz-preview { + position: relative; + float: left; + width: 30%; + height: 0; + padding-bottom: 30%; // makes a square element + margin-right: 5%; + + &:last-child { + margin-right: 0; + } +} + +.dz-image { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + border-radius: $dropzone-border-radius; + overflow: hidden; // crop child image to border radius, even before img src has loaded + + img { + width: 100%; + height: 100%; + } +} + +// If there was an error, we don't want to display the preview image on top of it. +.dz-error .dz-image { + display: none; +} + +.dz-progress { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + // http://loading.io/loader/?use=eyJzaXplIjo1MCwic3BlZWQiOjEsImNiayI6IiNlZWVlZWUiLCJjMSI6IiM5OTk5OTkiLCJjMiI6IjEyIiwiYzMiOiI0IiwiYzQiOiIxNSIsImM1IjoiMiIsImM2IjoiMjAiLCJ0eXBlIjoiZGVmYXVsdCJ9 + background: #eee url(/cobrands/fixmystreet/images/spinner-grey-eee.gif) no-repeat center center; + background-image: url(/cobrands/fixmystreet/images/spinner-grey-eee.svg), none; + background-size: 100px; + border-radius: 0.3em; + + .dz-complete & { + display: none; + } + + .dz-upload { + background: rgba(0,0,0,0.2); + border-radius: $dropzone-border-radius; + height: 100%; + width: 0; + display: block; + } +} + +.dz-error-message { + color: #881111; + padding-top: 1.5em; +} + +.dz-remove, +.dz-cancel { + display: block; + width: 1.5em; + height: 0; + + padding-top: 1.5em; + overflow: hidden; + + position: absolute; + top: -0.5em; + right: -0.5em; + + border: 4px solid #fff; + border-radius: 100%; + background: #888 url(/cobrands/fixmystreet/images/cross-14px.png) no-repeat center center; + background-image: url(/cobrands/fixmystreet/images/cross-14px.svg), none; + background-size: 14px; + + &:hover, + &:focus { + background-color: red; + } +} + +// Deviously use pseudo-elements to preload a few images so they appear as soon as a file is picked +.dz-message { + &:before { + content: ""; + position: absolute; + background: transparent url(/cobrands/fixmystreet/images/spinner-grey-eee.gif) no-repeat 0 0; + background-image: url(/cobrands/fixmystreet/images/spinner-grey-eee.svg), none; + } + + &:after { + content: ""; + position: absolute; + background: transparent url(/cobrands/fixmystreet/images/cross-14px.png) no-repeat 0 0; + background-image: url(/cobrands/fixmystreet/images/cross-14px.svg), none; + } +} + +// Don't really need these +.dz-details, .dz-success-mark, .dz-error-mark { + display: none; +} diff --git a/web/cobrands/sass/_h5bp.scss b/web/cobrands/sass/_h5bp.scss index f4078cca6..f2074532c 100644 --- a/web/cobrands/sass/_h5bp.scss +++ b/web/cobrands/sass/_h5bp.scss @@ -42,6 +42,9 @@ body, button, input, select, textarea { color: #222; background-color: #fff } +input[disabled] { + color: #888; +} /* * Remove text-shadow in selection highlight: h5bp.com/i diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index c9cc3610d..96b3d2aec 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -3,6 +3,14 @@ $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default; +.internal-link-fixed-header { + display: block; + /* 5em is roughly the height of .nav-wrapper-2 (4em) plus the border-top on + .nav-wrapper-2 (4px), plus the padding-top on .item-list__item (0.5em). */ + padding-top: 5em; + margin-top: -5em; +} + //hacks for desk/mob only stuff .desk-only { display: block; @@ -654,7 +662,7 @@ body.authpage { } .iel8 #sub_map_links #map_links_toggle { height: 1.75em; - background: #000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat; + background: #000 url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif') center -143px no-repeat; &.closed { background-position: center -183px; } diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss index be274e9bb..541ff0a33 100644 --- a/web/cobrands/sass/_mixins.scss +++ b/web/cobrands/sass/_mixins.scss @@ -19,7 +19,7 @@ $direction: 'left' !default; @include background (linear-gradient($c1, $c2)) ; border:1px solid $c3; color:$c4; - &:hover{ + &:hover:enabled { background:$c5; @include background (linear-gradient($c6, $c5)); text-decoration: none; diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss index 9ddba0721..e1d34cee6 100644 --- a/web/cobrands/warwickshire/layout.scss +++ b/web/cobrands/warwickshire/layout.scss @@ -45,6 +45,7 @@ body.mappage { padding: 0; width: auto; display: block; + position: relative; } } diff --git a/web/i/facebook-icon-32.png b/web/i/facebook-icon-32.png Binary files differnew file mode 100644 index 000000000..460ddc8a6 --- /dev/null +++ b/web/i/facebook-icon-32.png diff --git a/web/js/dropzone.min.js b/web/js/dropzone.min.js new file mode 100755 index 000000000..f460b6c50 --- /dev/null +++ b/web/js/dropzone.min.js @@ -0,0 +1,2 @@ +(function(){var a,b,c,d,e,f,g,h,i=[].slice,j={}.hasOwnProperty,k=function(a,b){function c(){this.constructor=a}for(var d in b)j.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a};g=function(){},b=function(){function a(){}return a.prototype.addEventListener=a.prototype.on,a.prototype.on=function(a,b){return this._callbacks=this._callbacks||{},this._callbacks[a]||(this._callbacks[a]=[]),this._callbacks[a].push(b),this},a.prototype.emit=function(){var a,b,c,d,e,f;if(d=arguments[0],a=2<=arguments.length?i.call(arguments,1):[],this._callbacks=this._callbacks||{},c=this._callbacks[d])for(e=0,f=c.length;f>e;e++)b=c[e],b.apply(this,a);return this},a.prototype.removeListener=a.prototype.off,a.prototype.removeAllListeners=a.prototype.off,a.prototype.removeEventListener=a.prototype.off,a.prototype.off=function(a,b){var c,d,e,f,g;if(!this._callbacks||0===arguments.length)return this._callbacks={},this;if(d=this._callbacks[a],!d)return this;if(1===arguments.length)return delete this._callbacks[a],this;for(e=f=0,g=d.length;g>f;e=++f)if(c=d[e],c===b){d.splice(e,1);break}return this},a}(),a=function(a){function c(a,b){var e,f,g;if(this.element=a,this.version=c.version,this.defaultOptions.previewTemplate=this.defaultOptions.previewTemplate.replace(/\n*/g,""),this.clickableElements=[],this.listeners=[],this.files=[],"string"==typeof this.element&&(this.element=document.querySelector(this.element)),!this.element||null==this.element.nodeType)throw new Error("Invalid dropzone element.");if(this.element.dropzone)throw new Error("Dropzone already attached.");if(c.instances.push(this),this.element.dropzone=this,e=null!=(g=c.optionsForElement(this.element))?g:{},this.options=d({},this.defaultOptions,e,null!=b?b:{}),this.options.forceFallback||!c.isBrowserSupported())return this.options.fallback.call(this);if(null==this.options.url&&(this.options.url=this.element.getAttribute("action")),!this.options.url)throw new Error("No URL provided.");if(this.options.acceptedFiles&&this.options.acceptedMimeTypes)throw new Error("You can't provide both 'acceptedFiles' and 'acceptedMimeTypes'. 'acceptedMimeTypes' is deprecated.");this.options.acceptedMimeTypes&&(this.options.acceptedFiles=this.options.acceptedMimeTypes,delete this.options.acceptedMimeTypes),this.options.method=this.options.method.toUpperCase(),(f=this.getExistingFallback())&&f.parentNode&&f.parentNode.removeChild(f),this.options.previewsContainer!==!1&&(this.previewsContainer=this.options.previewsContainer?c.getElement(this.options.previewsContainer,"previewsContainer"):this.element),this.options.clickable&&(this.clickableElements=this.options.clickable===!0?[this.element]:c.getElements(this.options.clickable,"clickable")),this.init()}var d,e;return k(c,a),c.prototype.Emitter=b,c.prototype.events=["drop","dragstart","dragend","dragenter","dragover","dragleave","addedfile","addedfiles","removedfile","thumbnail","error","errormultiple","processing","processingmultiple","uploadprogress","totaluploadprogress","sending","sendingmultiple","success","successmultiple","canceled","canceledmultiple","complete","completemultiple","reset","maxfilesexceeded","maxfilesreached","queuecomplete"],c.prototype.defaultOptions={url:null,method:"post",withCredentials:!1,parallelUploads:2,uploadMultiple:!1,maxFilesize:256,paramName:"file",createImageThumbnails:!0,maxThumbnailFilesize:10,thumbnailWidth:120,thumbnailHeight:120,filesizeBase:1e3,maxFiles:null,params:{},clickable:!0,ignoreHiddenFiles:!0,acceptedFiles:null,acceptedMimeTypes:null,autoProcessQueue:!0,autoQueue:!0,addRemoveLinks:!1,previewsContainer:null,hiddenInputContainer:"body",capture:null,dictDefaultMessage:"Drop files here to upload",dictFallbackMessage:"Your browser does not support drag'n'drop file uploads.",dictFallbackText:"Please use the fallback form below to upload your files like in the olden days.",dictFileTooBig:"File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",dictInvalidFileType:"You can't upload files of this type.",dictResponseError:"Server responded with {{statusCode}} code.",dictCancelUpload:"Cancel upload",dictCancelUploadConfirmation:"Are you sure you want to cancel this upload?",dictRemoveFile:"Remove file",dictRemoveFileConfirmation:null,dictMaxFilesExceeded:"You can not upload any more files.",accept:function(a,b){return b()},init:function(){return g},forceFallback:!1,fallback:function(){var a,b,d,e,f,g;for(this.element.className=""+this.element.className+" dz-browser-not-supported",g=this.element.getElementsByTagName("div"),e=0,f=g.length;f>e;e++)a=g[e],/(^| )dz-message($| )/.test(a.className)&&(b=a,a.className="dz-message");return b||(b=c.createElement('<div class="dz-message"><span></span></div>'),this.element.appendChild(b)),d=b.getElementsByTagName("span")[0],d&&(null!=d.textContent?d.textContent=this.options.dictFallbackMessage:null!=d.innerText&&(d.innerText=this.options.dictFallbackMessage)),this.element.appendChild(this.getFallbackForm())},resize:function(a){var b,c,d;return b={srcX:0,srcY:0,srcWidth:a.width,srcHeight:a.height},c=a.width/a.height,b.optWidth=this.options.thumbnailWidth,b.optHeight=this.options.thumbnailHeight,null==b.optWidth&&null==b.optHeight?(b.optWidth=b.srcWidth,b.optHeight=b.srcHeight):null==b.optWidth?b.optWidth=c*b.optHeight:null==b.optHeight&&(b.optHeight=1/c*b.optWidth),d=b.optWidth/b.optHeight,a.height<b.optHeight||a.width<b.optWidth?(b.trgHeight=b.srcHeight,b.trgWidth=b.srcWidth):c>d?(b.srcHeight=a.height,b.srcWidth=b.srcHeight*d):(b.srcWidth=a.width,b.srcHeight=b.srcWidth/d),b.srcX=(a.width-b.srcWidth)/2,b.srcY=(a.height-b.srcHeight)/2,b},drop:function(){return this.element.classList.remove("dz-drag-hover")},dragstart:g,dragend:function(){return this.element.classList.remove("dz-drag-hover")},dragenter:function(){return this.element.classList.add("dz-drag-hover")},dragover:function(){return this.element.classList.add("dz-drag-hover")},dragleave:function(){return this.element.classList.remove("dz-drag-hover")},paste:g,reset:function(){return this.element.classList.remove("dz-started")},addedfile:function(a){var b,d,e,f,g,h,i,j,k,l,m,n,o;if(this.element===this.previewsContainer&&this.element.classList.add("dz-started"),this.previewsContainer){for(a.previewElement=c.createElement(this.options.previewTemplate.trim()),a.previewTemplate=a.previewElement,this.previewsContainer.appendChild(a.previewElement),l=a.previewElement.querySelectorAll("[data-dz-name]"),f=0,i=l.length;i>f;f++)b=l[f],b.textContent=a.name;for(m=a.previewElement.querySelectorAll("[data-dz-size]"),g=0,j=m.length;j>g;g++)b=m[g],b.innerHTML=this.filesize(a.size);for(this.options.addRemoveLinks&&(a._removeLink=c.createElement('<a class="dz-remove" href="javascript:undefined;" data-dz-remove>'+this.options.dictRemoveFile+"</a>"),a.previewElement.appendChild(a._removeLink)),d=function(b){return function(d){return d.preventDefault(),d.stopPropagation(),a.status===c.UPLOADING?c.confirm(b.options.dictCancelUploadConfirmation,function(){return b.removeFile(a)}):b.options.dictRemoveFileConfirmation?c.confirm(b.options.dictRemoveFileConfirmation,function(){return b.removeFile(a)}):b.removeFile(a)}}(this),n=a.previewElement.querySelectorAll("[data-dz-remove]"),o=[],h=0,k=n.length;k>h;h++)e=n[h],o.push(e.addEventListener("click",d));return o}},removedfile:function(a){var b;return a.previewElement&&null!=(b=a.previewElement)&&b.parentNode.removeChild(a.previewElement),this._updateMaxFilesReachedClass()},thumbnail:function(a,b){var c,d,e,f;if(a.previewElement){for(a.previewElement.classList.remove("dz-file-preview"),f=a.previewElement.querySelectorAll("[data-dz-thumbnail]"),d=0,e=f.length;e>d;d++)c=f[d],c.alt=a.name,c.src=b;return setTimeout(function(){return function(){return a.previewElement.classList.add("dz-image-preview")}}(this),1)}},error:function(a,b){var c,d,e,f,g;if(a.previewElement){for(a.previewElement.classList.add("dz-error"),"String"!=typeof b&&b.error&&(b=b.error),f=a.previewElement.querySelectorAll("[data-dz-errormessage]"),g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(c.textContent=b);return g}},errormultiple:g,processing:function(a){return a.previewElement&&(a.previewElement.classList.add("dz-processing"),a._removeLink)?a._removeLink.textContent=this.options.dictCancelUpload:void 0},processingmultiple:g,uploadprogress:function(a,b){var c,d,e,f,g;if(a.previewElement){for(f=a.previewElement.querySelectorAll("[data-dz-uploadprogress]"),g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push("PROGRESS"===c.nodeName?c.value=b:c.style.width=""+b+"%");return g}},totaluploadprogress:g,sending:g,sendingmultiple:g,success:function(a){return a.previewElement?a.previewElement.classList.add("dz-success"):void 0},successmultiple:g,canceled:function(a){return this.emit("error",a,"Upload canceled.")},canceledmultiple:g,complete:function(a){return a._removeLink&&(a._removeLink.textContent=this.options.dictRemoveFile),a.previewElement?a.previewElement.classList.add("dz-complete"):void 0},completemultiple:g,maxfilesexceeded:g,maxfilesreached:g,queuecomplete:g,addedfiles:g,previewTemplate:'<div class="dz-preview dz-file-preview">\n <div class="dz-image"><img data-dz-thumbnail /></div>\n <div class="dz-details">\n <div class="dz-size"><span data-dz-size></span></div>\n <div class="dz-filename"><span data-dz-name></span></div>\n </div>\n <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>\n <div class="dz-error-message"><span data-dz-errormessage></span></div>\n <div class="dz-success-mark">\n <svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">\n <title>Check</title>\n <defs></defs>\n <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">\n <path d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2" stroke-opacity="0.198794158" stroke="#747474" fill-opacity="0.816519475" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>\n </g>\n </svg>\n </div>\n <div class="dz-error-mark">\n <svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">\n <title>Error</title>\n <defs></defs>\n <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">\n <g id="Check-+-Oval-2" sketch:type="MSLayerGroup" stroke="#747474" stroke-opacity="0.198794158" fill="#FFFFFF" fill-opacity="0.816519475">\n <path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2" sketch:type="MSShapeGroup"></path>\n </g>\n </g>\n </svg>\n </div>\n</div>'},d=function(){var a,b,c,d,e,f,g;for(d=arguments[0],c=2<=arguments.length?i.call(arguments,1):[],f=0,g=c.length;g>f;f++){b=c[f];for(a in b)e=b[a],d[a]=e}return d},c.prototype.getAcceptedFiles=function(){var a,b,c,d,e;for(d=this.files,e=[],b=0,c=d.length;c>b;b++)a=d[b],a.accepted&&e.push(a);return e},c.prototype.getRejectedFiles=function(){var a,b,c,d,e;for(d=this.files,e=[],b=0,c=d.length;c>b;b++)a=d[b],a.accepted||e.push(a);return e},c.prototype.getFilesWithStatus=function(a){var b,c,d,e,f;for(e=this.files,f=[],c=0,d=e.length;d>c;c++)b=e[c],b.status===a&&f.push(b);return f},c.prototype.getQueuedFiles=function(){return this.getFilesWithStatus(c.QUEUED)},c.prototype.getUploadingFiles=function(){return this.getFilesWithStatus(c.UPLOADING)},c.prototype.getAddedFiles=function(){return this.getFilesWithStatus(c.ADDED)},c.prototype.getActiveFiles=function(){var a,b,d,e,f;for(e=this.files,f=[],b=0,d=e.length;d>b;b++)a=e[b],(a.status===c.UPLOADING||a.status===c.QUEUED)&&f.push(a);return f},c.prototype.init=function(){var a,b,d,e,f,g,h;for("form"===this.element.tagName&&this.element.setAttribute("enctype","multipart/form-data"),this.element.classList.contains("dropzone")&&!this.element.querySelector(".dz-message")&&this.element.appendChild(c.createElement('<div class="dz-default dz-message"><span>'+this.options.dictDefaultMessage+"</span></div>")),this.clickableElements.length&&(d=function(a){return function(){return a.hiddenFileInput&&a.hiddenFileInput.parentNode.removeChild(a.hiddenFileInput),a.hiddenFileInput=document.createElement("input"),a.hiddenFileInput.setAttribute("type","file"),(null==a.options.maxFiles||a.options.maxFiles>1)&&a.hiddenFileInput.setAttribute("multiple","multiple"),a.hiddenFileInput.className="dz-hidden-input",null!=a.options.acceptedFiles&&a.hiddenFileInput.setAttribute("accept",a.options.acceptedFiles),null!=a.options.capture&&a.hiddenFileInput.setAttribute("capture",a.options.capture),a.hiddenFileInput.style.visibility="hidden",a.hiddenFileInput.style.position="absolute",a.hiddenFileInput.style.top="0",a.hiddenFileInput.style.left="0",a.hiddenFileInput.style.height="0",a.hiddenFileInput.style.width="0",document.querySelector(a.options.hiddenInputContainer).appendChild(a.hiddenFileInput),a.hiddenFileInput.addEventListener("change",function(){var b,c,e,f;if(c=a.hiddenFileInput.files,c.length)for(e=0,f=c.length;f>e;e++)b=c[e],a.addFile(b);return a.emit("addedfiles",c),d()})}}(this))(),this.URL=null!=(g=window.URL)?g:window.webkitURL,h=this.events,e=0,f=h.length;f>e;e++)a=h[e],this.on(a,this.options[a]);return this.on("uploadprogress",function(a){return function(){return a.updateTotalUploadProgress()}}(this)),this.on("removedfile",function(a){return function(){return a.updateTotalUploadProgress()}}(this)),this.on("canceled",function(a){return function(b){return a.emit("complete",b)}}(this)),this.on("complete",function(a){return function(){return 0===a.getAddedFiles().length&&0===a.getUploadingFiles().length&&0===a.getQueuedFiles().length?setTimeout(function(){return a.emit("queuecomplete")},0):void 0}}(this)),b=function(a){return a.stopPropagation(),a.preventDefault?a.preventDefault():a.returnValue=!1},this.listeners=[{element:this.element,events:{dragstart:function(a){return function(b){return a.emit("dragstart",b)}}(this),dragenter:function(a){return function(c){return b(c),a.emit("dragenter",c)}}(this),dragover:function(a){return function(c){var d;try{d=c.dataTransfer.effectAllowed}catch(e){}return c.dataTransfer.dropEffect="move"===d||"linkMove"===d?"move":"copy",b(c),a.emit("dragover",c)}}(this),dragleave:function(a){return function(b){return a.emit("dragleave",b)}}(this),drop:function(a){return function(c){return b(c),a.drop(c)}}(this),dragend:function(a){return function(b){return a.emit("dragend",b)}}(this)}}],this.clickableElements.forEach(function(a){return function(b){return a.listeners.push({element:b,events:{click:function(d){return(b!==a.element||d.target===a.element||c.elementInside(d.target,a.element.querySelector(".dz-message")))&&a.hiddenFileInput.click(),!0}}})}}(this)),this.enable(),this.options.init.call(this)},c.prototype.destroy=function(){var a;return this.disable(),this.removeAllFiles(!0),(null!=(a=this.hiddenFileInput)?a.parentNode:void 0)&&(this.hiddenFileInput.parentNode.removeChild(this.hiddenFileInput),this.hiddenFileInput=null),delete this.element.dropzone,c.instances.splice(c.instances.indexOf(this),1)},c.prototype.updateTotalUploadProgress=function(){var a,b,c,d,e,f,g,h;if(d=0,c=0,a=this.getActiveFiles(),a.length){for(h=this.getActiveFiles(),f=0,g=h.length;g>f;f++)b=h[f],d+=b.upload.bytesSent,c+=b.upload.total;e=100*d/c}else e=100;return this.emit("totaluploadprogress",e,c,d)},c.prototype._getParamName=function(a){return"function"==typeof this.options.paramName?this.options.paramName(a):""+this.options.paramName+(this.options.uploadMultiple?"["+a+"]":"")},c.prototype.getFallbackForm=function(){var a,b,d,e;return(a=this.getExistingFallback())?a:(d='<div class="dz-fallback">',this.options.dictFallbackText&&(d+="<p>"+this.options.dictFallbackText+"</p>"),d+='<input type="file" name="'+this._getParamName(0)+'" '+(this.options.uploadMultiple?'multiple="multiple"':void 0)+' /><input type="submit" value="Upload!"></div>',b=c.createElement(d),"FORM"!==this.element.tagName?(e=c.createElement('<form action="'+this.options.url+'" enctype="multipart/form-data" method="'+this.options.method+'"></form>'),e.appendChild(b)):(this.element.setAttribute("enctype","multipart/form-data"),this.element.setAttribute("method",this.options.method)),null!=e?e:b)},c.prototype.getExistingFallback=function(){var a,b,c,d,e,f;for(b=function(a){var b,c,d;for(c=0,d=a.length;d>c;c++)if(b=a[c],/(^| )fallback($| )/.test(b.className))return b},f=["div","form"],d=0,e=f.length;e>d;d++)if(c=f[d],a=b(this.element.getElementsByTagName(c)))return a},c.prototype.setupEventListeners=function(){var a,b,c,d,e,f,g;for(f=this.listeners,g=[],d=0,e=f.length;e>d;d++)a=f[d],g.push(function(){var d,e;d=a.events,e=[];for(b in d)c=d[b],e.push(a.element.addEventListener(b,c,!1));return e}());return g},c.prototype.removeEventListeners=function(){var a,b,c,d,e,f,g;for(f=this.listeners,g=[],d=0,e=f.length;e>d;d++)a=f[d],g.push(function(){var d,e;d=a.events,e=[];for(b in d)c=d[b],e.push(a.element.removeEventListener(b,c,!1));return e}());return g},c.prototype.disable=function(){var a,b,c,d,e;for(this.clickableElements.forEach(function(a){return a.classList.remove("dz-clickable")}),this.removeEventListeners(),d=this.files,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(this.cancelUpload(a));return e},c.prototype.enable=function(){return this.clickableElements.forEach(function(a){return a.classList.add("dz-clickable")}),this.setupEventListeners()},c.prototype.filesize=function(a){var b,c,d,e,f,g,h,i;if(d=0,e="b",a>0){for(g=["TB","GB","MB","KB","b"],c=h=0,i=g.length;i>h;c=++h)if(f=g[c],b=Math.pow(this.options.filesizeBase,4-c)/10,a>=b){d=a/Math.pow(this.options.filesizeBase,4-c),e=f;break}d=Math.round(10*d)/10}return"<strong>"+d+"</strong> "+e},c.prototype._updateMaxFilesReachedClass=function(){return null!=this.options.maxFiles&&this.getAcceptedFiles().length>=this.options.maxFiles?(this.getAcceptedFiles().length===this.options.maxFiles&&this.emit("maxfilesreached",this.files),this.element.classList.add("dz-max-files-reached")):this.element.classList.remove("dz-max-files-reached")},c.prototype.drop=function(a){var b,c;a.dataTransfer&&(this.emit("drop",a),b=a.dataTransfer.files,this.emit("addedfiles",b),b.length&&(c=a.dataTransfer.items,c&&c.length&&null!=c[0].webkitGetAsEntry?this._addFilesFromItems(c):this.handleFiles(b)))},c.prototype.paste=function(a){var b,c;if(null!=(null!=a&&null!=(c=a.clipboardData)?c.items:void 0))return this.emit("paste",a),b=a.clipboardData.items,b.length?this._addFilesFromItems(b):void 0},c.prototype.handleFiles=function(a){var b,c,d,e;for(e=[],c=0,d=a.length;d>c;c++)b=a[c],e.push(this.addFile(b));return e},c.prototype._addFilesFromItems=function(a){var b,c,d,e,f;for(f=[],d=0,e=a.length;e>d;d++)c=a[d],f.push(null!=c.webkitGetAsEntry&&(b=c.webkitGetAsEntry())?b.isFile?this.addFile(c.getAsFile()):b.isDirectory?this._addFilesFromDirectory(b,b.name):void 0:null!=c.getAsFile?null==c.kind||"file"===c.kind?this.addFile(c.getAsFile()):void 0:void 0);return f},c.prototype._addFilesFromDirectory=function(a,b){var c,d;return c=a.createReader(),d=function(a){return function(c){var d,e,f;for(e=0,f=c.length;f>e;e++)d=c[e],d.isFile?d.file(function(c){return a.options.ignoreHiddenFiles&&"."===c.name.substring(0,1)?void 0:(c.fullPath=""+b+"/"+c.name,a.addFile(c))}):d.isDirectory&&a._addFilesFromDirectory(d,""+b+"/"+d.name)}}(this),c.readEntries(d,function(a){return"undefined"!=typeof console&&null!==console&&"function"==typeof console.log?console.log(a):void 0})},c.prototype.accept=function(a,b){return a.size>1024*this.options.maxFilesize*1024?b(this.options.dictFileTooBig.replace("{{filesize}}",Math.round(a.size/1024/10.24)/100).replace("{{maxFilesize}}",this.options.maxFilesize)):c.isValidFile(a,this.options.acceptedFiles)?null!=this.options.maxFiles&&this.getAcceptedFiles().length>=this.options.maxFiles?(b(this.options.dictMaxFilesExceeded.replace("{{maxFiles}}",this.options.maxFiles)),this.emit("maxfilesexceeded",a)):this.options.accept.call(this,a,b):b(this.options.dictInvalidFileType)},c.prototype.addFile=function(a){return a.upload={progress:0,total:a.size,bytesSent:0},this.files.push(a),a.status=c.ADDED,this.emit("addedfile",a),this._enqueueThumbnail(a),this.accept(a,function(b){return function(c){return c?(a.accepted=!1,b._errorProcessing([a],c)):(a.accepted=!0,b.options.autoQueue&&b.enqueueFile(a)),b._updateMaxFilesReachedClass()}}(this))},c.prototype.enqueueFiles=function(a){var b,c,d;for(c=0,d=a.length;d>c;c++)b=a[c],this.enqueueFile(b);return null},c.prototype.enqueueFile=function(a){if(a.status!==c.ADDED||a.accepted!==!0)throw new Error("This file can't be queued because it has already been processed or was rejected.");return a.status=c.QUEUED,this.options.autoProcessQueue?setTimeout(function(a){return function(){return a.processQueue()}}(this),0):void 0},c.prototype._thumbnailQueue=[],c.prototype._processingThumbnail=!1,c.prototype._enqueueThumbnail=function(a){return this.options.createImageThumbnails&&a.type.match(/image.*/)&&a.size<=1024*this.options.maxThumbnailFilesize*1024?(this._thumbnailQueue.push(a),setTimeout(function(a){return function(){return a._processThumbnailQueue()}}(this),0)):void 0},c.prototype._processThumbnailQueue=function(){return this._processingThumbnail||0===this._thumbnailQueue.length?void 0:(this._processingThumbnail=!0,this.createThumbnail(this._thumbnailQueue.shift(),function(a){return function(){return a._processingThumbnail=!1,a._processThumbnailQueue()}}(this)))},c.prototype.removeFile=function(a){return a.status===c.UPLOADING&&this.cancelUpload(a),this.files=h(this.files,a),this.emit("removedfile",a),0===this.files.length?this.emit("reset"):void 0},c.prototype.removeAllFiles=function(a){var b,d,e,f;for(null==a&&(a=!1),f=this.files.slice(),d=0,e=f.length;e>d;d++)b=f[d],(b.status!==c.UPLOADING||a)&&this.removeFile(b);return null},c.prototype.createThumbnail=function(a,b){var c;return c=new FileReader,c.onload=function(d){return function(){return"image/svg+xml"===a.type?(d.emit("thumbnail",a,c.result),void(null!=b&&b())):d.createThumbnailFromUrl(a,c.result,b)}}(this),c.readAsDataURL(a)},c.prototype.createThumbnailFromUrl=function(a,b,c,d){var e;return e=document.createElement("img"),d&&(e.crossOrigin=d),e.onload=function(b){return function(){var d,g,h,i,j,k,l,m;return a.width=e.width,a.height=e.height,h=b.options.resize.call(b,a),null==h.trgWidth&&(h.trgWidth=h.optWidth),null==h.trgHeight&&(h.trgHeight=h.optHeight),d=document.createElement("canvas"),g=d.getContext("2d"),d.width=h.trgWidth,d.height=h.trgHeight,f(g,e,null!=(j=h.srcX)?j:0,null!=(k=h.srcY)?k:0,h.srcWidth,h.srcHeight,null!=(l=h.trgX)?l:0,null!=(m=h.trgY)?m:0,h.trgWidth,h.trgHeight),i=d.toDataURL("image/png"),b.emit("thumbnail",a,i),null!=c?c():void 0}}(this),null!=c&&(e.onerror=c),e.src=b},c.prototype.processQueue=function(){var a,b,c,d;if(b=this.options.parallelUploads,c=this.getUploadingFiles().length,a=c,!(c>=b)&&(d=this.getQueuedFiles(),d.length>0)){if(this.options.uploadMultiple)return this.processFiles(d.slice(0,b-c));for(;b>a;){if(!d.length)return;this.processFile(d.shift()),a++}}},c.prototype.processFile=function(a){return this.processFiles([a])},c.prototype.processFiles=function(a){var b,d,e;for(d=0,e=a.length;e>d;d++)b=a[d],b.processing=!0,b.status=c.UPLOADING,this.emit("processing",b);return this.options.uploadMultiple&&this.emit("processingmultiple",a),this.uploadFiles(a)},c.prototype._getFilesWithXhr=function(a){var b,c;return c=function(){var c,d,e,f;for(e=this.files,f=[],c=0,d=e.length;d>c;c++)b=e[c],b.xhr===a&&f.push(b);return f}.call(this)},c.prototype.cancelUpload=function(a){var b,d,e,f,g,h,i;if(a.status===c.UPLOADING){for(d=this._getFilesWithXhr(a.xhr),e=0,g=d.length;g>e;e++)b=d[e],b.status=c.CANCELED;for(a.xhr.abort(),f=0,h=d.length;h>f;f++)b=d[f],this.emit("canceled",b);this.options.uploadMultiple&&this.emit("canceledmultiple",d)}else((i=a.status)===c.ADDED||i===c.QUEUED)&&(a.status=c.CANCELED,this.emit("canceled",a),this.options.uploadMultiple&&this.emit("canceledmultiple",[a]));return this.options.autoProcessQueue?this.processQueue():void 0},e=function(){var a,b;return b=arguments[0],a=2<=arguments.length?i.call(arguments,1):[],"function"==typeof b?b.apply(this,a):b},c.prototype.uploadFile=function(a){return this.uploadFiles([a])},c.prototype.uploadFiles=function(a){var b,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L;for(w=new XMLHttpRequest,x=0,B=a.length;B>x;x++)b=a[x],b.xhr=w;p=e(this.options.method,a),u=e(this.options.url,a),w.open(p,u,!0),w.withCredentials=!!this.options.withCredentials,s=null,g=function(c){return function(){var d,e,f;for(f=[],d=0,e=a.length;e>d;d++)b=a[d],f.push(c._errorProcessing(a,s||c.options.dictResponseError.replace("{{statusCode}}",w.status),w));return f}}(this),t=function(c){return function(d){var e,f,g,h,i,j,k,l,m;if(null!=d)for(f=100*d.loaded/d.total,g=0,j=a.length;j>g;g++)b=a[g],b.upload={progress:f,total:d.total,bytesSent:d.loaded};else{for(e=!0,f=100,h=0,k=a.length;k>h;h++)b=a[h],(100!==b.upload.progress||b.upload.bytesSent!==b.upload.total)&&(e=!1),b.upload.progress=f,b.upload.bytesSent=b.upload.total;if(e)return}for(m=[],i=0,l=a.length;l>i;i++)b=a[i],m.push(c.emit("uploadprogress",b,f,b.upload.bytesSent));return m}}(this),w.onload=function(b){return function(d){var e;if(a[0].status!==c.CANCELED&&4===w.readyState){if(s=w.responseText,w.getResponseHeader("content-type")&&~w.getResponseHeader("content-type").indexOf("application/json"))try{s=JSON.parse(s)}catch(f){d=f,s="Invalid JSON response from server."}return t(),200<=(e=w.status)&&300>e?b._finished(a,s,d):g()}}}(this),w.onerror=function(){return function(){return a[0].status!==c.CANCELED?g():void 0}}(this),r=null!=(G=w.upload)?G:w,r.onprogress=t,j={Accept:"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"},this.options.headers&&d(j,this.options.headers);for(h in j)i=j[h],i&&w.setRequestHeader(h,i);if(f=new FormData,this.options.params){H=this.options.params;for(o in H)v=H[o],f.append(o,v)}for(y=0,C=a.length;C>y;y++)b=a[y],this.emit("sending",b,w,f);if(this.options.uploadMultiple&&this.emit("sendingmultiple",a,w,f),"FORM"===this.element.tagName)for(I=this.element.querySelectorAll("input, textarea, select, button"),z=0,D=I.length;D>z;z++)if(l=I[z],m=l.getAttribute("name"),n=l.getAttribute("type"),"SELECT"===l.tagName&&l.hasAttribute("multiple"))for(J=l.options,A=0,E=J.length;E>A;A++)q=J[A],q.selected&&f.append(m,q.value);else(!n||"checkbox"!==(K=n.toLowerCase())&&"radio"!==K||l.checked)&&f.append(m,l.value);for(k=F=0,L=a.length-1;L>=0?L>=F:F>=L;k=L>=0?++F:--F)f.append(this._getParamName(k),a[k],a[k].name);return this.submitRequest(w,f,a)},c.prototype.submitRequest=function(a,b){return a.send(b)},c.prototype._finished=function(a,b,d){var e,f,g;for(f=0,g=a.length;g>f;f++)e=a[f],e.status=c.SUCCESS,this.emit("success",e,b,d),this.emit("complete",e);return this.options.uploadMultiple&&(this.emit("successmultiple",a,b,d),this.emit("completemultiple",a)),this.options.autoProcessQueue?this.processQueue():void 0},c.prototype._errorProcessing=function(a,b,d){var e,f,g;for(f=0,g=a.length;g>f;f++)e=a[f],e.status=c.ERROR,this.emit("error",e,b,d),this.emit("complete",e);return this.options.uploadMultiple&&(this.emit("errormultiple",a,b,d),this.emit("completemultiple",a)),this.options.autoProcessQueue?this.processQueue():void 0},c}(b),a.version="4.2.0",a.options={},a.optionsForElement=function(b){return b.getAttribute("id")?a.options[c(b.getAttribute("id"))]:void 0},a.instances=[],a.forElement=function(a){if("string"==typeof a&&(a=document.querySelector(a)),null==(null!=a?a.dropzone:void 0))throw new Error("No Dropzone found for given element. This is probably because you're trying to access it before Dropzone had the time to initialize. Use the `init` option to setup any additional observers on your Dropzone.");return a.dropzone},a.autoDiscover=!0,a.discover=function(){var b,c,d,e,f,g;for(document.querySelectorAll?d=document.querySelectorAll(".dropzone"):(d=[],b=function(a){var b,c,e,f;for(f=[],c=0,e=a.length;e>c;c++)b=a[c],f.push(/(^| )dropzone($| )/.test(b.className)?d.push(b):void 0);return f},b(document.getElementsByTagName("div")),b(document.getElementsByTagName("form"))),g=[],e=0,f=d.length;f>e;e++)c=d[e],g.push(a.optionsForElement(c)!==!1?new a(c):void 0);return g},a.blacklistedBrowsers=[/opera.*(Windows Phone|Macintosh).*version\/12/i],a.isBrowserSupported=function(){var b,c,d,e,f;if(b=!0,window.File&&window.FileReader&&window.FileList&&window.Blob&&window.FormData&&document.querySelector)if("classList"in document.createElement("a"))for(f=a.blacklistedBrowsers,d=0,e=f.length;e>d;d++)c=f[d],c.test(navigator.userAgent)&&(b=!1);else b=!1;else b=!1;return b},h=function(a,b){var c,d,e,f;for(f=[],d=0,e=a.length;e>d;d++)c=a[d],c!==b&&f.push(c);return f},c=function(a){return a.replace(/[\-_](\w)/g,function(a){return a.charAt(1).toUpperCase()})},a.createElement=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.childNodes[0]},a.elementInside=function(a,b){if(a===b)return!0;for(;a=a.parentNode;)if(a===b)return!0;return!1},a.getElement=function(a,b){var c;if("string"==typeof a?c=document.querySelector(a):null!=a.nodeType&&(c=a),null==c)throw new Error("Invalid `"+b+"` option provided. Please provide a CSS selector or a plain HTML element.");return c},a.getElements=function(a,b){var c,d,e,f,g,h,i,j;if(a instanceof Array){e=[];try{for(f=0,h=a.length;h>f;f++)d=a[f],e.push(this.getElement(d,b))}catch(k){c=k,e=null}}else if("string"==typeof a)for(e=[],j=document.querySelectorAll(a),g=0,i=j.length;i>g;g++)d=j[g],e.push(d);else null!=a.nodeType&&(e=[a]);if(null==e||!e.length)throw new Error("Invalid `"+b+"` option provided. Please provide a CSS selector, a plain HTML element or a list of those.");return e},a.confirm=function(a,b,c){return window.confirm(a)?b():null!=c?c():void 0},a.isValidFile=function(a,b){var c,d,e,f,g;if(!b)return!0;for(b=b.split(","),d=a.type,c=d.replace(/\/.*$/,""),f=0,g=b.length;g>f;f++)if(e=b[f],e=e.trim(),"."===e.charAt(0)){if(-1!==a.name.toLowerCase().indexOf(e.toLowerCase(),a.name.length-e.length))return!0}else if(/\/\*$/.test(e)){if(c===e.replace(/\/.*$/,""))return!0}else if(d===e)return!0;return!1},"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery.fn.dropzone=function(b){return this.each(function(){return new a(this,b)})}),"undefined"!=typeof module&&null!==module?module.exports=a:window.Dropzone=a,a.ADDED="added",a.QUEUED="queued",a.ACCEPTED=a.QUEUED,a.UPLOADING="uploading",a.PROCESSING=a.UPLOADING,a.CANCELED="canceled",a.ERROR="error",a.SUCCESS="success",e=function(a){var b,c,d,e,f,g,h,i,j,k; +for(h=a.naturalWidth,g=a.naturalHeight,c=document.createElement("canvas"),c.width=1,c.height=g,d=c.getContext("2d"),d.drawImage(a,0,0),e=d.getImageData(0,0,1,g).data,k=0,f=g,i=g;i>k;)b=e[4*(i-1)+3],0===b?f=i:k=i,i=f+k>>1;return j=i/g,0===j?1:j},f=function(a,b,c,d,f,g,h,i,j,k){var l;return l=e(b),a.drawImage(b,c,d,f,g,h,i,j,k/l)},d=function(a,b){var c,d,e,f,g,h,i,j,k;if(e=!1,k=!0,d=a.document,j=d.documentElement,c=d.addEventListener?"addEventListener":"attachEvent",i=d.addEventListener?"removeEventListener":"detachEvent",h=d.addEventListener?"":"on",f=function(c){return"readystatechange"!==c.type||"complete"===d.readyState?(("load"===c.type?a:d)[i](h+c.type,f,!1),!e&&(e=!0)?b.call(a,c.type||c):void 0):void 0},g=function(){var a;try{j.doScroll("left")}catch(b){return a=b,void setTimeout(g,50)}return f("poll")},"complete"!==d.readyState){if(d.createEventObject&&j.doScroll){try{k=!a.frameElement}catch(l){}k&&g()}return d[c](h+"DOMContentLoaded",f,!1),d[c](h+"readystatechange",f,!1),a[c](h+"load",f,!1)}},a._autoDiscoverFunction=function(){return a.autoDiscover?a.discover():void 0},d(window,a._autoDiscoverFunction)}).call(this); diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js index 51fa01559..312a3e294 100644 --- a/web/js/fixmystreet.js +++ b/web/js/fixmystreet.js @@ -128,6 +128,12 @@ $(function(){ $('#form_name').addClass('required').removeClass('valid'); } ); + $('#facebook_sign_in').click(function(e){ + $('#form_email').removeClass(); + $('#form_rznvy').removeClass(); + $('#email').removeClass(); + }); + // Geolocation if (geo_position_js.init()) { var link = '<a href="#LINK" id="geolocate_link">… ' + translation_strings.geolocate + '</a>'; diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 3cd54bc23..cc4959b7b 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -46,6 +46,7 @@ function fixmystreet_update_pin(lonlat) { if (!$('#side-form-error').is(':visible')) { $('#side-form, #site-logo').show(); + window.scrollTo(0, 0); } } @@ -88,6 +89,7 @@ function fms_markers_list(pins, transform) { var marker = new OpenLayers.Feature.Vector(loc, { colour: pin[2], size: pin[5] || size, + faded: 0, id: pin[3], title: pin[4] || '' }); @@ -114,6 +116,49 @@ function fms_markers_resize() { fixmystreet.markers.redraw(); } +// `markers.redraw()` in fms_markers_highlight will trigger an +// `overFeature` event if the mouse cursor is still over the same +// marker on the map, which would then run fms_markers_highlight +// again, causing an infinite flicker while the cursor remains over +// the same marker. We really only want to redraw the markers when +// the cursor moves from one marker to another (ie: when there is an +// overFeature followed by an outFeature followed by an overFeature). +// Therefore, we keep track of the previous event in +// fixmystreet.latest_map_hover_event and only call fms_markers_highlight +// if we know the previous event was different to the current one. +// (See the `overFeature` and `outFeature` callbacks inside of +// fixmystreet.select_feature). + +function fms_markers_highlight(problem_id) { + for (var i = 0; i < fixmystreet.markers.features.length; i++) { + if (typeof problem_id == 'undefined') { + // There is no highlighted marker, so unfade this marker + fixmystreet.markers.features[i].attributes.faded = 0; + } else if (problem_id == fixmystreet.markers.features[i].attributes.id) { + // This is the highlighted marker, unfade it + fixmystreet.markers.features[i].attributes.faded = 0; + } else { + // This is not the hightlighted marker, fade it + fixmystreet.markers.features[i].attributes.faded = 1; + } + } + fixmystreet.markers.redraw(); +} + +function fms_sidebar_highlight(problem_id) { + if (typeof problem_id !== 'undefined') { + var $a = $('.item-list--reports a[href$="' + problem_id + '"]'); + $a.parent().addClass('hovered'); + } else { + $('.item-list--reports .hovered').removeClass('hovered'); + } +} + +function fms_marker_click(problem_id) { + var $a = $('.item-list--reports a[href$="' + problem_id + '"]'); + $a[0] && $a[0].click(); +} + function fms_categories_or_status_changed() { // If the category or status has changed we need to re-fetch map markers fixmystreet.markers.refresh({force: true}); @@ -197,6 +242,14 @@ function fixmystreet_onload() { popupYOffset: -10 } }); + pin_layer_style_map.addUniqueValueRules('default', 'faded', { + 0: { + graphicOpacity: 1 + }, + 1: { + graphicOpacity: 0.15 + } + }); var pin_layer_options = { rendererOptions: { yOrdering: true @@ -204,7 +257,7 @@ function fixmystreet_onload() { styleMap: pin_layer_style_map }; if (fixmystreet.page == 'around') { - fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.BBOX({ ratio: 1 }); + fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.FixMyStreet(); pin_layer_options.strategies = [ fixmystreet.bbox_strategy ]; pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({ url: '/ajax', @@ -221,32 +274,35 @@ function fixmystreet_onload() { var markers = fms_markers_list( fixmystreet.pins, true ); fixmystreet.markers.addFeatures( markers ); - function onPopupClose(evt) { - fixmystreet.select_feature.unselect(selectedFeature); - OpenLayers.Event.stop(evt); - } + if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') { - fixmystreet.select_feature = new OpenLayers.Control.SelectFeature( fixmystreet.markers ); - var selectedFeature; - fixmystreet.markers.events.register( 'featureunselected', fixmystreet.markers, function(evt) { - var feature = evt.feature, popup = feature.popup; - fixmystreet.map.removePopup(popup); - popup.destroy(); - feature.popup = null; - }); - fixmystreet.markers.events.register( 'featureselected', fixmystreet.markers, function(evt) { - var feature = evt.feature; - selectedFeature = feature; - var popupYOffset = feature.layer.styleMap.createSymbolizer(feature).popupYOffset || -40; - var popup = new OpenLayers.Popup.FramedCloud("popup", - feature.geometry.getBounds().getCenterLonLat(), - null, - feature.attributes.title + "<br><a href=/report/" + feature.attributes.id + ">" + translation_strings.more_details + "</a>", - { size: new OpenLayers.Size(0, 0), offset: new OpenLayers.Pixel(0, popupYOffset) }, - true, onPopupClose); - feature.popup = popup; - fixmystreet.map.addPopup(popup); - }); + fixmystreet.select_feature = new OpenLayers.Control.SelectFeature( + fixmystreet.markers, + { + hover: true, + // Override clickFeature so that we can use it even though + // hover is true. http://gis.stackexchange.com/a/155675 + clickFeature: function (feature) { + fms_marker_click(feature.attributes.id); + }, + overFeature: function (feature) { + if (fixmystreet.latest_map_hover_event != 'overFeature') { + document.getElementById('map').style.cursor = 'pointer'; + fms_markers_highlight(feature.attributes.id); + fms_sidebar_highlight(feature.attributes.id); + fixmystreet.latest_map_hover_event = 'overFeature'; + } + }, + outFeature: function (feature) { + if (fixmystreet.latest_map_hover_event != 'outFeature') { + document.getElementById('map').style.cursor = ''; + fms_markers_highlight(); + fms_sidebar_highlight(); + fixmystreet.latest_map_hover_event = 'outFeature'; + } + } + } + ); fixmystreet.map.addControl( fixmystreet.select_feature ); fixmystreet.select_feature.activate(); fixmystreet.map.events.register( 'zoomend', null, fms_markers_resize ); @@ -326,7 +382,7 @@ $(function(){ // Set specific map config - some other JS included in the // template should define this - set_map_config(); + set_map_config(); // Create the basics of the map fixmystreet.map = new OpenLayers.Map( @@ -433,6 +489,18 @@ $(function(){ } else { fixmystreet_onload(); } + + (function() { + var timeout; + $('.item-list--reports').on('mouseenter', '.item-list--reports__item', function(){ + var href = $('a', this).attr('href'); + var id = parseInt(href.replace(/^.*[/]([0-9]+)$/, '$1')); + clearTimeout(timeout); + fms_markers_highlight(id); + }).on('mouseleave', '.item-list--reports__item', function(){ + timeout = setTimeout(fms_markers_highlight, 50); + }); + })(); }); /* Overridding the buttonDown function of PanZoom so that it does @@ -520,6 +588,33 @@ OpenLayers.Control.PermalinkFMSz = OpenLayers.Class(OpenLayers.Control.Permalink } }); +OpenLayers.Strategy.FixMyStreet = OpenLayers.Class(OpenLayers.Strategy.BBOX, { + ratio: 1, + // The transform in Strategy.BBOX's getMapBounds could mean you end up with + // co-ordinates too precise, which could then cause the Strategy to think + // it needs to update when it doesn't. So create a new bounds out of the + // provided one to make sure it's passed through toFloat(). + getMapBounds: function() { + var bounds = OpenLayers.Strategy.BBOX.prototype.getMapBounds.apply(this); + if (bounds) { + bounds = new OpenLayers.Bounds(bounds.toArray()); + } + return bounds; + }, + // The above isn't enough, however, because Strategy.BBOX's getMapBounds + // and calculateBounds work out the bounds in different ways, the former by + // transforming the map's extent to the layer projection, the latter by + // adding or subtracting from the centre. As we have a ratio of 1, rounding + // errors can still occur. This override makes calculateBounds always equal + // getMapBounds (so no movement means no update). + calculateBounds: function(mapBounds) { + if (!mapBounds) { + mapBounds = this.getMapBounds(); + } + this.bounds = mapBounds; + } +}); + /* Pan data request handler */ // This class is used to get a JSON object from /ajax that contains // pins for the map and HTML for the sidebar. It does a fetch whenever the map @@ -562,7 +657,7 @@ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, { }); /* Click handler */ -OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { +OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, @@ -576,12 +671,12 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { {}, this.defaultHandlerOptions); OpenLayers.Control.prototype.initialize.apply( this, arguments - ); + ); this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger }, this.handlerOptions); - }, + }, trigger: function(e) { var cobrand = $('meta[name="cobrand"]').attr('content'); diff --git a/web/js/map-google-ol.js b/web/js/map-google-ol.js index 5a1aa3c57..9de479ce3 100644 --- a/web/js/map-google-ol.js +++ b/web/js/map-google-ol.js @@ -4,13 +4,13 @@ $(function(){ var $t = $(this), text = $t.text(); if (text == translation_strings.map_map) { $t.text(translation_strings.map_satellite); - fixmystreet.map.setBaseLayer(fixmystreet.map.layers[0]); + fixmystreet.map.setBaseLayer(fixmystreet.map.layers[1]); } else { $t.text(translation_strings.map_map); - fixmystreet.map.setBaseLayer(fixmystreet.map.layers[1]); + fixmystreet.map.setBaseLayer(fixmystreet.map.layers[0]); } }); - if (typeof fixmystreet_google_default !== 'undefined' && fixmystreet_google_default == 'satellite') { + if (typeof fixmystreet_google_default !== 'undefined' && fixmystreet_google_default == 'map') { $('#map_layer_toggle').click(); } }); @@ -34,8 +34,8 @@ function set_map_config(perm) { }; fixmystreet.layer_options = [ - {}, - { type: google.maps.MapTypeId.HYBRID } + { type: google.maps.MapTypeId.HYBRID }, + {} ]; } |
