286 lines
10 KiB
JavaScript
286 lines
10 KiB
JavaScript
|
// ******* 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;
|
|||
|
|
});
|