mczepiel/indent.js

## readme.md

      
    Raw
  

              readme.md
            
          
    This only work on the montage edge branch as it uses the data-arg/data-param system and the edge provided treeController
https://github.com/montagejs/montage/blob/edge/core/tree-controller.js
Example usage:
The actual tree and the specified component to use as the treeNode
    <div data-montage-id="fileTree">
        <span data-montage-id="fileCell" data-arg="treeNode"></span>
    </div>
The serialization that sets up the treeController, treeView, and component to repeat at each level of the tree.
            "fileTreeController": {
                "prototype": "montage/core/tree-controller",
                "properties": {
                    "childrenPath": "children"
                },
                "bindings": {
                    "content": {"<-": "@owner.files"}
                }
            },

            "fileTree": {
                "prototype": "ui/tree.reel",
                "properties": {
                    "element": {"#": "fileTree"},
                    "isSelectionEnabled": true
                },
                "bindings": {
                    "treeController": {"<-": "@owner.fileTreeController"}
                }
            },

            "fileCell": {
                "prototype": "./file-cell.reel",
                "properties": {
                    "element": {"#": "fileCell"}
                },
                "bindings": {
                    "fileInfo": {"<-": "@fileCell.parentComponent.object"},
                    "iteration": {"<-": "@fileCell.parentComponent.iteration"}
                }
            }


## indent.js
var Montage = require("montage").Montage;
var Component = require("montage/ui/component").Component;

exports.Indent = Montage.create(Component, {

    hasTemplate: { value: false },

    didCreate: {
        value: function () {
            this.depth = null;
            this.addOwnPropertyChangeListener("depth", this);
        }
    },

    canDraw: {
        value: function () {
            return this.depth !== null;
        }
    },

    handleDepthChange: {
        value: function () {
            this.needsDraw = true;
        }
    },

    iteration: {
        value: null
    },

    depth: {
        value: 0
    },

    object: {
        value: null
    },

    indentValue: {
        value: 20
    },

    indentUnit: {
        value: "px"
    },

    draw: {
        value: function () {
            this.element.style.paddingLeft = (this.indentValue * this.depth) + this.indentUnit;
        }
    }

});

## tree.css
.PackageExplorer .Tree-list {
    /* TODO: Remove the first item so the minus margin is not needed */
    margin: -20px 0 0 -12px;
}

.Tree-list {
    overflow-x: auto;
}

.Tree-list-row {
    padding-top: 2px;
    padding-bottom: 2px;
}

.Tree-list-row.selected {
    background-color: #aaaaff;
}

## tree.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="tree.css">
    <script type="text/montage-serialization">
    {
        "owner": {
            "properties": {
                "element": {"#": "tree"}
            },
            "bindings": {
                "root": {"<-": "@owner.treeController.object"}
            }
        },

        "list": {
            "prototype": "montage/ui/repetition.reel",
            "properties": {
                "element": {"#": "list"},
                "contentController": {"@": "listController"}
            }
        },

        "listController": {
            "prototype": "montage/core/range-controller",
            "bindings": {
                "content": {"<-": "@owner.treeController.iterations"}
            }
        },

        "row": {
            "prototype": "ui/tree.reel/indent",
            "properties": {
                "element": {"#": "row"}
            },
            "bindings": {
                "iteration": {"<-": "@list.objectAtCurrentIteration"},
                "depth": {"<-": "@list.objectAtCurrentIteration.depth"},
                "object": {"<-": "@list.objectAtCurrentIteration.content"}
            }
        }
    }
</script>
<body>

<div data-montage-id="tree">
    <div data-montage-id="list" class="Tree-list">
        <div data-montage-id="row" class="Tree-list-row">
            <div data-param="treeNode"></div>
        </div>
    </div>
</div>
</body>
</html>

## tree.js
var Montage = require("montage").Montage;
var Component = require("montage/ui/component").Component;

exports.Tree = Montage.create(Component, {

    treeController: {
        value: null
    }

});
	var Montage = require("montage").Montage;
	var Component = require("montage/ui/component").Component;

	exports.Indent = Montage.create(Component, {

	hasTemplate: { value: false },

	didCreate: {
	value: function () {
	this.depth = null;
	this.addOwnPropertyChangeListener("depth", this);
	}
	},

	canDraw: {
	value: function () {
	return this.depth !== null;
	}
	},

	handleDepthChange: {
	value: function () {
	this.needsDraw = true;
	}
	},

	iteration: {
	value: null
	},

	depth: {
	value: 0
	},

	object: {
	value: null
	},

	indentValue: {
	value: 20
	},

	indentUnit: {
	value: "px"
	},

	draw: {
	value: function () {
	this.element.style.paddingLeft = (this.indentValue * this.depth) + this.indentUnit;
	}
	}

	});
	.PackageExplorer .Tree-list {
	/* TODO: Remove the first item so the minus margin is not needed */
	margin: -20px 0 0 -12px;
	}

	.Tree-list {
	overflow-x: auto;
	}

	.Tree-list-row {
	padding-top: 2px;
	padding-bottom: 2px;
	}

	.Tree-list-row.selected {
	background-color: #aaaaff;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="tree.css">
	<script type="text/montage-serialization">
	{
	"owner": {
	"properties": {
	"element": {"#": "tree"}
	},
	"bindings": {
	"root": {"<-": "@owner.treeController.object"}
	}
	},

	"list": {
	"prototype": "montage/ui/repetition.reel",
	"properties": {
	"element": {"#": "list"},
	"contentController": {"@": "listController"}
	}
	},

	"listController": {
	"prototype": "montage/core/range-controller",
	"bindings": {
	"content": {"<-": "@owner.treeController.iterations"}
	}
	},

	"row": {
	"prototype": "ui/tree.reel/indent",
	"properties": {
	"element": {"#": "row"}
	},
	"bindings": {
	"iteration": {"<-": "@list.objectAtCurrentIteration"},
	"depth": {"<-": "@list.objectAtCurrentIteration.depth"},
	"object": {"<-": "@list.objectAtCurrentIteration.content"}
	}
	}
	}
	</script>
	<body>

	<div data-montage-id="tree">
	<div data-montage-id="list" class="Tree-list">
	<div data-montage-id="row" class="Tree-list-row">
	<div data-param="treeNode"></div>
	</div>
	</div>
	</div>
	</body>
	</html>
	var Montage = require("montage").Montage;
	var Component = require("montage/ui/component").Component;

	exports.Tree = Montage.create(Component, {

	treeController: {
	value: null
	}

	});