We Keep Coding

Add external Css/Js files to Typo3 11 custom backend extension

I am trying to add my own CSS and JS files to my view in my custom typo3 backend extension.
Here is the folder layout:
project layout
And here is the code I am using for the View New.html:
<f:section name="HeaderAssets">
<f:asset.css identifier="css" href="EXT:plugin/Resources/Public/Css/Styles.css" />
<f:asset.css identifier="css">
.foo { color: black; }
</f:asset.css>
<f:asset.script identifier="js" src="EXT:plugin/Resources/Public/JavaScript/ApiConnect.js" />
<f:asset.script identifier="js">
alert('hello world');
</f:asset.script>
</f:section>
//I also tried this and it did nothing
<f:be.pageRenderer pageTitle="title"
includeCssFiles="{0: '{f:uri.resource(path:\'Public/Css/Styles.css\')}'}"
includeJsFiles="{0: '{f:uri.resource(path:\'Public/JavaScript/ApiConnect.js\')}'}"
/>
Is there something wrong with the path that I am using? I feel like it should not be this complicated :D Inside the CSS and Js are basic body color changes and an alert for testing purposes. nothing fancy (yet).
Any help is appreciated.

According to the description in the ResourceViewHelper.php, your path-argument needs to start relative to Public resource directory of the extension
So this should do the trick:
<f:be.pageRenderer pageTitle="title"
includeCssFiles="{0: '{f:uri.resource(path:\'Css/Styles.css\')}'}"
includeJsFiles="{0: '{f:uri.resource(path:\'JavaScript/ApiConnect.js\')}'}"
/>

Image Map dynamic resize in Angular 8

I want to dynamically resize an image map. I only found a solution for jQuery (https://github.com/stowball/jQuery-rwdImageMaps)
How can I realize this in Angular?

you can use https://github.com/davidjbradshaw/image-map-resizer
It works with javascript call :
sample
in HTML :
<img src="...." width="100%" usemap="#usaMap" (load)="imageResized();">
in TS :
declare function imageMapResize(): void;
#Component({...
})
...
imageResized() {
imageMapResize(); // Javascript function in imageMapResizer.min.js
}

Previous answer works, however, you have to download the imageMapResizer.min.js into the assets folder.
Then, you should import it in the index.html file like this:
<script src="./assets/imageMapResizer.min.js"></script>
I thought that the file should be imported in the angular.json file, but it didn't work ... index.html did the trick for me.

AngularJS: Load base64 image from a file

