Skip to content

Instantly share code, notes, and snippets.

@monochromer

monochromer/ui-bits.js

Last active April 26, 2019 23:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save monochromer/6a72a389a23d4398e982974082173c54 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save monochromer/6a72a389a23d4398e982974082173c54 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. monochromer revised this gist Dec 22, 2016. 1 changed file with 9 additions and 3 deletions.
    12 changes: 9 additions & 3 deletions ui-bits.js
    View file
    Original file line number Diff line number Diff line change
    @@ -56,14 +56,20 @@ Boolean(Button.State[statName] & this.state)
    * Описание поведения
    */
    var Direction = {
    RIGHT: 0x01
    RIGHT: 0x01,
    TOP: 0x02
    };

    var DirectionBehaviour = {
    0x01 : function(character) {
    return Object.assign({
    return Object.assign({}, character, {
    left: character.left + character.hSpeed
    }, character);
    });
    },
    0x02: function(character) {
    return Object.assign({}, character, {
    left: character.top - character.vSpeed
    });
    }
    ]);

  2. monochromer revised this gist Nov 23, 2016. 1 changed file with 37 additions and 37 deletions.
    74 changes: 37 additions & 37 deletions ui-bits.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,42 +6,42 @@

    // состояния компонентов
    class Button {
    constructor() {
    this.state =
    Button.State.DISABLED |
    Button.State.HAS_ICON;
    this.element = document.createElement('button');
    this.getClassName();
    }
    constructor() {
    this.state =
    Button.State.DISABLED |
    Button.State.HAS_ICON;
    this.element = document.createElement('button');
    this.getClassName();
    }

    getClassName() {
    Object.keys(Button.State).forEach(function(stateName) {
    // 1-ый вариант
    var stateBits = Button.State[stateName];
    var cssClassName = Button.StateClassName[stateBits];
    var action = Boolean(this.state & stateBits) ? 'add' : 'remove';
    this.element.classList[action](cssClassName);
    getClassName() {
    Object.keys(Button.State).forEach(function(stateName) {
    // 1-ый вариант
    var stateBits = Button.State[stateName];
    var cssClassName = Button.StateClassName[stateBits];
    var action = Boolean(this.state & stateBits) ? 'add' : 'remove';
    this.element.classList[action](cssClassName);

    // 2-ой вариант
    this.element.className = Button.StateClassName[this.state];
    }, this);
    };
    // 2-ой вариант
    this.element.className = Button.StateClassName[this.state];
    }, this);
    };
    }

    Button.State = {
    DISABLED: 1,
    FOCUSED: 2,
    HOVERED: 4,
    ACTIVE: 8,
    HAS_ICON: 16
    DISABLED: 1,
    FOCUSED: 2,
    HOVERED: 4,
    ACTIVE: 8,
    HAS_ICON: 16
    }

    Button.StateClassName = {
    '1': 'item-disabled',
    '2': 'item-focused',
    '4': 'item-hovered',
    '8': 'item-active',
    '16': 'item-hasicon'
    '1': 'item-disabled',
    '2': 'item-focused',
    '4': 'item-hovered',
    '8': 'item-active',
    '16': 'item-hasicon'
    }

    // 2-ой вариант
    @@ -56,15 +56,15 @@ Boolean(Button.State[statName] & this.state)
    * Описание поведения
    */
    var Direction = {
    RIGHT: 0x01
    RIGHT: 0x01
    };

    var DirectionBehaviour = {
    0x01 : function(character) {
    return Object.assign({
    left: character.left + character.hSpeed
    }, character);
    }
    0x01 : function(character) {
    return Object.assign({
    left: character.left + character.hSpeed
    }, character);
    }
    ]);


    @@ -74,10 +74,10 @@ var DirectionBehaviour = {
    * Так, за одно обращение к хранилищу можно делать несколько операций с данными
    */
    const ActionType = {
    UPDATE_1:0x01,
    UPDATE_2:0x02
    UPDATE_1:0x01,
    UPDATE_2:0x02
    };

    store.dispatch({
    type: ActionType.UPDATE_1 | ActionType.UPDATE_2
    type: ActionType.UPDATE_1 | ActionType.UPDATE_2
    });
  3. monochromer revised this gist Nov 23, 2016. No changes.
  4. monochromer revised this gist Nov 23, 2016. No changes.
  5. monochromer revised this gist Nov 23, 2016. No changes.
  6. monochromer created this gist Nov 22, 2016.
    83 changes: 83 additions & 0 deletions ui-bits.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    /**
    * Битовые маски в UI
    * Автор: Игорь Алексеенко
    */


    // состояния компонентов
    class Button {
    constructor() {
    this.state =
    Button.State.DISABLED |
    Button.State.HAS_ICON;
    this.element = document.createElement('button');
    this.getClassName();
    }

    getClassName() {
    Object.keys(Button.State).forEach(function(stateName) {
    // 1-ый вариант
    var stateBits = Button.State[stateName];
    var cssClassName = Button.StateClassName[stateBits];
    var action = Boolean(this.state & stateBits) ? 'add' : 'remove';
    this.element.classList[action](cssClassName);

    // 2-ой вариант
    this.element.className = Button.StateClassName[this.state];
    }, this);
    };
    }

    Button.State = {
    DISABLED: 1,
    FOCUSED: 2,
    HOVERED: 4,
    ACTIVE: 8,
    HAS_ICON: 16
    }

    Button.StateClassName = {
    '1': 'item-disabled',
    '2': 'item-focused',
    '4': 'item-hovered',
    '8': 'item-active',
    '16': 'item-hasicon'
    }

    // 2-ой вариант
    Button.StateClassName[1 | 16] = 'item-disabled item-hasicon';

    // для проверки состояния
    Boolean(Button.State[statName] & this.state)



    /**
    * Описание поведения
    */
    var Direction = {
    RIGHT: 0x01
    };

    var DirectionBehaviour = {
    0x01 : function(character) {
    return Object.assign({
    left: character.left + character.hSpeed
    }, character);
    }
    ]);


    /**
    * Redux
    * Можно использовать битовые маски как параметр type для управляющих объектов action.
    * Так, за одно обращение к хранилищу можно делать несколько операций с данными
    */
    const ActionType = {
    UPDATE_1:0x01,
    UPDATE_2:0x02
    };

    store.dispatch({
    type: ActionType.UPDATE_1 | ActionType.UPDATE_2
    });