Reveal effects not working in CodyHouse v4

[w3work]

Hello,

i figured out a problem with the reveal effects component. I included the scss and js into my folders, but after running the watcher in gulpfile.js i get the following errors in Firebug console:

Uncaught TypeError: Util.getIndexInArray is not a function c/d[t]< http://localhost:3000/js/scripts.min.js:1

Uncaught TypeError: Util.addClass is not a function h http://localhost:3000/js/scripts.min.js:1 v http://localhost:3000/js/scripts.min.js:1

Is there something missing? All the other js, like Carousel, Back-to-top or Modal video are working

Regards Sven

[claudia-romano]

Hi Sven, have you included the component JS code for CodyFrame v4? The Util functions are defined at the top of the file.

[w3work]

Yes, i included the hole file. I don’t know where the exact problem came from.

Here whats inside the _1_reveal-effects.js

if(!Util) function Util () {};

Util.addClass = function(el, className) { var classList = className.split(' '); el.classList.add(classList[0]); if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' ')); };

Util.removeClass = function(el, className) { var classList = className.split(' '); el.classList.remove(classList[0]); if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' ')); };

Util.getIndexInArray = function(array, el) { return Array.prototype.indexOf.call(array, el); };

Util.osHasReducedMotion = function() { if(!window.matchMedia) return false; var matchMediaObj = window.matchMedia('(prefers-reduced-motion: reduce)'); if(matchMediaObj) return matchMediaObj.matches; return false; };