I have a list of images, but every image have a s3 file with his base64 encoded inside this file.
Example of image:
https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946
The problem is that if I did something like this:
<img src="https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946" />
The image is not loaded.
If I want that this works in this way I need to do something like this:
HTML:
<div ng-init="vm.loadImage(image, image.url)">
<img ng-if="image && image.src" data-ng-src="{{image.src}}" width="60" />
</div>
JS:
self.loadImage = (img, url) => {
$http.get(`http://cors.io/?${url}`)
.then(r => (img.src = r.data))
}
This is working... Okey... But I have 2 big problems with this:
CORS problems, that I need to resolve with http://cors.io/?${url}. For me is not a good solution because is a slowly way to load all the images and if some day cors.io stops working, my webpage neither will work...
If I load an amout of images with this way, all the base64 encoded strings are in memory and the page will have a several memory problems.
Is there another solution to implement this avoiding these big problems?
(I can't change how images are saved in s3...)
Thank you so much.

You can find an example on this fiddle. Also, on this question you can find out the way to load base64 images.
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
You can't mix http schema that gives you a non byte response as your src attribute value.
You gonna need to build a backend feature in order to serve you these images to your front end app through your own url.

Where should I store js templates?

I have some HTML templates inside of jQuery code, I use them for generating some new elements with JS. Currently, I keep them in the bottom of my page as
<script type="text/html" id="ID_to_refer_from_jQuery">...HTML code here...</script>
I feel it's not the best way to do this, because some of them are pretty big, is there a way to store string HTML templates outside of HTML file?

Put them in another folder and call them in with AJAX. You don't want to have one huge file. Rather, leverage the organizational folder system to keep your project organized.
Example Folder Structure
/root
index.html
/templates
navigation.html
footer.html
...
Loading Them In
$("header").load("templates/navigation.html");

The best way to do this is to use the HTML5 template feature, but unfortunately it is not supported by Internet Explorer 10 or 11. Here is an example of it in use though:
<template id="simple">
<style>
span { color: purple; }
</style>
<img src="http://placehold.it/50x50" />
<span>Hello World!</span>
<script>
function boom(){
alert("BOOM!");
}
boom();
</script>
</template>
function addSimple(){
// Grab our template
var t = document.querySelector('template#simple').content;
// Optional -- Modify template
// Clone and add
var clone = document.importNode(t, true);
document.getElementById("simple-target").appendChild(clone);
}
(Source of this example)
In the mean time the most common way I've seen is to put your HTML in a JavaScript variable like this:
var html = [
'<div>',
' <h1>Example Domain</h1>',
' <p>This domain is established to be used for illustrative examples in documents. You may use this',
' domain in examples without prior coordination or asking for permission.</p>',
' <p>More information...</p>',
'</div>'
].join('');
If you have a chunk of HTML, there is even an online tool that will format it as a JavaScript variable automatically.

How to replace multiple images with Javascript and change back

I've been working on trying to get these buttons to change when clicked - which now works, but now I need them to toggle between the on and off states when the user clicks (so they can turn the buttons on and off). I'm sure this is an easy fix, but I'm new to Javascript and I don't have anyone to bounce ideas off of.
<html>
<head>
<script type="text/javascript">
function changeimage(img, new_src)
{
var cur_src = img.src.substring(img.src.lastIndexOf("/")+1);
if (cur_src == new_src)
{
img.src = img.old_src;
}
else
{
img.old_src = cur_src;
img.src = new_src;
}
}
</script>
</head>
<body>
<img onclick="changeimage(this, 'images/buttonA_on.png')" src="images/buttonA_off.png" />
<img onclick="changeimage(this, 'images/buttonB_on.png')" src="images/buttonB_off.png" />
<img onclick="changeimage(this, 'images/buttonC_on.png')" src="images/buttonC_off.png" />
<img onclick="changeimage(this, 'images/buttonD_on.png')" src="images/buttonD_off.png" />
<img onclick="changeimage(this, 'images/buttonE_on.png')" src="images/buttonE_off.png" />
<img onclick="changeimage(this, 'images/buttonF_on.png')" src="images/buttonF_off.png" />
</body>
</html>
Much thanks!

When I started using JavaScript I wasted a bunch of time trying to do things that other libraries could easily take care of for me. A few months after that I discovered jQuery which has drastically reduced the amount of time I spend on front-end projects. All you have to do is include the jQuery file in an html project and you're good to go.
In jQuery, you can toggle a class on and off with one line. it looks something like this:
$('.toggleimage').toggleClass('on');
In the above example, '.toggleimage' is just a class I gave to a div, toggleClass is the jQuery command, and 'on' is the name of the class I want to toggle. This probably seems like greek right now, but I recommend going through codeschool's jQuery tutorials to get caught up. If you're thinking of doing serious web development... it's a crucial tool. Here is the full code:
link to full code on my Gist
In order to make it work, make sure you have the right file structure. Create a folder, then create the html file there. In addition, create three subfolders (one for css, one for images, one for scripts). The css folder holds your style.css, the images folder holds mario.jpg, and the scripts folder contains your jQuery file. You can substitute in any image you want, just make sure the changes are applied to style.css.

function changeImg(img) {
if ( img.src.indexOf("_off") > 0 ) {
img.src = img.src.replace("_off","_on");
}
else {
img.src = img.src.replace("_on","_off");
}
}
it will work if you have 50x2 different images, named "imgName1_uw.jpg", "img1_moored.jpg", "img2_uw.jpg", "img2_moored.jpg", etc.
may be its helps you