How to disable moving in jsTree 1.0, but not disabling dnd plugin?
Thanks.
I found the solution.
$("#tree").jstree({
//...
"crrm" : {
"move" : {
"check_move" : function (m) {
return false;
}
}
}
//...
"plugins" : [ "crrm", "dnd" ]
});
"crrm" : {
"move" : {
"check_move" : function (m) {
if(m.cr.attr("id") == m.r.attr("id")){
return true;
}else{
return false;
}
}
}
}
Related
I'm trying to provide a basic autocompletion for something like this:
db.collection("Items").where("name", "==", "temp").limit(1).get();
Here's the code I have so far, using StreamLanguage of CodeMirror 6:
import {
IndentContext,
LanguageSupport,
StreamLanguage,
StringStream
} from "#codemirror/language";
import { tags as t } from "#lezer/highlight";
export const FireStoreLanguage = StreamLanguage.define({
name: "firestore",
startState: (indentUnit: number) => {
return {};
},
token: (stream: StringStream, state: any = {}): string | null => {
console.log(stream);
if (stream.match("db")) {
state.db = true;
return "keyword";
}
if (stream.match(".")) {
if (state.db) {
state.db = false;
state.collection = true;
return "keyword";
} else if (state.collection) {
state.collection = false;
state.where = true;
return "keyword";
} else if (state.where) {
state.where = false;
state.limit = true;
return "keyword";
} else if (state.limit) {
state.limit = false;
return "keyword";
}
}
if (stream.match("collection")) {
if (state.db) {
state.collection = true;
return "keyword";
}
}
if (stream.match("where")) {
if (state.collection) {
state.where = true;
return "keyword";
}
}
if (stream.match("limit")) {
if (state.where) {
state.limit = true;
return "keyword";
}
}
if (stream.match("get")) {
if (state.limit) {
state.limit = false;
return "keyword";
}
}
if (stream.match(/"(?:[^\\"]|\\.)*"/)) {
if (state.collection) {
return "string";
}
if (state.where) {
state.where = false;
state.whereValue = true;
return "string";
}
if (state.whereValue) {
state.whereValue = false;
return "string";
}
if (stream.match("==")) {
if (state.whereValue) {
state.whereValue = false;
state.whereOperator = true;
return "operator";
}
}
if (stream.match(/[0-9]+/)) {
if (state.limit) {
return "number";
}
}
}
stream.next();
return null;
},
blankLine: (state: {}, indentUnit: number): void => {},
copyState: (state: {}) => {},
indent: (
state: {},
textAfter: string,
context: IndentContext
): number | null => {
return 1;
},
languageData: {
commentTokens: { line: ";" },
},
tokenTable: {
db: t.keyword,
dot: t.punctuation,
collection: t.keyword,
get: t.keyword,
lParen: t.punctuation,
rParen: t.punctuation,
string: t.string,
},
});
export function firestore() {
return new LanguageSupport(FireStoreLanguage);
}
In React, here's how I use it(after building it):
import CodeMirror from "#uiw/react-codemirror";
import React from "react";
import { firestore } from "./firestore";
function App() {
const onChange = React.useCallback((value, viewUpdate) => {
console.log("value:", value);
}, []);
return (
<CodeMirror
value={``}
height="100vh"
extensions={[firestore()]}
onChange={onChange}
/>
);
}
export default App;
The editor loads okay, but no autocompletion is provided while I type!
What am I doing wrong or missing in the code above?
I was missing these parts:
export const FireStoreCompletion = FireStoreLanguage.data.of({
autocomplete: completeFromList([
{ label: "db", type: "namespace" },
{ label: "collection", type: "function" },
{ label: "where", type: "function" },
{ label: "limit", type: "function" },
{ label: "get", type: "function" },
]),
});
export function firestore() {
return new LanguageSupport(FireStoreLanguage, [FireStoreCompletion]);
}
I want to know how they make that pop up greeting during pages loads like on this wiredsystems page wired systems website
It is like a small form with a greeting on it.
Thank you!
Following is the script from page source of that site. In short, you call a pop-up function with $(document).ready.
require([
'jquery',
'jquery/jquery.cookie'
], function ($) {
$(document).ready(function(){
if($("body").hasClass("cms-index-index")) {
var check_cookie = $.cookie('newsletter_popup');
if(window.location!=window.parent.location){
$('#newsletter_popup').remove();
} else {
if(check_cookie == null || check_cookie == 'shown') {
setTimeout(function(){
beginNewsletterForm();
}, 1500);
}
$('#newsletter_popup_dont_show_again').on('change', function(){
if($(this).length){
var check_cookie = $.cookie('newsletter_popup');
if(check_cookie == null || check_cookie == 'shown') {
$.cookie('newsletter_popup','dontshowitagain');
}
else
{
$.cookie('newsletter_popup','shown');
beginNewsletterForm();
}
} else {
$.cookie('newsletter_popup','shown');
}
});
}
}
});
function beginNewsletterForm() {
$.fancybox({
'padding': '0px',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'inline',
'href': '#newsletter_popup',
'onComplete': function() {
$.cookie('newsletter_popup', 'shown');
},
'tpl': {
closeBtn: '<a title="Close" class="fancybox-item fancybox-close fancybox-newsletter-close" href="javascript:;"></a>'
},
'helpers': {
overlay: {
locked: false
}
}
});
$('#newsletter_popup').trigger('click');
}
});
Issue:
I cannot get the followers of a user using Flow-Router + React, subscribing inside React Component
I use Meteor, Flow-Router, React. I'm tring to subscribe followers,
but it always returns empty when I run the app. I'm not sure what is wrong.
I follow this approach: Subscribe inside React Component by Arunoda
When I check the query with mongo shell, it works:
(i.e. Return the followers (1 user, Bob) of Alice whose _id is "5MJJPc78W3ipXpWzy")
meteor:PRIMARY> db.users.find({followings: "5MJJPc78W3ipXpWzy"}).pretty()
{
"_id" : "v2Kikp8Wa5FSJi64b",
"createdAt" : ISODate("2015-12-11T11:08:50.209Z"),
"services" : {
"password" : {
"bcrypt" : "$2a$10$IzfXjbXlYw4BuTMLroSjaOmgqnj8Z9sWXc4uyvHuXurirWRgDcZJ2"
},
"resume" : {
"loginTokens" : [
{
"when" : ISODate("2015-12-11T11:08:50.213Z"),
"hashedToken" : "jN0jeZX6PYFAy6b1eHvwWvbMhiVtbF1cjFySPnTpQTQ="
}
]
}
},
"username" : "bob",
"followings" : [
"5MJJPc78W3ipXpWzy"
]
}
y codes are here:
lib/router
FlowRouter.route('/users/:userid/followers', {
name: 'followers',
action(params) {
ReactLayout.render(MainLayout, {
content: <FollowersBox {...params}/>
});
}
});
server/publications
Meteor.publish('followers', (userId)=> {
check(userId, String);
Meteor.users.find({followings: userId});
});
clients/components/Profile/FollowersBox
FollowersBox = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
let data = {};
let followersSubs = Meteor.subscribe('followers', this.props.userid); // Always empty!
if(followersSubs.ready()) { // Never be ready
data.followers = Meteor.users.find({followings: this.props.userid}).fetch();
}
return data;
},
render(){
let followersList = "";
if(this.data.followers){
followersList = this.data.followers.map((user)=> {
return <UserItem
key={user._id}
userId={user._id}
username={user.username}
/>
});
}
return (
<div>
<h4>Followers</h4>
<ul>
{followersList}
</ul>
</div>
)
}
});
Full repo
https://github.com/yhagio/MeteorReactTwitter
Publish function should return cursor:
Meteor.publish('followers', (userId) => {
check(userId, String);
return Meteor.users.find({followings: userId});
});
How can I debounce listeners specified inside of controller using
this.control
?
Using the sample from the docs, you could use Ext.Function.defer() inside your
Ext.define('AM.controller.Users', {
init: function() {
this.control({
'useredit button[action=save]': {
click: function() {
//delay function call for a couple of seconds
Ext.Function.defer(this.updateUser, 2000, this);
}
}
});
},
updateUser: function(button) {
console.log('clicked the Save button');
}
});
Ext.define('AM.controller.Users', {
init: function() {
this.control({
'useredit button[action=save]': {
click: {
buffer:2000,
fn:this.updateUser
}
}
}
});
},
updateUser: function(button) {
console.log('clicked the Save button');
}
});
The below lines of code while using jstree, throws an exception mentioned in the link
http://code.google.com/p/jstree/issues/detail?id=294
**"ui" : { "initially_select" : [ quotedAndCommaSeparated ] }**
**"core" : { "animation" : 0, "initially_open" : [ quotedAndCommaSeparated ] }**
If i use hard coded values like below, it works without any issues.
"ui" : { "initially_select" : ['3381','7472','7473','7474','7247','7248','7249','3273','3272'] }
"core" : { "animation" : 0, "initially_open" : [ '3381','7472','7473','7474','7247','7248','7249','3273','3272' ] }
I have formed the quotedAndCommaSeparated from an array and it is the same as the hard coded values above. But still the issue is not resolved. Please suggest.
quotedAndCommaSeparated = '3381','7472','7473','7474','7247','7248','7249','3273','3272'
Complete code for ur reference:
For Scripts:
static.jstree.com/v.1.0pre/jquery.jstree.js
static.jstree.com/v.1.0pre/_docs/syntax/!script.js
function BindTreeView(nodeToHighlight, isInitialLoad)
{
var initiallySelect = [];
var searchOption = 0;
if($('#rbobtnSelectedLevelAndBelowRadio:checked').val() == 'Selected Level and Below')
searchOption = 1;
else if($('#rdobtnCurrentOrganization:checked').val() == 'Current Organization')
searchOption = 2;
if(searchOption == 0)
initiallySelect.push(nodeToHighlight);
else if (searchOption == 1 || searchOption == 2)
{
var grid = $("#SearchResultJQGrid");
ids = grid.jqGrid("getDataIDs");
if(ids && ids.length > 0)
{
for(var iRow = 1; iRow < ids.length; iRow++)
{
var dataRow = $("#SearchResultJQGrid").getRowData(iRow);
var companyId = dataRow.CompanyID;
initiallySelect.push(companyId);
}
}
}
var quotedAndCommaSeparated = "'" + initiallySelect.join("','") + "'";
var urlRef = '/Group/GetDataForTreeView';
$('#TreeView').jstree({
"json_data" : {
"ajax" : {
"cache": false,
"url": function (node) {
var nodeId = "";
if (node == -1)
url = urlRef;
return url;
},
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
}
}
},
"ui" : { "initially_select" : [ quotedAndCommaSeparated ] },
"core" : { "animation" : 0, "initially_open" : [ quotedAndCommaSeparated ] },
"themes": {
"theme": "classic",
"dots": true,
"icons": false
},
"plugins" : [ "themes", "json_data", "ui", "core" ]
}).bind("select_node.jstree", function (event, data) { if(isInitialLoad == true)
isInitialLoad = false;
else
BindGridView('CV', data.rslt.obj.attr("name"), data.rslt.obj.attr("id"), isInitialLoad);
});
}
Your bug is that quotedAndCommaSeparated is not a list, it's just a string.
You should simply add strings instead of numbers to the initiallySelect list
initiallySelect.push(companyId + "");
Then you can use this directly in the jstree init
"ui" : { "initially_select" : [ initiallySelect ] },
Hope that helps.