Folder: Layout 12 Does Not have Dots to indicate More Items
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Description of Error

The twelfth layout in this plugin should have dots to indicate when a user can swipe to see more items, however, they are not appearing.

Context

BuildFire is a mobile app building platform that allows developers through HTML, JS and CSS to create plugins for the platform to extend mobile app functionality.

Learn more at https://buildfire.com and https://buildfire.com/developers

Prerequisites

  • NodeJS - download
  • npm
  • git
  • knowledge on how to create a pull-request on github

How to Install

BuildFire SDK npm i buildfire you may need to be admin or super user depending on your environment

  • Init SDK buildfire init this will install the SDK in a folder called BuildFireSDK
  • Navigate to folder cd BuildFireSDK
  • Clone plugin buildfire plugin clone folderPlugin from the repo https://github.com/BuildFire/folderPlugin

Run plugin locally

  • Run tester buildfire run this will run a web server on http://localhost:3030
  • in the Plugin input box enter in the name of your plugin. example: folderPlugin depending on your OS this could be case sensitive

Understanding the autonomy of a BuildFire Plugin

  • the Control: is the right hand side of the plugin meant to live in the BuildFire control panel/dashboard
  • the Widget: is the left hand side of the plugin meant to live in the mobile app to learn more click here

Submit a pull request

Additional Information

awarded to Lucioric2000

Crowdsource coding tasks.

1 Solution

Winning solution