// File#: _1_reveal-effects // Usage: codyhouse.co/license (function() { var fxElements = document.getElementsByClassName('reveal-fx'); var intersectionObserverSupported = ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype); if(fxElements.length > 0) { // deactivate effect if Reduced Motion is enabled if (Util.osHasReducedMotion() || !intersectionObserverSupported) { fxRemoveClasses(); return; } //on small devices, do not animate elements -> reveal all if( fxDisabled(fxElements[0]) ) { fxRevealAll(); return; }

    var fxRevealDelta = 120; // amount (in pixel) the element needs to enter the viewport to be revealed - if not custom value (data-reveal-fx-delta)

    var viewportHeight = window.innerHeight,
        fxChecking = false,
        fxRevealedItems = [],
        fxElementDelays = fxGetDelays(), //elements animation delay
        fxElementDeltas = fxGetDeltas(); // amount (in px) the element needs enter the viewport to be revealed (default value is fxRevealDelta)

    // add event listeners
    window.addEventListener('load', fxReveal);
    window.addEventListener('resize', fxResize);
    window.addEventListener('restartAll', fxRestart);

    // observe reveal elements
    var observer = [];
    initObserver();

    function initObserver() {
        for(var i = 0; i < fxElements.length; i++) {
            observer[i] = new IntersectionObserver(
                function(entries, observer) {
                    if(entries[0].isIntersecting) {
                        fxRevealItemObserver(entries[0].target);
                        observer.unobserve(entries[0].target);
                    }
                },
                {rootMargin: "0px 0px -"+fxElementDeltas[i]+"px 0px"}
            );

            observer[i].observe(fxElements[i]);
        }
    };

    function fxRevealAll() { // reveal all elements - small devices
        for(var i = 0; i < fxElements.length; i++) {
            Util.addClass(fxElements[i], 'reveal-fx--is-visible');
        }
    };

    function fxResize() { // on resize - check new window height and reveal visible elements
        if(fxChecking) return;
        fxChecking = true;
        (!window.requestAnimationFrame) ? setTimeout(function(){fxReset();}, 250) : window.requestAnimationFrame(fxReset);
    };

    function fxReset() {
        viewportHeight = window.innerHeight;
        fxReveal();
    };

    function fxReveal() { // reveal visible elements
        for(var i = 0; i < fxElements.length; i++) {(function(i){
            if(fxRevealedItems.indexOf(i) != -1 ) return; //element has already been revelead
            if(fxElementIsVisible(fxElements[i], i)) {
                fxRevealItem(i);
                fxRevealedItems.push(i);
            }})(i);
        }
        fxResetEvents();
        fxChecking = false;
    };

    function fxRevealItem(index) {
        if(fxElementDelays[index] && fxElementDelays[index] != 0) {
            // wait before revealing element if a delay was added
            setTimeout(function(){
                Util.addClass(fxElements[index], 'reveal-fx--is-visible');
            }, fxElementDelays[index]);
        } else {
            Util.addClass(fxElements[index], 'reveal-fx--is-visible');
        }
    };

    function fxRevealItemObserver(item) {
        var index = Util.getIndexInArray(fxElements, item);
        if(fxRevealedItems.indexOf(index) != -1 ) return; //element has already been revelead
        fxRevealItem(index);
        fxRevealedItems.push(index);
        fxResetEvents();
        fxChecking = false;
    };

    function fxGetDelays() { // get anmation delays
        var delays = [];
        for(var i = 0; i < fxElements.length; i++) {
            delays.push( fxElements[i].getAttribute('data-reveal-fx-delay') ? parseInt(fxElements[i].getAttribute('data-reveal-fx-delay')) : 0);
        }
        return delays;
    };

    function fxGetDeltas() { // get reveal delta
        var deltas = [];
        for(var i = 0; i < fxElements.length; i++) {
            deltas.push( fxElements[i].getAttribute('data-reveal-fx-delta') ? parseInt(fxElements[i].getAttribute('data-reveal-fx-delta')) : fxRevealDelta);
        }
        return deltas;
    };

    function fxDisabled(element) { // check if elements need to be animated - no animation on small devices
        return !(window.getComputedStyle(element, '::before').getPropertyValue('content').replace(/'|"/g, "") == 'reveal-fx');
    };

    function fxElementIsVisible(element, i) { // element is inside viewport
        return (fxGetElementPosition(element) <= viewportHeight - fxElementDeltas[i]);
    };

    function fxGetElementPosition(element) { // get top position of element
        return element.getBoundingClientRect().top;
    };

    function fxResetEvents() {
        if(fxElements.length > fxRevealedItems.length) return;
        // remove event listeners if all elements have been revealed
        window.removeEventListener('load', fxReveal);
        window.removeEventListener('resize', fxResize);
    };

    function fxRemoveClasses() {
        // Reduced Motion on or Intersection Observer not supported
        while(fxElements[0]) {
            // remove all classes starting with 'reveal-fx--'
            var classes = fxElements[0].getAttribute('class').split(" ").filter(function(c) {
                return c.lastIndexOf('reveal-fx--', 0) !== 0;
            });
            fxElements[0].setAttribute('class', classes.join(" ").trim());
            Util.removeClass(fxElements[0], 'reveal-fx');
        }
    };

    function fxRestart() {
        // restart the reveal effect -> hide all elements and re-init the observer
        if (Util.osHasReducedMotion() || !intersectionObserverSupported || fxDisabled(fxElements[0])) {
            return;
        }
        // check if we need to add the event listensers back
        if(fxElements.length <= fxRevealedItems.length) {
            window.addEventListener('load', fxReveal);
            window.addEventListener('resize', fxResize);
        }
        // remove observer and reset the observer array
        for(var i = 0; i < observer.length; i++) {
            if(observer[i]) observer[i].disconnect();
        }
        observer = [];
        // remove visible class
        for(var i = 0; i < fxElements.length; i++) {
            Util.removeClass(fxElements[i], 'reveal-fx--is-visible');
        }
        // reset fxRevealedItems array
        fxRevealedItems = [];
        // restart observer
        initObserver();
    };
}

}());

And this is how my gulpfile.js looks like. But i don’t think that the problems comes from this side

