coffeescript-ui/demo/src/demos/ListView/ListViewTreeDemo.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.ListViewTreeDemo extends Demo

	#load filesystem tree, used as example content for list views
	loadFiles: ->
		dfr = new CUI.Deferred()

		data = require('./files.txt')

		@files = []
		for line in data.split("\n")
			if line.trim() == ""
				continue
			spl = line.split(" ")
			type = spl[2]
			if type not in ["f", "d"]
				continue
			parts = spl[0].match("^(.*)\/(.*)$")
			if not parts
				path = spl[0]
				name = spl[0]
			else
				path = parts[1]
				name = parts[2]
			file =
				path: spl[0]
				name: name
				depth: parseInt(spl[1])
				type: type
				size: spl[3]
				date: new Date(Math.floor(spl[4]*1000))
			@files.push(file)

		dfr.resolve()
		dfr.promise()

	display: ->


		get_footer = (pane_footer) =>

			#get the parent listviewtree
			_lv = CUI.dom.closest(pane_footer.DOM, ".cui-list-view-tree").__dom_data["element"]

			minusButton = new CUI.Button
				icon: new CUI.Icon(class: "fa-minus")
				group: "plus-minus"
				disabled: true
				onClick: ->
					CUI.dom.remove(_lv.getSelectedNode())

			bb = (new CUI.Buttonbar
				buttons: [
					new CUI.Button
						group: "plus-minus"
						icon: new CUI.Icon(class: "fa-plus")
						onClick: =>
							_lv.addNode(new Demo.ListViewTreeDemoDummyNode(demo: @, date: new Date()))
					new CUI.Button
						group: "plus-minus"
						icon: new CUI.Icon(class: "fa-plus")
						text: "Nested"
						onClick: =>
							_lv.addNode(new Demo.ListViewNestedNode(demo: @, cols: 6))
					minusButton
				]
			)

			CUI.Events.listen
				node: _lv
				type: ["row_selected","row_deselected"]
				call: (ev, info) ->
					if _lv.getSelectedNode()
						minusButton.enable()
					else
						minusButton.disable()
			bb

		first_list_viewOptions =
			class: "cui-tree-list-view-demo-first-list-view"
			cols: ["auto", "maximize", "auto", "auto"]
			fixedRows: 1
			fixedCols: 1

		unmaximized_list_viewOptions = CUI.util.copyObject(first_list_viewOptions, true)
		connected_list_view1_option = CUI.util.copyObject(first_list_viewOptions, true)
		connected_list_view2_option = CUI.util.copyObject(first_list_viewOptions, true)
		connected_list_view3_option = CUI.util.copyObject(first_list_viewOptions, true)
		maximized_list_viewOptions = CUI.util.copyObject(first_list_viewOptions, true)
		plaintableListviewOptions = CUI.util.copyObject(first_list_viewOptions, true)

		first_list_viewOptions.root = new Demo.ListViewTreeDemoNode(demo: @)
		first_list_viewOptions.selectable = true
		first_list_viewOptions.header_center = "Fill Space ListView:"
		first_list_viewOptions.footer_left = get_footer

		@root_layout = new CUI.HorizontalLayout
			class: "cui-tree-list-view-demo-root-layout"
			left:
				content: CUI.dom.div()
			right:
				content: CUI.dom.div()


		connected_list_view1_option.root = new Demo.ListViewTreeDemoNode(demo: @)
		connected_list_view1_option.cols = ["auto", "auto", "auto", "auto"]
		connected_list_view1_option.class = "list-view-demo-fixed-width"
		connected_list_view1_option.header_left = "1:"
		connected_list_view1_option.maximize = false

		connected_list_view2_option.root = new Demo.ListViewTreeDemoNode(demo: @)
		connected_list_view2_option.class = "list-view-demo-fixed-width"
		connected_list_view2_option.header_left = "2:"
		connected_list_view2_option.cols = ["auto", "auto", "auto", "auto"]
		connected_list_view2_option.maximize = false

		connected_list_view3_option.root = new Demo.ListViewTreeDemoNode(demo: @)
		connected_list_view3_option.class = "list-view-demo-fixed-width"
		connected_list_view3_option.header_left = "3:"
		connected_list_view3_option.cols = ["auto", "auto", "auto", "auto"]
		connected_list_view3_option.maximize = false

		unmaximized_list_viewOptions.root = new Demo.ListViewTreeDemoNode(demo: @)
		unmaximized_list_viewOptions.cols = ["auto", "auto", "auto", "auto"]
		unmaximized_list_viewOptions.maximize = false
		#unmaximized_list_viewOptions.header_center = "Unmaximized ListView"
		unmaximized_list_viewOptions.selectable = true
		unmaximized_list_viewOptions.footer_left = get_footer

		maximized_list_viewOptions.root = new Demo.ListViewTreeDemoNode(demo: @)
		maximized_list_viewOptions.class = "list-view-demo-fixed-width"
		#maximized_list_viewOptions.header_center = "Maximized ListView"
		maximized_list_viewOptions.selectable = true
		maximized_list_viewOptions.footer_left = get_footer
		unmaximized_list_viewOptions.maximize = true

		first_list_view = new CUI.ListViewTree(first_list_viewOptions)

		connected_list_view1 = new CUI.ListViewTree(connected_list_view1_option)
		connected_list_view2 = new CUI.ListViewTree(connected_list_view2_option)
		connected_list_view3 = new CUI.ListViewTree(connected_list_view3_option)
		unmaximized_list_view = new CUI.ListViewTree(unmaximized_list_viewOptions)
		maximized_list_view = new CUI.ListViewTree(maximized_list_viewOptions)

		tabs = new CUI.Tabs
			class: "cui-tree-list-view-demo-tabs"
			footer_left: "This Footer belongs to the Tabs"
			tabs: [
				text: "ListView not maximized"
				content: unmaximized_list_view.render()
#			,
#				text: "ListView maximized"
#				content: maximized_list_view.render()
			]

		unmaximized_list_view.root.open()

		connected_list_view_layout = new CUI.VerticalLayout
			class: "cui-tree-list-view-demo-connected-layout"
			maximize: true
			center:
				content: [
					connected_list_view1.render()
					connected_list_view2.render()
					connected_list_view3.render()
				]

		connected_list_view1.root.open()
		connected_list_view2.root.open()
		connected_list_view3.root.open()


		@root_layout.getLayout().replace(first_list_view.render(),"left")
		first_list_view.appendRow(new Demo.ListViewTreeDemoHeaderNode())
		first_list_view.root.open()
		return @root_layout.DOM

		CUI.dom.append(@root_layout.getLayout().map.center, connected_list_view_layout.DOM)
		@root_layout.getLayout().replace(tabs.DOM,"right")


		connected_list_view1.appendRow(new Demo.ListViewTreeDemoHeaderNode())
		connected_list_view2.appendRow(new Demo.ListViewTreeDemoHeaderNode())
		connected_list_view3.appendRow(new Demo.ListViewTreeDemoHeaderNode())
		unmaximized_list_view.appendRow(new Demo.ListViewTreeDemoHeaderNode())
		#maximized_list_view.appendRow(new ListViewTreeDemoHeaderNode())

		@root_layout.DOM


