html-model-usage.htm

<!DOCTYPE html>
<html>
    <head>
        
        <title>HTML Model Usage</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <link rel="stylesheet" type="text/css" href="basic/basic.min.css">
        <script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="components/ui-core.js" type="text/javascript" charset="utf-8"></script>
        <script src="components/ui-item-list.js" type="text/javascript" charset="utf-8"></script>
        <script src="components/ui-search-box.js" type="text/javascript" charset="utf-8"></script>

        <style>

            .item-model {

                position: relative;
                display: block;
                width: 100%;
                height: 100%;
                background-color: transparent;
                border: 0px solid white;
                
            }

            .item-model.background {

                position:absolute;
                top: 2px;
                left: 20px;
                width: calc(100% - 40px);
                height: calc(100% - 4px);
                background-color: transparent;
                border-radius: 13px;
                transition: background-color 0.3s ease 0s;

            }

            .item-model.background.selected {

                background-color: whitesmoke;

            }

            .item-model.icon {

                position:absolute;
                left: 30px;
                top: 12px;
                width: 70px;
                height: 70px;
                border-radius: 4px;
                background-color: transparent;
                border-width: 0px;

            }

            .item-model.title {

                position:absolute;
                left: 120px;
                top: 25px;
                width: 280px;
                height: auto;
                font-family: opensans;
                font-size: 20px;
                text-align: left;
                color: #4A4A4A;

            }

            .item-model.description {

                position:absolute;
                left: 120px;
                top: 49px;
                width: 280px;
                height: auto;
                color: gray;
                font-family: opensans;
                font-size: 14px;
                text-align: left;

            }

        </style>
        
        <script>

        const itemDataList = [
            { title:"Broccoli", desc:"Vegetable", iconFile:"assets/fruids/brokoli.png", searchText: "Broccoli Vegetable" },
            { title:"Strawberry", desc:"Fruit", iconFile:"assets/fruids/cilek.png", searchText: "Strawberry Fruit" },
            { title:"Tomato", desc:"Vegetable", iconFile:"assets/fruids/domates.png", searchText: "Tomato Vegetable" },
            { title:"Apple", desc:"Fruit", iconFile:"assets/fruids/elma.png", searchText: "Apple Fruit" },
            { title:"Carrot", desc:"Vegetable", iconFile:"assets/fruids/havuc.png", searchText: "Carrot Vegetable" },
            { title:"Watermelon", desc:"Fruit", iconFile:"assets/fruids/karpuz.png", searchText: "Watermelon Fruit" },
            { title:"Lemon", desc:"Fruit", iconFile:"assets/fruids/limon.png", searchText: "Lemon Fruit" },
            { title:"Banana", desc:"Fruit", iconFile:"assets/fruids/muz.png", searchText: "Banana Fruit" },
            { title:"Pomegranate", desc:"Fruit", iconFile:"assets/fruids/nar.png", searchText: "Pomegranate Fruit" },
            { title:"Eggplant", desc:"Vegetable", iconFile:"assets/fruids/patlican.png", searchText: "Eggplant Vegetable" },
            { title:"Blueberry", desc:"Fruit", iconFile:"assets/fruids/yabanmersini.png", searchText: "Blueberry Fruit" },
            { title:"Green Pepper", desc:"Vegetable", iconFile:"assets/fruids/yesilbiber.png", searchText: "Green Pepper Vegetable" }
        ];
        
        const start = function() {

            const box = createBox(0, 0, getDefaultContainerBox().width, getDefaultContainerBox().height);
            page.boxSearchPage = box;

            box.color = "transparent";
            box.scrollY = 0;

            // #1

            // BOX: Search container.
            box.boxSearch = createBox(0, 0, box.width, 105);
            box.add(that);
            that.color = "transparent";
            that.border = 0;

            // UI SEARCH BOX: Search box in boxSearch.
            UISearchBox.resetDefault();
            box.boxSearch.uiSearchBox = UISearchBox.create({ width: box.width - 40 });
            box.boxSearch.add(that);
            // Show
            that.left = 20;
            that.bottom = 20;

            // #2

            // UI ITEM LIST: Items (VERTICAL)
            box.uiItemList = UIItemList.create({ 
                width: box.width, 
                height: box.height - box.boxSearch.height 
            });
            box.add(that);
            that.color = "transparent";
            that.top = box.boxSearch.height;
            that.setItemAlignment(UIItemList.alignType.VERTICAL);
            that.setInnerSpaces(0, 10, 0, 10);
            that.setItemCreationFunction(createItem);
            that.createItemsByDataList(itemDataList);
            that.onSelectionChange(selectedItemChanged);
            // Show
            that.aline(box.boxSearch, "bottom");

            // Connect search box with plant item list.
            box.boxSearch.uiSearchBox.onSearch(function (searchText, uiSearchBox) {
                box.uiItemList.searchItemByText(searchText);
            });

            page.onResize(pageResized);
            
        }

        const createItem = function(itemData, uiItemList) {

            const ITEM_WIDTH = uiItemList.width;
            const ITEM_HEIGHT = 94;

            // BOX: Item container.
            const item = createBox();
            item.color = "transparent";
            item.width = ITEM_WIDTH;
            item.height = ITEM_HEIGHT;

            item.html = `
                <div class="item-model">
                    <div class="item-model background"></div>
                    <img class="item-model icon" src="${itemData.iconFile}">
                    <div class="item-model title">${itemData.title}</div>
                    <div class="item-model description">${itemData.desc}</div>
                </div>
                `;

            //console.log(item.element.childNodes[1].outerHTML);
            item.backgroundElement = item.element.childNodes[1].childNodes[1];

            // NOTE: check js/page/search-page.js file for using without HTML and CSS.

            makeBasicObject(item);
            return item;

        }

        const selectedItemChanged = function(uiItemList, clickedItem, prevClickedItem) {

            if (!clickedItem.isSelected()) {

                if (prevClickedItem) {

                    prevClickedItem.backgroundElement.className = "item-model background";
                    uiItemList.removeItemFromSelectedList(prevClickedItem);

                }

                clickedItem.backgroundElement.className = "item-model background selected";
                uiItemList.addItemToSelectedList(clickedItem);

            }

            console.log("Selected item: " + clickedItem.getIndex() + "-" + clickedItem.getData().title);

        }

        const pageResized = function() {
            /*

            // Resize when page size changes.
            // NOTE: It does not need to be used for mobile app template.

            page.boxSearchPage.width = getDefaultContainerBox().width;
            page.boxSearchPage.height = getDefaultContainerBox().height;
            page.boxSearchPage.boxSearch.width = getDefaultContainerBox().width;
            page.boxSearchPage.boxSearch.uiSearchBox.width = box.width - 40;
            page.boxSearchPage.uiItemList.width = page.boxSearchPage.width;
            page.boxSearchPage.uiItemList.height = page.boxSearchPage.height - page.boxSearchPage.boxSearch.height;
            page.boxSearchPage.uiItemList.forEach(function(item) {
                item.width = page.boxSearchPage.uiItemList.width;
            });

            */
        }

        </script>

    </head>
    <body></body>
</html>