From 2f56697bb76153c7f7555b7ea9fc2bb07de70645 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 30 Oct 2017 12:07:21 +0100 Subject: [PATCH] tabs interface for search forms is ready --- .../materio-search-api-search-block.tpl.php | 8 +- .../gui/materiobasetheme/css/styles.css | 50 +++++++-- .../themes/gui/materiobasetheme/js/script.js | 102 ++++++++++++------ .../gui/materiobasetheme/js/script.min.js | 10 +- .../gui/materiobasetheme/scss/styles.scss | 63 +++++++++-- 5 files changed, 175 insertions(+), 58 deletions(-) diff --git a/sites/all/modules/gui/materiobasemod/templates/materio-search-api-search-block.tpl.php b/sites/all/modules/gui/materiobasemod/templates/materio-search-api-search-block.tpl.php index 690c0a3d..82c94472 100755 --- a/sites/all/modules/gui/materiobasemod/templates/materio-search-api-search-block.tpl.php +++ b/sites/all/modules/gui/materiobasemod/templates/materio-search-api-search-block.tpl.php @@ -1,10 +1,10 @@
-
-

+
+

-
-

+
+

diff --git a/sites/all/themes/gui/materiobasetheme/css/styles.css b/sites/all/themes/gui/materiobasetheme/css/styles.css index a449f338..7a984eab 100644 --- a/sites/all/themes/gui/materiobasetheme/css/styles.css +++ b/sites/all/themes/gui/materiobasetheme/css/styles.css @@ -3812,7 +3812,8 @@ body.home-v2 #main { zoom: 1; *display: inline; margin: 0 0 0 10px; - padding: 3px 10px; + min-width: 400px; + padding: 5px 10px; background-color: #fff; border-radius: 3px; background-clip: padding-box; @@ -3824,14 +3825,45 @@ body.home-v2 #main { #tool-bar #block-materio-search-api-materio-search-api-search > .inner:active { transition: box-shadow 0s ease-out; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); } - #tool-bar #block-materio-search-api-materio-search-api-search > .inner > div { - padding-top: 0.5em; } - #tool-bar #block-materio-search-api-materio-search-api-search > .inner > div h4 { - margin: 0; - text-align: left; - font-size: 14px; } - #tool-bar #block-materio-search-api-materio-search-api-search > .inner > div:not(:first-of-type) { - margin-top: 0.5em; } + #tool-bar #block-materio-search-api-materio-search-api-search > .inner h4.form-title { + padding: 0.2em 0 0.1em 0.2em; + margin: 0.2em 0 0.1em 0.2em; + text-align: left; + font-size: 14px; } + html.no-js #tool-bar #block-materio-search-api-materio-search-api-search > .inner h4.form-title { + display: none; } + html.no-js #tool-bar #block-materio-search-api-materio-search-api-search > .inner.msa-advanced-search { + display: none; } + #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs { + text-align: left; + margin-bottom: 4px; } + #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs h4 { + display: moz-inline-stack; + display: inline-block; + vertical-align: top; + zoom: 1; + *display: inline; + font-size: 12px; + cursor: pointer; + border-radius: 5px 5px 0 0; + padding: 0.1em 0.5em; + transition: color 0.5s ease-in-out; } + #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs h4.active { + border: 1px solid #ccc; + border-bottom: 1px solid #FFF; + background-color: #fff; } + #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs h4:not(.active) { + color: #ccc; } + #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs h4:not(.active):hover { + color: inherit; } + #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs:after { + content: ""; + display: block; + background-color: #fff; + border-top: 1px solid #ccc; + margin-top: -3px; } + #tool-bar #block-materio-search-api-materio-search-api-search.tabed .msa-form-wrapper:not(.active) { + display: none; } #tool-bar #materio-search-api-search-form { text-align: right; display: moz-inline-stack; diff --git a/sites/all/themes/gui/materiobasetheme/js/script.js b/sites/all/themes/gui/materiobasetheme/js/script.js index d7010ffa..4aff1d57 100644 --- a/sites/all/themes/gui/materiobasetheme/js/script.js +++ b/sites/all/themes/gui/materiobasetheme/js/script.js @@ -52,6 +52,7 @@ _isMembershipForm = _$body.is('.page-node-11186'), //$('body').is('.page-node-11187') || , _isBreveMateriauNodePage = _$body.is('.node-type-breve') || _$body.is('.node-type-materiau'), // _isBreveMateriauNodePage = _themeSettings.page_callback == 'node_page_view' && (_themeSettings.node_type == 'materiau' || _themeSettings.node_type == 'breve'), + _hasDoubleSearchForm = $('#block-materio-search-api-materio-search-api-search').length, _resizeTimer, _max_480 = function(){ return (viewport().width < 479); }, _480_768 = function(){ return ( !_max_480() && _max_768() ); }, @@ -96,6 +97,9 @@ initKeyboardShortcuts(); initViewmodes(); + if(_hasDoubleSearchForm) + initDoubleSearchFormTabs(); + if(_isBreveMateriauNodePage) $.event.trigger({ type : 'resultschanged', container : '#content>.inner-content'}); @@ -1563,6 +1567,42 @@ return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; }; + /** + * Search Form + */ + function initDoubleSearchFormTabs() { + var $searchblock = $('#block-materio-search-api-materio-search-api-search'); + var $tabs = $('
') + .addClass('searchform-tabs') + .prependTo($searchblock.children('.inner')); + $('h4.form-title', $searchblock).each(function(index, el) { + $(el) + .attr('index', index) + .bind('click', function(e){ + var $this = $(this); + var index = $this.attr('index'); + // show the right tab + $('h4.form-title', $tabs).removeClass('active'); + $this.addClass('active'); + // show the right form + $('.msa-form-wrapper', $searchblock) + .removeClass('active') + .eq(index).addClass('active'); + // record cookie + createCookie('default-search-form', index); + }) + .appendTo($tabs); + }); + + // read from cookie what was the last search form visible + var defaultIndex = readCookie('default-search-form') || 0; + // show default tab + $('h4.form-title', $tabs).eq(defaultIndex).addClass('active'); + $('.msa-form-wrapper', $searchblock).eq(defaultIndex).addClass('active'); + + $searchblock.addClass('tabed'); + }; + /** * Forms */ @@ -1669,39 +1709,39 @@ /** - * Attach collapse behavior to the feedback form block. - */ - Drupal.behaviors.feedbackForm = { - attach: function (context) { - $('#block-feedback-form', context).once('feedback', function () { - var $block = $(this); - $block.find('span.feedback-link') - .prepend('feedback ') - .css('cursor', 'pointer') - .toggle(function () { - Drupal.feedbackFormToggle($block, false); - }, - function() { - Drupal.feedbackFormToggle($block, true); - } - ); - $block.find('form').hide(); - $block.show(); - }); - } - }; - + * Attach collapse behavior to the feedback form block. + */ + // Drupal.behaviors.feedbackForm = { + // attach: function (context) { + // $('#block-feedback-form', context).once('feedback', function () { + // var $block = $(this); + // $block.find('span.feedback-link') + // .prepend('feedback ') + // .css('cursor', 'pointer') + // .toggle(function () { + // Drupal.feedbackFormToggle($block, false); + // }, + // function() { + // Drupal.feedbackFormToggle($block, true); + // } + // ); + // $block.find('form').hide(); + // $block.show(); + // }); + // } + // }; + // /** * Collapse or uncollapse the feedback form block. */ - Drupal.feedbackFormToggle = function ($block, enable) { - $block.find('form').slideToggle('medium'); - if (enable) { - $('#feedback-form-toggle', $block).html('feedback'); - } - else { - $('#feedback-form-toggle', $block).html('feedback (close)'); - } - }; + // Drupal.feedbackFormToggle = function ($block, enable) { + // $block.find('form').slideToggle('medium'); + // if (enable) { + // $('#feedback-form-toggle', $block).html('feedback'); + // } + // else { + // $('#feedback-form-toggle', $block).html('feedback (close)'); + // } + // }; })(jQuery); diff --git a/sites/all/themes/gui/materiobasetheme/js/script.min.js b/sites/all/themes/gui/materiobasetheme/js/script.min.js index 319c83aa..475d681f 100644 --- a/sites/all/themes/gui/materiobasetheme/js/script.min.js +++ b/sites/all/themes/gui/materiobasetheme/js/script.min.js @@ -1,9 +1,10 @@ (function($){Drupal.behaviors.init_theme={};Drupal.behaviors.init_theme.attach=function(context){$('#messages-and-help > div.messages:not(.processed)').addClass('processed').each(function(){if($('a',this).size()||$(this).is('.error')||$(this).is('.warning')||$(this).text().length>100){$(this).prepend("X");$('span.close',this).click(function(){$(this).parent().slideUp('fast');});} -else{$(this).animate({opacity:1},5000,'linear',function(){$(this).slideUp('fast');});}});};Drupal.behaviors.materio={};Drupal.behaviors.materio.attach=function(context){};MaterioBaseTheme=function(){var _settings=Drupal.settings,_themeSettings=_settings.materiobasetheme,_strings=_themeSettings.strings,_History=window.History,_this=this,_$body=$('body'),_$content=$('#content'),_jsp,_$tooltip=$('
').appendTo('body'),_$homeUtilities,_$homeBlockDidactique,_hoverHomeDidactique=false,_homeTimeInterval,_touch=$('html').is('.touch'),_statePushed=false,position={x:null,y:null},translate3d_content=0,_isLoggedIn=!_$body.is('.not-logged-in'),_isFrontNotLogged=_$body.is('.front.not-logged-in'),_isFrontHomeV2=_$body.is('.home-v2'),_skrollr,_isMembershipForm=_$body.is('.page-node-11186'),_isBreveMateriauNodePage=_$body.is('.node-type-breve')||_$body.is('.node-type-materiau'),_resizeTimer,_max_480=function(){return(viewport().width<479);},_480_768=function(){return(!_max_480()&&_max_768());},_max_768=function(){return(viewport().width<767);},_768_980=function(){return(!_max_768()&&_max_980());},_max_980=function(){return(viewport().width<979);},_980_1200=function(){return(!_max_980()&&_max_1200());},_max_1200=function(){return(viewport().width<1199);},_previewIsOpen=false,_viewmodes={bookmark:50,cardsmall:100,cardmedium:210,cardbig:425,cardfull:850};var v1,v2,v3,v4,v5;function init(){trace('init MaterioBaseTheme');checkIE();initHistoryNav();if(_isFrontHomeV2) +else{$(this).animate({opacity:1},5000,'linear',function(){$(this).slideUp('fast');});}});};Drupal.behaviors.materio={};Drupal.behaviors.materio.attach=function(context){};MaterioBaseTheme=function(){var _settings=Drupal.settings,_themeSettings=_settings.materiobasetheme,_strings=_themeSettings.strings,_History=window.History,_this=this,_$body=$('body'),_$content=$('#content'),_jsp,_$tooltip=$('
').appendTo('body'),_$homeUtilities,_$homeBlockDidactique,_hoverHomeDidactique=false,_homeTimeInterval,_touch=$('html').is('.touch'),_statePushed=false,position={x:null,y:null},translate3d_content=0,_isLoggedIn=!_$body.is('.not-logged-in'),_isFrontNotLogged=_$body.is('.front.not-logged-in'),_isFrontHomeV2=_$body.is('.home-v2'),_skrollr,_isMembershipForm=_$body.is('.page-node-11186'),_isBreveMateriauNodePage=_$body.is('.node-type-breve')||_$body.is('.node-type-materiau'),_hasDoubleSearchForm=$('#block-materio-search-api-materio-search-api-search').length,_resizeTimer,_max_480=function(){return(viewport().width<479);},_480_768=function(){return(!_max_480()&&_max_768());},_max_768=function(){return(viewport().width<767);},_768_980=function(){return(!_max_768()&&_max_980());},_max_980=function(){return(viewport().width<979);},_980_1200=function(){return(!_max_980()&&_max_1200());},_max_1200=function(){return(viewport().width<1199);},_previewIsOpen=false,_viewmodes={bookmark:50,cardsmall:100,cardmedium:210,cardbig:425,cardfull:850};var v1,v2,v3,v4,v5;function init(){trace('init MaterioBaseTheme');checkIE();initHistoryNav();if(_isFrontHomeV2) initHomeV2();if(_isMembershipForm) initMembershipForm();initForms();if(!_isFrontHomeV2) -initLayout();initInfinitScroller();initEvents();initKeyboardShortcuts();initViewmodes();if(_isBreveMateriauNodePage) +initLayout();initInfinitScroller();initEvents();initKeyboardShortcuts();initViewmodes();if(_hasDoubleSearchForm) +initDoubleSearchFormTabs();if(_isBreveMateriauNodePage) $.event.trigger({type:'resultschanged',container:'#content>.inner-content'});setTimeout(function(){$.event.trigger({type:'theme-ready'});},100);};function checkIE(){if($('.oldie body').size()&&!readCookie('oldie_checked')){setTimeout(function(){createCookie('oldie_checked',1);alert('Afin de profiter pleinement des fonctionalités de materio.com, nous vous invitons a mettre a jour votre navigateur dans ça denière version. Celui ci n\'étant pas compatible avec les technologie employer par materio.com, vous risquer de rencontrer des difficulter de navigation.');},4000);}};function initHistoryNav(){trace("initHistoryNav _History",_History);var state=_History.getState();_History.Adapter.bind(window,'statechange',onHistoryStateChange);$(document).bind('new-history-page',onNewHistoryPage);};function onNewHistoryPage(event){trace('theme :: onNewHistoryPage',event);var title=event.title.replace(/<(?:.|\n)*?>/gm,'')+' | '+_strings.site_name;_statePushed=true;_History.pushState({content:event.content,pagetitle:event.title},title,event.path);};function onHistoryStateChange(event){trace('theme :: onHistoryStateChange',event);var state=_History.getState();_History.log('statechange:',state.data,state.title,state.url);$.event.trigger({type:'record-stat',path:state.url});$('input[name=location]','#feedback-form').attr('value',state.url);$.event.trigger({type:'materio-page-title-refresh-block',title:state.data.pagetitle});if(!_statePushed){_statePushed=false;$('.inner-content',_$content).html(state.data.content);$.event.trigger('history-state-change');}};function initHome(){$('img.lazy','#block-materio-didactique-materio-didactique-home').each(function(){var $img=$(this);$img.attr('src',$img.attr('data-original'));});if(_max_768()){initHomeDidactiqueMobile();}else{initHomeDidactiqueDesktop();}};function initHomeDidactiqueMobile(){_$homeBlockDidactique=$('#block-materio-didactique-materio-didactique-home');$('.node-didactique',_$homeBlockDidactique).find('.field-name-title-field').bind('click',clickOnHomeDidactiqueTitle);};function clickOnHomeDidactiqueTitle(e){var $node=$(this).parent('.node-didactique');if($node.is('.opened')){$node.removeClass('opened');}else{$('.node-didactique',_$homeBlockDidactique).removeClass('opened');$node.addClass('opened');$('html,body').animate({scrollTop:$node.offset().top-$('#header').h()});}};function initHomeDidactiqueDesktop(){_$homeUtilities=$('#utilities');_$homeBlockDidactique=$('#block-materio-didactique-materio-didactique-home').append('
').append('
').bind('mouseenter',function(event){_hoverHomeDidactique=true;}).bind('mouseleave',function(event){_hoverHomeDidactique=false;});$('.node-didactique',_$homeBlockDidactique).each(function(index){if(index){$(this).addClass('op-hidden');}else{$(this).addClass('op-visible');} $('.field-name-title-field',this).clone().addClass(index?'':'active').click(function(event){$(this).addClass('active').siblings().removeClass('active');_$homeBlockDidactique.find('.node-didactique').removeClass('op-visible').addClass('op-hidden').eq(index).removeClass('op-hidden').addClass('op-visible');}).appendTo($('.tabs',_$homeBlockDidactique));}).appendTo($('.slides',_$homeBlockDidactique));if(!_touch){$(document).bind('scroll',function(event){if($(window).scrollTop()==0){if(_$homeUtilities.is('.closed')){_$homeUtilities.removeClass('closed');launchHomeDidactiqueInterval();initLayout();}}else{if(!_$homeUtilities.is('.closed')){_$homeUtilities.addClass('closed');clearInterval(_homeTimeInterval);initLayout();}}});} $(document).bind('cbox_complete',function(){clearInterval(_homeTimeInterval);}).bind('cbox_closed',function(){launchHomeDidactiqueInterval();});$('.side.oops a').click(function(event){event.preventDefault();window.location.href=$(this).attr('href');return false;});};function launchHomeDidactiqueInterval(){_homeTimeInterval=setInterval(function(){if(!_hoverHomeDidactique){var $next=$('.tabs .active',_$homeBlockDidactique).next();if(!$next.length) @@ -34,11 +35,10 @@ $('#webform-component-column-left--membership-options').change(function(event){i $('div.form-item.selected',this).removeClass('selected');$('input[type="radio"]:checked',this).parents('div.form-item').addClass('selected');}).trigger('change');};$.fn.h=function(){if(this.css('height')==undefined) return 0;return parseInt(this.css('height'))+parseInt(this.css('padding-top'))+parseInt(this.css('padding-bottom'));};$.fn.w=function(){if(this.css('width')==undefined) return 0;return parseInt(this.css('width'))+parseInt(this.css('padding-left'))+parseInt(this.css('padding-right'));};function getDocHeight(){var D=document;return Math.max(Math.max(D.body.scrollHeight,D.documentElement.scrollHeight),Math.max(D.body.offsetHeight,D.documentElement.offsetHeight),Math.max(D.body.clientHeight,D.documentElement.clientHeight));};function viewport(){var e=window,a='inner';if(!('innerWidth'in window)){a='client';e=document.documentElement||document.body;} -return{width:e[a+'Width'],height:e[a+'Height']};};function initForms(){$('#edit-searchfield:not(.processed)').bind('focus',function(event){var $this=$(this);if($this.val()==$this.attr('default')) +return{width:e[a+'Width'],height:e[a+'Height']};};function initDoubleSearchFormTabs(){var $searchblock=$('#block-materio-search-api-materio-search-api-search');var $tabs=$('
').addClass('searchform-tabs').prependTo($searchblock.children('.inner'));$('h4.form-title',$searchblock).each(function(index,el){$(el).attr('index',index).bind('click',function(e){var $this=$(this);var index=$this.attr('index');$('h4.form-title',$tabs).removeClass('active');$this.addClass('active');$('.msa-form-wrapper',$searchblock).removeClass('active').eq(index).addClass('active');createCookie('default-search-form',index);}).appendTo($tabs);});var defaultIndex=readCookie('default-search-form')||0;$('h4.form-title',$tabs).eq(defaultIndex).addClass('active');$('.msa-form-wrapper',$searchblock).eq(defaultIndex).addClass('active');$searchblock.addClass('tabed');};function initForms(){$('#edit-searchfield:not(.processed)').bind('focus',function(event){var $this=$(this);if($this.val()==$this.attr('default')) $this.val('');}).bind('focusout',function(event){var $this=$(this);if($this.val()=="") $this.val($this.attr('default'));}).addClass('processed');hideLabelsFromRegisterForm();};function hideLabelsFromRegisterForm(){var $this,id,label,description;$('input.form-text','#block-user-login, #block-materio-user-user-register, .pane-materio-user-user-register, #block-materio-user-user-createaccount').each(function(i){$this=$(this);id=$this.attr('id');label=$('label[for='+id+']').hide().text();description=$this.parent().find('.description').hide().text();if($this.attr('placeholder')=='') $this.attr('placeholder',label);$this.attr('title',description);});};function onAjaxRegisterBlockLoaded(event){hideLabelsFromRegisterForm();};function createCookie(name,value,days){if(days){var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires="; expires="+date.toGMTString();} else var expires="";document.cookie=name+"="+value+expires+"; path=/";};function readCookie(name){var nameEQ=name+"=";var ca=document.cookie.split(';');for(var i=0;ifeedback ').css('cursor','pointer').toggle(function(){Drupal.feedbackFormToggle($block,false);},function(){Drupal.feedbackFormToggle($block,true);});$block.find('form').hide();$block.show();});}};Drupal.feedbackFormToggle=function($block,enable){$block.find('form').slideToggle('medium');if(enable){$('#feedback-form-toggle',$block).html('feedback');} -else{$('#feedback-form-toggle',$block).html('feedback (close)');}};})(jQuery); \ No newline at end of file +$('html,body').animate({scrollTop:$e.offset().top-$(window).height()*0.5+$e.height()*0.5},500);};init();};$(document).ready(function(){var materiobasetheme=new MaterioBaseTheme();});})(jQuery); \ No newline at end of file diff --git a/sites/all/themes/gui/materiobasetheme/scss/styles.scss b/sites/all/themes/gui/materiobasetheme/scss/styles.scss index 16bbe3e2..dc05d5a2 100644 --- a/sites/all/themes/gui/materiobasetheme/scss/styles.scss +++ b/sites/all/themes/gui/materiobasetheme/scss/styles.scss @@ -1042,21 +1042,66 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom; float:right; >.inner{ @include inlineblock(); margin:0 0 0 10px; - padding: 3px 10px; background-color:#fff; @include rounded(3px); + min-width: 400px; + padding: 5px 10px; background-color:#fff; @include rounded(3px); @include shadowBtn(); text-align: right; - >div{ + h4.form-title{ + padding: 0.2em 0 0.1em 0.2em; + margin: 0.2em 0 0.1em 0.2em; + text-align: left; + @include fs14; + html.no-js &{ + display:none; + } + } + &.msa-advanced-search{ + // border-top: 1px solid #ccc; + html.no-js &{ + display:none; + } + } + + } + &.tabed{ + .searchform-tabs{ + text-align: left; + // border-bottom: 1px solid #ccc; + margin-bottom: 4px; h4{ - margin:0; - text-align: left; - @include fs14; + @include inlineblock(); + @include fs12; + cursor: pointer; + border-radius: 5px 5px 0 0; + padding: 0.1em 0.5em; + // margin:0 4px; + transition: color 0.5s ease-in-out; + &.active{ + border: 1px solid #ccc; + border-bottom: 1px solid #FFF; + background-color: #fff; + } + &:not(.active){ + color: #ccc; + // border-bottom: 1px solid #ccc; + &:hover{ + color: inherit; + } + } } - padding-top: 0.5em; - &:not(:first-of-type){ - margin-top: 0.5em; - // border-top: 1px solid #ccc; + &:after{ + content: ""; + display: block; + // z-index: 5; + // height:3px; + background-color: #fff; + border-top: 1px solid #ccc; + margin-top: -3px; } } + .msa-form-wrapper:not(.active){ + display: none; + } } }