The if clause containing the text if ((i + 1) % 8 == 0) was modiffied to be as follows:

                if ((i + 1) % 8 == 0) {
                    #added stuff begins
                    var span=pluginItem.getElementsByTagName("span");
                    if (span.length==1){
                        span[0].innerText='...';
                    } else {
                        window.alert('pluginItem span elements count is not 1 but is '+span.length);
                    }
                    #added stuff ends
                    pluginsWrapper.appendChild(pluginItem);
                    pluginItemSlidesContainer.appendChild(pluginsWrapper);
                    //create new wrapper
                    pluginsWrapper = document.createElement('div');
                    pluginsWrapper.classList.add("pluginsWrapper");

                } else {
                    pluginsWrapper.appendChild(pluginItem);

                    if ((i + 1 ) == plugins.length) {
                        pluginItemSlidesContainer.appendChild(pluginsWrapper);
                    }
                } `

although in the GitHub pull request it lacks the "added stuff" comments.
The complete index.html code results as follows:

<!DOCTYPE html>




<!--this css is important to be loaded first for the first paint-->

.hide {
display: none !important;
}

        .show {
            display: block !important;
        }
        #carousel {
            width: 100%;
            min-width:100%;
            max-height: 56vw;
            min-height: 56vw;
            overflow-y: hidden;
        }

        #pluginsContainer .pluginItem{
            position: relative;
        }

        #pluginsContainer:not(.layout12) .pluginItem .pluginItemDetails {
            position:absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

        .media-holder.media-holder-icon.hasImg {
            position: relative;
            overflow: hidden;
            height:100%;
        }

        .media-holder.media-holder-icon.hasImg img {
            width: 100%;
        }

        img.blur-effect {
            filter: blur(2vw);
        }

        .media-holder.media-holder-icon img.reveal-img {
            position: absolute;
            left: 0;
            top: 0;
            will-change: opacity;
            animation: reveal 1s ease-out;
        }

        @keyframes reveal {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }

        #light-folder-body {
            overflow-x: hidden;
        }

        #light-folder-body span, #light-folder-body p {
            font-size: 2.5vh;
            line-height: 3vh;
        }

        .folder-plugin-text {
            padding: 4vw 4vw 0px 4vw;
        }

        .folder-plugin-text p {
            margin-top: 0px !important;
            /*margin-bottom: 0px !important;*/
        }

        #pluginsContainer {
            /*padding-top: 15px;*/
            display: block;
        }

        #txt.hide + #pluginsContainer {
            padding-top: 0px;
        }
    </style>
</head>
<body id="light-folder-body">
<div id="carousel" class="sliderCarousel hide">
</div>
<div id="txt" class="text-left folder-plugin-text clearfix hide-empty"></div>
<div id="pluginsContainer"></div>
<!--script src="sampleplugindata.js" type="text/javascript"/-->
<script>
    var plugins = [];

    var lazyLoad = {
        loadImage: function (item) {
            var _failAttempts = 0;

            // load image
            var img = new Image();

            if (item.hasAttribute('data-src')) {
                item.classList.remove("lazy-img");
                _initImg(item);
            }

            function _initImg(item) {
                img.src = item.getAttribute('data-src');
                img.className = 'reveal-img';
                if (img.complete) _addImg();
                else img.onload = _addImg;

                img.onerror=function (e) {
                    if(_failAttempts >= 1){
                        return;
                    }

                    _failAttempts++;

                    /*
                    *  Sometimes Image IO doesn't crop image with certain width & height
                    *  So this for changes the dimensions and try to do another crop using image IO
                    *  to avoid showing only the blurred image
                    * */

                    img = new Image();
                    var originalImg = item.getAttribute('data-original-img');
                    var cropWidth = parseInt(item.getAttribute('data-crop-width'));
                    cropWidth +=1;
                    var cropHeight = parseInt(item.getAttribute('data-crop-height'));
                    cropHeight+=1;

                    item.setAttribute('data-crop-width',cropWidth);
                    item.setAttribute('data-crop-height',cropHeight);

                    var _newCroppedImg = buildfire.imageLib.cropImage(originalImg, {width:cropWidth,height: cropHeight});
                    item.setAttribute('data-src',_newCroppedImg);

                    _initImg(item);
                };
            }

            // replace image
            function _addImg() {
                // disable click
                item.addEventListener('click', function (e) {
                    e.preventDefault();
                }, false);

                // add full image
                item.appendChild(img).addEventListener('animationend', function (e) {
                    // remove preview image
                    var pImg = item.querySelector && item.querySelector('img.blur-effect');

                    if (pImg) {
                        e.target.alt = pImg.alt || '';
                        item.removeChild(pImg);
                        e.target.classList.remove('reveal-img');
                    }
                    item.removeAttribute('data-src');
                });
            }
        },
        isInViewport: function (element) {
            var _elementHeight = 0;
            if(element.parentElement && element.parentElement.parentElement){
                _elementHeight = element.parentElement.parentElement.clientHeight;
            }

            var wT = window.pageYOffset, wB = wT + window.innerHeight + (_elementHeight * 1), cRect, pT, pB, p = 0;
            cRect = element.getBoundingClientRect();
            pT = wT + cRect.top;
            pB = pT + cRect.height;
            return wT < pB && wB > pT;
        },
        processLazyImages: function () {
            var lazyImgs = document.querySelectorAll('.lazy-img');
            for (var i = 0; i < lazyImgs.length; i++) {
                if (lazyLoad.isInViewport(lazyImgs[i])) {
                    console.log('lazy img loaded');
                    lazyLoad.loadImage(lazyImgs[i]);
                }
            }
        }
    };

    function loadData(err, obj) {
        if (err) return;
        layout = obj.data.design.selectedLayout;

        if(obj.data.content && obj.data.content.carouselImages && obj.data.content.carouselImages.length > 0){
            var carouselContainer = document.getElementById("carousel");
            carouselContainer.classList.remove('hide');
        }

        var txt = document.getElementById("txt");
        txt.innerHTML = '';
        if (layout != 12) {
            if (obj.data.content.text)
                txt.innerHTML = obj.data.content.text.trim();
        }
        if (txt.innerHTML == '') {
            txt.classList.add('hide');
        } else {
            txt.classList.remove('hide');
        }


        var pluginsContainer = document.getElementById("pluginsContainer");
        pluginsContainer.className = "layout" + layout;
        pluginsContainer.innerHTML = '';

        getPlugins(obj, function (result) {
        //getFakePluginsList(16, function (result) {
            plugins = result;

            var options = calcImgOptions(layout);

            if (layout == 12) {
                var pluginItemFrame = document.createElement('div');
                pluginItemFrame.classList.add("pluginItemFrame");

                var pluginItemSlidesContainer = document.createElement('div');
                pluginItemSlidesContainer.classList.add("pluginItemSlidesContainer");

                var pluginsWrapper = document.createElement('div');
                pluginsWrapper.classList.add("pluginsWrapper");
            }

            for (var i = 0; i < plugins.length; i++) {
                var pluginItem = document.createElement('div');
                pluginItem.classList.add("pluginItem");

                var pluginItemDetails = document.createElement('div');
                pluginItemDetails.classList.add("pluginItemDetails");

                pluginItem.appendChild(pluginItemDetails);

                var p = plugins[i].data || plugins[i];

                if (layout != 12) {
                    var divImg = document.createElement('div');
                    if ([6, 11].indexOf(layout) > -1) {
                        divImg.style.minHeight = options.height + "px";
                        divImg.style.maxHeight = options.height + "px";
                    }
                    divImg.classList.add("media-holder");
                    divImg.classList.add("media-holder-icon");
                    divImg.setAttribute('index', i);
                    divImg.onclick = onClick;

                    if (p.iconUrl || p.iconClassName) {
                        if (p.iconUrl) {
                            var _croppedImg = buildfire.imageLib.cropImage(p.iconUrl, options);

                            divImg.classList.add("hasImg");
                            divImg.setAttribute("data-src", _croppedImg);
                            divImg.setAttribute("data-original-img", p.iconUrl);
                            divImg.setAttribute("data-crop-width", options.width);
                            divImg.setAttribute("data-crop-height", options.height);
                            divImg.classList.add('lazy-img');

                            var img = document.createElement('img');
                            img.setAttribute("src", buildfire.imageLib.resizeImage(_croppedImg, {
                                width: 10,
                                disablePixelRation: true
                            }));
                            img.classList.add('blur-effect');
                            img.alt = "plugin-img";
                            divImg.appendChild(img);
                        }
                        else {
                            divImg.classList.add("hasIcon");
                            var span = document.createElement('span');
                            var iIcon = document.createElement('i');
                            iIcon.className += " main-icon " + p.iconClassName;
                            if ([3, 4, 5, 6, 7, 9, 10, 11].indexOf(layout) > -1) {
                                iIcon.style.fontSize = calcFontSize(options, layout) + "px";
                            }
                            span.append(iIcon);
                            divImg.appendChild(span);
                        }
                    }
                    else {
                        divImg.classList.add("noImg");
                        divImg.innerHTML = "<h1>loading</h1>";
                    }

                    pluginItemDetails.appendChild(divImg);
                }

                if ([9, 10, 11].indexOf(layout) > -1) {
                    var divBlackLayer = document.createElement('div');
                    divBlackLayer.className = "blackLayer";
                    divBlackLayer.setAttribute('index', i);
                    divBlackLayer.onclick = onClick;
                    pluginItemDetails.appendChild(divBlackLayer);
                }

                var divTitle = document.createElement('div');
                divTitle.classList.add("media-holder");
                divTitle.classList.add("media-holder-text");
                divTitle.onclick = onClick;
                divTitle.setAttribute('index', i);

                if ([4, 5].indexOf(layout) > -1)
                    divTitle.classList.add("titleBarBackgroundTheme");
                if ([7].indexOf(layout) > -1)
                    divTitle.classList.add("blackBackgroundTheme");

                if ([4, 5, 6, 7, 9, 10, 11].indexOf(layout) > -1 && obj.data.design.hideText) {
                    divTitle.classList.add('hide');
                }

                var spanTitle = document.createElement('span');
                if ([3, 6].indexOf(layout) > -1) {
                    spanTitle.className = "text-primary";
                }
                if ([4, 5].indexOf(layout) > -1) {
                    spanTitle.className = "titleBarTextAndIcons";
                }
                if ([7, 9, 10, 11, 12].indexOf(layout) > -1) {
                    spanTitle.className = "whiteTheme";
                }

                spanTitle.innerText = p.title;

                if (layout == 3 && obj.data.design.hideText) {
                    spanTitle.classList.add('hide');
                }

                divTitle.appendChild(spanTitle);

                pluginItemDetails.appendChild(divTitle);

                if (layout != 12) {
                    pluginsContainer.appendChild(pluginItem);

                } else {
                    if ((i + 1) % 8 == 0) {
                        var span=pluginItem.getElementsByTagName("span");
                        if (span.length==1){
                            span[0].innerText='...';
                        } else {
                            window.alert('pluginItem span elements count is not 1 but is '+span.length);
                        }
                        pluginsWrapper.appendChild(pluginItem);
                        pluginItemSlidesContainer.appendChild(pluginsWrapper);
                        //create new wrapper
                        pluginsWrapper = document.createElement('div');
                        pluginsWrapper.classList.add("pluginsWrapper");

                    } else {
                        pluginsWrapper.appendChild(pluginItem);

                        if ((i + 1 ) == plugins.length) {
                            pluginItemSlidesContainer.appendChild(pluginsWrapper);
                        }
                    }
                }
            }

            if (layout == 12) {
                pluginItemFrame.appendChild(pluginItemSlidesContainer);
                pluginsContainer.appendChild(pluginItemFrame);

                renderCarousel(null, layout);
            }

            //load image in first render
            lazyLoad.processLazyImages();
        });
        initStyle(obj, layout);

        if (layout != 12) {
            //Render Carousel
            renderCarousel(obj.data.content.carouselImages, layout);
        }
    }

    function getPlugins(obj, callback) {
        var plugins = [];
        if (obj.data.content.loadAllPlugins) {
            function _mapFromSearch(data) {
                var result = [], dataResult = [], dataResultLength = 0, currentPlugin = null, tempObj = null;
                if (data.result && data.result instanceof Array) {
                    dataResult = data.result;
                    dataResultLength = dataResult.length;
                    for (var i = 0; i < dataResultLength; i++) {

                        currentPlugin = dataResult[i];
                        if (currentPlugin.data && currentPlugin.data._buildfire) {
                            tempObj = {};

                            tempObj.folderName = currentPlugin.data._buildfire.pluginType.result[0].folderName;
                            tempObj.instanceId = currentPlugin.data.instanceId;
                            tempObj.iconUrl = currentPlugin.data.iconUrl;
                            tempObj.pluginTypeId = currentPlugin.data._buildfire.pluginType.data;
                            tempObj.pluginTypeName = currentPlugin.data._buildfire.pluginType.result[0].name;
                            tempObj.title = currentPlugin.data.title;
                            tempObj.iconClassName = currentPlugin.data.iconClassName;
                            result.push(tempObj);
                            tempObj = null;
                            currentPlugin = null;
                        }
                    }
                }
                return result;
            }

            var searchOptions = {pageIndex: 0, pageSize: 100};

            buildfire.pluginInstance.search(searchOptions, function (err, result) {
                if (err) {
                    console.error("Error searching plugins: ", err);
                }
                var data = _mapFromSearch(result);
                plugins = data;
                callback(data);
            });
        }
        else {
            if (obj.data._buildfire && obj.data._buildfire.plugins &&
                obj.data._buildfire.plugins.result && obj.data._buildfire.plugins.data) {
                plugins = getPluginDetails(obj.data._buildfire.plugins.result, obj.data._buildfire.plugins.data);
            }
            callback(plugins);
        }
    }

    function getPluginDetails(pluginsInfo, pluginIds) {
        var returnPlugins = [];
        var tempPlugin = null;
        for (var id = 0; id < pluginIds.length; id++) {
            for (var i = 0; i < pluginsInfo.length; i++) {
                tempPlugin = {};
                var obj = pluginsInfo[i].data ? pluginsInfo[i].data : pluginsInfo[i];
                if (pluginIds[id] == obj.instanceId) {
                    tempPlugin.instanceId = obj.instanceId;
                    if (obj) {
                        tempPlugin.iconUrl = obj.iconUrl;
                        tempPlugin.iconClassName = obj.iconClassName;
                        tempPlugin.title = obj.title;
                        if (obj.pluginType) {
                            tempPlugin.pluginTypeId = obj.pluginType.token;
                            tempPlugin.folderName = obj.pluginType.folderName;
                        }
                        else {
                            tempPlugin.pluginTypeId = obj.pluginTypeId;
                            tempPlugin.folderName = obj.folderName;
                        }
                    } else {
                        tempPlugin.iconUrl = "";
                        tempPlugin.title = "[No title]";
                    }
                    returnPlugins.push(tempPlugin);
                }
                tempPlugin = null;
            }
        }
        return returnPlugins;
    }

    function initStyle(obj, layout) {
        var style = document.getElementById("injectedStyle");
        if (style) document.head.removeChild(style);

        style = document.createElement('style');
        style.id = "injectedStyle";

        var bgImage = obj.data.design.backgroundImage || obj.data.design.lgBackgroundImage;

        if (obj.data.design.lgBackgroundImage && window.innerWidth >= 600) {
            //iPads
            bgImage = obj.data.design.lgBackgroundImage;
        }

        if (bgImage) {
            style.innerHTML += "body { background: no-repeat url('" + buildfire.imageLib.cropImage(bgImage, {
                    width: window.innerWidth,
                    height: window.innerHeight
                }) + "') !Important; background-size: cover !important; } ";
        }

        if (obj.data.design.hideText)
            style.innerHTML += " .divTitle { display:none !Important} ";

        if (layout == 12) {
            style.innerHTML += " #carousel { display:none !Important} ";
        }

        if (style.innerHTML.length > 0)
            document.head.appendChild(style);
    }

    buildfire.datastore.getWithDynamicData(loadData);

    buildfire.datastore.onUpdate(function (obj) {
        loadData(null, obj)
    });

    buildfire.messaging.onReceivedMessage = function (event) {
        if (event) {
            var plugin = event.message.data;
            switch (event.name) {
                case 'OPEN_PLUGIN':
                    var fName = '';
                    if (plugin && plugin.pluginType && plugin.pluginType.folderName)
                        fName = plugin.pluginType.folderName;
                    else if (plugin && plugin.folderName)
                        fName = plugin.folderName;

                    buildfire.navigation.navigateTo({
                        pluginId: plugin.pluginId,
                        instanceId: plugin.instanceId,
                        title: plugin.title,
                        folderName: fName
                    });
                    break;
            }
        }
    };

    function calcFontSize(options, layout) {
        var fontSize = 0;
        if ([6].indexOf(layout) >= 0) {
            fontSize = options.height - 22;
        }
        else if ([5].indexOf(layout) >= 0) {
            fontSize = options.height;
        } else {
            fontSize = options.height - 15;
        }

        return fontSize;
    }

    function calcImgOptions(layout) {
        var option = {};
        if ([3, 4, 9].indexOf(layout) >= 0) {
            option.width = window.innerWidth;
            option.height = option.width * 9 / 16;
        }
        else if ([1, 8].indexOf(layout) >= 0) {
            option.width = window.innerWidth * (0.15);
            option.height = option.width;
        }
        else if (layout == 2) {
            option.width = window.innerWidth * (0.32);
            option.height = window.innerWidth * (0.18);
        }
        else if ([5, 11].indexOf(layout) >= 0) {
            option.width = Math.round(window.innerWidth / 2);
            option.height = option.width;
        }
        else if (layout == 6) {
            option.width = Math.round(window.innerWidth / 2.4);
            option.height = option.width;
        }
        else if (layout == 7) {
            option.width = window.innerWidth;
            option.height = Math.round(window.innerWidth / 2.2);
        }
        else if (layout == 10) {
            option.width = window.innerWidth;
            option.height = Math.round(window.innerWidth * 0.23);
        }
        return option;
    }

    function onClick(e) {

        var i = parseInt(this.getAttribute('index'));
        var p = plugins[i];

        buildfire.navigation.navigateTo({
            pluginId: p.pluginTypeId
            , folderName: p.folderName
            , instanceId: p.instanceId
            , title: p.title
        });
    }

    function renderCarousel(carouselImages, layout) {
        if (layout != 12) {
            var carouselContainer = document.getElementById("carousel");
            if (carouselImages && carouselImages.length > 0) {
                /*
                 if more than one image add carousel else add image directly to the carousel container
                 */
                if (carouselImages.length > 1) {

                    var carousel = new buildfire.components.carousel.view({
                        selector: carouselContainer,
                        items: carouselImages,
                        speed: 1000
                    });

                } else {
                    //add image directly to carousel container without adding the carousel lib
                    carouselContainer.innerHTML = '';
                    //append image tag
                    var img = document.createElement('img');
                    img.setAttribute("src", buildfire.imageLib.cropImage(carouselImages[0].iconUrl, {
                        width: window.innerWidth,
                        height: Math.ceil(9 * (window.innerWidth) / 16)
                    }));
                    img.alt = "Carousel Image";
                    carouselContainer.appendChild(img);
                    img.addEventListener("click", function () {
                        buildfire.actionItems.execute(carouselImages[0], function (err, result) {
                            if (err) {
                                console.warn('Error openning slider action: ', err);
                            }
                        });
                    });
                }

                carouselContainer.classList.remove('hide');
            } else {
                carouselContainer.classList.add('hide');
            }
        }
    }

    //attach scroll event for lazy load images
    document.getElementsByTagName('body')[0].addEventListener("scroll", lazyLoad.processLazyImages, false);
</script>
<style>
    * {
        outline: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-family: Helvetica, Sans-Serif, Arial;
    }

    /* iFrame */
    /* Plugin iFrame */
    img,
    iframe,
    object {
        max-width: 100%;
        vertical-align: top;
    }

    section .pluginPage,
    section .pluginPage #pluginContentPanel,
    #iframeControl,
    #iframeControl body,
    #controlIFrame,
    #controlIFrame body,
    .pluginFrame,
    #pluginFrame,
    #launcherPlugin,
    html[buildfire] {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        background: none;
        overflow: hidden !important;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    html[buildfire] body {
        height: 100% !important;
        width: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0;
        overflow-x: hidden;
    }

    html[buildfire] body.no-scroll {
        overflow: hidden !important;
        -webkit-overflow-scrolling: inherit !important;
    }

    html[buildfire] body.no-scroll .scrollable {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        height: 100% !important;
        width: 100% !important;
    }

    /* Smaller Mobile Screens */
    @media (max-height: 540px) {
        .login-holder .moreoptions {
            margin-top: 0 !important;
        }
    }

    /* Mobile Landscape Mode */
    @media (max-height: 470px) {
        .login-holder .login.content.padded {
            padding-top: 60px !important;
        }
    }

    /* END iFrame */
    /* END Plugin iFrame */


    /*
                                        Carousel

    */

    #carousel ul {
        margin-bottom: 0px !important;
    }

    #pluginsContainer .pluginItem {
        width: 100%;
        display: block;
    }

    /*
                                                                Layout-1
    */
    #pluginsContainer.layout1 .pluginItem {
        display: inline-block;
        border-top: 1px solid rgba(57, 52, 46, 0.25) !important;
        min-height: 20vw;
        max-height: 20vw;
        overflow: hidden;
    }

    .layout1 .pluginItem .media-holder.media-holder-icon {
        width: 15vw;
        height: 15vw;
        border-radius: 4px;
        margin: 3vw;
        text-align: center;
        float: left;
        margin-right: 4vw;
    }

    .layout1 .pluginItem .media-holder.media-holder-icon img {
        width: 100%;
        height: 100%;
    }

    .layout1 .pluginItem .media-holder.media-holder-icon .main-icon {
        font-size: 15vw !important;
        position: relative;
        top: -1px;
    }

    .layout1 .pluginItem .media-holder.media-holder-icon .main-icon:before {
        display: inline-block;
    }

    .layout1 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        margin-top: 8vw !important;
        display: block;
    }

    /*
                                                                Layout-2
    */
    #pluginsContainer.layout2 .pluginItem {
        display: inline-block;
        border-top: 1px solid rgba(57, 52, 46, 0.25) !important;
        min-height: 21vw;
        max-height: 21vw;
        overflow: hidden;
    }

    .layout2 .pluginItem .media-holder.media-holder-icon {
        width: 32vw;
        height: 18vw;
        margin: inherit;
        margin-right: 10px;
        border-radius: 4px;
        margin: 2vw;
        text-align: center;
        float: left;
        overflow: hidden;
    }

    .layout2 .pluginItem .media-holder.media-holder-icon img {
        width: 100%;
        height: 100%;
    }

    .layout2 .pluginItem .media-holder.media-holder-icon .main-icon {
        font-size: 18vw !important;
        position: relative;
        top: -1px;
    }

    .layout2 .pluginItem .media-holder.media-holder-icon .main-icon:before {
        display: inline-block;
    }

    .layout2 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        margin-top: 9vw !important;
        display: block;
    }

    /*
                                                                    Layout-3
        */

    #pluginsContainer.layout3 .pluginItem {
        min-height: 70vw;
        max-height: 70vw;
        overflow: hidden;
    }

    .layout3 .media-holder-text {
        padding: 15px;
    }

    .layout3 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        text-align: left;
    }

    .layout3 .media-holder {
        text-align: center;
        width: 100%;
    }

    .layout3 .media-holder.media-holder-icon.hasImg {
        max-height: 56vw;
    }

    /*
                                                                    Layout-4
        */
    #pluginsContainer.layout4 .pluginItem {
        position: relative;
        min-height: 56vw;
        max-height: 56vw;
        overflow: hidden;
    }

    .layout4 .media-holder-text {
        padding: 15px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        opacity: .85;
    }

    .layout4 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        text-align: left;
    }

    .layout4 .media-holder {
        text-align: center;
        width: 100%;
    }

    /*
                                                                    Layout-5
        */
    #pluginsContainer.layout5 .pluginItem {
        width: 50%;
        display: inline-block;
        text-align: center;
        position: relative;
        float: left;
        min-height: 50vw;
        max-height: 50vw;
        overflow: hidden;
    }

    .layout5 .media-holder-text {
        padding: 10px;
        position: absolute;
        width: 100%;
        opacity: .85;
        bottom: 0;
    }

    .layout5 .pluginItem .media-holder.media-holder-icon .main-icon {
        font-size: 48.8vw !important;
        position: relative;
        top: -1px;
    }

    .layout5 .pluginItem .media-holder.media-holder-icon .main-icon:before {
        display: inline-block;
    }

    .layout5 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    /*
                                                                    Layout-6
        */
    #pluginsContainer.layout6 .pluginItem {
        width: 50%;
        display: inline-block;
        text-align: center;
        float: left;
        min-height: 56vw;
        max-height: 56vw;
        overflow: hidden;
    }

    #pluginsContainer.layout6 .pluginItem .pluginItemDetails{
        padding: 0px 15px;
    }

    .layout6 .pluginItem .media-holder.media-holder-icon {
        overflow: hidden;
    }

    .layout6 .pluginItem .media-holder.media-holder-icon .main-icon {
        font-size: 42.4vw !important;
        position: relative;
        top: -1px;
    }

    .layout6 .pluginItem .media-holder.media-holder-icon .main-icon:before {
        display: inline-block;
    }

    .layout6 .media-holder-text {
        padding: 15px 0px;
    }

    .layout6 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    /*
                                                                    Layout-7
        */
    #pluginsContainer.layout7 .pluginItem {
        position: relative;
        min-height: 45vw;
        max-height: 45vw;
        overflow: hidden;
    }

    .layout7 .media-holder-text {
        padding: 15px;
        position: absolute;
        width: 100%;
        opacity: .85;
        bottom: 0px;
    }

    .layout7 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        text-align: left;
    }

    .layout7 .media-holder {
        text-align: center;
        width: 100%;
    }

    /*
                                                                    Layout-8
        */
    #pluginsContainer.layout8 .pluginItem {
        display: block;
        border-top: 1px solid rgba(57, 52, 46, 0.25) !important;
        min-height: 18vw;
        max-height: 18vw;
        overflow: hidden;
    }

    .layout8 img {
        border-radius: 50% !important;
    }

    .layout8 .pluginItem .media-holder.media-holder-icon {
        width: 15vw;
        height: 15vw;
        margin: inherit;
        margin-right: 10px;
        border-radius: 4px;
        margin: 2vw;
        text-align: center;
        float: left;
    }

    .layout8 .pluginItem .media-holder.media-holder-icon .main-icon {
        font-size: 15vw !important;
        position: relative;
        top: -1px;
    }

    .layout8 .pluginItem .media-holder.media-holder-icon .main-icon:before {
        display: inline-block;
    }

    .layout8 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        margin-top: 7.5vw !important;
        display: block;
    }

    /*
                                                                    Layout-9
        */
    #pluginsContainer.layout9 .pluginItem {
        position: relative;
        min-height: 56vw;
        max-height: 56vw;
        overflow: hidden;
    }

    .layout9 .blackLayer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 7;
        background: rgba(0, 0, 0, 0.35);
        -webkit-transform: translate3d(0, 0, 0);
    }

    .layout9 .media-holder-text {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 0;
        width: 100%;
        padding: 0 20px;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        z-index: 7;
        -webkit-transform: translate3d(0, 0, 0);
        text-align: center;
    }

    .layout9 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .layout9 .media-holder {
        text-align: center;
        width: 100%;
    }

    /*
                                                                    Layout-10
        */
    #pluginsContainer.layout10 .pluginItem {
        position: relative;
        margin-bottom: 1px;
        min-height: 23.5vw;
        max-height: 23.5vw;
        overflow: hidden;
    }

    .layout10 .blackLayer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 7;
        background: rgba(0, 0, 0, 0.35);
        -webkit-transform: translate3d(0, 0, 0);
    }

    .layout10 .media-holder-text {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 0;
        width: 100%;
        padding: 0 20px;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        z-index: 7;
        -webkit-transform: translate3d(0, 0, 0);
        text-align: center;
    }

    .layout10 .media-holder-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .layout10 .media-holder {
        text-align: center;
        width: 100%;
    }

    /*
                                                                        Layout-11
            */
    #pluginsContainer.layout11 .pluginItem {
        position: relative;
        width: 50%;
        display: inline-block;
        text-align: center;
        float: left;
        padding: 1px;
        min-height: 50vw;
        max-height: 50vw;
        overflow: hidden;
    }

    #pluginsContainer.layout11 .pluginItem .pluginItemDetails {
        position: relative !important;
        height: 100%;
    }

    .layout11 .blackLayer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 7;
        background: rgba(0, 0, 0, 0.35);
        -webkit-transform: translate3d(0, 0, 0);
    }

    .layout11 .media-holder-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 7;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .layout11 .media-holder {
        text-align: center;
        width: 100%;
    }

    .layout11 .pluginItem .media-holder.media-holder-icon {
        position: relative;
        overflow: hidden;
    }

    .layout11 .pluginItem .media-holder.media-holder-icon img {
        display: block;
        /*position: absolute;*/
        /*top: 50%;*/
        /*left: 50%;*/
        min-height: 100%;
        min-width: 100%;
        /*transform: translate(-50%, -50%);*/
    }

    .layout11 .pluginItem .media-holder.media-holder-icon .main-icon {
        font-size: 48vw !important;
        position: relative;
        top: -1px;
    }

    .layout11 .pluginItem .media-holder.media-holder-icon .main-icon:before {
        display: inline-block;
    }

    /*
                                                                        Layout-12
            */
    #pluginsContainer.layout12 {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width: 70%;
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.8);
        padding: 5px 15px;
        border-radius: 3px;
    }

    .layout12 .pluginItemFrame {
        position: relative;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
    }

    .layout12 .media-holder-text span {
        display: block;
        text-align: center;
        padding: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .layout12 .media-holder.media-holder-text {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        width: 100%;
    }

    .layout12 .pluginsWrapper {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: top;
    }
</style>
<!-- build:bundleCSSFiles  -->
<link href="glyphicons.css" rel="stylesheet"/>
<!-- endbuild -->
</body>
</html>

The commentation state of the index.html lines 102, 224 and 225 may be toggled to use sample plugin data
from the file sampleplugindata.js, which I created and submitted in my GitHub pull request
(https://github.com/BuildFire/folderPlugin/pull/94). The sampleplugindata.js file contents is displayed here:
/*
Created by Lucio Montero in 18th, April, 2018, in order to test an improvement to the folderPlugin plugin of Buildfire, requested in the webpage
https://bountify.co/folder-layout-12-does-not-have-dots-to-indicate-more-items. The bug to be fixed is that in the list layout 12 this plugin should
display an ellipsis to indicate that the user can swipe downwards to discover more elements. As in the private server run of this plugin, the plugins
list does not appear, so I had to create the functions below to invent data for an arbitrary number of immaginary plugins.
In order to use the sample plugin names, you should uncomment the line saying <!--script src="sampleplugindata.js" type="text/javascript"/--> (line 102)
and the line saying //getFakePluginsList(16, function (result) { (line 225) in the index.html file in this folder, and comment the line saying
getPlugins(obj, function (result) { (line 224). The number (16) in the line 225 is the number of sample plugins names to invent information for.
*/
function getFakePluginsList(nFakePlugins, callback) {
plugins = getFakePluginDetails(nFakePlugins);
callback(plugins);
}
function getFakePluginDetails(nFakePlugins) {
/*Create information entries for an arbitrary number of fake Buildfire plugins.
nFakePlugins is the number of the fake plugins to invent data for.
*/
var returnPlugins = [];
var tempPlugin = null;
for (var id = 0; id < nFakePlugins; id++) {
tempPlugin = {};
tempPlugin.instanceId = "instance "+id;
tempPlugin.iconUrl = "icon "+id;
tempPlugin.iconClassName = "icon class "+id;
tempPlugin.title = "title "+id;
tempPlugin.pluginTypeId = "pluginTypeId "+id;
tempPlugin.folderName = "folderName "+id;
returnPlugins.push(tempPlugin);
tempPlugin = null;
}
return returnPlugins;
}

Best regards.
Lucio Montero.

Great. Thanks! Can you send me the link to your pull request?
twalters 1 month ago
Nevermind. Pull request accepted. Thanks!
twalters 1 month ago