Mois : août 2016

[RBS Change 3.x] Effectuer une boucle tal:repeat qui rapporte l’ensemble des informations contenues dans une fonction

31/08/2016 / admin

\\change30\alainflou\modules\project\persistentdocument\frame.class.php

/**
 * @return string[]
 */
public function getPublishedDeclinationColorsCode($shapetype = null, $shop = null)
{
    return project_FrameService::getInstance()->getPublishedDeclinationColorsCode($this, $shapetype, $shop);
}

/**

* @return string[]

public function getPublishedDeclinationColorsCode($shapetype = null, $shop = null)

{

return project_FrameService::getInstance()->getPublishedDeclinationColorsCode($this, $shapetype, $shop);

}

\\change30\alainflou\themes\responsive\modules\project\templates\Project-Block-ProductItem-List.all.all.html

<p>${php: var_dump(product.getDeclinedproduct().getPublishedDeclinationColorsCode())}</p>

1	<p>${php: var_dump(product.getDeclinedproduct().getPublishedDeclinationColorsCode())}</p>

<ul class="product-declination-colors">
    <tal:block tal:repeat="colorID product/getDeclinedproduct/getPublishedDeclinationColorsCode">
        <li>
            <i class="icon color-${colorID}" />
        </li>
    </tal:block>
</ul>

<tal:block tal:repeat="colorID product/getDeclinedproduct/getPublishedDeclinationColorsCode">

<li>

</li>

</tal:block>

</ul>

Récupérer une propriété contenue dans un objet

Dans Change, chaque module a un dossier persistentdocument/. Ce dossier contient un ou plusieurs fichiers XML listant un ensemble de propriétés contenues dans un objet.

Par exemple, dans /modules/parking/persistentdocument/parking.xml, sont listées toutes les propriétés de l’objet parking :

<?xml version="1.0" encoding="utf-8"?>
<document xmlns="http://www.rbs.fr/schema/change-document/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.rbs.fr/schema/change-document/1.0 http://www.rbschange.fr/static/schema/change-document/3.5.xsd" model-version="3.5" has-url="false" use-rewrite-url="false">
  <properties>
    <add name="code" type="String" min-occurs="1"/>
    <add name="nom" type="String"/>
    <add name="picto" type="modules_media/media"/>
    <add name="libelle" type="String" localized="true"/>
    <add name="ferme" type="Boolean"/>
    <add name="message" type="String" localized="true" db-size="100"/>
    <add name="devise" type="modules_list/item" min-occurs="0" max-occurs="1" from-list="modules_parking/devise"/>
    <add name="pourcentagevert" type="Integer" min-occurs="1" default-value="20"/>
    <add name="pourcentageorange" type="Integer" min-occurs="1" default-value="80"/>
    <add name="duree" type="Integer">
      <constraints>min:-1</constraints>
    </add>
    <add name="handicape" type="Integer"/>
    <add name="occupation" type="Integer"/>
    <add name="maximum" type="Integer"/>
    <add name="mode" type="Integer"/>
    <add name="libre" type="Integer"/>
    <add name="etat" type="Integer"/>
    <add name="display" type="Integer" default-value="0" from-list="modules_parking/parkingdisplay" localized="true"/>
  </properties>
  <statuses default="PUBLICATED"/>
  <serializedproperties>
	</serializedproperties>
</document>

<?xml version="1.0" encoding="utf-8"?>

</add>

</properties>

</serializedproperties>

</document>

Si, dans mon template de bloc, je souhaite récupérer l’information de nom de l’objet parking, je procède comme suit :

<tal:block tal:repeat="parking parkings">
  <p>${parking/getNom}</p>
</tal:block>

<tal:block tal:repeat="parking parkings">

<p>${parking/getNom}</p>

</tal:block>

[jQuery] Vérifier si au moins une case à cocher ou un bouton radio est coché

31/08/2016 / admin

Source : CHECK IF ANY CHECKBOXES ARE SELECTED IN JQUERY

function checkChecked(formname) {
    var anyBoxesChecked = false;
    $('#' + formname + ' input[type="checkbox"]').each(function() {
        if ($(this).is(":checked")) {
            anyBoxesChecked = true;
        }
    });
 
    if (anyBoxesChecked == false) {
      //Do something
    } 
}

function checkChecked(formname) {

var anyBoxesChecked = false;

$('#' + formname + ' input[type="checkbox"]').each(function() {

if ($(this).is(":checked")) {

anyBoxesChecked = true;

}

});

if (anyBoxesChecked == false) {

//Do something

}

Cas un peu plus complexe :

// Vérifier qu'au moins une case à cocher est active dans chaque catégorie de filtres
// et afficher un témoin en fonction
function checkIfAnyBoxIsChecked(){
  var anyBoxIsChecked = false;
  $('ul.Filters-facets__list').each(function(){
    if ($(this).find('input[type="checkbox"]').is(':checked')) {
      anyBoxIsChecked = true;
      $(this).closest('.facet-nav-item').addClass('has-active-facet');
    }
  });
  if (anyBoxIsChecked == false) {}
}

checkIfAnyBoxIsChecked();

// Vérifier qu'au moins une case à cocher est active dans chaque catégorie de filtres

// et afficher un témoin en fonction

function checkIfAnyBoxIsChecked(){

var anyBoxIsChecked = false;

$('ul.Filters-facets__list').each(function(){

if ($(this).find('input[type="checkbox"]').is(':checked')) {

anyBoxIsChecked = true;

$(this).closest('.facet-nav-item').addClass('has-active-facet');

}

});

if (anyBoxIsChecked == false) {}

}

checkIfAnyBoxIsChecked();

Codes HTML et SASS purement indicatifs (ne pas copier/coller en l’état)

<li class="facet-nav-item">
    <a class="link level0 is-active" href="#">
        Marques	<i class="active-facet-indicator"></i>
    </a>
    <ul class="Filters-facets__list">
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
    </ul>
</li>

Marques <i class="active-facet-indicator"></i>

</a>

</ul>

</li>

.facet-nav{  
    &-item{
        .active-facet-indicator{
            display: none;
        }
        &.has-active-facet{
            .active-facet-indicator{
                display: inline-block;
                content: '';
                width: 10px;
                height: 10px;
                margin-left: 8px;
                background-color: $corporate-color-one;
                border-radius: 50%;
            }
        }        
    }
}

.facet-nav{

&-item{

.active-facet-indicator{

display: none;

}

&.has-active-facet{

.active-facet-indicator{

display: inline-block;

content: '';

width: 10px;

height: 10px;

margin-left: 8px;

background-color: $corporate-color-one;

border-radius: 50%;

}

[CSS] Aligner un pseudo élément à droite d’un conteneur et le centrer verticalement avec Translate

30/08/2016 / admin

Source : Align a pseudo element to the right and vertical center.

.holder{
    width: 100%;
    background: tomato;
    height: 180px;
    line-height: 180px;
    position: relative;
}

.holder::after{
    content: "";
    background: blue;
    width:30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.holder{

width: 100%;

background: tomato;

height: 180px;

line-height: 180px;

position: relative;

}

.holder::after{

content: "";

background: blue;

width:30px;

height: 30px;

position: absolute;

right: 0;

top: 50%;

transform: translateY(-50%);

}

<div class="holder">
    Section 1
</div>

Section 1

</div>

[jQuery] Empêcher un événement (un click) de s’exécuter à plusieurs reprises avec les méthodes On et Off

29/08/2016 / admin

Source : Prevent jQuery events from firing multiple times, ou ma demo qui fonctionne sur jsFiddle.

Problème : ma demo qui ne fonctionne pas sur jsFiddle. J’attribue un événement Click sur un élément (dans ma demo, le lien « Lorem ipsum » par exemple). Lorsque je clique une première fois sur cet élément, l’événement Click se produit une fois. Lorsque je modifie la largeur de la fenêtre (passage à une autre vue) et que je clique une seconde fois sur ce même élément, l’événement Click se produit 2 fois, et ainsi de suite …

Solution :

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    }); 
});

$(document).on('pagebeforeshow', '#index', function(){

$(document).off('click', '#test-button').on('click', '#test-button',function(e) {

alert('Button click');

});

[Ubuntu] Modifier le hostname après installation

29/08/2016 / admin

Source : Ubuntu-fr – [résolu] comment modifier le « hostname » après installation.

Résumé de la problématique : durant la phase d’installation, il est demandé de donner un nom à la machine.
J’ai fait une conf au petits oignons destinée aux PC de l’école, qui sont tous identiques (un héritage de 8 « vieux » PC provenant d’une administration).
Je pense donc faire un clonage du Disque Dur pour préparer d’un coup les 7 autres machines. Seulement, j’amerais leur donner un nom différent (ce qui sera donc la seule différence).
COMMENT FAIRE ?

On a une machine nommée XXXXX qu’on veut nommer YYYY. il faut faire :

$ sudo hostname YYYY

1	$ sudo hostname YYYY

puis modifier /etc/hostname :

$ sudo vim /etc/hosts

1	$ sudo vim /etc/hosts

Avant :

127.0.0.1 localhost.localdomain localhost XXXXX
# The following lines are desirable for IPv6 capable hosts
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
ff02::3 ip6-allhosts

127.0.0.1 localhost.localdomain localhost XXXXX

# The following lines are desirable for IPv6 capable hosts

fe00::0 ip6-localnet

ff00::0 ip6-mcastprefix

ff02::1 ip6-allnodes

ff02::2 ip6-allrouters

ff02::3 ip6-allhosts

Après :

127.0.0.1 localhost.localdomain localhost YYYY
# The following lines are desirable for IPv6 capable hosts
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
ff02::3 ip6-allhosts

127.0.0.1 localhost.localdomain localhost YYYY

# The following lines are desirable for IPv6 capable hosts

fe00::0 ip6-localnet

ff00::0 ip6-mcastprefix

ff02::1 ip6-allnodes

ff02::2 ip6-allrouters

ff02::3 ip6-allhosts

puis le fichier /etc/hostname :

$ sudo gedit /etc/hostname

1	$ sudo gedit /etc/hostname

Avant :

XXXXX

XXXXX

Après :

XXXX

XXXX

[CSS] Une largeur fluide pour le widget Comments de Facebook

24/08/2016 / admin

Source : How to make Facebook comments widget a fluid width?.

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

1	.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

[RBS Change 3.x] Afficher ou masquer des éléments du DOM en fonction d’une condition avec PHPTal

19/08/2016 / admin

Doc officielle de PHPTal

alainflou\modules\responsive\lib\helpers\ResponsiveHelper.php

<?php

/**
 * Date: 08/08/16
 * Time: 15:14
 */
