Skip to content

Instantly share code, notes, and snippets.

@assembler

assembler/index.html

Created October 31, 2014 15:28
Show Gist options
  • Save assembler/8b6ebd1156d7fde5e408 to your computer and use it in GitHub Desktop.
Save assembler/8b6ebd1156d7fde5e408 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
ul, ol, li {
list-style: none;
margin: 0;
padding: 0;
}
#pipeline {
margin: 10px;
}
li.pipe {
border: 1px solid #ccc;
background: #fff;
position: relative;
padding: 20px 10px;
}
li.pipe > .btn-append-pipe, li.pipe > .btn-prepend-pipe {
width: 20px;
position: absolute;
left: 50%;
margin-left: -10px;
text-align: center;
cursor: pointer;
}
li.pipe > .btn-append-pipe.btn-append-pipe, li.pipe > .btn-prepend-pipe.btn-append-pipe {
bottom: -10px;
visibility: hidden;
}
li.pipe > .btn-append-pipe.btn-prepend-pipe, li.pipe > .btn-prepend-pipe.btn-prepend-pipe {
top: -10px;
}
li.pipe:last-child > .btn-append-pipe {
visibility: visible;
}
li.pipe.pipe-content-filter {
font-weight: bold;
}
li.pipe.pipe-content-empty:before {
content: "empty";
color: #ccc;
font-style: italic;
}
li.pipe.pipe-content-list > ol {
overflow: auto;
}
li.pipe.pipe-content-list > ol > li {
float: left;
margin: 0 10px;
border: 1px solid grey;
padding: 20px 10px;
}
</style>
</head>
<body>
<h1>Pipeline</h1>
<div id="pipeline"></div>
<script id="jsbin-javascript">
var BuildPipelineVisitor, ContentList, EmptyContent, FilterContent, List, Pipe, Pipeline, PipelineContent, PipelineRenderer, StringContent, pipeline,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
List = (function() {
function List(elements, visitorMethod) {
this.elements = elements != null ? elements : [];
this.visitorMethod = visitorMethod != null ? visitorMethod : "List";
}
List.prototype.append = function(element) {
return this.elements.push(element);
};
List.prototype.prepend = function(element) {
return this.elements.unshift(element);
};
List.prototype.insertAfter = function(referenceElement, newElement) {
var index;
index = this.elements.indexOf(referenceElement);
return this.elements.splice(index + 1, 0, newElement);
};
List.prototype.insertBefore = function(referenceElement, newElement) {
var index;
index = this.elements.indexOf(referenceElement);
return this.elements.splice(index, 0, newElement);
};
List.prototype.getSize = function() {
return this.elements.length;
};
List.prototype.isEmpty = function() {
return this.getSize() === 0;
};
List.prototype.remove = function(element) {
var index;
index = this.elements.indexOf(element);
return this.elements.splice(index, 1);
};
List.prototype.accept = function(visitor) {
var element, _i, _len, _ref;
visitor["visit" + this.visitorMethod](this);
_ref = this.elements;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
element = _ref[_i];
element.accept(visitor);
}
return visitor["exit" + this.visitorMethod](this);
};
return List;
})();
Pipeline = (function(_super) {
__extends(Pipeline, _super);
function Pipeline(pipes) {
if (pipes == null) {
pipes = [];
}
Pipeline.__super__.constructor.call(this, pipes, "Pipeline");
}
return Pipeline;
})(List);
Pipe = (function() {
function Pipe(content) {
if (!content) {
this.content = new EmptyContent();
} else if (typeof content === "string") {
this.content = new StringContent(content);
} else {
this.content = content;
}
}
Pipe.prototype.accept = function(visitor) {
visitor.visitPipe(this);
this.content.accept(visitor);
return visitor.exitPipe(this);
};
return Pipe;
})();
StringContent = (function() {
function StringContent(value) {
this.value = value;
}
StringContent.prototype.accept = function(visitor) {
return visitor.visitStringContent(this);
};
return StringContent;
})();
EmptyContent = (function() {
function EmptyContent() {}
EmptyContent.prototype.accept = function(visitor) {
return visitor.visitEmptyContent(this);
};
return EmptyContent;
})();
FilterContent = (function() {
function FilterContent(label) {
this.label = label;
}
FilterContent.prototype.accept = function(visitor) {
return visitor.visitFilterContent(this);
};
return FilterContent;
})();
ContentList = (function(_super) {
__extends(ContentList, _super);
function ContentList(contents) {
if (contents == null) {
contents = [];
}
ContentList.__super__.constructor.call(this, contents, "ContentList");
}
return ContentList;
})(List);
PipelineContent = (function() {
function PipelineContent(pipeline) {
this.pipeline = pipeline;
}
PipelineContent.prototype.accept = function(visitor) {
visitor.visitPipelineContent(this);
this.pipeline.accept(visitor);
return visitor.exitPipelineContent(this);
};
return PipelineContent;
})();
BuildPipelineVisitor = (function() {
function BuildPipelineVisitor() {
this.$current = $("<div>", {
"class": "pipeline-container"
});
}
BuildPipelineVisitor.prototype.getResult = function() {
return this.$current;
};
BuildPipelineVisitor.prototype.visitPipeline = function(pipeline) {
var $ol;
$ol = $("<ol>", {
"class": "pipeline"
}).appendTo(this.$current);
$ol.data("pipeline", pipeline);
return this.$current = $ol;
};
BuildPipelineVisitor.prototype.exitPipeline = function(pipeline) {
return this.goUp();
};
BuildPipelineVisitor.prototype.visitPipe = function(pipe) {
var $li;
$li = $("<li>", {
"class": "pipe"
}).appendTo(this.$current);
$li.data("pipe", pipe);
return this.$current = $li;
};
BuildPipelineVisitor.prototype.exitPipe = function(pipe) {
return this.goUp();
};
BuildPipelineVisitor.prototype.visitStringContent = function(content) {
return this.$current.addClass("pipe-content pipe-content-string").text(content.value);
};
BuildPipelineVisitor.prototype.visitEmptyContent = function(content) {
return this.$current.addClass("pipe-content pipe-content-empty");
};
BuildPipelineVisitor.prototype.visitFilterContent = function(content) {
return this.$current.addClass("pipe-content pipe-content-filter").text(content.label);
};
BuildPipelineVisitor.prototype.visitContentList = function(contentList) {
var $ol;
this.$current.addClass("pipe-content pipe-content-list");
this.$current.data("content-list", contentList);
$ol = $("<ol>").appendTo(this.$current);
return this.$current = $ol;
};
BuildPipelineVisitor.prototype.exitContentList = function(content) {
return this.goUp();
};
BuildPipelineVisitor.prototype.visitPipelineContent = function(content) {
var $li;
$li = $("<li>", {
"class": "pipe-content pipe-content-pipeline"
}).appendTo(this.$current);
$li.data("content-pipeline", content);
return this.$current = $li;
};
BuildPipelineVisitor.prototype.exitPipelineContent = function(content) {
return this.goUp();
};
BuildPipelineVisitor.prototype.goUp = function() {
return this.$current = this.$current.parent();
};
return BuildPipelineVisitor;
})();
PipelineRenderer = (function() {
function PipelineRenderer(container, pipeline) {
this.pipeline = pipeline;
this.$container = $(container);
this.bindEventHandlers();
}
PipelineRenderer.prototype.bindEventHandlers = function() {
this.$container.on("click", ".btn-append-pipe", (function(_this) {
return function() {
var pipe, pipeline;
pipe = $(event.target).parents(".pipe").data("pipe");
pipeline = $(event.target).parents(".pipeline").data("pipeline");
pipeline.insertAfter(pipe, new Pipe);
return _this.draw();
};
})(this));
this.$container.on("click", ".btn-prepend-pipe", (function(_this) {
return function() {
var pipe, pipeline;
pipe = $(event.target).parents(".pipe").data("pipe");
pipeline = $(event.target).parents(".pipeline").data("pipeline");
pipeline.insertBefore(pipe, new Pipe);
return _this.draw();
};
})(this));
this.$container.on("click", ".btn-delete-pipe", (function(_this) {
return function() {
var pipe, pipeline;
pipe = $(event.target).parents(".pipe").data("pipe");
pipeline = $(event.target).parents(".pipeline").data("pipeline");
pipeline.remove(pipe);
return _this.draw();
};
})(this));
return this.$container.on("click", ".btn-delete-pipe-content-pipeline", (function(_this) {
return function() {
var content, contentList;
content = $(event.target).parents(".pipe-content-pipeline").data("content-pipeline");
contentList = $(event.target).parents(".pipe-content-list").data("content-list");
contentList.remove(content);
return _this.draw();
};
})(this));
};
PipelineRenderer.prototype.draw = function() {
var $markup;
$markup = this.buildMarkup();
this.transformMarkup($markup);
this.$container.empty();
return this.$container.append($markup);
};
PipelineRenderer.prototype.buildMarkup = function() {
var visitor;
visitor = new BuildPipelineVisitor();
this.pipeline.accept(visitor);
return visitor.getResult();
};
PipelineRenderer.prototype.transformMarkup = function($markup) {
var $pipe, content, pipe, _i, _j, _len, _len1, _ref, _ref1, _results;
_ref = $(".pipe", $markup);
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
pipe = _ref[_i];
$pipe = $(pipe);
$("<button>", {
"class": "btn-append-pipe"
}).text("+").appendTo($pipe);
$("<button>", {
"class": "btn-prepend-pipe"
}).text("+").appendTo($pipe);
$("<button>", {
"class": "btn-delete-pipe"
}).text("x").appendTo($pipe);
}
_ref1 = $(".pipe-content-pipeline", $markup);
_results = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
content = _ref1[_j];
_results.push($("<button>", {
"class": "btn-delete-pipe-content-pipeline"
}).text("x").appendTo(content));
}
return _results;
};
return PipelineRenderer;
})();
pipeline = new Pipeline([new Pipe("A"), new Pipe("B"), new Pipe(new ContentList([new PipelineContent(new Pipeline([new Pipe("D1"), new Pipe("D2")])), new PipelineContent(new Pipeline([new Pipe("E1")]))])), new Pipe()]);
(new PipelineRenderer("#pipeline", pipeline)).draw();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<h1>Pipeline</h1>
<div id="pipeline"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">ul, ol, li {
list-style: none;
margin: 0;
padding: 0;
}
#pipeline {
margin: 10px;
}
li.pipe {
border: 1px solid #ccc;
background: #fff;
position: relative;
padding: 20px 10px;
>.btn-append-pipe, >.btn-prepend-pipe {
width: 20px;
position: absolute;
left: 50%;
margin-left: -10px;
text-align: center;
cursor: pointer;
&.btn-append-pipe {
bottom: -10px;
visibility: hidden;
}
&.btn-prepend-pipe {
top: -10px;
}
}
&:last-child {
>.btn-append-pipe {
visibility: visible;
}
}
&.pipe-content-filter {
font-weight: bold;
}
&.pipe-content-empty {
&:before {
content: "empty";
color: #ccc;
font-style: italic;
}
}
&.pipe-content-list {
> ol {
overflow: auto;
> li {
float: left;
margin: 0 10px;
border: 1px solid grey;
padding: 20px 10px;
}
}
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">class List
constructor: (@elements = [], @visitorMethod = "List") ->
append: (element) ->
@elements.push(element)
prepend: (element) ->
@elements.unshift(element)
insertAfter: (referenceElement, newElement) ->
index = @elements.indexOf(referenceElement)
@elements.splice(index+1, 0, newElement)
insertBefore: (referenceElement, newElement) ->
index = @elements.indexOf(referenceElement)
@elements.splice(index, 0, newElement)
getSize: -> @elements.length
isEmpty: -> @getSize() == 0
remove: (element) ->
index = @elements.indexOf(element)
@elements.splice(index, 1)
accept: (visitor) ->
visitor["visit#{@visitorMethod}"](this)
for element in @elements
element.accept(visitor)
visitor["exit#{@visitorMethod}"](this)
class Pipeline extends List
constructor: (pipes = []) ->
super(pipes, "Pipeline")
class Pipe
constructor: (content) ->
if !content
@content = new EmptyContent()
else if typeof(content) == "string"
@content = new StringContent(content)
else
@content = content
accept: (visitor) ->
visitor.visitPipe(this)
@content.accept(visitor)
visitor.exitPipe(this)
class StringContent
constructor: (@value) ->
accept: (visitor) ->
visitor.visitStringContent(this)
class EmptyContent
accept: (visitor) ->
visitor.visitEmptyContent(this)
class FilterContent
constructor: (@label) ->
accept: (visitor) ->
visitor.visitFilterContent(this)
class ContentList extends List
constructor: (contents = []) ->
super(contents, "ContentList")
class PipelineContent
constructor: (@pipeline) ->
accept: (visitor) ->
visitor.visitPipelineContent(this)
@pipeline.accept(visitor)
visitor.exitPipelineContent(this)
class BuildPipelineVisitor
constructor: ->
@$current = $("<div>", class: "pipeline-container")
getResult: -> @$current
visitPipeline: (pipeline) ->
$ol = $("<ol>", class: "pipeline").appendTo(@$current)
$ol.data("pipeline", pipeline)
@$current = $ol
exitPipeline: (pipeline) -> @goUp()
visitPipe: (pipe) ->
$li = $("<li>", class: "pipe").appendTo(@$current)
$li.data("pipe", pipe)
@$current = $li
exitPipe: (pipe) -> @goUp()
visitStringContent: (content) ->
@$current.addClass("pipe-content pipe-content-string").text(content.value)
visitEmptyContent: (content) ->
@$current.addClass("pipe-content pipe-content-empty")
visitFilterContent: (content) ->
@$current.addClass("pipe-content pipe-content-filter").text(content.label)
visitContentList: (contentList) ->
@$current.addClass("pipe-content pipe-content-list")
@$current.data("content-list", contentList)
$ol = $("<ol>").appendTo(@$current)
@$current = $ol
exitContentList: (content) -> @goUp()
visitPipelineContent: (content) ->
$li = $("<li>", class: "pipe-content pipe-content-pipeline").appendTo(@$current)
$li.data("content-pipeline", content)
@$current = $li
exitPipelineContent: (content) -> @goUp()
goUp: -> @$current = @$current.parent()
class PipelineRenderer
constructor: (container, @pipeline) ->
@$container = $(container)
@bindEventHandlers()
bindEventHandlers: ->
@$container.on "click", ".btn-append-pipe", =>
pipe = $(event.target).parents(".pipe").data("pipe")
pipeline = $(event.target).parents(".pipeline").data("pipeline")
pipeline.insertAfter(pipe, new Pipe)
@draw()
@$container.on "click", ".btn-prepend-pipe", =>
pipe = $(event.target).parents(".pipe").data("pipe")
pipeline = $(event.target).parents(".pipeline").data("pipeline")
pipeline.insertBefore(pipe, new Pipe)
@draw()
@$container.on "click", ".btn-delete-pipe", =>
pipe = $(event.target).parents(".pipe").data("pipe")
pipeline = $(event.target).parents(".pipeline").data("pipeline")
pipeline.remove(pipe)
@draw()
@$container.on "click", ".btn-delete-pipe-content-pipeline", =>
content = $(event.target).parents(".pipe-content-pipeline").data("content-pipeline")
contentList = $(event.target).parents(".pipe-content-list").data("content-list")
contentList.remove(content)
@draw()
draw: ->
$markup = @buildMarkup()
@transformMarkup($markup)
@$container.empty()
@$container.append($markup)
buildMarkup: ->
visitor = new BuildPipelineVisitor()
@pipeline.accept(visitor)
visitor.getResult()
transformMarkup: ($markup) ->
for pipe in $(".pipe", $markup)
$pipe = $(pipe)
$("<button>", class: "btn-append-pipe").text("+").appendTo($pipe)
$("<button>", class: "btn-prepend-pipe").text("+").appendTo($pipe)
$("<button>", class: "btn-delete-pipe").text("x").appendTo($pipe)
# for list in $(".pipe-list", $markup)
# $("<button>", class: "btn-append-pipe-list").text("+").appendTo(list)
for content in $(".pipe-content-pipeline", $markup)
$("<button>", class: "btn-delete-pipe-content-pipeline").text("x").appendTo(content)
# -------------------------------------------------------------- #
pipeline = new Pipeline([
new Pipe("A"),
new Pipe("B"),
new Pipe(new ContentList([
new PipelineContent(new Pipeline([
new Pipe("D1"), new Pipe("D2")
])),
new PipelineContent(new Pipeline([
new Pipe("E1")
]))
])),
new Pipe()
])
(new PipelineRenderer("#pipeline", pipeline)).draw()
</script></body>
</html>
Raw
jsbin.jedise.css
ul, ol, li {
list-style: none;
margin: 0;
padding: 0;
}
#pipeline {
margin: 10px;
}
li.pipe {
border: 1px solid #ccc;
background: #fff;
position: relative;
padding: 20px 10px;
}
li.pipe > .btn-append-pipe, li.pipe > .btn-prepend-pipe {
width: 20px;
position: absolute;
left: 50%;
margin-left: -10px;
text-align: center;
cursor: pointer;
}
li.pipe > .btn-append-pipe.btn-append-pipe, li.pipe > .btn-prepend-pipe.btn-append-pipe {
bottom: -10px;
visibility: hidden;
}
li.pipe > .btn-append-pipe.btn-prepend-pipe, li.pipe > .btn-prepend-pipe.btn-prepend-pipe {
top: -10px;
}
li.pipe:last-child > .btn-append-pipe {
visibility: visible;
}
li.pipe.pipe-content-filter {
font-weight: bold;
}
li.pipe.pipe-content-empty:before {
content: "empty";
color: #ccc;
font-style: italic;
}
li.pipe.pipe-content-list > ol {
overflow: auto;
}
li.pipe.pipe-content-list > ol > li {
float: left;
margin: 0 10px;
border: 1px solid grey;
padding: 20px 10px;
}
Raw
jsbin.jedise.js
var BuildPipelineVisitor, ContentList, EmptyContent, FilterContent, List, Pipe, Pipeline, PipelineContent, PipelineRenderer, StringContent, pipeline,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
List = (function() {
function List(elements, visitorMethod) {
this.elements = elements != null ? elements : [];
this.visitorMethod = visitorMethod != null ? visitorMethod : "List";
}
List.prototype.append = function(element) {
return this.elements.push(element);
};
List.prototype.prepend = function(element) {
return this.elements.unshift(element);
};
List.prototype.insertAfter = function(referenceElement, newElement) {
var index;
index = this.elements.indexOf(referenceElement);
return this.elements.splice(index + 1, 0, newElement);
};
List.prototype.insertBefore = function(referenceElement, newElement) {
var index;
index = this.elements.indexOf(referenceElement);
return this.elements.splice(index, 0, newElement);
};
List.prototype.getSize = function() {
return this.elements.length;
};
List.prototype.isEmpty = function() {
return this.getSize() === 0;
};
List.prototype.remove = function(element) {
var index;
index = this.elements.indexOf(element);
return this.elements.splice(index, 1);
};
List.prototype.accept = function(visitor) {
var element, _i, _len, _ref;
visitor["visit" + this.visitorMethod](this);
_ref = this.elements;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
element = _ref[_i];
element.accept(visitor);
}
return visitor["exit" + this.visitorMethod](this);
};
return List;
})();
Pipeline = (function(_super) {
__extends(Pipeline, _super);
function Pipeline(pipes) {
if (pipes == null) {
pipes = [];
}
Pipeline.__super__.constructor.call(this, pipes, "Pipeline");
}
return Pipeline;
})(List);
Pipe = (function() {
function Pipe(content) {
if (!content) {
this.content = new EmptyContent();
} else if (typeof content === "string") {
this.content = new StringContent(content);
} else {
this.content = content;
}
}
Pipe.prototype.accept = function(visitor) {
visitor.visitPipe(this);
this.content.accept(visitor);
return visitor.exitPipe(this);
};
return Pipe;
})();
StringContent = (function() {
function StringContent(value) {
this.value = value;
}
StringContent.prototype.accept = function(visitor) {
return visitor.visitStringContent(this);
};
return StringContent;
})();
EmptyContent = (function() {
function EmptyContent() {}
EmptyContent.prototype.accept = function(visitor) {
return visitor.visitEmptyContent(this);
};
return EmptyContent;
})();
FilterContent = (function() {
function FilterContent(label) {
this.label = label;
}
FilterContent.prototype.accept = function(visitor) {
return visitor.visitFilterContent(this);
};
return FilterContent;
})();
ContentList = (function(_super) {
__extends(ContentList, _super);
function ContentList(contents) {
if (contents == null) {
contents = [];
}
ContentList.__super__.constructor.call(this, contents, "ContentList");
}
return ContentList;
})(List);
PipelineContent = (function() {
function PipelineContent(pipeline) {
this.pipeline = pipeline;
}
PipelineContent.prototype.accept = function(visitor) {
visitor.visitPipelineContent(this);
this.pipeline.accept(visitor);
return visitor.exitPipelineContent(this);
};
return PipelineContent;
})();
BuildPipelineVisitor = (function() {
function BuildPipelineVisitor() {
this.$current = $("<div>", {
"class": "pipeline-container"
});
}
BuildPipelineVisitor.prototype.getResult = function() {
return this.$current;
};
BuildPipelineVisitor.prototype.visitPipeline = function(pipeline) {
var $ol;
$ol = $("<ol>", {
"class": "pipeline"
}).appendTo(this.$current);
$ol.data("pipeline", pipeline);
return this.$current = $ol;
};
BuildPipelineVisitor.prototype.exitPipeline = function(pipeline) {
return this.goUp();
};
BuildPipelineVisitor.prototype.visitPipe = function(pipe) {
var $li;
$li = $("<li>", {
"class": "pipe"
}).appendTo(this.$current);
$li.data("pipe", pipe);
return this.$current = $li;
};
BuildPipelineVisitor.prototype.exitPipe = function(pipe) {
return this.goUp();
};
BuildPipelineVisitor.prototype.visitStringContent = function(content) {
return this.$current.addClass("pipe-content pipe-content-string").text(content.value);
};
BuildPipelineVisitor.prototype.visitEmptyContent = function(content) {
return this.$current.addClass("pipe-content pipe-content-empty");
};
BuildPipelineVisitor.prototype.visitFilterContent = function(content) {
return this.$current.addClass("pipe-content pipe-content-filter").text(content.label);
};
BuildPipelineVisitor.prototype.visitContentList = function(contentList) {
var $ol;
this.$current.addClass("pipe-content pipe-content-list");
this.$current.data("content-list", contentList);
$ol = $("<ol>").appendTo(this.$current);
return this.$current = $ol;
};
BuildPipelineVisitor.prototype.exitContentList = function(content) {
return this.goUp();
};
BuildPipelineVisitor.prototype.visitPipelineContent = function(content) {
var $li;
$li = $("<li>", {
"class": "pipe-content pipe-content-pipeline"
}).appendTo(this.$current);
$li.data("content-pipeline", content);
return this.$current = $li;
};
BuildPipelineVisitor.prototype.exitPipelineContent = function(content) {
return this.goUp();
};
BuildPipelineVisitor.prototype.goUp = function() {
return this.$current = this.$current.parent();
};
return BuildPipelineVisitor;
})();
PipelineRenderer = (function() {
function PipelineRenderer(container, pipeline) {
this.pipeline = pipeline;
this.$container = $(container);
this.bindEventHandlers();
}
PipelineRenderer.prototype.bindEventHandlers = function() {
this.$container.on("click", ".btn-append-pipe", (function(_this) {
return function() {
var pipe, pipeline;
pipe = $(event.target).parents(".pipe").data("pipe");
pipeline = $(event.target).parents(".pipeline").data("pipeline");
pipeline.insertAfter(pipe, new Pipe);
return _this.draw();
};
})(this));
this.$container.on("click", ".btn-prepend-pipe", (function(_this) {
return function() {
var pipe, pipeline;
pipe = $(event.target).parents(".pipe").data("pipe");
pipeline = $(event.target).parents(".pipeline").data("pipeline");
pipeline.insertBefore(pipe, new Pipe);
return _this.draw();
};
})(this));
this.$container.on("click", ".btn-delete-pipe", (function(_this) {
return function() {
var pipe, pipeline;
pipe = $(event.target).parents(".pipe").data("pipe");
pipeline = $(event.target).parents(".pipeline").data("pipeline");
pipeline.remove(pipe);
return _this.draw();
};
})(this));
return this.$container.on("click", ".btn-delete-pipe-content-pipeline", (function(_this) {
return function() {
var content, contentList;
content = $(event.target).parents(".pipe-content-pipeline").data("content-pipeline");
contentList = $(event.target).parents(".pipe-content-list").data("content-list");
contentList.remove(content);
return _this.draw();
};
})(this));
};
PipelineRenderer.prototype.draw = function() {
var $markup;
$markup = this.buildMarkup();
this.transformMarkup($markup);
this.$container.empty();
return this.$container.append($markup);
};
PipelineRenderer.prototype.buildMarkup = function() {
var visitor;
visitor = new BuildPipelineVisitor();
this.pipeline.accept(visitor);
return visitor.getResult();
};
PipelineRenderer.prototype.transformMarkup = function($markup) {
var $pipe, content, pipe, _i, _j, _len, _len1, _ref, _ref1, _results;
_ref = $(".pipe", $markup);
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
pipe = _ref[_i];
$pipe = $(pipe);
$("<button>", {
"class": "btn-append-pipe"
}).text("+").appendTo($pipe);
$("<button>", {
"class": "btn-prepend-pipe"
}).text("+").appendTo($pipe);
$("<button>", {
"class": "btn-delete-pipe"
}).text("x").appendTo($pipe);
}
_ref1 = $(".pipe-content-pipeline", $markup);
_results = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
content = _ref1[_j];
_results.push($("<button>", {
"class": "btn-delete-pipe-content-pipeline"
}).text("x").appendTo(content));
}
return _results;
};
return PipelineRenderer;
})();
pipeline = new Pipeline([new Pipe("A"), new Pipe("B"), new Pipe(new ContentList([new PipelineContent(new Pipeline([new Pipe("D1"), new Pipe("D2")])), new PipelineContent(new Pipeline([new Pipe("E1")]))])), new Pipe()]);
(new PipelineRenderer("#pipeline", pipeline)).draw();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment