décembre 2016 – devfrontend.info

[jQuery][Gruge] Un effet Toggle avec la méthode On.(‘Click’)

21/12/2016 / admin

Problème : l’élément sur lequel on souhaite placer le click n’accepte qu’un seul événement (on ne peut cliquer qu’une fois dessus. Au-delà, le clic ne fonctionne plus. Embêtant quand on veut faire de l’ouvrir/fermer…).

Solution: doubler l’élément sur lequel se fait l’événement click.

<div class="offer-benefit-heading">
    <h2>Les avantages du pack Premium</h2>
    <span class="more">
        <span class="open">&gt; En savoir plus</span>
        <span class="close">&gt; En savoir plus</span>
    </span>
</div>
<div class="offer-benefit" data-display="hidden">
    [...]
</div>

<h2>Les avantages du pack Premium</h2>

<span class="open">> En savoir plus</span>

<span class="close">> En savoir plus</span>

</span>

</div>

[...]

</div>

.offer-benefit{
    &[data-display="hidden"]{
        display: none;
    }
    &[data-display="shown"]{
        // nada 
    }
}

.offer-benefit{

&[data-display="hidden"]{

display: none;

}

&[data-display="shown"]{

// nada

}

    jQuery(document).ready(function(){
        var eClose = jQuery('.more .close');
            eOpen = jQuery('.more .open');
            eOfferBenefitHeading = jQuery('.offer-benefit-heading');
            eOfferBenefit = jQuery('.offer-benefit');

        eClose.hide();
        eOfferBenefitHeading.on('click', '.open', function(){
            eClose.show();
            eOpen.hide();
            eOfferBenefit.attr('data-display', 'shown');
        });
        
        eOfferBenefitHeading.on('click', '.close', function(){
            eClose.hide();
            eOpen.show();            
            eOfferBenefit.attr('data-display', 'hidden');
        });
    });

jQuery(document).ready(function(){

var eClose = jQuery('.more .close');

eOpen = jQuery('.more .open');

eOfferBenefitHeading = jQuery('.offer-benefit-heading');

eOfferBenefit = jQuery('.offer-benefit');

eClose.hide();

eOfferBenefitHeading.on('click', '.open', function(){

eClose.show();

eOpen.hide();

eOfferBenefit.attr('data-display', 'shown');

});

eOfferBenefitHeading.on('click', '.close', function(){

eClose.hide();

eOpen.show();

eOfferBenefit.attr('data-display', 'hidden');

});

[Gulp] Supprimer des fichiers ou dossiers avec le module Del

19/12/2016 / admin

Delete files and folders – You might want to delete some files before running your build. Since deleting files doesn’t work on the file contents, there’s no reason to use a gulp plugin. An excellent opportunity to use a vanilla node module.

var gulp = require('gulp');
    sass = require('gulp-sass');
    // rimraf = require('gulp-rimraf'); // deprecated
    del = require('del');

var paths = {
    styles  : './src/scss/**/*.scss'
};

gulp.task('clean:styles', function () {
    return del('./css');
});

gulp.task('styles', ['clean:styles'], function () {
    return gulp.src(paths.styles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'))
});

gulp.task('watch', function () {
    gulp.watch(paths.styles, ['styles']);
});

var gulp = require('gulp');

sass = require('gulp-sass');

// rimraf = require('gulp-rimraf'); // deprecated

del = require('del');

var paths = {

styles : './src/scss/**/*.scss'

};

gulp.task('clean:styles', function () {

return del('./css');

});

gulp.task('styles', ['clean:styles'], function () {

return gulp.src(paths.styles)

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('./css'))

});

gulp.task('watch', function () {

gulp.watch(paths.styles, ['styles']);

});

Problème:

[15:29:20] ‘styles’ errored after 95 ms
[15:29:20] Error: EEXIST: file already exists, mkdir ‘/home/intlangf/tb/gulp-plugins/dist/css’
at Error (native)

gulp tasks are failing with EEXIST errors (del), Del: Delete files and folders using globs.

Une alternative consite à utiliser del.sync:

gulp.task('clean:styles', function () {
    del.sync(paths.dist + '/css');
});

gulp.task('clean:styles', function () {

del.sync(paths.dist + '/css');

});

Autres solutions à envisager

Gulp recipe – Handling the Delete Event on Watch : fonctionne bien, mais seulement au Watch.
Plugin Gulp gulp-deleted

[Gulp] Gulpfile.js – Les bonnes pratiques de coding

14/12/2016 / admin

Patterns et recettes

Des workflows Gulp sous GitHub

The Zephir GULP workflow. http://zephir.ch (découpé en tâches)
WordPressify v0.1.3. A build system designed to automate your WordPress development workflow.
Gulp workflow for front-end development – modules exports, etc… un bon boilerplate.
La gulpfile de Foundation for Sites

Curated list of useful gulp plugins for awesome and easy frontend web development.

Building a Better Gulpfile
Advanced Gulp File, repo Git, sprites SVG.
My Advanced Gulp Workflow for WordPress Themes
Introduction à Gulp par Putain de Code !
Introduction to Gulp.js with practical examples

[jQuery] Bug c.curCSS is not a function de jQuery UI

05/12/2016 / admin

Source : jQuery UI 1.8.13 sudden error – c.curCSS is not a function.

Créer une nouvelle fonction:

$.curCSS = function (element, attrib, val) {
    $(element).css(attrib, val);
};

$.curCSS = function (element, attrib, val) {

$(element).css(attrib, val);

};

Articles récents

Catégories

Archives

Méta

Mois : décembre 2016