TypeScript @core/custom/exports customAttr_register Examples

Example #1

File: attributes.ts Project: atmajs/MaskJS

function _create(name, asEvent?) {
    customAttr_register('x-' + name, 'client', function(node, attrValue, model, ctx, el, ctr) {
        var listenSlot = node === ctr;
        _attachListener(el, ctr, attrValue, asEvent, listenSlot);
    });
}	

Example #2

File: xToggle.ts Project: atmajs/MaskJS

import { customAttr_register } from '@core/custom/exports';
import { expression_eval_safe } from '../utils/expression';
import { obj_setProperty } from '@utils/obj';
import { expression_varRefs } from '@project/expression/src/exports';
import { Component } from '@compo/exports';

/**
 *	Toggle value with ternary operator on an event.
 *
 *	button x-toggle='click: foo === "bar" ? "zet" : "bar" > 'Toggle'
 */
customAttr_register('x-toggle', 'client', function(node, attrValue, model, ctx, el, ctr){
    var event = attrValue.substring(0, attrValue.indexOf(':')),
        expression = attrValue.substring(event.length + 1),
        ref = expression_varRefs(expression);
    
	if (typeof ref !== 'string') {
		// assume is an array
		ref = ref[0];
	}
	
    Component.Dom.addEventListener(el, event, function(){
        var val = expression_eval_safe(expression, model, ctx, ctr, node);
        obj_setProperty(model, ref, val);
    });
});

Example #3

File: xClassToggle.ts Project: atmajs/MaskJS

import { customAttr_register } from '@core/custom/exports';
import { domLib, Component } from '@compo/exports';

/**
 *	Toggle Class Name
 *
 *	button x-toggle='click: selected'
 */

customAttr_register('x-class-toggle', 'client', function(node, attrVal, model, ctx, element){
    
    var event = attrVal.substring(0, attrVal.indexOf(':')),
        klass = attrVal.substring(event.length + 1).trim();
    
	
    Component.Dom.addEventListener(element, event, function(){
        domLib(element).toggleClass(klass);
    });
});

Example #4

File: pipes.ts Project: atmajs/MaskJS

customAttr_register('x-pipe-signal', 'client', function(node, attrValue, model, ctx, element, ctr) {

    var arr = attrValue.split(';'),
        imax = arr.length,
        i = -1,
        x;
    while ( ++i < imax ) {
        x = arr[i].trim();
        if (x === '') 
            continue;
        
        var i_colon = x.indexOf(':'),
            event = x.substring(0, i_colon),
            handler = x.substring(i_colon + 1).trim(),
            dot = handler.indexOf('.'),
            
            pipe, signal;

        if (dot === -1) {
            log_error('Pipe-slot is invalid: {0} Usage e.g. "click: pipeName.pipeSignal"', x);
            return;
        }

        pipe = handler.substring(0, dot);
        signal = handler.substring(++dot);

        // if DEBUG
        !event && log_error('Pipe-slot is invalid. Event type is not set', attrValue);
        // endif

        dom_addEventListener(
            element
            , event
            , _createListener(pipe, signal)
        );
    }
});

Example #5

File: xxVisible.ts Project: atmajs/MaskJS

import { customAttr_register } from '@core/custom/exports';
import { expression_eval } from '@project/expression/src/exports';
import { Component } from '@compo/exports';
import { expression_createBinder, expression_bind, expression_unbind } from '@project/observer/src/exports';

customAttr_register('xx-visible', function(node, attrValue, model, ctx, el, ctr) {

	var binder = expression_createBinder(attrValue, model, ctx, ctr, function(value){
		el.style.display = value ? '' : 'none';
	});

	expression_bind(attrValue, model, ctx, ctr, binder);

	Component.attach(ctr, 'dispose', function(){
		expression_unbind(attrValue, model, ctr, binder);
	});

	if (expression_eval(attrValue, model, ctx, ctr, node)) {
		el.style.display = 'none';
	}
});