I have a gui where the use can select different shapes to render with a dropdown. This works well. Now I wanna display a folder with some slider. The count, name and min/max values of the sliders differ in which shape is selected. How can I accomplish this with dat.gui.
Ok found a solution by adding this to the dat.GUI prototype:
dat.GUI.prototype.removeFolder = function(name) {
var folder = this.__folders[name];
if (!folder) {
return;
}
folder.close();
this.__ul.removeChild(folder.domElement.parentNode);
delete this.__folders[name];
this.onResize();
}
Related
I installed web hide menu on https://www.odoo.com/apps/modules/8.0/web_menu_hide_8.0/
I modified to use it on Odoo 10, but the form will be adjusted to full width IF we press the hide button, if we were to change to another view after we pressed hide button, the form page will remain same as original (not full width).
So i need to adjust class "o_form_sheet" on form view after the page has been rendered. May i know how can i do that using javascript? Which class & method do i need to extend?
I'm going to answer my own question.
After some researched, i found out the best option was to inherit ViewManager widget using load_views function.
var ViewManager = require('web.ViewManager');
ViewManager.include({
load_views: function (load_fields) {
var self = this;
// Check if left menu visible
var root=self.$el.parents();
var visible=(root.find('.o_sub_menu').css('display') != 'none')
if (visible) {
// Show menu and resize form components to original values
root.find('.o_form_sheet_bg').css('padding', self.sheetbg_padding);
root.find('.o_form_sheet').css('max-width', self.sheetbg_maxwidth);
root.find('.o_form_view div.oe_chatter').css('max-width', self.chatter_maxwidth);
} else {
// Hide menu and save original values
self.sheetbg_padding=root.find('.o_form_sheet_bg').css('padding');
root.find('.o_form_sheet_bg').css('padding', '16px');
self.sheetbg_maxwidth=root.find('.o_form_sheet').css('max-width');
root.find('.o_form_sheet').css('max-width', '100%');
self.chatter_maxwidth=root.find('.o_form_view div.oe_chatter').css('max-width');
root.find('.o_form_view div.oe_chatter').css('max-width','100%');
}
return this._super.apply(this, arguments, load_fields);
},
});
I have a very common scenario when the user can switch list layout between linear/grid/staggered view by tapping an icon. Before I had 2 lists - ListView for standard list layout and RadListView for grid view. I hided and showed them depending on required "mode". But since RadListView has all required layouts theoretically I can have only one list and reuse it by switching layouts. I haven't found how to do that directly in XML (that would be the best approach if any), so I'm thinking of doing this programatically in the code behind.
Here is my try:
function _switchListViewLayout() {
const list = modal.getViewById( 'list' )
let layout
if ( list.listViewLayout instanceof ListViewLinearLayout ) {
// switch to grid
layout = new ListViewGridLayout()
layout.scrollDirection = 'vertical'
layout.itemHeight = 150
layout.spanCount = 2
}
else if ( list.listViewLayout instanceof ListViewGridLayout ) {
// switch to list
layout = new ListViewLinearLayout()
layout.scrollDirection = 'vertical'
layout.itemHeight = 66
}
list.listViewLayout = layout
list.refresh()
}
Is this a correct way or I'm doing it wrong?
Yes this is the way you can change the listViewLayout of the RadListView component. I do see that you have a call to the .refresh() method, that is not necessary you simply have to set the new value to the listViewLayout property.
You can change the in the official examples for RadListView here.
I am using Kendo Numeric text box to display decimal values.I want to change the font color based on the user input.How to achieve this?
You Can do this in JQuery easily by changing the style on the change and spin event of the input:
On your numeric text box add the events:
$("#numerictextbox").kendoNumericTextBox(
{
change: onChangeOrSpin,
spin: onChangeOrSpin
});
Then in the event handler call:
function onChangeOrSpin()
{
var val = this.value();
changeFontColour(val);
}
function changeFontColour(val)
{
if(val < 5)
{
$("#numerictextbox, .k-input").css('font-family','Arial');
$("#numerictextbox, .k-input").css('font-style','italic');
$("#numerictextbox, .k-input").css('font-weight','bold');
$("#numerictextbox, .k-input").css('color','blue');
}
else
{
$("#numerictextbox, .k-input").css('font-family','Times New Roman');
$("#numerictextbox, .k-input").css('font-style','normal');
$("#numerictextbox, .k-input").css('font-weight','normal');
$("#numerictextbox, .k-input").css('color','black');
}
}
Here is a working fiddle: http://jsfiddle.net/loanburger/nwsw4yeq/
Update:
For multiple numeric inputs on the same page, use classes and add a different class to each input so you can distinguish between then when you need to change the colour. Then use a data attribute to find the correct one to change.
You cannot use the id because there are two parts to how kendo creates the widget:
The first part is the input for editing the value. This is the
one the user interacts with. This input will be given the class:
numerictextbox numericOne k-input
There is a second input of interest which is the one used to display the value after the widget looses focus this one gets the classes: k-formatted-value numerictextbox numericOne k-input
Neither of these inputs get an id and you don't want to use the native Kendo classes either so using a distinct class on each of your numeric widget controls, you can identify which colours to change since that class will get added to both inputs in the widget.
See here: https://jsfiddle.net/loanburger/4evy3tcg/
I am having a little trouble figuring out how to turn on the grid visualization: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids.
Can someone point me to more help or share an example?
This can be found deep within the singularitygs Ruby gem:
Grid Overlay & Background
There are three ways you can display a grid:
Manually apply the background to the element
.container {
#include background-grid;
}
Add a switch to toggle an overlay -
#include grid-overlay('.container');
Toggle grid with JavaScript
#include grid-toggle in an SCSS * { … } or html { … } element.
Add [data-development-grid="show"] to item you want grid applied to
Add "grid.js" to the HTML head
The first will apply a grid background to your container calculated using your
grid settings, media breakpoints etc.
The second will add a switch to your page which allows you to view a grid
overlay over your container (or if none is provided) by hovering over
the switch. if you need your mouse for other things you can toggle the overlay
on permanently by inspecting and checking :hover in your styles panel.
The third will allow you to toggle your background grid on and off by pressing the 'g' on your keyboard.
I couldn't get grid.js to work, so I rewrote it using a bit of jQuery. Here is my version:
// A working jQuery/javascript script for the hide/show grid
$(document).ready(function() {
$('html').keypress(function(event) {
if (event.which === 103) {
var wrap = document.getElementById("wrap");
var dev = wrap.getAttribute('data-development-grid');
if (dev === null || dev === 'hide') {
wrap.setAttribute('data-development-grid', 'show');
}
else {
wrap.setAttribute('data-development-grid', 'hide');
}
}
});
});
I find method 2 is rather neat. You get a symbol of 4 vertical bars in the bottom left of your webpage and the grid appears with mouseover. Similar to Susy's Home Page
The drag/drop column reordering is a great feature, but how do I prevent the users from moving particular (non-data) columns?
For example, I am using the Checkbox Selectors for my mutli-select Grid, but this column should always be locked to the left, while the other columns can be freely reordered.
I looked at the sortable demos on jQuery UI and modified the setupColumnReorder function in slick.grid.js to exclude certain items. By excluding the checkbox column I was able to prevent it from getting reordered, even by dragging other columns before it.
function setupColumnReorder() {
var checkBoxColumn = $headers.children([0]).attr('id');
$headers.sortable({
items: "div:not('.slick-resizable-handle','#"+checkBoxColumn+"')",
...
Since my checkbox column is always first, I just grab the id like so. A bit of a hack, but it worked.
I tried this:
function setupColumnReorder() {
var checkBoxColumn = $headers.children([0]).attr('id');
$headers.sortable({
items: "div:not('.slick-resizable-handle','#"+checkBoxColumn+"')",
...
but i had problems when dragging other columns before it. Then i tried this:
grid.onColumnsReordered.subscribe(function (e, args) {
if (myGridColumns[0].id != grid.getColumns()[0].id)
{
grid.setColumns(myGridColumns);
}
else
{
myGridColumns= grid.getColumns();
}
});
and it was just fine.