class ResponsiveHelper
{
    public static function isOrderActive()
    {
        $isActive = Framework::getConfigurationValue('modules/responsive/isOrderActive');
        return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);
    }

    public static function isTryOnActive()
    {
        $isActive = Framework::getConfigurationValue('modules/responsive/isTryOnActive');
        return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);
    }

    public static function isAppointmentActive()
    {
        $isActive = Framework::getConfigurationValue('modules/responsive/isAppointmentActive');
        return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);
    }
}

<?php

/**

* Date: 08/08/16

* Time: 15:14

class ResponsiveHelper

{

public static function isOrderActive()

{

$isActive = Framework::getConfigurationValue('modules/responsive/isOrderActive');

return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);

}

public static function isTryOnActive()

{

$isActive = Framework::getConfigurationValue('modules/responsive/isTryOnActive');

return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);

}

public static function isAppointmentActive()

{

$isActive = Framework::getConfigurationValue('modules/responsive/isAppointmentActive');

return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);

}

alainflou\themes\responsive\modules\website\templates\Website-Block-Xhtmltemplate-Customer-suggestion.all.all.html

<div class="customer-suggestion">
	<div class="container">
		<div class="row">
			<h2 class="heading-three">${trans:m.responsive.fo.customer-suggestion-title,ucf}</h2>
			<div class="customer-suggestion-row">
				<tal:block tal:condition="php: ResponsiveHelper::isTryOnActive()">
					<div class="customer-suggestion-column">
						${trans:m.responsive.fo.customer-suggestion-try-virtual-mode,ucf}
					</div>		
				</tal:block>

				<div class="customer-suggestion-column">
					${trans:m.responsive.fo.customer-suggestion-share,ucf}
				</div>

				<tal:block tal:condition="php: ResponsiveHelper::isAppointmentActive()">
					<div class="customer-suggestion-column">
						${trans:m.responsive.fo.customer-suggestion-wishlist,ucf}
					</div>		
				</tal:block>
			</div>
		</div>
	</div>
</div>

<h2 class="heading-three">${trans:m.responsive.fo.customer-suggestion-title,ucf}</h2>

<tal:block tal:condition="php: ResponsiveHelper::isTryOnActive()">

${trans:m.responsive.fo.customer-suggestion-try-virtual-mode,ucf}

</div>

</tal:block>

${trans:m.responsive.fo.customer-suggestion-share,ucf}

</div>

<tal:block tal:condition="php: ResponsiveHelper::isAppointmentActive()">

${trans:m.responsive.fo.customer-suggestion-wishlist,ucf}

</div>

</tal:block>

</div>

[RBS Change 3.x] Utiliser var_dump pour récupérer en front l’ensemble des informations qu’un bloc est capable d’afficher

19/08/2016 / admin

Tout au long de ce tuto, nous allons assumer que nous travaillons sur un bloc nommé Pushoffre appartenant à un module nommé responsive du projet nommé alainflou.

Pour commencer, nous allons localiser le bloc Pushoffre dans alainflou\modules\responsive\lib\blocks\BlockPushoffreAction.class.php. Une fois ouvert dans un éditeur, localiser la ligne $request->setAttribute('pushoffre', $this->getDocumentParameter()); et, juste en-dessous, placer notre var_dump var_dump($this->getDocumentParameter());.

<?php
/**
 * responsive_BlockPushoffreAction
 * @package modules.responsive.lib.blocks
 */