var gulp = require('gulp'); var sass = require('gulp-sass')(require('sass-embedded')); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var browserSync = require('browser-sync').create(); var concat = require('gulp-concat'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify');

var cssFolderPath = 'main/css'; var scssFolderPath = 'main/scss'; var jsFolderPath = 'main/js'; var jsComponentsPath = 'main/js/components/*.js';

function reload(done) { browserSync.reload(); done(); };

gulp.task('browserSync', gulp.series(function (done) { browserSync.init({ server: { baseDir: 'main' }, notify: false }) done(); }));

function compileCss(file) { return gulp.src(scssFolderPath+'/'+file+'.scss') .pipe(sass().on('error', sass.logError)) .pipe(postcss([autoprefixer()])) .pipe(gulp.dest(cssFolderPath)) .pipe(browserSync.reload({ stream: true })); };

function compileGlobals(file) { return gulp.src(scssFolderPath+'/'+file+'.scss') .pipe(sass().on('error', sass.logError)) .pipe(postcss([autoprefixer()])) .pipe(gulp.dest(cssFolderPath)); };

gulp.task('scripts', function() { return gulp.src([jsComponentsPath]) .pipe(concat('scripts.js')) .pipe(gulp.dest(jsFolderPath)) .pipe(browserSync.reload({ stream: true })) .pipe(rename('scripts.min.js')) .pipe(uglify()) .pipe(gulp.dest(jsFolderPath)) .pipe(browserSync.reload({ stream: true })); });

gulp.task('watch', gulp.series(['browserSync', 'scripts'], function () { gulp.watch('main/*.html', gulp.series(reload)); gulp.watch('main/scss/*/.scss').on('change', function(file) { compileCss('style'); if(file.includes('config.scss') || file.includes('buttons.scss')) compileGlobals('buttons'); if(file.includes('config.scss') || file.includes('forms.scss')) compileGlobals('forms'); if(file.includes('config.scss') || file.includes('icons.scss')) compileGlobals('icons'); if(file.includes('config.scss') || file.includes('typography.scss')) compileGlobals('typography'); if(file.includes('config.scss') || file.includes('util.scss')) compileGlobals('util'); if(file.includes('reset.scss')) compileGlobals('reset'); }); gulp.watch(jsComponentsPath, gulp.series(['scripts'])); }));

Herzliche Grüße Sven Rothe Webentwickler @.https://www.w3work.de/ w3work | Birkenweg 6 | 09569 Oederan Telefon: +49 (0) 37292 / 2882-27<tel:+4937292288227> E-Mail: @*.**@*.***> Web: www.w3work.dehttps://www.w3work.de [Facebook]https://www.facebook.com/w3work/ [Instagram] https://www.instagram.com/w3work/ [LinkedIn] https://www.linkedin.com/company/w3work [Pinterest] https://www.pinterest.de/w3works/ Gneuß & Arnold GbR | Geschäftsführer: Torsten Gneuß, Jörg Arnold | Unternehmenssitz: Birkenweg ​6, Oederan USt-IdNr: DE 206​146​109

Von: Claudia Romano @.> Gesendet: Freitag, 20. September 2024 12:31 An: codyhouse/cd-reveal-effects-changelog @.> Cc: Sven Rothe @.>; Author @.> Betreff: Re: [codyhouse/cd-reveal-effects-changelog] Reveal effects not working in CodyHouse v4 (Issue #5)

Hi Sven, have you included the component JS code for CodyFrame v4? The Util functions are defined at the top of the file.

— Reply to this email directly, view it on GitHubhttps://github.com/codyhouse/cd-reveal-effects-changelog/issues/5#issuecomment-2363399691, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AJALMLTTF7DCV2V3TNZTRU3ZXP2QDAVCNFSM6AAAAABORXZWRSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNRTGM4TSNRZGE. You are receiving this because you authored the thread.Message ID: @.**@.>>

[claudia-romano]

Unfortunately, we cannot check custom code. Please make sure to remove any JavaScript code that is not the Reveal Effect code and see if this fixes the issue. If not, then there may be a problem with your Gulp file. Try exporting a project from the CodyHouse export page and see if you can recreate the same issue - I did the same on my side and everything was working fine. Thanks.