CODEWITHSUNDEEP
javascriptjquery
borkafight
borkafight

Reputation: 567

Universal script for moving elements in DOM

I want to create a universal code for easy moving elements in DOM between desktop and mobile. It's not my idea as well as not my code. It was for Prestashop 1.7 only, but I want to change it for any project.

The idea is that you can wrap some code you want to move in an absolute different place on mobile with <div id="_desktop_some-block">Some content</div>, and place empty <div id="_mobile_some-block"></div> where you want to see it on mobile devices and when window reach (for ex.) 768px the HTML of the element will be moving to another one.

So here is an original code:

import $ from 'jquery';
import prestashop from 'prestashop';

prestashop.responsive = prestashop.responsive || {};

prestashop.responsive.current_width = window.innerWidth;
prestashop.responsive.min_width = 768;
prestashop.responsive.mobile = prestashop.responsive.current_width < prestashop.responsive.min_width;

function swapChildren(obj1, obj2)
{
    var temp = obj2.children().detach();
    obj2.empty().append(obj1.children().detach());
    obj1.append(temp);
}

function toggleMobileStyles()
{
    if (prestashop.responsive.mobile) {
        $("*[id^='_desktop_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_desktop_', '_mobile_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    } else {
        $("*[id^='_mobile_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_mobile_', '_desktop_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    }
    prestashop.emit('responsive update', {
        mobile: prestashop.responsive.mobile
    });
}

$(window).on('resize', function() {
    var _cw = prestashop.responsive.current_width;
    var _mw = prestashop.responsive.min_width;
    var _w = window.innerWidth;
    var _toggle = (_cw >= _mw && _w < _mw) || (_cw < _mw && _w >= _mw);
    prestashop.responsive.current_width = _w;
    prestashop.responsive.mobile = prestashop.responsive.current_width < prestashop.responsive.min_width;
    if (_toggle) {
        toggleMobileStyles();
    }
});

$(document).ready(function() {
    if (prestashop.responsive.mobile) {
        toggleMobileStyles();
    }
});

Here is what I'm trying to do:

var windowWidth = $(window).innerWidth();
var windowMinWidth = 768;
var windowResponsiveMobile = windowWidth < windowMinWidth;

function swapChildren(obj1, obj2)
{
    var temp = obj2.children().detach();
    obj2.empty().append(obj1.children().detach());
    obj1.append(temp);
}

function toggleMobileStyles()
{
    if (windowResponsiveMobile) {
        $("*[id^='_desktop_']").each(function(idx, el) {
            var target = $('#' + el.replace('_desktop_', '_mobile_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    } else {
        $("*[id^='_mobile_']").each(function(idx, el) {
            var target = $('#' + el.replace('_mobile_', '_desktop_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    }
}

$(window).on('resize', function() {
    var _cw = windowWidth;
    var _mw = windowMinWidth;
    var _w = $(window).innerWidth();
    var _toggle = (_cw >= _mw && _w < _mw) || (_cw < _mw && _w >= _mw);
    windowWidth = _w;
    windowResponsiveMobile = windowWidth < windowMinWidth;
    if (_toggle) {
        toggleMobileStyles();
    }
});

$(document).ready(function() {
    if (windowResponsiveMobile) {
        toggleMobileStyles();
    }
});

Currently it doesn't work, but I don't see any errors in the console and it little bit confuse...

Please help me to finish it so it could work.

Upvotes: 0

Views: 177

Answers (1)

Thomas L&#39;huillier
Thomas L&#39;huillier

Reputation: 175

var windowWidth = $(window).innerWidth();
var windowMinWidth = 768;
var windowResponsiveMobile = windowWidth < windowMinWidth;

function swapChildren(obj1, obj2)
{
    var temp = obj2.children().detach();
    obj2.empty().append(obj1.children().detach());
    obj1.append(temp);
}

function toggleMobileStyles()
{
    if (windowResponsiveMobile) {
        $("[id^='_desktop_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_desktop_', '_mobile_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    } else {
        $("[id^='_mobile_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_mobile_', '_desktop_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    }
}

$(window).on('resize', function() {
    var _cw = windowWidth;
    var _mw = windowMinWidth;
    var _w = $(window).innerWidth();
    var _toggle = (_cw >= _mw && _w < _mw) || (_cw < _mw && _w >= _mw);
    windowWidth = _w;
    windowResponsiveMobile = windowWidth < windowMinWidth;
    if (_toggle) {
        toggleMobileStyles();
    }
});

$(document).ready(function() {
    if (windowResponsiveMobile) {
        toggleMobileStyles();
    }
});

Here is the updated code, you just removed the id in the target selector.

Upvotes: 2

Related Questions