mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 03:57:21 +00:00
Updates to CecilyView and browser.js
This commit is contained in:
Jeremy Ruston
parent
f418f5493e
commit
031e3b8b80
@ -24,8 +24,6 @@ function CecilyListView(listMacro) {
|
||||
this.newTiddlerPosition = {x: 0, y: 0};
|
||||
// Position the initial list entries on the map
|
||||
this.loadMap();
|
||||
this.map.positions["HelloThere"] = {x: 250, y: 50, w: 300, h: 300};
|
||||
this.saveMap();
|
||||
for(var t=0; t<listFrameDomNode.children.length; t++) {
|
||||
var title = this.listMacro.listFrame.children[t].listElementInfo.title,
|
||||
domNode = listFrameDomNode.children[t];
|
||||
@ -61,7 +59,7 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
|
||||
w: 300,
|
||||
h: 300
|
||||
};
|
||||
this.newTiddlerPosition.x += domNode.offsetWidth;
|
||||
this.newTiddlerPosition.x += 320;
|
||||
break;
|
||||
}
|
||||
// Return the position
|
||||
@ -74,9 +72,14 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
|
||||
};
|
||||
|
||||
CecilyListView.prototype.positionTiddler = function(title,domNode) {
|
||||
var pos = this.lookupTiddlerInMap(title,domNode);
|
||||
var pos = this.lookupTiddlerInMap(title,domNode),
|
||||
scale = pos.w/domNode.offsetWidth;
|
||||
domNode.style.position = "absolute";
|
||||
domNode.style[$tw.browser.transform] = "translateX(" + pos.x + "px) translateY(" + pos.y + "px)";
|
||||
$tw.utils.setStyle(domNode,[
|
||||
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
||||
{transformOrigin: "0% 0%"},
|
||||
{transform: "scale(" + scale + ") translateX(" + pos.x + "px) translateY(" + pos.y + "px)"}
|
||||
]);
|
||||
};
|
||||
|
||||
CecilyListView.prototype.insert = function(index) {
|
||||
|
||||
@ -118,7 +118,7 @@ exports.convertEventName = function(eventName) {
|
||||
var newEventName = eventName,
|
||||
mappings = eventNameMappings[eventName];
|
||||
if(mappings) {
|
||||
var convertedProperty = $tw.utils.convertStyleName(mappings.correspondingCssProperty);
|
||||
var convertedProperty = $tw.utils.convertStyleNameToPropertyName(mappings.correspondingCssProperty);
|
||||
if(mappings.mappings[convertedProperty]) {
|
||||
newEventName = mappings.mappings[convertedProperty];
|
||||
}
|
||||
@ -130,27 +130,6 @@ exports.convertEventName = function(eventName) {
|
||||
|
||||
// Setup constants for the current browser
|
||||
exports.getBrowserInfo = function(info) {
|
||||
info.prefix = document.body.style.webkitTransform !== undefined ? "webkit" :
|
||||
document.body.style.MozTransform !== undefined ? "Moz" :
|
||||
document.body.style.MSTransform !== undefined ? "MS" :
|
||||
document.body.style.OTransform !== undefined ? "O" : "";
|
||||
info.transition = info.prefix + "Transition";
|
||||
info.transform = info.prefix + "Transform";
|
||||
info.transformorigin = info.prefix + "TransformOrigin";
|
||||
info.transitionEnd = {
|
||||
"": "transitionEnd",
|
||||
"O": "oTransitionEnd",
|
||||
"MS": "msTransitionEnd",
|
||||
"Moz": "transitionend",
|
||||
"webkit": "webkitTransitionEnd"
|
||||
}[info.prefix];
|
||||
info.animationEnd = {
|
||||
"": "animationEnd",
|
||||
"O": "oAnimationEnd",
|
||||
"MS": "msAnimationEnd",
|
||||
"Moz": "animationend",
|
||||
"webkit": "webkitAnimationEnd"
|
||||
}[info.prefix];
|
||||
info.requestFullScreen = document.body.webkitRequestFullScreen !== undefined ? "webkitRequestFullScreen" :
|
||||
document.body.mozRequestFullScreen !== undefined ? "mozRequestFullScreen" :
|
||||
document.body.requestFullScreen !== undefined ? "requestFullScreen" : "";
|
||||
|
||||
@ -90,10 +90,15 @@ Modal.prototype.display = function(title) {
|
||||
// Force layout and animate the modal message away
|
||||
$tw.utils.forceLayout(modalBackdrop);
|
||||
$tw.utils.forceLayout(modalWrapper);
|
||||
modalBackdrop.style.opacity = 0;
|
||||
modalWrapper.style[$tw.browser.transform] = "translateY(" + window.innerHeight + "px)";
|
||||
$tw.utils.setStyle(modalBackdrop,[
|
||||
{opacity: "0"}
|
||||
]);
|
||||
$tw.utils.setStyle(modalWrapper,[
|
||||
{transform: "translateY(" + window.innerHeight + "px)"}
|
||||
]);
|
||||
// Set up an event for the transition end
|
||||
modalWrapper.addEventListener($tw.browser.transitionEnd,function(event) {
|
||||
console.log("Listening for ",$tw.utils.convertEventName("transitionEnd"))
|
||||
modalWrapper.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
|
||||
if(wrapper.parentNode) {
|
||||
// Remove the modal message from the DOM
|
||||
document.body.removeChild(wrapper);
|
||||
@ -104,20 +109,32 @@ Modal.prototype.display = function(title) {
|
||||
return false;
|
||||
},false);
|
||||
// Set the initial styles for the message
|
||||
modalBackdrop.style.opacity = 0;
|
||||
modalWrapper.style[$tw.browser.transformorigin] = "0% 0%";
|
||||
modalWrapper.style[$tw.browser.transform] = "translateY(" + (-window.innerHeight) + "px)";
|
||||
$tw.utils.setStyle(modalBackdrop,[
|
||||
{opacity: "0"}
|
||||
]);
|
||||
$tw.utils.setStyle(modalWrapper,[
|
||||
{transformOrigin: "0% 0%"},
|
||||
{transform: "translateY(" + (-window.innerHeight) + "px)"}
|
||||
]);
|
||||
// Put the message into the document
|
||||
document.body.appendChild(wrapper);
|
||||
// Set up animation for the styles
|
||||
modalBackdrop.style[$tw.browser.transition] = "opacity " + d + " ease-out";
|
||||
modalWrapper.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out";
|
||||
$tw.utils.setStyle(modalBackdrop,[
|
||||
{transition: "opacity " + d + " ease-out"}
|
||||
]);
|
||||
$tw.utils.setStyle(modalWrapper,[
|
||||
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
||||
]);
|
||||
// Force layout
|
||||
$tw.utils.forceLayout(modalBackdrop);
|
||||
$tw.utils.forceLayout(modalWrapper);
|
||||
// Set final animated styles
|
||||
modalBackdrop.style.opacity = 1;
|
||||
modalWrapper.style[$tw.browser.transform] = "translateY(0px)";
|
||||
$tw.utils.setStyle(modalBackdrop,[
|
||||
{opacity: "1"}
|
||||
]);
|
||||
$tw.utils.setStyle(modalWrapper,[
|
||||
{transform: "translateY(0px)"}
|
||||
]);
|
||||
};
|
||||
|
||||
exports.Modal = Modal;
|
||||
|
||||
@ -14,3 +14,4 @@ Here are a few features of TiddlyWiki that you can explore:
|
||||
* Browse the list of AllTiddlers or the ShadowTiddlers
|
||||
* Examine the example [[bitmap images|Motovun Jack.jpg]] and [[SVG images|Motovun Jack.svg]]
|
||||
* Explore the RoadMap of TiddlyWiki5's ongoing development
|
||||
* Play with the new CecilyView
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
title: CecilyView
|
||||
|
||||
<<list filter:"[tag[docs]]" template:"$:/templates/ViewTemplate" listview:cecily>>
|
||||
"Cecily" provides a customisable ZoomableUserInterface to your tiddlers.
|
||||
|
||||
<<list filter:"[tag[introduction]]" template:"$:/templates/ViewTemplate" listview:cecily>>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
title: $:/DefaultTiddlers
|
||||
|
||||
HelloThere
|
||||
CecilyView
|
||||
Introduction
|
||||
Improvements
|
||||
Docs
|
||||
Loading…
Reference in New Issue
Block a user