dojo dnd change the type of the dragged element - dojo

I am using Dojo 1.8.3
I want to develop a Customizable Form using dnd. I have a list of form elements in the left dojo/dnd/Source and the container in the right dojo/dnd/Target which is supposed to generate dijits when I drop on it.
<div class="normal" style="width: 99%; height: 99%;" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters: true, liveSplitters: true">
<div data-dojo-type="dijit/layout/ContentPane" class="normal" style="width: 30%; height: 80%;"
data-dojo-props="splitter: true, region: 'left'">
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="form_tools" id="form_tools" data-dojo-props="copyOnly: true"
class="container" style="width:99%;">
<div class="dojoDndItem" dndtype="heading">Heading</div>
<div class="dojoDndItem" dndtype="textbox">Text Box</div>
...
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" class="normal" id="form_container"
style="width: 68%; height: 80%;" data-dojo-props="splitter: true, region: 'center'">
<div data-dojo-type="dojo/dnd/Target" data-dojo-id="form_items" id="form_items" class="container" style="height: 80%;" accept="heading,textbox">
<script type="dojo/on" event="DndDrop"> form.transform_item(arguments[0], arguments[1], arguments[2], arguments[3]);//source, nodes, copy, target </script> </div>
</div>
</div>
In my js function transform_item, I am doing this:
this.transform_item = function(){
var dragged_items = arguments[3].selection;
form_items.forInSelectedItems(function(item, id, map){
var dnditem = dojo.byId(id);
switch(item.type[0]){
case "textbox":
var textbox = new dijit.form.TextBox({
name: "textbox",
value: "This is a TextBox"
}, "textbox_text");
// HERE IS WHERE I SHOULD INSERT THE CODE FOR GENERATING A TEXTBOX
require(['dojo/parser'], function(parser){
parser.parse('textbox_text');
});
break;
}
});
}
At this point I'm getting an error when I drop over the Target :
dojo/parser::parse() error
TypeError: root is null
var node = root.firstChild;
How can I make Dojo generate, for example a dijit.form.TextBox when I drag an "textbox" dndtype?

Solved: I have just inserted the textbox in the wrong parent, textbox_text does not exist.So No need of parse();

Related

How to close Modal de Materialize CSS with Vue

