I am attempting to show an image in a qx.ui.popup.Popup but am having trouble understanding how it can be centered on the screen. The demo browser has an example for placement but it's pretty hard to follow. Any help is appreciated.
Try capturing the "appear" event and moving the popup to the center of the widget that fills the screen. Example code and link to Qooxdoo Playground example: Qooxdoo Playground
// Document is the application root
var doc = this.getRoot();
var mypop = new qx.ui.control.ColorPopup();
mypop.exclude();
mypop.setValue("#23F3C1");
mypop.addListener("appear", function() {
var parent = this.getLayoutParent();
if (parent) {
var bounds = parent.getBounds();
if (bounds) {
var hint = this.getSizeHint();
var left = Math.round((bounds.width - hint.width) / 2);
var top = Math.round((bounds.height - hint.height) / 2);
if (top < 0) {
top = 0;
}
this.setLayoutProperties({
top: top,
left: left
});
}
}
}, mypop);
var mybtn = new qx.ui.form.Button("Open Popup");
mybtn.addListener("execute", function (e) {
//mypop.placeToWidget(mybtn);
mypop.show();
});
doc.add(mybtn, {
left: 20,
top: 20,
});
Related
Im using AnyGantt, but Im having problems setting it up correctly.
Here is the full code:
var endpoint = '/api/chart/data/'
var label = []
var start = []
var end = []
var werk = []
$.ajax({
method: 'GET',
url: endpoint,
success: function(data){
labels = data.label
start = data.start
end = data.end
uplant = data.werk
var obj = {}
var finalArray = []
for (var i = 1; i <= start.length; i++) {
var first = { id: i, name: uplant[i] }
obj = { ...obj, ...first }
var periods = { id: labels[i], start: start[i - 1], end: end[i - 1] }
if (obj.periods) {
obj.periods.push(periods)
} else {
obj.periods = [periods]
}
finalArray.push(obj)
}
anychart.onDocumentReady(function () {
var data = finalArray;
var treeData = anychart.data.tree(data, "asTable");
chart = anychart.ganttResource();
chart.data(treeData);
chart.getTimeline().scale().minimum("2018-01-01");
chart.getTimeline().scale().maximum("2020-01-01");
var dataGrid = chart.dataGrid();
dataGrid.column(0)
.title('#')
.width(30)
.cellTextSettings({hAlign: 'center'});
dataGrid.column(1)
.title('Werk')
.width(60)
.cellTextSettings({hAlign: 'left'})
.format(function () {
return this.name;
});
chart.getTimeline().horizontalScrollBar().enabled(true);
/* chart.getTimeline().periods().edit(true); */
chart.getTimeline().edit(true);
chart.getTimeline().tooltip(false);
chart.getTimeline().elements().labels(false);
chart.container("containerx");
chart.draw();
chart.fitAll();
});
},
error:function(error_data){
console.log("error")
console.log(error_data)
}});
I can't click and move the periods (tasks) and I cant scroll.
Thank you very much for any suggestions
Please find below a screenshot of the chart:
Please find below a screenshot of the chart:
Scale range
You are applying the scale min/max correctly:
chart.getTimeline().scale().minimum("2018-01-01");
chart.getTimeline().scale().maximum("2020-01-01");
But then you override the default scale and it drops the min/max settings:
var dateTimeScale = anychart.scales.dateTime();
var dateTimeTicks = dateTimeScale.ticks();
chart.xScale(dateTimeScale);
There's no need to do this! The default Gantt Chart is already a dateTime type. Solution - simply remove those three lines above from your code.
LiveEdit
Your line chart.getTimeline().periods().edit(true); is correct, but due to a little bug in the current version 8.7.0 (Aug 2019) this setter doesn't work for types of elements. To avoid it replace this line with the following line chart.getTimeline().edit(true);.
Scrollers
The Gantt chart doesn't support x/yScrollers, only simple scroll bars.
The following methods the Gantt chart doesn't support:
chart.xScroller(true);
chart.yScroller(true);
For zooming, you can use one of the API functions. This subject is described in detail in the Gantt zooming article.
If I have some pdf page preview like in this example, how I can add it just hand tool, without adding all toolbar?
jsfiddle pdfjs example
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
I drew a polygon on an image and I want to move it with the mouse click, i have this error and i can not do them have you an idea please. for this problem i used the librairie Two.js and i can not do that
$scope.DrawPolygon = function (id, json)
{
var elem = document.getElementById('ImgCamera' + id);
if (elem != null)
{
elem.innerHTML = "";
var two = new Two({
type: Two.Types.canvas,
fullscreen: false,
width: 640,
height: 480,
}).appendTo(elem);
var canvas = two.renderer.domElement;
var img = $scope.spotCAMImageLoaded[_GetCameraNumberFromPolygonNumber(id)];
var texture = new Two.Texture(img, function () { });
var rect = two.makeRectangle(canvas.width / 2, canvas.height / 2, canvas.width, canvas.height);
rect.fill = texture;
rect.noStroke();
var jsonPoly = null;
var camera = json.Camera2;
if (_GetCameraNumberFromPolygonNumber(id) == 0)
camera = json.Camera1;
if (camera != null)
{
jsonPoly = camera[_GetPolygonNumberFromCameraNumber(id)];
var polygon = two.makePath([new Two.Anchor(jsonPoly.P1.x, jsonPoly.P1.y)
, new Two.Anchor(jsonPoly.P2.x, jsonPoly.P2.y)
, new Two.Anchor(jsonPoly.P3.x, jsonPoly.P3.y)
, new Two.Anchor(jsonPoly.P4.x, jsonPoly.P4.y)])
polygon.fill = "#008bbe";
polygon.opacity = 0.5;
polygon.stroke = "#00435c";
polygon.linewidth = 10;
polygon.renderer.elem.style.cursor = 'pointer';
two.update();
}
}
Not familiar with Two.js and you didn't post any DOM structure, but there's a lot going on in this function. Consider breaking it down into smaller functions. Also use as much angularjs DSL as possible, eg :
use angular.element(<selector) instead of document.<selectorMethod>
use a truthy check of elem if(elem), values of 0 null or undefined will be guarded against, same for the camera check
Unfortunately undefined and null are different values in JavaScript.
In the first statement, document.getElementById('ImgCamera' + id) is returning undefined.
Try changing the first if statement to this:
if (elem != undefined && != null) {
I'm looking for resources that create scrolling functions like the ones found on these sites:
Outpost Journal
Unfold
Once the scroll bar hits the bottom of the page, I want it to loop back to the top.
I'm familiar with with the infinite scroll, and this is not what I want. I've also found scripts that will write/add the same content to the bottom of the page, but none that loop back to the top of the page.
Try this:
$('document').ready(function() {
$(document).scroll(function(){
if(document.documentElement.clientHeight +
$(document).scrollTop() >= document.body.offsetHeight )$(document).scrollTop(0);
});
});
if you want infinite scroll in both directions use
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0)
} else if ($(window).scrollTop() < 0) {
$(document).scrollTop($(document).height())
}
(I know it's a late reply but it still helps users like me who just google stuff like this)
Here a solution that makes a duplicate of the body so the bottom and the top can be seen at the same time at a certain point so the transition is smoother.
$('document').ready(function() {
// We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
var origDocHeight = document.body.offsetHeight;
// now we know the height we can duplicate the body
$("body").contents().clone().appendTo("body");
$(document).scroll(function(){ // detect scrolling
var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled
if(scrollWindowPos >= origDocHeight ) { // if we scrolled further then the original doc height
$(document).scrollTop(0); // then scroll to the top
}
});
});
mrida's answer was causing my browser to not be able to scroll, here is a modified version that worked for me:
$('document').ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
Forked from #clankill3r's answer, create two copy of body, prepend and append to the original body, then you can scroll the page in two direction endless.
$('document').ready(function() {
var origDocHeight = document.body.offsetHeight;
var clone=$("body").contents().clone();
clone.appendTo("body");
clone.prependTo("body");
$(document).scroll(function(){
var scrollWindowPos = $(document).scrollTop();
if(scrollWindowPos >= origDocHeight ) {
$(document).scrollTop(0);
}
if(scrollWindowPos <= 0 ) {
$(document).scrollTop(origDocHeight);
}
});
});
Adding loop scroll backwards, upgrading #clankill3r answer. It should be something like this.
$('document').ready(function() {
// We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
var origDocHeight = document.body.offsetHeight;
// now we know the height we can duplicate the body
$("body").contents().clone().appendTo("body");
$(document).scroll(function(){ // detect scrolling
var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled
if(scrollWindowPos >= origDocHeight ) { // if we scrolled further then the original doc height
$(document).scrollTop(scrollWindowPos + origDocHeight); // then scroll to the top
} else if (scrollWindowPos == 0) { // if we scrolled backwards
$(document).scrollTop(origDocHeight);
}
});
});
I'm using it horizontally and it's working just fine. Hope someone finds it useful.
Posted a similar question: https://stackoverflow.com/a/65953934/7474712 and found the answer via this pen: https://codepen.io/vincentorback/pen/zxRyzj
Here's the code:
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.infinite {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.clone {
height: 50vw;
}
</style>
<script>
var doc = window.document,
context = doc.querySelector('.infinite'),
clones = context.querySelectorAll('.clone'),
disableScroll = false,
scrollHeight = 0,
scrollPos = 0,
clonesHeight = 0,
i = 0;
function getScrollPos () {
return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
}
function setScrollPos (pos) {
context.scrollTop = pos;
}
function getClonesHeight () {
clonesHeight = 0;
for (i = 0; i < clones.length; i += 1) {
clonesHeight = clonesHeight + clones[i].offsetHeight;
}
return clonesHeight;
}
function reCalc () {
scrollPos = getScrollPos();
scrollHeight = context.scrollHeight;
clonesHeight = getClonesHeight();
if (scrollPos <= 0) {
setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
}
}
function scrollUpdate () {
if (!disableScroll) {
scrollPos = getScrollPos();
if (clonesHeight + scrollPos >= scrollHeight) {
// Scroll to the top when you’ve reached the bottom
setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
disableScroll = true;
} else if (scrollPos <= 0) {
// Scroll to the bottom when you reach the top
setScrollPos(scrollHeight - clonesHeight);
disableScroll = true;
}
}
if (disableScroll) {
// Disable scroll-jumping for a short time to avoid flickering
window.setTimeout(function () {
disableScroll = false;
}, 40);
}
}
function init () {
reCalc();
context.addEventListener('scroll', function () {
window.requestAnimationFrame(scrollUpdate);
}, false);
window.addEventListener('resize', function () {
window.requestAnimationFrame(reCalc);
}, false);
}
if (document.readyState !== 'loading') {
init()
} else {
doc.addEventListener('DOMContentLoaded', init, false)
}
</script>
I'm using ComboBox and FilteringSelect in a dialog and have yet been unable to make the controls have the minimal required width only, i.e. being just large enough to display the longest text from a drop-down list. Also the control must not be set to a fixed width since the actual content of the drop-down lists gets filled in from a translation database.
In plain html with a simple input of type text it works smooth just by default. However since even all examples at dojotoolkit.org show the very same behavior it seems to me that dojo introduces a minimum width for all those input controls. Thus I wonder if it can be done at all...
Thanks in advance!
I had the same problem; after some struggle, I decided to adapt this to my problem.
In my case, I was forced to use an old version of dojo, and the FilteringSelect were declarative, so I had to use a hack (the last three lines of the code below) to be sure my function would be executed at the right time.
So, the function below takes all dijit widgets, looks for those stored element is a select (getAllDropdowns), and for each it takes its options, copies the content in a new element moved outside of the visible screen and takes the width of that element, adjusted with padding (this may not be your case, so check getWidth); then it takes the max of those widths and compare it with the current length of the input element, and if the longest option is bigger, adjust the input and the outmost div widths.
This answer comes quite late, but since it was not easy for me to come to this solution, I thought it may be worth sharing.
// change dropdowns width to fit the largest option
function fixDropdownWidth() {
var getAllDropdowns = function() {
var dropdowns = [];
dijit.registry.forEach(function(widget, idx, hash) {
if (widget.store) {
var root = widget.store.root;
if (root && root.nodeName.toLowerCase() == 'select') {
dropdowns.push(widget);
}
}
});
return dropdowns;
};
var getTesterElement = function() {
var ret = dojo.query('tester');
if (ret.length) {
return ret;
}
else {
document.body.appendChild(document.createElement('tester'));
return dojo.query('tester');
}
};
var getWidth = function(el) {
var style = dojo.getComputedStyle(el);
return el.clientWidth + parseInt(style.paddingLeft) + parseInt(style.paddingRight);
};
var getOptionWidth = function(option) {
var testEl = getTesterElement();
testEl[0].innerHTML = option.innerHTML;
return getWidth(testEl[0]);
};
var dropdowns = getAllDropdowns();
var testEl = getTesterElement();
dojo.style(testEl[0], {
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
whiteSpace: 'nowrap'
});
for (var i = 0; i < dropdowns.length; i++) {
var input = dropdowns[i].textbox;
dojo.style(testEl[0], {
fontSize: dojo.style(input, 'fontSize'),
fontFamily: dojo.style(input, 'fontFamily'),
fontWeight: dojo.style(input, 'fontWeight'),
letterSpacing: dojo.style(input, 'letterSpacing')
});
var max = 0;
var treshold = 5;
dojo.query('option', dropdowns[i].store.root).forEach(function(el, idx, list) {
max = Math.max(max, getOptionWidth(el) + treshold);
});
if (max > getWidth(dropdowns[i].textbox)) {
var icon = dojo.query('.dijitValidationIcon', dropdowns[i].domNode)[0];
dojo.style(dropdowns[i].textbox, {width: max + 'px'});
var width = max + getWidth(icon) + getWidth(dropdowns[i].downArrowNode) + treshold;
dojo.style(dropdowns[i].domNode, {
width: width + 'px'
});
}
}
}
dojo.addOnLoad(function() {
dojo._loaders.push(fixDropdownWidth);
});
var dropDowns = [];
var getAllDropdowns = function (dropDowns) {
array.forEach(dijit.registry.toArray(), function (widget) {
if (widget.store) {
if (widget.domNode.classList.contains("dijitComboBox")) {
dropDowns.push(widget);
}
}
});
};
getAllDropdowns(dropDowns);
var maxLength = 0;
array.forEach(dropDowns, function (dropDown) {
var opts = dropDown.get("store").data;
array.forEach(opts, function (option) {
var optionValue = option[dropDown.get("searchAttr")];
var dropDownCurrentStyle = window.getComputedStyle(dropDown.domNode);
var currentOptionWidth = getTextWidth(optionValue, dropDownCurrentStyle.fontStyle, dropDownCurrentStyle.fontVariant, dropDownCurrentStyle.fontWeight, dropDownCurrentStyle.fontSize, dropDownCurrentStyle.fontFamily);
if (currentOptionWidth > maxLength) {
maxLength = currentOptionWidth;
}
});
dropDown.domNode.style.width = maxLength + "px";
maxLength = 0;
});
function getTextWidth(text, fontStyle, fontVariant, fontWeight, fontSize, fontFamily) {
// re-use canvas object for better performance
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
var font = fontStyle + " " + fontVariant + " " + fontWeight + " " + fontSize + " " + fontFamily;
context.font = font;
canvas.innerText = text;
var metrics = context.measureText(text);
return metrics.width + 25; //change this to what you need it to be
}