I'm a newb fiddling with Greensock on Codepen and it's already not being my friend. The error I'm getting is "TypeError: Cannot set property 'startAt' of undefined". I've read the docs and looked at other examples, but I'm not seeing it. I do believe I'm successfully importing the Greensock CDN in the settings also. Who knows?
Here's a link to the Codepen, but I'll include the super basic code below.
https://codepen.io/kscarabello/pen/mXbBGm
HTML code:
<h1 id='text'>Hi there</h1>
JavaScript code:
let text = document.getElementById('text')
TweenMax.fromTo(text, 5, {width: 100px, height: 500px}, {width: 200px, height: 100px})
Related
For my company I need to update our Nuxt + Vuetify application to make use of a Content Security Policy (CSP) header.
'unsafe-inline' is not allowed for 'default-src'. The problem we are currently facing is that Vuetify adds style attributes at runtime to the DOM elements.
So for example:
<div id="app">
<v-system-bar app>
<v-container>Content</v-container>
</v-system-bar>
</div>
Results in:
<div class="v-system-bar v-system-bar--fixed theme--light" style="height: 24px;">
<div class="container">Content</div>
</div>
The CSP header does not allow the style="height: 24px". This gives me the following error:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src https://unpkg.com/ 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-gGKtWVlwtb9dj1Sa7K4ybKpqUOE61nkachaCJ1LfmFY='), or a nonce ('nonce-...') is required to enable inline execution.
This problem also occurs for other vuetify components, the v-system-bar is just an example. I know that adding a nonce for <style> elements is possible, but not for style attributes. Is there a way to solve this problem, besides setting the header to unsafe-inline? I want to keep using Vuetify together with the CSP header.
Here is a codepen link: https://codepen.io/erikeuserr/pen/WNpbOwx.
Thanks in advance!
The constructions like style="height: 24px" appear in the code as result of vue.js (not vuetify.js) script work. A vue.js uses a el.setAttribute() func to set style= property. The el.setAttribute('style', ...) is counted by CSP as unsafe therefore vue.js is not CSP-compatible.
But el.style.property = '...' is safe, so in order to make vue.js a CSP compatible, it need to replace all el.setAttribute('style', 'background-color:#e2e2e2; height: 24px; display:inline;') by the according sets of:
el.style.backgroundColor = '#e2e2e2';
el.style.height = '24px';
el.style.display = 'inline';
There is a rough hack to do this - globally redefine setAttribute() when it's called with a 'style' argument.
Before output the page into browser, you can catch and replace all style='...' by data-style='...' in the html code, and then use script like:
styleList = document.querySelectorAll("[data-style]");
styleList.forEach( function(style) {
// convert a 'background-color:#e2e2e2; height: 24px; display:inline;' strings
// to the set of 'el.style.backgroundColor = '#e2e2e2'; ... el.style.display = 'inline';'<br> });`
Yes, these are patches, but understanding the essence of the problem, you may be able to find a more elegant solution.
Is there any reason why my chart legends are always appearing on the right? My config looks like this:
legend: {
enabled: true,
position: 'bottom'
}
Setting enabled to false causes the legend to disappear as expected, but changing the position has no effect.
This is using #gooddata/react-components 5.2.0-alpha17
The config looks correct. Please share the code for the whole component and we will have a look at it. This is unlikely the problem, but please try to use a stable version instead of alpha. Current stable version is 5.1.0.
Please check you are importing your styles correctly
import '#gooddata/react-components/styles/css/main.css';
This snippet should work:
<PieChart
projectId={projectId}
measures={measures}
config={{
legend: {
enabled: true,
position: 'bottom'
}
}}
/>
You can find more information about chart legends in the official documentation
I have a particular issue and I'm hoping someone can point out what I'm not doing correctly. My original code is posted here: Solved:Vue.js Konva library to display a simple image, what am I missing?
.
What's happening is I'm displaying a single image with Konva successfully (see code), however when I try to view the same page using mobile IOS Chrome or Safari, nothing displays. It works fine in desktop OSX Chrome and Safari, but not on the mobile versions. I just get a blank area where normally I would see the image on my OSX browsers. I'm sure there may be a step I am missing. Furthermore another interesting issue on the OSX browsers is that when I bring up the page to display the image initially it is blank until I do a page refresh, then it displays. Now maybe this is Vue.js and not Konva. However I thought I would point that out if anyone has further insights. Any suggestions would be greatly appreciated.
[Updated: Got it working] - Ok, I've done some testing and this is what I found out that seemed to solve the issue. After research, the biggest issue related to this is somewhere during the lifecycle the image is not attached to the dom before it is rendered. Even though I am doing image.src during the mounted stage which is the same as ".ready()" from what I understand. I even tried loading the image using the updated stage in Vue. Same issue. What worked was I used v-if to hide the Konva stage, then attached the source during mounted then ran v-if=true post image attachment to display the Konva stage and Bingo! everything works. It even works on the IOS browsers.
<template>
<div id="app">
<h1>Display Image via Konva</h1>
<div v-if=ShowStage>
<v-stage ref="stage" :config="configKonva">
<v-layer ref="layer">
<v-image :config="configImg"></v-image>
</v-layer>
</v-stage>
</div>
</div>
<script>
import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
export default {
data() {
return {
ShowStage: false,
testImg: new Image(),
configKonva: {
width: 500,
height: 500
}
},
computed: {
configImg: function() {
return {
x: 20,
y: 20,
image: this.testImg,
width: 200,
height: 200,
}
}
},
mounted() {
this.testImg.src = "https://konvajs.github.io/assets/lion.png"
this.ShowStage = true
}
}
</script>
I am experiencing the same issue right now.
Locally it seems to work on IPhone with Safari but deployed to the Server it is not working anymore.
However did you try something like this?
const image = new Image()
image.src = url
image.crossOrigin = 'anonymous'
image.onload = () => {
new Konva.Image({image: image})
// Further code ...
}
The crossOrigin set to anonymous helped me at least partly.
Does anyone have examples of Google Street View working on Squarespace using the API?
I have been able to use other examples to display google maps (non street view) but when I try to get Google's street view example to work... nothing.
Here is my attempt:
http://keweenaw.squarespace.com/googlemapsapitest
I have this code in my page header code injection
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
</style>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize">
</script>
And this in a code block on the page:
<div id="street-view""></div>
You've got a number of issues which, once corrected, do in fact generate a working embedded Google Street View on a test Squarespace account.
You have a space at the beginning of your API key, causing it to be invalid.
You have an extra set of double quotes on <div id="street-view""></div>
Your CSS rule `#street-view {height: 100%;} won't work. Briefly put, you'll have to define a height in pixels, like "400px" or a similar 'fixed' unit.
You are loading the API over HTTPS but your site is HTTP. You need to either enable SSL on your Squarespace site or change the API url to http://maps.googleapis.com/maps/...etc. The prior is likely preferred.
By opening your browser's console (F12) you can see the specific error messages and work through them one by one (although, having seen these before certainly makes diagnosis faster).
To get you back on the right track, I would put the following code entirely in a code block on the page, where you want the map to appear. You can adjust width and height via your CSS. Once you get it working, you can experiment (if you choose) with moving your CSS to the CSS Editor and your Javascript to Code Injection.
<div id="street-view"></div>
<style>
#street-view {
height: 400px;
width: 100%;
}
</style>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize"></script>
Also, note that the code above is using HTTP for the Maps API so that it will work with your current configuration. If you choose to enable SSL as mentioned, you'll need to change the Maps API url to HTTPS.
Here is a working example, using HTTPS. This example will quit working soon.
In one of my views I would like to display a PDF, which is accesible via URL. This should be done without opening an extra tab in the browser, and without downloading the PDF (to view it outside the browser). It should be visible embedded within the Ember application.
What I have in mind is:
Use the URL to get the PDF and make it accessible to the ember application.
Use a special "PDF view" to display the PDF.
Is this possible? What options do I have to display an embedded PDF in an Ember application?
Displaying a PDF is not really related to ember, because to view a PDF you need a PDF plugin installed in your browser (which is mostly installed by default depending by the browser).
That said, a possible solution I could imagine could be to create a custom ember view with the tagName iframe on which you set the src attribute to the link referring to the PDF.
Example:
App.PDFView = Ember.View.extend({
tagName: 'iframe',
attributeBindings: ['src', 'width', 'height', 'frameborder'],
src: 'pdffile.pdf',
width: 800,
height: 600,
frameborder: 0
});
I've also used width, height and frameborder only for convenience so you can control some of the iframe's attributes easily from within ember. Here a working demo.
You can also go with something more elaborated and use a js lib like http://pdfobject.com/ which you then initialize in your view's didInsertElement hook:
App.PDFView = Ember.View.extend({
src: 'pdffile.pdf',
width: 800,
height: 600,
didInsertElement: function() {
new PDFObject({
url: this.get('src'),
width: this.get('width'),
height: this.get('height')}
).embed(this.get('elementId'));
}
});
(haven't tested the latter, but you get the point)
And then use this App.PDFView like a normal ember view in your templates.
{{view App.PDFView}}
Or your can set the src, width & height directly from within your template like
{{view App.PDFView src="pdffile.pdf" width="600" height="800"}}
Hope it helps.
You can certainly leverage the Ember PDFJS Addon by doing:
ember install ember-pdfjs
The README on GitHub describes the installation and use cases.
In short, the addon provides your Ember project with a component, pdf-document, which you can use in your HTMLBars template like so:
{{pdf-document src=[model.src]}}
... there are other permutations of what src can be (including a string file path, resource URI, or Uint8Array buffer).
If you don't see a feature that you need, please suggest in the Issues.