3
\$\begingroup\$

I have an Array of 5 objects, some key values need to be changed based on the browser width. ie: 5 cols, 4 cols, 3 cols or 2.

vs.streams is an Array which is tied to a AngularJS model. When the selected value is true, that data will be called via an API And displays in their appropriate columns.

function checkBrowserWidth() {
    var w = window.innerWidth;
    console.log('w = ', w);

    toggleStreams();

    if (w > 1400) {
        console.log('5 columns');
        vs.streams = [
            { name: 'Twitter',        value: 'twitter',   selected: true,  previous: true },
            { name: 'News',           value: 'news',      selected: true,  previous: true },
            { name: 'Financial News', value: 'financial', selected: true,  previous: true },
            { name: 'Blogs',          value: 'blogs',     selected: true,  previous: true },
            { name: 'Forums',         value: 'forums',    selected: true,  previous: true }
        ];
    } else if (w > 1200 && w < 1400) {
        console.log('4 columns');
        vs.streams = [
            { name: 'Twitter',        value: 'twitter',   selected: true,  previous: true },
            { name: 'News',           value: 'news',      selected: true,  previous: true },
            { name: 'Financial News', value: 'financial', selected: true,  previous: true },
            { name: 'Blogs',          value: 'blogs',     selected: true,  previous: true },
            { name: 'Forums',         value: 'forums',    selected: false, previous: false }
        ];
    } else if (w > 1100 && w < 1200) {
        console.log('3 columns');
        vs.streams = [
            { name: 'Twitter',        value: 'twitter',   selected: true,  previous: true },
            { name: 'News',           value: 'news',      selected: true,  previous: true },
            { name: 'Financial News', value: 'financial', selected: true,  previous: true },
            { name: 'Blogs',          value: 'blogs',     selected: false, previous: false },
            { name: 'Forums',         value: 'forums',    selected: false, previous: false }
        ];
    } else if (w < 1100) {
        console.log('2 columns');
        vs.streams = [
            { name: 'Twitter',        value: 'twitter',   selected: true,  previous: true },
            { name: 'News',           value: 'news',      selected: true,  previous: true },
            { name: 'Financial News', value: 'financial', selected: false, previous: false },
            { name: 'Blogs',          value: 'blogs',     selected: false, previous: false },
            { name: 'Forums',         value: 'forums',    selected: false, previous: false }
        ];
    }
}

Below is my first attempt, however I feel that there is an even better, more optimized and efficient way to do this.

function toggleStreams(cols) {
    switch(cols) {
        case '5':
            vs.streams[2].selected = true;
            vs.streams[2].previous = true;
            vs.streams[3].selected = true;
            vs.streams[3].previous = true;
            vs.streams[4].selected = true;
            vs.streams[4].previous = true;
            break;

        case '4':
            vs.streams[2].selected = true;
            vs.streams[2].previous = true;
            vs.streams[3].selected = true;
            vs.streams[3].previous = true;
            vs.streams[4].selected = false;
            vs.streams[4].previous = false;
            break;

        case '3':
            vs.streams[2].selected = true;
            vs.streams[2].previous = true;
            vs.streams[3].selected = false;
            vs.streams[3].previous = false;
            vs.streams[4].selected = false;
            vs.streams[4].previous = false;
            break;

        case '2':
            vs.streams[2].selected = false;
            vs.streams[2].previous = false;
            vs.streams[3].selected = false;
            vs.streams[3].previous = false;
            vs.streams[4].selected = false;
            vs.streams[4].previous = false;
            break;
    }

    console.log('vs.streams = ', vs.streams);
}
\$\endgroup\$
  • \$\begingroup\$ Don't do that at all using JavaScript. Use CSS media queries to set display: none on certain elements when the browser is too narrow. \$\endgroup\$ – 200_success Jul 28 '15 at 21:11
  • \$\begingroup\$ Well, I already have CSS to hide the columns... the vs.streams however is a model in Angular. When the selected key is true, then that is reflected in the markup. The data shows up.. not just showing an empty column if that makes sense. Sorry I should have added that to the question, just did... \$\endgroup\$ – Leon Gaban Jul 28 '15 at 21:16
2
\$\begingroup\$

You could shorten the toggleStreams function:

function toggleStreams(cols) {
    vs.streams[2].selected = vs.streams[2].previous = (cols >=3);
    vs.streams[3].selected = vs.streams[3].previous = (cols >=4);
    vs.streams[4].selected = vs.streams[4].previous = (cols >=5);      
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.