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>
Related
I have comments and this comment containe likes, My propblem is when I try to push replay to the comment it is append to the wrong comment, So I used this.$el; to get the target comment bu the propblem is unshift/push just use with list and it shows error push is not a function
My qustion is how I can use unshift/push to append under spicific div not list
async addReplay(comment, e){
const element = this.$el; //this to get the target div
}
here the post replay function
async getaddReplay(id, setReplayPlace){
await axios.get('/account/api/auth/user/')
.then(response => {
this.currentUserImage = response.data.profile_image
})
const replayData = {
content: this.commentReplayContent,
video: this.$route.params.video_id,
parent: id
}
await axios.post(`/video/api/video/comment/${id}/replay/create/`, replayData)
.then(response => {
console.log(this.setReplayPlace)
// here I want append the item to spicific div
this.setReplayPlace.unshift({ content: this.commentReplayContent, author: this.$store.state.user.username, id:response.data.id, author_image:this.currentUserImage, video:this.$route.params.video_id ,likes:0, total_parents:0, check_like: false, publish:'now'})
this.commentReplayContent = ''
})
.catch(error => {
console.log(error)
})
}
Edit
Here there are comments with replies component and I pass the data to repliy component using props
<ul v-for="(comment, index) in comments" :key="index">
<li class="comment-object">
<div class="image-container">
<img class="profile-pic" :src="comment.author_image" v-on:change="currentUserImage" alt="profile picture" id="user_video_comment_profile_image" refs="user_video_comment_profile_image" />
</div>
<div class="comment-text">
<h2 class="username" style="color: #C2C3C4">{{comment.author}} <span class="muted">· {{comment.publish}}</span>
<DeleteComment :comment="comment" v-if="comments || index" :comments="comments" :index="index" />
</h2>
<p class="comment">{{comment.content}} </p>
<RepliesJustAdded #justAddedReplies="addRepliesToParent" :replaiesJustAdded="replaiesJustAdded" :setReplayPlace="setReplayPlace" :allReplies="allReplies" :replaiesData="replaiesData" v-if="replaiesJustAdded || setReplayPlace || allReplies || replaiesData" />
</div>
</li>
</ul>
The Replay component
<ul v-for="replay in replies" :key="replay.id" id="video_comments_replies" >
<li class="comment-object">
<div class="image-container">
<img class="profile-pic" :src="replay.author_image" alt="profile picture" id="user_video_comment_profile_image" refs="user_video_comment_profile_image" />
</div>
<div class="comment-text">
<h2 class="username" style="color: #C2C3C4">{{replay.author}} <span class="muted">· {{replay.publish}}</span></h2>
<p class="comment">{{replay.content}} </p>
<RepliesActionButtons :replay="replay" />
</div>
</li>
</ul>
I didn't find the line where you are trying to call push but I thing I know what's wrong: your are trying to call push but array-like collections don't have such method. You should convert your collection to array before calling push. Try something like that:
// create a `NodeList` object
const divs = document.querySelectorAll('div');
// convert `NodeList` to an array
const divsArr = Array.from(divs);
After that all methods of Array.prototype will be available.
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
This is from the docs:
#click.prevent.self will prevent all clicks while #click.self.prevent will only prevent clicks on the element itself.
I tried making a fiddle to actually prevent all clicks but am unsuccessful. Can someone elaborate what this line in the docs actually mean?
Fiddle:
var app = new Vue({
el: '#appp',
methods: {
logger(arg) {
console.log(arg);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="appp">
<div #click.prevent.self="logger('1')"> 1
<br>
<div #click.prevent.self="logger('2')"> ..2
<br>
<div #click.prevent.self="logger('3')"> ....3
</div>
</div>
</div>
</div>
One of the best ways to see how .prevent and .self interact is looking at the output of the Vue compiler:
.prevent.self:
on: {
"click": function($event){
$event.preventDefault();
if($event.target !== $event.currentTarget)
return null;
logger($event)
}
}
.self.prevent
on: {
"click": function($event){
if($event.target !== $event.currentTarget)
return null;
$event.preventDefault();
logger($event)
}
}
The key difference between those 2 code blocks is inside the fact that the order of the operations matters, a .prevent.self will prevent events coming from its children, but doesn't run any code, but a .self.prevent will only cancel events directly created by itself, and ignores child requests completely.
Demo:
var app = new Vue({
el: '#appp',
data: {log:[]},
methods: {
logger(arg) {
this.log.push(arg);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="appp" style="display: flex; flex-direction: row;">
<form #submit.prevent="logger('form')" style="width: 50%;">
<button>
<p #click.prevent.self="logger('prevent.self')">
prevent.self
<span>(child)</span>
</p>
<p #click.self.prevent="logger('self.prevent')">
self.prevent
<span>(child)</span>
</p>
<p #click.prevent="logger('prevent')">
prevent
<span>(child)</span>
</p>
<p #click.self="logger('self')">
self
<span>(child)</span>
</p>
<p #click="logger('none')">
none
<span>(child)</span>
</p>
</button>
</form>
<pre style="width: 50%;">{{log}}</pre>
</div>
</div>
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');
});
});
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();