I am trying to close a Modal of Materialize CSS if the validation is correct but I can not find the form.
The simplest thing was to do a type validation:
v-if = "showModal" and it works but leaves the background of the Modal and although click does not disappear. The background is a class named 'modal-overlay'
This is my code:
<i class="material-icons modal-trigger tooltipped" style="margin-left: 2px;
color:#ffc107; cursor:pointer;" #click="getById(article), fillSelectCategories(),
titleModal='Edit', type='edit'" data-target="modal1">edit</i>
I imported M from the JS file of MaterilizeCSS
import M from "materialize-css/dist/js/materialize.min";
Method:
update(){
var elem = document.querySelectorAll('.modal');
var instance = M.Modal.getInstance(elem);
console.log(instance)
That returns 'undefined'
I tried this too on the update() method:
var elem = document.querySelectorAll('.modal');
elem.close();
M.Modal.close()
I initialize the modal from mounted and it works fine but I can not close it at the moment I require it.
mounted(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
}
But I know what else to try :(
It really is difficult to know why things aren't working for you without looking further into your code, but I've created this simple example to demonstrate how it could be done ..
new Vue({
el: "#app",
data: {
modalInstance: null,
closeAfterTimeElapsed: true,
seconds: 1
},
mounted() {
const modal = document.querySelector('.modal')
this.modalInstance = M.Modal.init(modal)
const select = document.querySelector('select');
M.FormSelect.init(select);
M.updateTextFields();
},
methods: {
handleClick() {
if (this.closeAfterTimeElapsed) {
setTimeout(() => { this.modalInstance.close() }, this.seconds * 1000)
}
}
}
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<!-- Modal Trigger -->
<button #click="handleClick" data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br>
<br>
<div class="row">
<div class="input-field col s6">
<select v-model="closeAfterTimeElapsed">
<option :value="false">False</option>
<option :value="true">True</option>
</select>
<label>Close Modal After</label>
</div>
<div class="input-field col s6">
<input id="seconds" type="number" v-model="seconds">
<label for="seconds">Seconds</label>
</div>
</div>
</div>
See this JSFiddle

protractor|selenium not clicked on html element

Help me please with this question.
Did not see the context menu after executing this code.
file: Grid.js
export default class Grid{
btnAddClick(){
browser.wait(async()=>{
await browser.executeScript('document.querySelector(".Grid--Head--leftButton-plus").click();');
return EC.presenceOf(element(by.css('.item-invoice_form_add_simple_position a')))
&& EC.presenceOf(element(by.css('.contextmenus')));
},
browser.params.timeWaitSelEl,
'Element "menu point Add position" too long in the DOM.');
}
}
test file: test.js
it('test', ()=>{
let grid = new Grid();
grid.btnAddClick();
expect(element(by.css('.contextmenus')).isDisplayed())
.toBeTruthy('contextmenu');
expect(element(by.css('.contextmenus')).isPresent())
.toBeTruthy('cont');
});
html templates:
HTML
<div class="contextmenus"><ul style="z-index: 1000000;">
<li class=" tab-elem item-invoice_form_add_rate_expense_type"><a cid="c855">Добавить</a></li>
<li class=" tab-elem item-invoice_form_add_simple_position"><a cid="c857">Добавить позицию</a></li>
</ul></div>
HTML
<div class="Grid--Head--leftButton theme-color--before Grid--Head--leftButton-plus" style="width: 23px;">
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
</div>

Isotope and Bootstrap3: Content divs disappear on sorting

This must be fairly simple, but I'm puzzled.
The content divs disappear on sorting.
And I missing the correct data-filter? Or a display:none or display:block?
Codepen: http://codepen.io/anon/pen/oYXXPq (You can clone it to make changes.)
HTML:
<ul id="filters">
<li>Everything</li>
<li>Blog</li>
<li>CISO</li>
<li>LABS</li>
</ul>
<div class="container-fluid">
<div id="isotope-blog">
<div class="grid">
<div class="grid-sizer col-xs-12 col-md-6"></div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div><div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content security-blog">BLOG BLOG BLOG</div>
</div>
</div>
</div>
</div>
CSS:
.grid-item-content {
max-height: 120px;
background: #0D8;
border: 2px solid #000;
overflow:hidden;
}
.container-fluid {
max-width:1200px;
}
jQuery:
jQuery(function ($) {
var $container = $('#isotope-blog'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'masonry'
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
This now works: http://codepen.io/anon/pen/oYXXPq
It is a two column Masonry and Bootstrap layout sortable by a filter class in the grid-item div element. The filter class can be multiple, different classes.
Problems were:
My HTML markup was too complex and wrong; it needs to be in the format:
<div class="container">
<div class="isotope-list">
<div class="row">
<div class="grid-item blog">OneOneOneOne Blog Blog Blog</div>
<div class="grid-item blog">TwoTwoToTwoTwoTwo Blog Blog Blog </div>
and on and on...
</div>
</div>
There were small changes needed to the CSS.
And my Javascript needed to make and clear updates to the selected categories:
var selectedCategory;
var $grid = $('.isotope-list').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 160,
gutter: 20
},
getSortData: {
selectedCategory: function( itemElem ) {
return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
}
}
});
var $items = $('.row').find('.grid-item');
$('.sort-button-group').on( 'click', '.button', function() {
// set selectedCategory
selectedCategory = $( this ).attr('data-category');
if ( selectedCategory == 'all' ) {
$grid.isotope({
sortBy: 'original-order'
});
}
// update sort data now that selectedCategory has changed
$grid.isotope('updateSortData');
$grid.isotope({ sortBy: 'selectedCategory' });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});

Random inline styles being applied

I have no code that adds inline styles to div.size-option, but the first one has random inline styles added to it. No where else in the code does anything mess with these elements. The overall setup is too complicated to reproduce in a codepen.
return <div id="options-container">
{ctrl.model.map(function(model) {
return <div class='size-option-container'
onclick={() => { if(model.inStock()) vm.select(model.id()); }}
option={model.id()}>
<div
class={'size-option' +
(model.isSelected() ? ' selected': '') +
(model.inStock() ? '' : ' option-out-of-stock')}>
<span class='size'>{model.name()}</span>
</div>
</div>
})}
</div>
Compiled:
return m(
'div',
{ id: 'options-container' },
ctrl.model.map(function (model) {
return m(
'div',
{ 'class': 'size-option-container',
onclick: function onclick() {
if (model.inStock()) vm.select(model.id());
},
option: model.id() },
m(
'div',
{
'class': 'size-option' + (model.isSelected() ? ' selected' : '') + (model.inStock() ? '' : ' option-out-of-stock') },
m(
'span',
{ 'class': 'size' },
model.name()
)
)
);
})
);
Output:
<div id="options-container">
<div class="size-option-container" option="1428">
<div class="size-option selected" style="width: 127.333px; margin-right: 15px;"><span class="size">S</span></div>
</div>
<div class="size-option-container" option="1366">
<div class="size-option"><span class="size">M</span></div>
</div>
<div class="size-option-container" option="1351">
<div class="size-option"><span class="size">L</span></div>
</div>
<div class="size-option-container" option="1447">
<div class="size-option"><span class="size">XL</span></div>
</div>
<div class="size-option-container" option="953">
<div class="size-option"><span class="size">XXXL</span></div>
</div>
<div class="size-option-container" option="1016">
<div class="size-option"><span class="size">XXXXL</span></div>
</div>
<div class="size-option-container" option="1070">
<div class="size-option"><span class="size">4X</span></div>
</div>
<div class="size-option-container" option="1117">
<div class="size-option"><span class="size">5X</span></div>
</div>
</div>
Specifically the first size-option-container:
<div class="size-option selected" style="width: 127.333px; margin-right: 15px;"><span class="size">S</span></div>
UPDATE
Random changes to the class styles periodically stop adding the inline styles.
UPDATE 2
Adding style='' to div.size-option solves the issue.
UPDATE 3
Changing the HTML around a little I now have a new random style:
<div class="small-4 columns" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;"><div class="size-option-container" option="1428"><div style="" class="size-option"><span class="size">S</span></div></div></div>
Since the code you've posted doesn't involve the style property at all and Mithril is a totally unopinionated about styling, it's clear to me that this is down to external code modifying the contents.
If you're using a modern web browser, you can use DOM breakpoints to identify the script that's causing these modifications. Using Chrome, for example:
Add a config function to the wrapping element and stick a debugger statement in it:
return <div
id="options-container"
config={function(el,init){
if(!init)
debugger
}}
>
Open developer tools by hitting F12 and (re)load the page running your script: the browser will pause script execution immediately after the element is generated by Mithril.
Chrome will show you the value assigned to the el parameter of the config function: right-click it and 'Reveal in navigator' - or right-click the element as it appears in the browser and 'Select' it.
In the elements panel, right-click the element that gets strange styles applied to it, and select 'Break on...' > 'Attributes modifications'.
Hit F8 to resume script execution (it should still be paused from landing on the debugger statement.
The browser will pause script execution whenever a script attempts to modify the attributes of the element in question, and reveal the line of code doing it. When this happens, it will probably be a generic attribute modification method jQuery or similar. By hitting Ctrl+., you can move back to the function that called this one, successively, until you reach a line of code from your source code.

Enabling and disabling dojo menu bar item

I have a dojo menu bar with five menu bar items.
on page load, one of the menu bar item will be in disable mode.
on clicking "Add" menu bar item, the disabled menu bar item("Save") has to come enable.
am getting it enabled using the below script. but the issue is, its not coming in the same line.
its getting enabled in next line. how to fix this.
here is my dojo menu bar:
<div class="claro" id="menuDiv151" onclick="setWidgetproperty(this.id,'x','navMenu151');" onmousedown="setMenuBarProperty('navMenu151');" onmouseup="setDocStyle(this.id)" style="border:1px dotted white; left: auto; position: absolute; width:450px; top: 620px;">
<div dojotype="dijit.MenuBar" id="navMenu151" style="font-size:11pt;" title="MenuBar">
<div dojotype="dijit.MenuBarItem" id="SelectMenu151" onclick="getEventLogUserSelect();setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="SelectMenu151" name="Select5.png" onclick="setImgProperty(this.id)" src="images/uploads/select.png" style="height:20px; width:20px;">
Select
</div>
<div dojotype="dijit.MenuBarItem" id="AddMenu151" onclick="getUserAdd();setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="AddMenu151" name="Add6.png" onclick="setImgProperty(this.id)" src="images/uploads/add.png" style="height:20px; width:20px;">
Add
</div>
<div dojotype="dijit.MenuBarItem" id="CopyMenu151" onclick="setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="CopyMenu151" name="Copy7.png" onclick="setImgProperty(this.id)" src="images/uploads/Terminate.png" style="height:20px; width:20px;">
Copy
</div>
<div dojotype="dijit.MenuBarItem" id="DeleteMenu21" onclick="setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="DeleteMenu21" name="Delete8.jpg" onclick="setImgProperty(this.id)" src="images/uploads/cancel.png" style="height:20px; width:20px;">
Delete
</div>
<div dojotype="dijit.MenuBarItem" id="SaveMenu21" onclick="setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="SaveMenu21" name="Save9.jpg" onclick="setImgProperty(this.id)" src="images/uploads/save.png" style="height:20px; width:20px;">
Save
</div>
</div>
</div>
and the script to enable and disable the item:
window.onload = function() {
document.getElementById("SaveMenu21").style.display='none';
};
function getUserAdd(){
document.getElementById("SaveMenu21").style.display='block';
}
Here is an example showing how to hide a menubar item and how to disable a menubar item
http://jsfiddle.net/cswing/62Jcp/
require(["dojo/ready", "dijit/registry", "dojo/dom-style"],
function(ready, registry, domStyle) {
ready(200, function(){
var menuItem = registry.byId("saveItemDisabled");
menuItem.set('disabled', true);
menuItem = registry.byId("saveItemHidden");
domStyle.set(menuItem.domNode, 'display', 'none');
});
});
Try This
dijit.byId("myElement").attr("disabled", false);