On Wed, Feb 13, 2019 at 3:56 PM Simon Huber <[email protected]>
wrote:
> Hi stefano,
>
> from within the render method it should be possible to access the parent
> if I recall correctly,
>
> could you post a bit of code to work with?
>
>
Well, it is all very rudimentary still, but the idea is the following:
In my plugin I import the library and instantiate it, then create the div
to pass to it. Then I call the constructor of my library's main object with
the div as its argument:
''''
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
//The library I use, besogo:
var besogoPlayer =
require("$:/plugins/cleinias/SgfEditor/besogo").besogo
var GoGameWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
GoGameWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
GoGameWidget.prototype.render = function(parent,nextSibling) {
this.parentDomNode = parent;
this.computeAttributes();
var div = this.document.createElement("div");
this.goGamePlayer = besogoPlayer;
//
// This is where I would need to know the width of the future widget, so I
can pass it to the create function
// this.goGamePlayer.create(div);
var twSgfFile = this.getAttribute("sgfFile");
parent.insertBefore(div,nextSibling);
this.domNodes.push(div);
};
''''
he goGamePlayer.create(div) function is the call to the besogo library,
where all the magic happens. Its resizer function computes a bunch of
parameters. Withouth going into unnecessary details (I append the function
below, relevant lines are bolded and italicized), the width of the
parentElement is crucial to determining the overall width of the final
widget. For now, I got around the problem in testing by hardcoding a number
into the code, but it would really be nice to have a flexible and
responsive solution
Cheers,
S.
''''
resizer = function() {
var windowHeight = window.innerHeight, // Viewport height
// Calculated width of parent element
* parentWidth =
parseFloat(getComputedStyle(container.parentElement).width),*
maxWidth = +(options.maxwidth || -1),
orientation = options.orient || 'auto',
portraitRatio = +(options.portratio || 200) / 100,
landscapeRatio = +(options.landratio || 200) / 100,
minPanelsWidth = +(options.minpanelswidth || 350),
minPanelsHeight = +(options.minpanelsheight || 400),
minLandscapeWidth = +(options.transwidth || 600),
// Initial width parent
* width = (maxWidth > 0 && maxWidth < parentWidth) ?
maxWidth : parentWidth,*
height; // Initial height is undefined
// Determine orientation if 'auto' or 'view'
if (orientation !== 'portrait' && orientation !== 'landscape') {
if (width < minLandscapeWidth || (orientation === 'view' &&
width < windowHeight)) {
orientation = 'portrait';
} else {
orientation = 'landscape';
}
}
if (orientation === 'portrait') { // Portrait mode
if (!isNaN(portraitRatio)) {
height = portraitRatio * width;
if (panelsDiv) {
height = (height - width < minPanelsHeight) ? width
+ minPanelsHeight : height;
}
} // Otherwise, leave height undefined
} else if (orientation === 'landscape') { // Landscape mode
if (!panelsDiv) { // No panels div
height = width; // Square overall
} else if (isNaN(landscapeRatio)) {
height = windowHeight;
} else { // Otherwise use ratio
height = width / landscapeRatio;
}
if (panelsDiv) {
// Reduce height to ensure minimum width of panels div
height = (width < height + minPanelsWidth) ? (width -
minPanelsWidth) : height;
}
}
setDimensions(width, height);
container.style.width = width + 'px';
}
''''
>
>
>> The library I am adapting for a TW plugin builds a complex SVG structure
>> inside a div and the basic parameter it uses to compute the layout is the
>> width of the parent container it is inserted in, which it gets with:
>>
>> parentWidth = parseFloat(getComputedStyle(container.parentElement).width)
>>
>> This of course does not work in the plugin's render function, where I
>> instantiate the new div, because there is no parent yet and in fact there
>> is no widget yet Is there any way to get the width of the widget to be as
>> it is about to be inserted in the story river (or, even better in
>> general)??Is it provided by the theme and is it accessible?
>>
>> Thanks for the help,
>>
>> S.
>>
>> __________________________________________________
>> Stefano Franchi
>>
>> [email protected]
>> http://stefano.cleinias.org
>>
> --
> You received this message because you are subscribed to the Google Groups
> "TiddlyWikiDev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at https://groups.google.com/group/tiddlywikidev.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywikidev/dbda1e52-33d9-46c7-b401-5eb659ae8f9c%40googlegroups.com
> <https://groups.google.com/d/msgid/tiddlywikidev/dbda1e52-33d9-46c7-b401-5eb659ae8f9c%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
--
__________________________________________________
Stefano Franchi
[email protected] <[email protected]>
http://stefano.cleinias.org
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/CAJODLwYnZ5iXS0CoRjEwRfx6wvLdPx%2B9vRuY_jPZYGZ0gUjiXA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
