coffeescript-ui/demo/src/demos/ControlsDemo.coffee

Coffeescript User Interface System

###
 * coffeescript-ui - Coffeescript User Interface System (CUI)
 * Copyright (c) 2013 - 2016 Programmfabrik GmbH
 * MIT Licence
 * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
###

class Demo.ControlsDemo extends Demo
	getGroup: ->
		"Test"

	addControlExample: (text,control) ->
		CUI.dom.addClass(control.DOM, "cui-control")

		container_div = 
		CUI.dom.append(CUI.dom.append(CUI.dom.append(CUI.dom.append(CUI.dom.div('cui-controls-demo-control-container'),
		CUI.dom.div('cui-controls-demo-text-baseline-debug')), CUI.dom.div('cui-controls-demo-text-bottomline-debug')), control.DOM), CUI.dom.div('cui-controls-demo-text-bottomline-debug'))

		@demo_table.addExample(text,container_div)

	showAlignmentTest: ->
		CUI.dom.addClass(@demo_table.table, "cui-controls-demo-show-debug-helpers")

	hideAlignmentTest: ->
		CUI.dom.removeClass(@demo_table.table, "cui-controls-demo-show-debug-helpers")

	controlFormHasChanged: ->
		#TODO get the previous option to avoid removing all classes
		for option in @__width_test_options
			CUI.dom.removeClass(@demo_table.table, option.value)
		CUI.dom.addClass(@demo_table.table, @__control_form_data.width_type)

		for option in @__size_test_options
			CUI.dom.removeClass(@demo_table.table, option.value)
		CUI.dom.addClass(@demo_table.table, @__control_form_data.size)

		if @__control_form_data.alignment_test
			@showAlignmentTest()
		else
			@hideAlignmentTest()

	display: ->

		@demo_table = new Demo.DemoTable("cui-controls-demo-table")

		@__width_test_options = [
			text: "no width"
			value: "cui-controls-demo-force-width-auto"
		,
			text: "100%"
			value: "cui-controls-demo-force-width-hundred-percent"
		,
			text: "flex grow: 1"
			value: "cui-controls-demo-force-flex-grow"
		,
			text: "flex column align stretch"
			value: "cui-controls-demo-force-column-align-stretch"
		,
			text: "flex column align flex-start"
			value: "cui-controls-demo-force-column-align-flex-start"
		,
			text: "flex column align flex-end"
			value: "cui-controls-demo-force-column-align-flex-end"
		,
			text: "fixed size big"
			value: "cui-controls-demo-force-width-constant"
		,
			text: "fixed size small"
			value: "cui-controls-demo-force-width-constant-small"
		]

		@__size_test_options = [
			text: "mini"
			value: "cui-controls-demo-force-size-mini"
		,
			text: "normal"
			value: "cui-controls-demo-force-size-normal"
		,
			text: "big"
			value: "cui-controls-demo-force-size-big"
		,
			text: "bigger"
			value: "cui-controls-demo-force-size-bigger"
		]

		@__control_form_data =
			width_type: @__width_test_options[0].value
			size: @__size_test_options[1].value
			alignment_test: false

		control_form = new CUI.Form
			horizontal: true
			data: @__control_form_data
			onDataChanged: =>
				@controlFormHasChanged()

			fields: [
				type: CUI.Select
				name: "width_type"
				form:
					label: "Layout"
				options: @__width_test_options
			,
				type: CUI.Select
				name: "size"
				form:
					label: "Size"
				options: @__size_test_options
			,
				type: CUI.Checkbox
				text: "Show Alignment Test."
				name: "alignment_test"
			]
		.start()

		#TODO not working, so we set default to false
		#@showAlignmentTest()

		tool_bar = new CUI.PaneToolbar
			center:
				content: control_form

		@__verticalLayout = new CUI.VerticalLayout
			top:
				content: tool_bar
			center:
				content: @demo_table.table


		@addControlExample(
			"label"
		,
			new CUI.Label
				text: "Label text"

		)


		button_bar = new CUI.Buttonbar(
			tooltip:
				text: "mixed buttons and labels"
			buttons: [
				new CUI.Button(text: "groupA", group: "groupA")
				new CUI.Button(text: "groupA", group: "groupA")
				new CUI.Label(text: "Label")
				new CUI.Button(text: "groupB", group: "groupB")
			]
		)
		@addControlExample('buttonbar',button_bar)

		button_flat = new CUI.Button
			appearance: "flat"
			text: "Button Flat"

		@addControlExample('button flat',button_flat )

		button = new CUI.Button
			text: "Button"

		@addControlExample('button',button)


		checkBox = new CUI.Checkbox
			name: "anyName"
			text: "Check this"
		.start()

		@addControlExample("checkbox",checkBox)

		#add datafields

		for field in @getFields()
			field.data = @__form_data
			data_field = CUI.DataField.new(field)
			data_field.start()
			@addControlExample( field.name, data_field )

		@__verticalLayout

	undisplay: ->
		@

	getFields: ->
		multi_input_control = new CUI.MultiInputControl
			user_control: true
			preferred_key: "de-DE"
			keys: [
				name: "de-DE"
				tag: "DE"
				enabled: true
			,
				name: "en-US"
				tag: "EN"
			,
				name: "fr-FR"
				tag: "FR"
			]

		data_fields = []

		@__form_data =
			Output: "Output"
			Input: "Input"
			Textarea: "Textarea"
			Select: 4
			Checkbox: true
			Options: [2,3]
			OptionsRadio: 3
			DataTable: [
				yes_no: true
				number: 11
				input: "Horst"
			,
				yes_no: false
				number: 12
				input: "Henk"
			,
				yes_no: true
				number: 14
				input: "Torsten"
			]

		sel_opts = []
		for i in [0...10]
			sel_opts.push
				text: "Select: "+(i+1)
				value: i

		radio_opts = []
		for i in [0...1]
			radio_opts.push
				text: "Radio: "+(i+1)
				value: i

		options_opts = []
		for i in [0...1]
			options_opts.push
				text: "Option: "+(i+1)
				value: i


		fields = [
			type: CUI.Output
			name: "Output"
			form:
				right: new CUI.Label(text: "Hint 1")
		,
			type: CUI.Output
			placeholder: "OutputPlaceholder"
		,
			type: CUI.Input
			name: "Input"
		,
			type: CUI.FormButton
			text: "FormButton"
		,
			type: CUI.DateTime
			name: "DateTime"
		,
			type: CUI.Select
			options: sel_opts
			name: "Select FAILS 1px in firefox"
		,
			type: CUI.Checkbox
			text: "Check me!"
			name: "Checkbox"
			form:
				right: new CUI.Label(text: "Hint 2")
		,
			type: CUI.Options
			options: options_opts
			name: "Options"
		,
			type: CUI.Options
			radio: true
			options: radio_opts
			name: "OptionsRadio"
		,
			type: CUI.Input
			textarea: true
			name: "Textarea"
		,
			type: CUI.Output
			name: "Output"
		,
			type: CUI.MultiInput
			name: "MultiInputTextarea"
			textarea: true
			control: multi_input_control
			placeholder:
				"de-DE": "TEXTAREA de"
				"en-US": "TEXTAREA en"
				"fr-FR": "TEXTAREA fr"

		,
			type: CUI.MultiInput
			name: "MultiInput"
			control: multi_input_control
			placeholder:
				"de-DE": "INPUT de"
				"en-US": "INPUT en"
				"fr-FR": "INPUT fr"

		,
			form:
				label: "DataTable"
			type: CUI.DataTable
			rowMove: true
			name: "DataTable"
			fields: [
				form:
					label: "Eingabe"
				type: CUI.Input
				name: "input"
			,
				form:
					label: "Schräg?"
					rotate_90: true
				type: CUI.Checkbox
				name: "yes_no"
			,
				form:
					label: "Nummer"
					rotate_90: true
				type: CUI.NumberInput
				name: "number"
			]
		]

		for f in fields
			if not f.form
				f.form = {}
			if not f.form.label
				f.form.label = f.name

		fields



Demo.register(new Demo.ControlsDemo())