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');
Related
i generated a bar graph with chart.JS but there is some weird thing at the top left corner,
see image:
my CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
here is my code:
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
}
});</script>
fixed it,
i changed from
<div> <canvas id="myChart" width="400" height="200"></canvas></div>
to
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js"></script>
(function(window, videojs) {
var player = window.player = videojs('player',
{
html5: {
hls: {
overrideNative: !videojs.browser.IS_ANY_SAFARI
},
nativeAudioTracks: false,
nativeVideoTracks: false
},
liveui: true
});
overlay_content = '<div class="myOverlay"><h2>Live</h2></div>';
player.overlay({
overlays: [{
start: 'loadstart',
content: overlay_content,
end: 'playing',
align: 'top-left',
showBackground: false
}, {
start: 'pause',
content: overlay_content,
end: 'playing',
align: 'top-left',
showBackground: false
}]
});
}(window, window.videojs));
<video id="player" class="video-js vjs-theme-sea vjs-default-skin vjs-big-play-centered vjs-fluid" controls preload="auto" playsInline
poster="Poster_Img">
<source
src="src"
type="application/x-mpegURL">
</video>
It is working on desktop but on Android when I try to reposition the video progress bar it doesn't work.
I did enable the overridenative but still it doesn't work on android
I have added a SVG icon to leaflet as follows:
var myIcon = L.icon({
iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z"/></svg>`,
});
this.myMarker = L.marker([50.505, 30.57], { icon: myIcon }).addTo(map);
It is showing up as expected:
Now, when you add color to the SVG as follows, the icon disappears in the map:
iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z" fill="#fdbf00"/></svg>`,
Any thought about this?
I prepared an example instead of iconUrl I used html Then you can easily use colors in hex ;)
// config map
let config = {
minZoom: 7,
maxZomm: 18,
};
// magnification with which the map will start
const zoom = 13;
// co-ordinates
const lat = 52.237049;
const lon = 21.017532;
// calling map
const map = L.map('map', config).setView([lat, lon], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const svgTemplate = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="marker">
<path fill-opacity=".25" d="M16 32s1.427-9.585 3.761-12.025c4.595-4.805 8.685-.99 8.685-.99s4.044 3.964-.526 8.743C25.514 30.245 16 32 16 32z"/>
<path fill="#F7FADA" stroke="#000" d="M15.938 32S6 17.938 6 11.938C6 .125 15.938 0 15.938 0S26 .125 26 11.875C26 18.062 15.938 32 15.938 32zM16 6a4 4 0 100 8 4 4 0 000-8z"/>
</svg>`;
const icon = L.divIcon({
className: "marker",
html: svgTemplate,
iconSize: [40, 40],
iconAnchor: [12, 24],
popupAnchor: [7, -16]
});
const marker = L.marker([lat, lon], {
icon: icon
})
.bindPopup('#F7FADA')
.addTo(map);
* {
margin: 0;
padding: 0
}
html {
height: 100%
}
body,
html,
#map {
height: 100%;
margin: 0;
padding: 0
}
body {
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<div id="map"></div>
Modified #IvanSanche example below
var map = new L.Map('leaflet', {
layers: [
new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [0, 0],
zoom: 0
});
var myIcon = L.icon({
iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z"/></svg>`,
});
var myIcon2 = L.icon({
iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z" fill="%23fdbf00" stroke="red" /></svg>`,
});
this.myMarker = L.marker([50.505, 30.57], { icon: myIcon }).addTo(map);
this.myMarker2 = L.marker([50.505, 130.57], { icon: myIcon2 }).addTo(map);
body {
margin: 0;
}
html, body, #leaflet {
height: 100%
}
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /><div id="leaflet"></div>
I'm using yeoman and grunt to build my project and grunt-css plugin for using 'cssmin' instead of 'css' built-in with grunt.js
index.html
<!-- build:css styles/styles.css -->
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->
<!-- build:js scripts/scripts.js -->
<script src="scripts/vendor/jquery.min.js"></script>
<script src="scripts/vendor/handlebars-1.0.0.beta.6.js"></script>
<script src="scripts/vendor/ember-1.0.pre.min.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/routes/app-router.js"></script>
<script src="scripts/store.js"></script>
<script src="scripts/controllers/application-controller.js"></script>
<script src="scripts/models/application-model.js"></script>
<script src="scripts/views/application-view.js"></script>
<!-- endbuild -->
Gruntfile.js
rev: {
js: 'dist/scripts/**/*.js', // scripts/**/*.js
css: 'dist/styles/**/*.css', // styles/**/*.css
img: 'dist/images/**' // images/**
},
'usemin-handler': {
html: 'index.html'
},
usemin: {
html: ['dist/**/*.html'], // **/*.html
css: ['dist/**/*.css'] // **/*.css
},
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true
},
cssmin: {
dist: {
src: [
'app/styles/**/*.css'
],
dest: 'dist/styles/styles.css'
}
},
concat: {
dist: {
src: [
'app/scripts/**/*.js'
],
dest: 'dist/scripts/scripts.js',
separator: '/**********/\n'
}
},
min: {
dist: {
src: [
'dist/scripts/scripts.js'
],
dest: 'dist/scripts/scripts.js',
separator: '/**********/\n'
}
}
Then the build project structure is:
dist/
|__scripts/
|____04216377.scripts.js
|__styles/
|____d41d8cd9.styles.css
|__index.html
Then output index.html file
<link rel="stylesheet" href="styles/styles.css"/?>
<script src="scripts/04216377.scripts.js"></script>
As you see all went OK except renaming the revisioned styles in index.html that should be 'styles/d41d8cd9.styles.css
Anyone knows why?
And is the questionmark '?' in the line normal???
Note: for more information this is outputted in my console (no errors)
Running "rev:js" (rev) task
dist/scripts/scripts.js --- 04216377.scripts.js
Running "rev:css" (rev) task
dist/styles/styles.css --- d41d8cd9.styles.css
Running "rev:img" (rev) task
Running "usemin:html" (usemin) task
usemin:html - dist/index.html
scripts/scripts.js
was <script src="scripts/scripts.js"></script>
now <script src="scripts/04216377.scripts.js"></script>
Running "usemin:css" (usemin) task
usemin:css - dist/styles/d41d8cd9.styles.css
And no renaming has been done!
Thanks a lot guys!
I've found the problem.
I've got Yeoman 0.94 version and needs a fix on usemin task.
The ?character at <link>is a regex mistake.
You should rewrite this expression because css renaming is failing.
Found the correct workaround at https://github.com/yeoman/yeoman/issues/586
replace
content.replace(block, indent + '<link rel="stylesheet" href="' + target + '"\/?>');
with
content.replace(block, indent + '<link rel="stylesheet" href="' + target + '"/>');
If apply changes this issue is solved.
Note: apply the patch on usemin.js at /usr/local/lib/node_modules/yeoman/tasks (on OSX)
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