TypeScript jb.jb類代碼示例

	 constructor(public ctx, public cmp, public $el) {
	 	var data_ref = ctx.vars.$model.databind;
		this.editableNumber = ctx.vars.editableNumber;
		this.scaleElement = $el.find('.slider_scale')[0];
		this.thumbElement = $el.find('.slider_thumb')[0];
		this.inputElement = $el.find('.slider_input')[0];
		this.textElement = $el.find('.slider_text')[0];

		this.thumbElement.tabIndex = 1;
		$(this.thumbElement).bind('mousedown', e => this.dragBegin(e) );
		$(this.thumbElement).bind('keydown', e => this.keyDown(e) ); 
		$(this.inputElement).bind('keydown', e => this.inputKeyDown(e)); 
		$(this.inputElement).bind('blur', e => this.setInputValue());
		$(this.inputElement).hide();
		$(this.textElement).bind('mousedown', e => this.mouseDown(e) );

		this.numericValue = this.editableNumber.numericPart(jb.val(data_ref));
		this.$el.addClass('noselect');

		this.valueChangeEm = new jb_rx.Subject();
		this.valueChangeEm.distinctUntilChanged()
			.debounceTime(100)
			.filter(x => 
				x != jb.val(data_ref))
			.subscribe(x=>{
				jb.writeValue(data_ref,x); 
				jb_ui.apply(this.ctx); // to fix with ChangeDetectionStrategy
			})
	}

			.subscribe(x=>{
				jb.writeValue(data_ref,x); 
				jb_ui.apply(this.ctx); // to fix with ChangeDetectionStrategy
			})

jb.component('editable-number.slider', {
	type: 'editable-number.style',
	params: [
		{ id: 'width', as: 'number', defaultValue: '200' },
	],
	impl :{$:'customStyle',
		template: `<div class="jb-slider">
						<div class="slider_scale">
							<div class="slider_text"></div>
							<div class="slider_thumb"></div>
							<input class="slider_input">
						</div>
					</div>`,
		css: `{ height: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 12px; }
			.slider_scale { position:relative; float: left; background-color:#aaa; width: %$width%px; 
			  height: 1px; border-radius: 3px; margin-top: 13px; margin-right: 6px; 
			  margin-bottom: 13px; margin-left: 6px; 
			  border-bottom: 1px solid #efefef; }
			.slider_thumb { cursor: pointer; position: absolute; color:black; 
			  background-color:#efefef; width: 6px; height: 13px; 
			  border-radius: 2px; border: 1px solid #adadad; 
			  box-shadow:  inset 0 0 3px 0px gray; top: -7px; left: 0px; }
			.slider_thumb:hover { background-color:#eee; border-color: #777; }
			.slider_scale:hover .aa_slider_text { color:black; }
			.slider_thumb:focus { background-color:#383838; }
			.slider_text { color:#aaa; font-size: 10px; margin-top: -12px; margin-right: 0px; margin-bottom: 0px; margin-left: -19px; }
			.slider_scale.empty_value { opacity: 0.5; transition: opacity, 0.5s; }
			.slider_text:hover { cursor: pointer; text-decoration:underline; }
			.slider_input { position:absolute; width: 98px; height: 20px; border-radius: 6px; 
			  padding-top: 4px; padding-right: 4px; padding-bottom: 4px; 
			  padding-left: 18px; margin-top: -13px; margin-left: 24px; 
			  border: 1px solid #D1D1D1; box-shadow:  2px 2px 6px 1px gray; 
			}
			.slider_thumb.aa_disabled { opacity: 0.5 }
			.slider_text.aa_disabled { opacity: 0.5 }
			.slider_scale.aa_disabled { opacity: 0.5 }
`,
		methods: {
			init: ctx => cmp => {
				cmp.slider = new Slider(ctx,cmp,$(cmp.elementRef.nativeElement));
			},
			afterViewInit: ctx => cmp => {
				cmp.slider.initSizes();
				cmp.slider.adjustScale();
				cmp.slider.setThumbPosition();
			}
		},
      observable: () => {} // to create jbEmitter
	}
})

import {jb} from 'jb-core/jb';;
import * as jb_ui from 'jb-ui/jb-ui';

jb.type('editable-number.style');

jb.component('editable-number', {
  type: 'control', category: 'input:30',
  params: [
    { id: 'databind', as: 'ref'},
    { id: 'title', as: 'string' , dynamic: true },
    { id: 'style', type: 'editable-number.style', defaultValue: { $: 'editable-number.input' }, dynamic: true },
    { id: 'symbol', as: 'string', description: 'leave empty to parse symbol from value' },
    { id: 'min', as: 'number' },
    { id: 'max', as: 'number' },
    { id: 'displayString', as: 'string', dynamic: true, defaultValue: '%$Value%%$Symbol%' },
    { id: 'dataString', as: 'string', dynamic: true, defaultValue: '%$Value%%$Symbol%' },

    { id: 'step', as: 'number', defaultValue: 1, description: 'used by slider' },
    { id: 'initialPixelsPerUnit', as: 'number', description: 'used by slider' },
    { id: 'features', type: 'feature[]', dynamic: true },
  ],
  impl: (context,databind,title,style,symbol,min,max,displayString,dataString,step,initialPixelsPerUnit) => {
    var ctx = context.setVars({ 
      editableNumber: new editableNumber(symbol,min,max,displayString,dataString,step||1,initialPixelsPerUnit)
    });
  	return jb_ui.ctrl(ctx) 
  }
})

jb.component('editable-number.input',{
  type: 'editable-number.style',