Skip to content
This repository was archived by the owner on Mar 14, 2020. It is now read-only.

[Outline View] Added node have event handler information. #290

Closed
xuqingkuang wants to merge 1 commit into from
Closed

[Outline View] Added node have event handler information. #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/css/builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1674,3 +1674,21 @@ input.screenCoordinate::-webkit-inner-spin-button {
#eventHandlerDialog .wrap_right .container .CodeMirror .CodeMirror-scroll {
height: 464px;
}

.eventHandlerIcon {
display: inline-block;
position: relative;
top: 2px;
left: 4px;
margin-right: 4px;
text-indent: -3000px;
height: 20px;
width: 20px;
background-repeat: no-repeat;
background-position: left top;
background-image: url('images/eventHandlerIcon.png');
}

.eventHandlerIcon:hover {
opacity: 0.8;
}
Binary file added src/css/images/eventHandlerIcon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 18 additions & 2 deletions src/js/views/outline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,9 @@
return null;
return model.getSelectedNode() || model.getActivePage();
},
_renderPageNode: function (domNode, node) {
_renderSpecialNode: function (domNode, node) {
var id, titleNode, element, icon;
// Display ID when type is Page.
if (node.getType() === "Page") {
//set page id
var id = node.getProperty('id'),
Expand All @@ -170,6 +172,20 @@
.appendTo(domNode.find("> a"));
titleNode.text(' (' + id + ')');
}

// Add event handler icon to outline view.
if (node.hasEventHandlers()) {
element = domNode.find('a');
icon = $('<a class="eventHandlerIcon" title="Open event handler.">Event Handler</a>')
.click(function(e) {
// After 0.1 second will trigger open dialog action
// Because property view construction is delayed.
setTimeout(function() {
Copy link
Contributor

@zhizhangchen zhizhangchen Sep 6, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using setTimeout is not reliable and should be avoid if possible. A better solution might be to extract the event handler code to a function in eventHandler.js so that both property view and outline view can call it.

$('#eventHandlerElement').trigger('click');
Copy link
Contributor

@zhizhangchen zhizhangchen Sep 6, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using ID to find an element is not reliable. As there are two property views, only the button in the property view of layoutView will be found and it might is showing another widget's property if it's invisible.

}, 100);
});
element.append(icon);
}
},
_render: function (domNode, data) {
var labelFunc, parentNode = data.getParent(), newTopLevelNode;
Expand All @@ -187,7 +203,7 @@
$('<li class="label">' + label + '</li>')
.insertBefore(domNode).data('adm-node', parentNode);
}
this._renderPageNode(domNode, data);
this._renderSpecialNode(domNode, data);
},
_nodeSelected: function (treeModelNode, data) {
this.options.model.setSelected(data.getUid());
Expand Down