class Demo.ListViewTreeDemoDummyNode extends CUI.ListViewTreeNode
	constructor: (@opts={}) ->
		@demo = @opts.demo
		super(@opts)

	initOpts: ->
		super()
		@addOpts
			demo:
				check: Demo.ListViewTreeDemo
			date:
				check: (v) ->
					v instanceof Date

	renderContent: =>
		@columns.splice(0,0, new CUI.ListViewColumn(text: @getNodeId()))

		d = CUI.dom.div()
		btn = new CUI.Button(
			text: "More Content"
			onClick: ->
				b = new CUI.Button
					text: ""+Math.random()
					onClick: ->
						CUI.DOM.remove(@DOM.parent())
						@destroy()
						CUI.Events.trigger
							type: "content-resize"
							node: d

				CUI.dom.append(d, CUI.dom.append(CUI.dom.div(), b.DOM))
				CUI.Events.trigger
					type: "content-resize"
					node: d
		)
		CUI.dom.append(d, CUI.dom.append(CUI.dom.div(), btn.DOM))

		@addColumn(new CUI.ListViewColumn(element: d, colspan: 2))
		# @addColumn(new CUI.ListViewColumn(text: dateToString(@opts.date)))
		new CUI.Label(text: "Added Manually")

class Demo.ListViewTreeDemoHeaderNode extends CUI.ListViewRow
	constructor: ->
		super()
		@addColumn(new CUI.ListViewColumn(text: "Node"))
		@addColumn(new CUI.ListViewColumn(text: "File"))
		@addColumn(new CUI.ListViewColumn(text: "Size"))
		@addColumn(new CUI.ListViewColumn(text: "Date"))


class Demo.ListViewTreeDemoNode extends CUI.ListViewTreeNode
	constructor: (@opts={}) ->

		@demo = @opts.demo
		@file = @opts.file
		super(@opts)

	initOpts: ->
		super()
		@addOpts
			demo:
				check: Demo.ListViewTreeDemo
			file:
				check: "PlainObject"
			leaf:
				check: Boolean


	getChildren: =>
		dfr = new CUI.Deferred()
		children = []

		push_file = (file) =>
			children.push(new Demo.ListViewTreeDemoNode(demo: @demo, file: file, leaf: file.type == "f"))

		if not @file
			@demo.loadFiles()
			.done =>
				for file in @demo.files
					if file.depth > 1
						continue
					push_file(file)

				# children.push(new ListViewNestedNode(demo: @demo, cols: 3))
				dfr.resolve(children)
		else
			for file in @demo.files
				if file.depth != @file.depth+1
					continue
				if file.path.substr(0, @file.path.length) != @file.path
					continue
				push_file(file)
			dfr.resolve(children)
		dfr.promise()

	renderContent: =>
		@columns.splice(0,0, new CUI.ListViewColumn(text: @getNodeId()))
		@addColumn(new CUI.ListViewColumn(text: @file.size))
		@addColumn(new CUI.ListViewColumn(text: dateToString(@file.date)))
		new CUI.Label(text: @file.name)

class Demo.ListViewNestedNode extends Demo.ListViewTreeDemoNode
	constructor: (@opts={}) ->
		@cols = @opts.cols
		@opts.leaf = true
		super(@opts)

	initOpts: ->
		super()
		@addOpts
			cols:
				check: "Integer"


	renderContent: ->
		@columns.splice(0,0,new CUI.ListViewColumn(text: @getNodeId()))

		__getColumns = (textFunc = (i) -> ""+i) =>
			columns = []
			columns.push(new CUI.ListViewColumn(text: String.fromCharCode(65+(lv?.rowsCount or 0))))
			for i in [0...@cols]
				columns.push(new CUI.ListViewColumn(text: textFunc(i)))
			columns

		columns = __getColumns()

		lv = new CUI.ListView
			cols: ((if idx == 1 then "auto" else "auto") for c, idx in columns)
			footer_left: new CUI.Buttonbar buttons: [
				new CUI.Button
					group: "plus-minus"
					icon: new CUI.Icon(class: "fa-plus")
					onClick: ->
						columns = __getColumns(-> ""+Math.floor(Math.random()*1000))
						lv.appendRow(new CUI.ListViewRow(columns: columns))
						#lv.layout()
						lb.enable()

				lb = new CUI.Button
					group: "plus-minus"
					disabled: true
					icon: new CUI.Icon(class: "fa-minus")
					text: "Last"
					onClick: ->
						if lv.rowsCount > 1
							lv.removeRow(lv.getRowIdx(lv.rowsCount-1))
							#lv.layout()
						if lv.rowsCount == 1
							lb.disable()

			]
			fixedRows: 1
			fixedCols: 1

		@addColumn(new CUI.ListViewColumn(colspan: 2, element: lv.render()))
		lv.appendRow(new CUI.ListViewRow(columns: columns))

		new CUI.Label(text: "Nested")



dateToString = (d) ->
	d.toLocaleDateString()+" "+d.toLocaleTimeString()


Demo.register(new Demo.ListViewTreeDemo())