Fix base layout class

[jgabuya]

Filename: src/lib/layout.js

Issues

• CONTAINER_FLUID_CLASSNAME and CONTAINER_CLASSNAME are constants, not config keys
• Insert row into container before moving elements inside it
• Add row classname into constants file

[jgabuya]

Make src/lib/layout.js like so:

// global $
import {
    CONTAINER_FLUID_CLASSNAME,
    CONTAINER_CLASSNAME,
    ROW_CLASSNAME
} from '../constants'
import createElement from './utils/create-element'
import createRow from './utils/create-row'

class Layout {
    constructor(props) {
        this.$el = props.$el
        this.$movableElements = props.$movableElements
        this.isFluid = props.isFluid
    }

    addContainerRow() {
        const containerClassname = (this.isFluid) ? CONTAINER_FLUID_CLASSNAME : CONTAINER_CLASSNAME

        this.$container = createElement('div', containerClassname)
        this.$container.prepend(createRow())

        this.$el.prepend(this.$container)
        this.$container = this.$container.children(`.${ROW_CLASSNAME}`)
    }

    moveElementsToContainerRow() {
        this.$movableElements.forEach(($item) => {
            $item.appendTo(this.$container)
        })
    }

    render() {
        this.addContainerRow()
        this.moveElementsToContainerRow()

        console.log(`${this.constructor.name} has finished rendering.`)
    }
}

export default Layout

[jgabuya]

... src/lib/utils/create-row.js like so:

// global $
import { ROW_CLASSNAME } from '../../constants'
import createElement from './create-element'

/**
 * Creates a new bootstrap row
 * @param classNames (space-separated strings)
 * @returns {void|jQuery}
 */
export default function createRow(classNames = '') {
    return createElement('div', `${ROW_CLASSNAME} ${classNames}`)
}

[jgabuya]

... and src/constants.js like so:

export const CONTAINER_CLASSNAME = 'container'
export const CONTAINER_FLUID_CLASSNAME = 'container-fluid'
export const ROW_CLASSNAME = 'row'
export const CONTENT_OTHERS_CLASSNAME = 'EOTHERS'
export const CONTENT_HOME_CLASSNAME = 'EPHOME'
export const CONTENT_LOGIN_CLASSNAME = 'EPLOGIN'
export const CONTENT_REGISTER_CLASSNAME = 'EPREGISTER'
export const CONTENT_ALL_CATEGORIES_CLASSNAME = 'EPALLCATEGORIES'
export const CONTENT_CATEGORY_CLASSNAME = 'ECATEGORY'
export const CONTENT_SHOPPING_CART_CLASSNAME = 'EPSHOPPINGCART'
export const CONTENT_WISHLIST_CLASSNAME = 'EPWISHLIST'
export const CONTENT_GUEST_CHECKOUT_CLASSNAME = 'EPGUESTCHECKOUT'
export const CONTENT_CHECKOUT_CLASSNAME = 'EPCHECKOUT'
export const CONTENT_MY_ACCOUNT_CLASSNAME = 'EPMYACCOUNT'
export const CONTENT_CONTACT_FORM_CLASSNAME = 'EPCONTACTFORM'
export const CONTENT_PRODUCT_CLASSNAME = 'ESTYLE'
export const CONTENT_SEARCH_CLASSNAME = 'ESEARCH'
export const CONTENT_INFO_PAGE_CLASSNAME = 'EPAGE'
export const CONTENT_NOT_FOUND_CLASSNAME = 'NOTFOUND'

export const GLOBAL = 'global'
export const HEADER_TOP = 'header-top'
export const HEADER_MIDDLE = 'header-middle'
export const HEADER_BOTTOM = 'header-bottom'
export const FOOTER_TOP = 'footer-top'
export const FOOTER_MIDDLE = 'footer-middle'
export const FOOTER_BOTTOM = 'footer-bottom'

export const CONTENT = 'content'