ares-ide
Version:
A browser-based code editor and UI designer for Enyo 2 projects
125 lines (123 loc) • 4.15 kB
JavaScript
/**
_enyo.ImageViewPin_ is a control that can be used to display non-zooming
content inside of a zoomable _enyo.ImageView_ control. The _anchor_ and
_position_ properties can be used to position both the ImageViewPin and its
content in a specific location inside of the ImageView.
*/
enyo.kind({
name: "enyo.ImageViewPin",
kind: "enyo.Control",
published: {
/**
If true, the anchor point for this pin will be highlighted in yellow,
which can be useful for debugging. Defaults to false.
*/
highlightAnchorPoint: false,
/**
The coordinates at which this control should be anchored inside
of the parent ImageView control. This position is relative to the
ImageView control's original size. Works like standard CSS positioning,
and accepts both px and percentage values. Defaults to _{top: 0px,
left: 0px}_.
* top: distance from the parent's top edge
* bottom: distance from the parent's bottom edge (overrides top)
* left: distance from the parent's left edge
* right: distance from the parennt's right edge (overrides left)
*/
anchor: {
top: 0,
left: 0
},
/**
The coordinates at which the contents of this control should be
positioned relative to the ImageViewPin itself. Works like standard
CSS positioning. Only accepts px values. Defaults to _{top: 0px,
left: 0px}_.
* top: distance from the ImageViewPin's top edge
* bottom: distance from the ImageViewPin's bottom edge
* left: distance from the ImageViewPin's left edge
* right: distance from the ImageViewPin's right edge
*/
position: {
top: 0,
left: 0
}
},
//* @protected
style: "position:absolute;z-index:1000;width:0px;height:0px;",
handlers: {
onPositionPin: "reAnchor"
},
create: enyo.inherit(function(sup) {
return function() {
sup.apply(this, arguments);
this.styleClientControls();
this.positionClientControls();
this.highlightAnchorPointChanged();
this.anchorChanged();
};
}),
// Absolutely position to client controls
styleClientControls: function() {
var controls = this.getClientControls();
for (var i=0;i<controls.length;i++) {
controls[i].applyStyle("position","absolute");
}
},
// Apply specified positioning to client controls
positionClientControls: function() {
var controls = this.getClientControls();
for (var i=0;i<controls.length;i++) {
for (var p in this.position) {
controls[i].applyStyle(p, this.position[p]+"px");
}
}
},
// Update styling on anchor point
highlightAnchorPointChanged: function() {
this.addRemoveClass("pinDebug", this.highlightAnchorPoint);
},
// Create coords{} object for each anchor containing value and units
anchorChanged: function() {
var coords = null, a = null;
for (a in this.anchor) {
coords = this.anchor[a].toString().match(/^(\d+(?:\.\d+)?)(.*)$/);
if (!coords) {
continue;
}
this.anchor[a+"Coords"] = {
value: coords[1],
units: coords[2] || "px"
};
}
},
/*
Apply positioning to ImageViewPin specified in this.anchor{}.
Called anytime the parent ImageView is rescaled. If right/bottom
are specified, they override top/left.
*/
reAnchor: function(inSender, inEvent) {
var scale = inEvent.scale;
var bounds = inEvent.bounds;
var left = (this.anchor.right)
// Right
? (this.anchor.rightCoords.units == "px")
? (bounds.width + bounds.x - this.anchor.rightCoords.value*scale)
: (bounds.width*(100-this.anchor.rightCoords.value)/100 + bounds.x)
// Left
: (this.anchor.leftCoords.units == "px")
? (this.anchor.leftCoords.value*scale + bounds.x)
: (bounds.width*this.anchor.leftCoords.value/100 + bounds.x);
var top = (this.anchor.bottom)
// Bottom
? (this.anchor.bottomCoords.units == "px")
? (bounds.height + bounds.y - this.anchor.bottomCoords.value*scale)
: (bounds.height*(100-this.anchor.bottomCoords.value)/100 + bounds.y)
// Top
: (this.anchor.topCoords.units == "px")
? (this.anchor.topCoords.value*scale + bounds.y)
: (bounds.height*this.anchor.topCoords.value/100 + bounds.y);
this.applyStyle("left", left+"px");
this.applyStyle("top", top+"px");
}
});