class responsive_BlockPushoffreAction extends website_BlockAction
{
	/**
	 * @param f_mvc_Request $request
	 * @param f_mvc_Response $response
	 * @return String
	 */
	public function execute($request, $response)
	{
		if ($this->isInBackofficeEdition())
		{
			return website_BlockView::NONE;
		}

        $request->setAttribute('pushoffre', $this->getDocumentParameter());
		// var_dump($this->getDocumentParameter());
		return website_BlockView::SUCCESS;
	}
}

<?php

/**

* responsive_BlockPushoffreAction

* @package modules.responsive.lib.blocks

class responsive_BlockPushoffreAction extends website_BlockAction

{

/**

* @param f_mvc_Request $request

* @param f_mvc_Response $response

* @return String

public function execute($request, $response)

{

if ($this->isInBackofficeEdition())

{

return website_BlockView::NONE;

}

$request->setAttribute('pushoffre', $this->getDocumentParameter());

// var_dump($this->getDocumentParameter());

return website_BlockView::SUCCESS;

}

Rendez-vous dans votre navigateur préféré et chargez une page qui contient le bloc Pushoffre. Le var_dump a normalement pour effet d’afficher tout un tas d’informations de ce type :

object(responsive_persistentdocument_pushoffre)#213 (27) { ["m_author":"responsive_persistentdocument_pushoffrebase":private]=> string(8) "wwwadmin" ["m_authorid":"responsive_persistentdocument_pushoffrebase":private]=> int(45063) ["m_creationdate":"responsive_persistentdocument_pushoffrebase":private]=> string(19) "2016-08-16 14:41:47" ["m_modificationdate":"responsive_persistentdocument_pushoffrebase":private]=> string(19) "2016-08-16 14:41:47" ...

Nous allons maintenant tenter d’afficher proprement en front certaines informations contenues dans ce bloc (libellé du bloc, cible d’une image associée à ce bloc, texte de contenu de ce bloc, et URL du lien associé au texte de ce bloc). Les informations affichées via le var_dump qui nous intéressent sont :

["m_label":"responsive_persistentdocument_pushoffreI18n":private]=> string(29) "ezrr dffvds sdgrezgzthrytht r"
["m_media":"responsive_persistentdocument_pushoffrebase":private]=> int(1370814)
["m_text":"responsive_persistentdocument_pushoffreI18n":private]=> string(24) "ez grehggbhn-zrnggngn nn" } }
["m_textLink":"responsive_persistentdocument_pushoffrebase":private]=> string(20) "http://www.google.fr"

Pour ce faire, localiser le template alainflou\modules\responsive\templates\Responsive-Block-Pushoffre-Success.all.all.html.

<div class="one-offre">
	<a class="link" href="${pushoffre/getTextLink}">
		<img class="one-offre-image" change:media="document pushoffre/getMedia; format 'modules.catalog.frontoffice/medium'" />
		<p class="one-offre-text">${pushoffre/getText}</p>
		<!-- <p>${pushoffre/getMedia}</p> -->
		<!-- <h1>${pushoffre/getLabel}</h1> -->
	</a>
</div>

<p class="one-offre-text">${pushoffre/getText}</p>

</a>

</div>

La manière de réexploiter les données du var_dump dans un tmplate de bloc est la suivante :

<h1>${pushoffre/getLabel}</h1>
<img class="one-offre-image" change:media="document pushoffre/getMedia; format 'modules.catalog.frontoffice/medium'" />
<p class="one-offre-text">${pushoffre/getText}</p>
<a class="link" href="${pushoffre/getTextLink}"></a>

Autre façon de récupérer et d’afficher des informations contenues dans une fonction :

\\change30\alainflou\modules\project\persistentdocument\framedeclination.class.php

	/**
	 * @param Integer $index
	 * @return String|NULL
	 */
	public function getFramephysicalpropertyValueByIndex($index)
	{
		$data = $this->getFramephysicalproperty();
		if (f_util_ArrayUtils::isNotEmpty($data))
		{
			return $data[0][$index];
		}
		return null;
	}

/**

* @param Integer $index

* @return String|NULL

public function getFramephysicalpropertyValueByIndex($index)

{

$data = $this->getFramephysicalproperty();

if (f_util_ArrayUtils::isNotEmpty($data))

{

return $data[0][$index];

}

return null;

}

\\change30\alainflou\modules\responsive\templates\Responsive-Block-MetricBox-Success.all.all.html

${php: print_r(product.getFormattedFramephysicalproperty())}
<p>1 CALIBRE (longeur d'un verre) -> ${php: product.getFramephysicalpropertyValueByIndex(1)}</p>
<br/>
<p>2 NEZ (longueur du pont) -> ${php: product.getFramephysicalpropertyValueByIndex(2)}</p>
<br/>
<p>3 longueur de face -> ${php: product.getFramephysicalpropertyValueByIndex(3)}</p>
<br/>
<p>8 longeur des branches -> ${php: product.getFramephysicalpropertyValueByIndex(8)}</p>

${php: print_r(product.getFormattedFramephysicalproperty())}

<p>1 CALIBRE (longeur d'un verre) -> ${php: product.getFramephysicalpropertyValueByIndex(1)}</p>

<br/>

<p>2 NEZ (longueur du pont) -> ${php: product.getFramephysicalpropertyValueByIndex(2)}</p>

<br/>

<p>3 longueur de face -> ${php: product.getFramephysicalpropertyValueByIndex(3)}</p>

<br/>

<p>8 longeur des branches -> ${php: product.getFramephysicalpropertyValueByIndex(8)}</p>

[RBS Change 3.x] Attribuer un ID unique à un élément

19/08/2016 / admin

Problème : nous avons un template de bloc unique (un menu dans notre exemple) qui est utilisé plusieurs fois dans la page, chaque fois pour afficher un contenu différent mais avec un balisage similaire. Nous voulons cependant attribuer un ID unique à chaque occurence de ce bloc dans le DOM (dans notre exemple, pour pouvoir les ouvrir/fermer avec le composant Collapse de Bootstrap 3).

Solution : appliquer ${root/getDocument/getId} sur la valeur des attributs href et id :

<tal:block metal:define-macro="menuLevel">
	[...]
</tal:block>

<div tal:attributes="class menuClass">
	<h3 change:h="" tal:condition="configuration/getShowTitle">

	<a class="" role="button" data-toggle="collapse" href="#js-footer-menu-nav-${root/getDocument/getId}" aria-expanded="false" aria-controls="">${root/getLabelAsHtml}<i class="icon icon-chevron-down"></i></a>

	</h3>
	<div id="js-footer-menu-nav-${root/getDocument/getId}" class="js-footer-menu-nav">
		<tal:block tal:define="parent root" metal:use-macro="menuLevel" />		
	</div>
</div>

<tal:block metal:define-macro="menuLevel">

[...]

</tal:block>

<a class="" role="button" data-toggle="collapse" href="#js-footer-menu-nav-${root/getDocument/getId}" aria-expanded="false" aria-controls="">${root/getLabelAsHtml}<i class="icon icon-chevron-down"></i></a>

</h3>

<tal:block tal:define="parent root" metal:use-macro="menuLevel" />

</div>

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

19/08/2016 / admin

Demo en live sur jsFiddle.net.

Fichier global-vars.js :

// Breakpoints
	// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/
	// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss
	// $screen-xs: 320px;
	// $screen-sm: 768px;
	// $screen-md: 1025px;
	// $screen-lg: 1225px;
	var bs_screen_sm_min = '768'; // tablet starts @768px
		bs_screen_md_min = '1025'; // desktop starts @1025px
		bs_screen_lg_min = '1225'; // large desktop starts @1225px
		bs_screen_xs_max = bs_screen_sm_min - 1; // 767px
		bs_screen_sm_max = bs_screen_md_min - 1; // 1024px
		bs_screen_md_max = bs_screen_lg_min - 1; // 1224px
  
	// enquire JS breakpoints
		bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
		bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
		bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';
		bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';
		bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';
		bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

// Breakpoints

// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/

// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss

// $screen-xs: 320px;

// $screen-sm: 768px;

// $screen-md: 1025px;

// $screen-lg: 1225px;

var bs_screen_sm_min = '768'; // tablet starts @768px

bs_screen_md_min = '1025'; // desktop starts @1025px

bs_screen_lg_min = '1225'; // large desktop starts @1225px

bs_screen_xs_max = bs_screen_sm_min - 1; // 767px

bs_screen_sm_max = bs_screen_md_min - 1; // 1024px

bs_screen_md_max = bs_screen_lg_min - 1; // 1224px

// enquire JS breakpoints

bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';

bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';

bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

Fichier global-mediaqueries.js :

+ function($){
  'use strict';

  $(document).ready(function(){
    // enquire JS
    enquire.register(bpMobile, {
      match : function() {
       // console.log('bpMobile');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmartphone, {
      match : function() {
        // console.log('bpSmartphone');
      },
      unmatch : function() {}
    });

    enquire.register(bpTablet, {
      match : function() {
        // console.log('bpTablet');
      },
      unmatch : function() {}
    });

    enquire.register(bpDesktop, {
      match : function() {
        // console.log('bpDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmallDesktop, {
      match : function() {
        // console.log('bpSmallDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpLargeDesktop, {
      match : function() {
        // console.log('bpLargeDesktop');
      },
      unmatch : function() {}
    });
  });
  
}(jQuery);

+ function($){

'use strict';

$(document).ready(function(){

// enquire JS

enquire.register(bpMobile, {

match : function() {

// console.log('bpMobile');

unmatch : function() {}

});

enquire.register(bpSmartphone, {

match : function() {

// console.log('bpSmartphone');

unmatch : function() {}

});

enquire.register(bpTablet, {

match : function() {

// console.log('bpTablet');

unmatch : function() {}

});

enquire.register(bpDesktop, {

match : function() {

// console.log('bpDesktop');

unmatch : function() {}

});

enquire.register(bpSmallDesktop, {

match : function() {

// console.log('bpSmallDesktop');

unmatch : function() {}

});

enquire.register(bpLargeDesktop, {

match : function() {

// console.log('bpLargeDesktop');

unmatch : function() {}

});

}(jQuery);

Articles récents

Catégories

Archives

Méta

Mois : août 2016

[RBS Change 3.x] Effectuer une boucle tal:repeat qui rapporte l’ensemble des informations contenues dans une fonction

Récupérer une propriété contenue dans un objet

[jQuery] Vérifier si au moins une case à cocher ou un bouton radio est coché

Cas un peu plus complexe :

Codes HTML et SASS purement indicatifs (ne pas copier/coller en l’état)

[CSS] Aligner un pseudo élément à droite d’un conteneur et le centrer verticalement avec Translate

[jQuery] Empêcher un événement (un click) de s’exécuter à plusieurs reprises avec les méthodes On et Off

[Ubuntu] Modifier le hostname après installation

[CSS] Une largeur fluide pour le widget Comments de Facebook

[RBS Change 3.x] Afficher ou masquer des éléments du DOM en fonction d’une condition avec PHPTal

[RBS Change 3.x] Utiliser var_dump pour récupérer en front l’ensemble des informations qu’un bloc est capable d’afficher

Autre façon de récupérer et d’afficher des informations contenues dans une fonction :

[RBS Change 3.x] Attribuer un ID unique à un élément

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js