// ******* Flyout MANAGER ******** //
$axure.internal(function($ax) {
var _flyoutManager = $ax.flyoutManager = {};
var getFlyoutLabel = function(panelId) {
return panelId + '_flyout';
};
var _unregisterPanel = function(panelId, keepShown) {
$ax.geometry.unregister(getFlyoutLabel(panelId));
if(panelToSrc[panelId]) {
$ax.style.RemoveRolloverOverride(panelToSrc[panelId]);
delete panelToSrc[panelId];
}
if(!keepShown) {
$ax.action.addAnimation(panelId, $ax.action.queueTypes.fade, function() {
$ax('#' + panelId).hide();
});
}
};
_flyoutManager.unregisterPanel = _unregisterPanel;
var genPoint = $ax.geometry.genPoint;
var _updateFlyout = function(panelId) {
var label = getFlyoutLabel(panelId);
if(!$ax.geometry.polygonRegistered(label)) return;
var info = $ax.geometry.getPolygonInfo(label);
var rects = info && info.rects;
var targetWidget = $ax.getWidgetInfo(panelId);
rects.target = $ax.geometry.genRect(targetWidget);
// Src will stay the same, just updating
$ax.flyoutManager.registerFlyout(rects, panelId, panelToSrc[panelId]);
if(!$ax.geometry.checkInsideRegion(label)) _unregisterPanel(panelId);
};
_flyoutManager.updateFlyout = _updateFlyout;
var panelToSrc = {};
var _registerFlyout = function(rects, panelId, srcId) {
var label = _getFlyoutLabel(panelId);
var callback = function(info) {
// If leaving object or already outside it, then unregister, otherwise just return
if(!info.exiting && !info.outside) return;
_unregisterPanel(panelId);
};
var points = [];
var lastSrcId = panelToSrc[panelId];
if(lastSrcId != srcId) {
if(lastSrcId) $ax.style.RemoveRolloverOverride(lastSrcId);
if(srcId) {
$ax.style.AddRolloverOverride(srcId);
panelToSrc[panelId] = srcId;
} else delete panelToSrc[panelId];
}
// rects should be one or two rectangles
if(!rects.src) {
var rect = rects.target;
points.push(genPoint(rect.Left(), rect.Top()));
points.push(genPoint(rect.Right(), rect.Top()));
points.push(genPoint(rect.Right(), rect.Bottom()));
points.push(genPoint(rect.Left(), rect.Bottom()));
} else {
var r0 = rects.src;
var r1 = rects.target;
// Right left of right, left right of left, top below top, bottom above bottom
var rlr = r0.Right() <= r1.Right();
var lrl = r0.Left() >= r1.Left();
var tbt = r0.Top() >= r1.Top();
var bab = r0.Bottom() <= r1.Bottom();
var info = { rlr: rlr, lrl: lrl, tbt: tbt, bab: bab };
if((rlr && lrl) || (tbt && bab)) {
points = getSmallPolygon(r0, r1, info);
} else {
points = getLargePolygon(r0, r1, info);
}
}
$ax.geometry.registerPolygon(label, points, callback, { rects: rects });
};
_flyoutManager.registerFlyout = _registerFlyout;
var _getFlyoutLabel = function(panelId) {
return panelId + '_flyout';
};
var _reregisterAllFlyouts = function() {
for(var panelId in panelToSrc) _reregisterFlyout(panelId);
};
_flyoutManager.reregisterAllFlyouts = _reregisterAllFlyouts;
var _reregisterFlyout = function(panelId) {
var rects = $ax.geometry.getPolygonInfo(getFlyoutLabel(panelId)).rects;
_registerFlyout(rects, panelId, panelToSrc[panelId]);
};
// This is the reduced size polygon connecting r0 to r1 by means of horizontal or vertical lines.
var getSmallPolygon = function(r0, r1, info) {
var points = [];
// NOTE: currently I make the assumption that if horizontal/vertical connecting lines from the src hit the target
// Meaning if horizontal, rlr and lrl are true, and if vertical, tbt and bab are true.
var r0Left = r0.Left();
var r0Right = r0.Right();
var r0Top = r0.Top();
var r0Bottom = r0.Bottom();
var r1Left = r1.Left();
var r1Right = r1.Right();
var r1Top = r1.Top();
var r1Bottom = r1.Bottom();
points.push(genPoint(r1Left, r1Top));
if(!info.tbt) {
points.push(genPoint(r0Left, r1Top));
points.push(genPoint(r0Left, r0Top));
points.push(genPoint(r0Right, r0Top));
points.push(genPoint(r0Right, r1Top));
}
points.push(genPoint(r1Right, r1Top));
if(!info.rlr) {
points.push(genPoint(r1Right, r0Top));
points.push(genPoint(r0Right, r0Top));
points.push(genPoint(r0Right, r0Bottom));
points.push(genPoint(r1Right, r0Bottom));
}
points.push(genPoint(r1Right, r1Bottom));
if(!info.bab) {
points.push(genPoint(r0Right, r1Bottom));
points.push(genPoint(r0Right, r0Bottom));
points.push(genPoint(r0Left, r0Bottom));
points.push(genPoint(r0Left, r1Bottom));
}
points.push(genPoint(r1Left, r1Bottom));
if(!info.lrl) {
points.push(genPoint(r1Left, r0Bottom));
points.push(genPoint(r0Left, r0Bottom));
points.push(genPoint(r0Left, r0Top));
points.push(genPoint(r1Left, r0Top));
}
return points;
};
// This is the original algorithm that connects the most extream corners to make polygon
var getLargePolygon = function(r0, r1, info) {
var points = [];
var r0Left = r0.Left();
var r0Right = r0.Right();
var r0Top = r0.Top();
var r0Bottom = r0.Bottom();
var r1Left = r1.Left();
var r1Right = r1.Right();
var r1Top = r1.Top();
var r1Bottom = r1.Bottom();
// Top lefts
if(info.tbt) {
if(!info.lrl) points.push(genPoint(r0Left, r0Top));
points.push(genPoint(r1Left, r1Top));
} else {
if(info.lrl) points.push(genPoint(r1Left, r1Top));
points.push(genPoint(r0Left, r0Top));
}
// Top rights
if(info.tbt) {
points.push(genPoint(r1Right, r1Top));
if(!info.rlr) points.push(genPoint(r0Right, r0Top));
} else {
points.push(genPoint(r0Right, r0Top));
if(info.rlr) points.push(genPoint(r1Right, r1Top));
}
// Bottom rights
if(info.bab) {
if(!info.rlr) points.push(genPoint(r0Right, r0Bottom));
points.push(genPoint(r1Right, r1Bottom));
} else {
if(info.rlr) points.push(genPoint(r1Right, r1Bottom));
points.push(genPoint(r0Right, r0Bottom));
}
// Bottom Lefts
if(info.bab) {
points.push(genPoint(r1Left, r1Bottom));
if(!info.lrl) points.push(genPoint(r0Left, r0Bottom));
} else {
points.push(genPoint(r0Left, r0Bottom));
if(info.lrl) points.push(genPoint(r1Left, r1Bottom));
}
return points;
};
});
// ******* Placeholder Manager ********* //
$axure.internal(function($ax) {
var _placeholderManager = $ax.placeholderManager = {};
var idToPlaceholderInfo = {};
var _registerPlaceholder = function(elementId, text, password) {
idToPlaceholderInfo[elementId] = { text: text, password: password, active: false };
};
_placeholderManager.registerPlaceholder = _registerPlaceholder;
_placeholderManager.refreshPlaceholder = function (elementId) {
var info = idToPlaceholderInfo[elementId];
if (!info || !info.active) return;
$ax.style.SetWidgetPlaceholder(elementId, true, info.text, info.password);
}
var _updatePlaceholder = function(elementId, active, clearText) {
var inputId = $ax.repeater.applySuffixToElementId(elementId, '_input');
var info = idToPlaceholderInfo[elementId];
if(!info || info.active == active) return;
info.active = active;
if(active) var text = info.text;
else if(!ANDROID) text = clearText ? '' : document.getElementById(inputId).value;
else {
var currentText = document.getElementById(inputId).value;
if(!clearText) text = currentText;
else if(currentText == info.text) text = "";
else {
var lastIndex = currentText.lastIndexOf(info.text);
//here i am assuming the text is always inserted in front
text = currentText.substring(0, lastIndex);
}
}
$ax.style.SetWidgetPlaceholder(elementId, active, text, info.password);
};
_placeholderManager.updatePlaceholder = _updatePlaceholder;
var _isActive = function(elementId) {
var info = idToPlaceholderInfo[elementId];
return Boolean(info && info.active);
};
_placeholderManager.isActive = _isActive;
var _selectRange = function(elementId, start, end) {
$jobj(elementId).each(function() {
if(this.setSelectionRange) {
var validTypes = ["text", "search", "url", "tel", "password"];
if(this.tagName.toLowerCase() != "input" || validTypes.indexOf(this.type) > -1) {
this.focus();
this.setSelectionRange(start, end);
}
} else if(this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
_placeholderManager.selectRange = _selectRange;
var _moveCaret = function(id, index) {
var inputIndex = id.indexOf('_input');
if(inputIndex == -1) return;
var inputId = id.substring(0, inputIndex);
if(!_isActive(inputId)) return;
_selectRange(id, index, index);
};
_placeholderManager.moveCaret = _moveCaret;
});
