From 5bd7c60edb31694b68df765a4024141b016954e4 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Wed, 20 Jul 2016 11:45:27 +0200 Subject: [PATCH] Search form implementation --- app/static/src/js/index.js | 8 +++ app/static/src/js/modules/close-button.js | 35 +++++++++ app/static/src/js/modules/close-escape.js | 28 ++++++++ app/static/src/js/modules/open-button.js | 35 +++++++++ app/static/src/js/modules/search.js | 35 +++++++++ app/static/src/sass/modules/_all.scss | 1 + app/static/src/sass/modules/_search.scss | 88 +++++++++++++++++++++++ app/templates/includes/search_form.html | 39 +++++----- app/templates/pages/menus/header.html | 2 +- 9 files changed, 249 insertions(+), 22 deletions(-) create mode 100644 app/static/src/js/modules/close-button.js create mode 100644 app/static/src/js/modules/close-escape.js create mode 100644 app/static/src/js/modules/open-button.js create mode 100644 app/static/src/js/modules/search.js create mode 100644 app/static/src/sass/modules/_search.scss diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js index a55e5d1b..9fa74ec3 100644 --- a/app/static/src/js/index.js +++ b/app/static/src/js/index.js @@ -2,8 +2,16 @@ // Require all the modules // var LangSelector = require('./modules/lang-selector'); +var OpenButton = require('./modules/open-button'); +var CloseButton = require('./modules/close-button'); +var CloseEscape = require('./modules/close-escape'); +var Search = require('./modules/search'); // // Init all the modules // window[LangSelector] = new LangSelector(); +window[OpenButton] = new OpenButton(); +window[CloseButton] = new CloseButton(); +window[CloseEscape] = new CloseEscape(); +window[Search] = new Search(); diff --git a/app/static/src/js/modules/close-button.js b/app/static/src/js/modules/close-button.js new file mode 100644 index 00000000..c4e81dfb --- /dev/null +++ b/app/static/src/js/modules/close-button.js @@ -0,0 +1,35 @@ +var OpenButton = function() { + + // + // Init + // + this.init(); + +}; + +OpenButton.prototype.init = function() { + + var that = this; + + $('[data-close-button]').click(that.open); + +}; + +OpenButton.prototype.open = function(e) { + + e.preventDefault(); + + var target = $(this).attr('data-close-button'), + $target = $('[data-close-button-target="'+target+'"]'); + + if($target.length > 0) { + + $target.removeClass('open'); + + } + + return false; + +} + +module.exports = OpenButton; diff --git a/app/static/src/js/modules/close-escape.js b/app/static/src/js/modules/close-escape.js new file mode 100644 index 00000000..b9068893 --- /dev/null +++ b/app/static/src/js/modules/close-escape.js @@ -0,0 +1,28 @@ +var CloseEscape = function() { + + this.$elements = $('[data-close-escape]'); + + // + // Init + // + this.init(); + +}; + +CloseEscape.prototype.init = function() { + + var that = this; + + $(document).keyup(function(e) { + + if(e.keyCode === 27) { + + that.$elements.removeClass('open'); + + } + + }); + +}; + +module.exports = CloseEscape; diff --git a/app/static/src/js/modules/open-button.js b/app/static/src/js/modules/open-button.js new file mode 100644 index 00000000..5a3f49eb --- /dev/null +++ b/app/static/src/js/modules/open-button.js @@ -0,0 +1,35 @@ +var CloseButton = function() { + + // + // Init + // + this.init(); + +}; + +CloseButton.prototype.init = function() { + + var that = this; + + $('[data-open-button]').click(that.close); + +}; + +CloseButton.prototype.close = function(e) { + + e.preventDefault(); + + var target = $(this).attr('data-open-button'), + $target = $('[data-open-button-target="'+target+'"]'); + + if($target.length > 0) { + + $target.addClass('open'); + + } + + return false; + +} + +module.exports = CloseButton; diff --git a/app/static/src/js/modules/search.js b/app/static/src/js/modules/search.js new file mode 100644 index 00000000..644fffb2 --- /dev/null +++ b/app/static/src/js/modules/search.js @@ -0,0 +1,35 @@ +var Search = function() { + + this.$element = $('#searchBtn'); + this.$search = $('#search'); + this.$searchInput = this.$search.find('input[type="text"]'); + + // + // Init + // + this.init(); + +}; + +Search.prototype.init = function() { + + var that = this; + + that.$element = $('#searchBtn'); + that.$search = $('#search'); + + + that.$element.click(function(e) { + + e.preventDefault(); + + that.$searchInput.focus(); + + return false; + + }); + + +}; + +module.exports = Search; diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss index d52ffebd..be9c2c55 100755 --- a/app/static/src/sass/modules/_all.scss +++ b/app/static/src/sass/modules/_all.scss @@ -4,6 +4,7 @@ @import "navs/nav-footer"; @import 'breadcrumb'; +@import 'search'; @import 'lang-switcher'; @import 'dashed'; @import 'dotted'; diff --git a/app/static/src/sass/modules/_search.scss b/app/static/src/sass/modules/_search.scss new file mode 100644 index 00000000..9f1578ea --- /dev/null +++ b/app/static/src/sass/modules/_search.scss @@ -0,0 +1,88 @@ +$module: ".search"; + +#{$module} { + + position: fixed; + top: 0; + left: 0; + width: 100%; + + background: rgba(255,255,255, .95); + + display: block; + height: 0; + opacity: 0; + overflow: hidden; + + @include transition(opacity .5s ease-in-out, height 0s .5s); + + &.open { + + height: 100%; + display: table; + opacity: 1; + @include transition(opacity .5s ease-in-out, height 0s); + + } + + &__close { + + position: absolute; + top: 1rem; + right: 1rem; + z-index: 2; + + } + + &__container { + + display: table; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + + } + + &__content { + + display: table-cell; + vertical-align: middle; + text-align: center; + + } + + input[type="text"] { + + border: 0; + outline: none; + background: none; + border-bottom: 1px solid $color-black; + + padding: 1rem 3rem 1rem 0; + width: 100%; + + @include font-size(xxl); + @include typeface(serif); + font-weight: weight(regular); + + } + + button[type="submit"] { + + position: absolute; + right: 1rem; + top: 1rem; + + border: 0; + background: none; + outline: 0; + cursor: pointer; + + @include font-size(xxl); + + } + +} diff --git a/app/templates/includes/search_form.html b/app/templates/includes/search_form.html index 37b0011e..97960fe0 100644 --- a/app/templates/includes/search_form.html +++ b/app/templates/includes/search_form.html @@ -1,24 +1,21 @@ {% load mezzanine_tags i18n %} -
-
- - {% if search_model_choices %} - {% if search_model_choices|length == 1 %} - - {% else %} -
- + diff --git a/app/templates/pages/menus/header.html b/app/templates/pages/menus/header.html index 64861462..db5ad011 100644 --- a/app/templates/pages/menus/header.html +++ b/app/templates/pages/menus/header.html @@ -30,7 +30,7 @@
  • - +
    • {% endif %} -- 2.39.5