I want to implement a kind of file-browser, where the user can navigate using the folder-tree, and see the folder-content in a grid.
I want to use the same data-store for both widgets, but can't see how to achive this - the tree needs items with e.g. a children-attribute, the grid only needs those children.
because ther may be a huge dataset, I'm planning to use the jsonreststore.
i was trying with this, and got one solution like this, Please note that the grid and tree are using the same store.. Here the catch is if folder has id of fld1 then all the files under that folder should have id pattern like "fld1f1","fld1f2".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="djlib/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/Grid.css"/>
<link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/claroGrid.css"/>
</head>
<body class=" claro ">
<div id="treeOne"></div>
<div id="gridHolder" style="height:500px"></div>
</body>
<script type="text/javascript">
s =[];
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dojox.grid.DataGrid");
dojo.addOnLoad(function(){
baseStore = new dojo.data.ItemFileReadStore({
data:{
identifier: 'id',
label: 'name',
items: [
{id:'fld1',name:'folder 1', type:"folder", files:[{_reference:'fld1f1'},{_reference:'fld1f2'}]},
{id:'fld1f1',name:'file 1 of folder 1', type:"file", size:'1KB', dateLstMod:'15/15/2001'},
{id:'fld1f2',name:'file 2 of folder 1', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
{id:'fld2',name:'folder 2', type:"folder", files:[{_reference:'fld2f1'},{_reference:'fld2f2'}]},
{id:'fld2f1',name:'file 1 of folder 2', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
{id:'fld2f2',name:'file 2 of folder 2', size:'1KB', type:"file",dateLstMod:'15/15/2001'},
{id:'fld3',name:'folder 3', type:"folder"}
]
}
});
treeModel = new dijit.tree.ForestStoreModel({
store: baseStore,
query:{
type:'folder'
},
rootId: "root",
rootLabel: "List of folders on this drive",
childrenAttrs:['files']
})
t = new dijit.Tree({
model: treeModel
},"treeOne")
dojo.connect(t,'onClick', function(item, node, evt){
if(node.isExpandable){
updateGrid(baseStore.getValues(item,"id"));
}
})
function updateGrid(folderId){
grid.filter({
type:'file' , id:folderId+'*'
},true);
}
var gridStr = [{
cells:[
[
{ field: "name", name: "File Name", width: 'auto' },
{ field: "size", name: "Size", width: 'auto'},
{ field: "dateLstMod", name: "Date Last Modified", width: 'auto'}
]
]
}]
grid = new dojox.grid.DataGrid({
store:baseStore,
structure: gridStr,
noDataMessage:"NO DATA"
}, 'gridHolder');
grid.startup();
grid.filter({
type:'filee'
},true);
})
I think this link has the answer, you don't point the grid at the store, you create the grid and add items by iterating across the relevant children in the store
http://groups.google.com/group/dojo-interest/browse_thread/thread/af7265b19edeeb0/9fee8b5498746dd8
Related
I am trying to setup msw with #web/test-runner (and playwright). The problem is that I don't know how the mockServiceWorker.js can be picked up by the test runner (which uses browser, not nodejs like jest). There is an example with karma:
https://github.com/mswjs/examples/tree/master/examples/with-karma, probably I have to do something similar but I have no idea where to start. Any hints are welcome.
I am not sure if it is important, but let me share my web.test-runner.config.js
import vite from 'vite-web-test-runner-plugin'
import { playwrightLauncher } from '#web/test-runner-playwright';
export default {
plugins: [ vite() ],
coverageConfig: {
include: [ 'src/**/*.{svelte,js,jsx,ts,tsx}' ]
},
browsers: [
playwrightLauncher({ product: 'chromium' })
],
testRunnerHtml: testFramework => `
<!DOCTYPE html>
<html>
<head>
<script type="module">
window.global = window;
window.process = { env: {} };
</script>
<script type="module" src="${testFramework}"></script>
</head>
</html>
};
and my test command
"test": "web-test-runner \"test/**/*.test.ts\"",
Trying to setup pagination with data, where {{ title }} in <head><title>{{ title }}</title></head> is the title of the current page as defined in projects.json
Assumed this could be done:
# main.njk
<head>
<title>{{ title }}</title>
</head>
# page.njk
---
layout: main.njk
pagination:
data: projects
size: 1
alias: project
permalink: "work/{{ project.title | slug }}/"
title: {{ project.title }}
Might have misunderstood some fundamentals but {{ title }} renders out as [object, object] instead. Permalink works fine...
Now eleventyComputed can be used
# main.njk
<head>
<title>{{ title }}</title>
</head>
# page.njk
---
layout: main.njk
pagination:
data: projects
size: 1
alias: project
permalink: "work/{{ project.title | slug }}/"
eleventyComputed:
title: "{{ project.title }}"
The project title can actually be accessed with {{ project.title }} in the master template main.njk, as with any other project data defined for that project in projects.json.
For any other page (not defined as an object in projects.json), a conditional statement can be used:
<title>{{ project.title if project.title else title}}</title>
So that:
# main.njk
<head>
<title>{{ project.title if project.title else title}}</title>
</head>
# page.njk
---
layout: main.njk
pagination:
data: projects
size: 1
alias: project
permalink: "work/{{ project.title | slug }}/"
---
# other_page.njk
---
layout: main.njk
title: Other Page
---
# projects.json
[
{
"title": "Project 1"
},
{
"title": "Project 2"
}
]
Outputs:
# work/project-1/
<head>
<title>Project 1</title>
</head>
# work/project-2/
<head>
<title>Project 2</title>
</head>
# other-page/
<head>
<title>Other Page</title>
</head>
In a njk file, you generally cannot use data variables or template syntax in the frontmatter.
The permalink variable is an exception.
See the official Eleventy documentation about permalink
To solve your issue, you could either:
hard-code your title in your page.njk
use a javascript .11ty.js templating file, either to replace page.njk or main.njk, or as a layout to main.njk.
.11ty.js files can generally use data variables in the frontmatter.
e.g. of a .11ty.js file with a variable in the frontmatter:
let thing = "whatever";
class Sample {
data() {// data() is the .11ty.js equivalent of frontmatter
return {
myCustomFrontmatterVariable: thing,
};
}
render(data){
return data.content;
}
}
module.exports = Sample;
I have created a vue.js router and inserting the links found in an array using the structure found hereafter. This displays the links horizontally. However, I would like to insert dropdowns, instead of simple links. Can this be done using this or similar structure somehow?
<nav style="text-align: right">
<router-link class="spacing" v-for="routes in links"
v-bind:key="routes.id"
:to="`${routes.page}`">{{routes.text}}</router-link>
</nav>
links: [
{
id: 0,
text: 'Buy',
page: '/Buy'
},
{
id: 1,
text: 'Sale',
page: '/Sale'
},
{
id: 2,
text: 'Transactions',
page: '/Transactions'
},
{
id: 3,
text: 'Help',
page: '/Help'
}
]
Yeah, there are a few ways you could do that, though you'll have to loop over something different than the <router-link>, since that component renders an <a> tag.
I would first adjust your HTML to allow for the drop-down interaction you want, whether it's hover- or click-based, then change your data structure and loop to support it.
I might do something like this:
<nav style="text-align: right">
<div
class="nav-item"
v-for="link in links" // Move loop to container of shown link and it's dropdown markup
>
<router-link
:key="link.id"
:to="`${link.page}`"
>
{{ link.text }}
</router-link>
<div class="nav-item-drawer">
<router-link
v-for="subLink in link.subLinks"
:key="subLink.id"
:to="`${subLink.page}`"
>
{{ subLink.text }}
</router-link>
</div>
</div>
</nav>
with the following data structure:
links: [
{
id: 0,
text: 'Buy',
page: '/Buy',
subLinks: [
{
id: 0,
text: 'Buy Sublink 1',
page: '/Buy-more'
},
{
id: 1,
text: 'Buy Sublink 2',
page: '/Buy-less'
},
]
},
{
id: 1,
text: 'Sale',
page: '/Sale'
},
//...
]
Below you see a small test element. It creates a SVG and whenever you click the SVG it should add a circle. Inspecting the element shows that the circles are indeed added (I know the position isn't exactly correct), but they are not shown.
This is svg-test.html
<link rel="import" href="../polymer/polymer.html">
<dom-module name="svg-test">
<link rel="import" type="css" href="svg-test.css">
<template>
<svg id="test" width$="{{width}}" height$="{{height}}" xmlns="http://www.w3.org/2000/svg"></svg>
</template>
<script>
Polymer({
is: 'svg-test',
properties: {
width: {
type: String,
value: "200"
},
height: {
type: String,
value: "200"
}
},
listeners: {
'test.tap': 'addCircle'
},
addCircle: function(e) {
var uri = 'http://www.w3.org/2000/svg';
var svg = this.$$('svg');
var circle = document.createElementNS(uri,'circle');
circle.setAttributeNS(uri, 'r', '5');
circle.setAttributeNS(uri, 'cx', e.detail.x);
circle.setAttributeNS(uri, 'cy', e.detail.y);
circle.setAttributeNS(uri, 'fill', 'white');
circle.setAttributeNS(uri, 'stroke', 'black');
circle.setAttributeNS(uri, 'stroke-width', '2');
svg.appendChild(circle);
}
});
</script>
</dom-module>
This is a test page:
<!DOCTYPE html>
<html>
<head>
<title>svg-test Demo</title>
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="svg-test.html">
</head>
<body unresolved>
<p>An example of svg-test looks like this:</p>
<svg-test></svg-test>
</body>
</html>
And this is bower.json:
{
"name": "svg-test",
"dependencies": {
"polymer": "Polymer/polymer#^1.1.2"
}
}
Although SVG elements are in the SVG namespace, attributes are typically in the null namespace so you want this...
var circle = document.createElementNS(uri,'circle');
circle.setAttribute('r', '5');
circle.setAttribute('cx', e.detail.x);
circle.setAttribute('cy', e.detail.y);
circle.setAttribute('fill', 'white');
circle.setAttribute('stroke', 'black');
circle.setAttribute('stroke-width', '2');
I have problem with dojo grid when i use gridx/modules/select/Row module, grid is not displayed. It gives Type Error: node is null.
My layout structure is here:
<script type="text/javascript">
var itemGridStore = new dojox.data.QueryReadStore({url:'invoiceConsignSearchStore'});
console.debug('store ::'+itemGridStore);
var layout=[
{id:"consId", field:"Consignment_Id", name:"Consignment Id", width:"23%"},
{id:"poDate", field:"Date", name:"Date", width:"30%"},
{id:"poNo", field:"PoSo_No", name:"Purchase Order No", width:"25%"},
{id:"refId", field:"Reference_Id", name:"Reference Id", width:"25%"},
{id:"customerName", field:"customerName", name:"Name/Company", width:"25%"},
{id:"location", field:"location", name:"Location", width:"25%"},
{id:"dealId", field:"Deal_Id", name:"Deal Id", width:"25%"}
];
var itemListgrid = new gridx.Grid({
cacheClass: gridx.core.model.cache.Async,
store: itemGridStore,
structure: layout,
modules: [
"gridx/modules/VirtualVScroller", "gridx/modules/SingleSort", "gridx/modules/CellWidget", "gridx/modules/Edit",
"gridx/modules/Filter", "gridx/modules/filter/FilterBar","gridx/modules/RowHeader","gridx/modules/select/Row", "gridx/modules/select/Cell"
],
vScrollerBuffSize: 30 ,
selectRowTriggerOnCell: true,
editLazySave: true
}, 'gridNode'); //Assume we have a node with id 'gridNode'
itemListgrid.startup();
itemListgrid.connect(itemListgrid,"onRowClick",function(evt){
var rowsSel=itemListgrid.select.row.getSelected();
console.debug('rowsSel ::'+rowsSel);
doImportSelectedItem(rowsSel);
});
</script>
<body class="tundra">
<!-- We'd like to show a grid here -->
<div align="center" id="gridNode"></div>
</body>
</html>
But without gridx/modules/select/Row this module it works fine. Can any one suggest the answer.
The select module requires Mark model extension, so your grid should look like:
var itemListgrid = new gridx.Grid({
cacheClass: gridx.core.model.cache.Async,
store: itemGridStore,
structure: layout,
modelExtensions: [
"gridx/core/model/extensions/Mark"
],
modules: [
"gridx/modules/VirtualVScroller",
"gridx/modules/SingleSort",
"gridx/modules/CellWidget",
"gridx/modules/Edit",
"gridx/modules/Filter",
"gridx/modules/filter/FilterBar",
"gridx/modules/RowHeader",
"gridx/modules/select/Row",
"gridx/modules/select/Cell"
],
vScrollerBuffSize: 30,
selectRowTriggerOnCell: true,
editLazySave: true
}, 'gridNode');
For modules compatibility take a look at this link: http://oria.github.io/gridx/moduleCompatibility.html