I have been playing around with a tool called sourcemap-explorer, and I noticed that even when I import only NgbDateParserFormatter and NgbDatepickerModule from #ng-bootstrap/ng-bootstrap, sourcemap-explorer shows that I am getting accordion, carousel, tabset, popover, tooltip, etc. I thought the idea of importing an individual module was to avoid grabbing the whole package. Has anyone else run into this?
Edit 1:
This is what I'm importing:
import { NgbDateParserFormatter, NgbDatepickerModule } from '#ng-bootstrap/ng-bootstrap';
This is where I use it:
<input class="form-control"
placeholder="mm/dd/yyyy"
formControlName="effectiveDate"
ngbDatepicker
#sd="ngbDatepicker">
<div class="input-group-addon" (click)="sd.toggle()">
<i class="fa fa-calendar"></i>
</div>
Depending on the packager / bundler you use, you might end up with more code then needed if you import from the catch-all module path (#ng-bootstrap/ng-bootstrap).
To bump up your chances of getting only used code (the final result will depend on the bundler used) try importing from a datepicker-specific module path: import { NgbDateParserFormatter, NgbDatepickerModule } from '#ng-bootstrap/ng-bootstrap/datepicker/datepicker.module';
The above should work just fine with angular-cli.
Related
Here is the warning I get when I compile a component with an img that lacks an alt attribute:
Plugin svelte: A11y: <img> element should have an alt attribute
All developers will agree A11y is a good thing; except in my case, it would serve only to annoy a screen reader. I'm making a game engine and my objects look like this:
SVG image, item label. To the screen reader, this would read "Fabric Scrap Fabric Scrap"; it really doesn't make sense to have an alt attribute here, but the best the docs have to offer me is that I can clutter up my code like such:
<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus>
I really want to avoid that, so how can I get Svelte to stop showing me this specific error? Ideally without disabling the A11y module as a whole.
You can disable warnings at the project level.
If you're using rollup, warnings can be suppressed by providing a custom onwarn handler:
import svelte from 'rollup-plugin-svelte'
export default {
plugins: [
svelte({
// Warnings are normally passed straight to Rollup. You can
// optionally handle them here, for example to squelch
// warnings with a particular code
onwarn: (warning, handler) => {
// e.g. don't warn on a11y-autofocus
if (warning.code === 'a11y-autofocus') return
// let Rollup handle all other warnings normally
handler(warning)
}
})
]
}
one !! First, please forgive my english mistakes^^
So, as in the title I'm on a symfony project trying to develop a svelte frontend, and after multiple research I could not manage to find the answer. Here is my problem:
I wan't to add several entry-points in my build file like this (wepack.config.js) :
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
.addEntry('modalForm', './assets/js/modalForm.js')
I thought that will generate one more file in the public/build folder and get 'app.js' and 'modalForm.js'. But I'm getting 'vendors~app~modalForm.js' and 'vendors~modalForm.js' and I don't know what it is.
Actually, every thing seams to be good 'cause I got no errors, but in fact I can't see my svelte component.
Here is how I call it :
import ModalForm from './ModalForm.svelte';
const modalForm = new ModalForm({
target: document.querySelectorAll("my-modal-forms"),
});
And in my twig template :
<div class="row m-3 my-modal-forms">
{% block javascripts %}
{{ encore_entry_script_tags('modalForm') }}
{% endblock %}
<a class="btn btn-primary mr-2" href="{{ path('entity_people_new') }}"><i class="fas fa-plus"></i> Ajouter</a>
<span class="not-allowed"><a class="btn text-warning mr-2" href="{{ path('import_export') }}"><i class="fas fa-file-import"></i> Import des données</a></span>
<span class="not-allowed"><a class="btn text-warning mr-2" href="#" id="exportClick"><i class="fas fa-file-export"></i> Export des données</a></span>
</div>
If you need more precisions just tell me.
Thank you all for helping, people answering on stack are really the gods are believe in.
Finally found the answer myself: Svelte target property does not support the querySelectorAll, or maybe I did something wrong but with a getElementById, it works fine.
querySelectorAll() returns a NodeList, Svelte's target expects a HTMLElement. querySelector() works, but getElementById() gets you there, too.
How to use parameter in handlebar partial I am using grunt-assemble and cant find anything in docs
For Example I will create a partial name heading and use it in my template
<h1 class="tac mt-80 underline">
{{heading}}
</h1>
<body>
{{> heading "Test"}}
</body>
unfortunately, thats not possible with grunt-assemble out of the box.
Their recommended way is to use the parseJSON helper for that:
{{#parseJSON '{"heading": "TEST"}'}}
{{> heading }}
{{/parseJSON}}
But you should take a look at the current implementation of assemble, which includes a updated version of Handlebars (which provides your wished functionality). It seems like they moved away from Grunt in favor of compatibility with Gulp.
In AEM 6.2, I want to do this in handlebars.
<sly data-sly-resource="${'title' # resourceType='myproject/components/content/common/title'}"/>
Specifically, I overlaid the qnaforum.hbs and need to include it in there. The official documentation(link) says the correct way to do this is:
{{include this.id path="title" resourceType="myproject/components/content/common/title"}}
When done this way there are three problems:
The component appears, but then disappears from the page.
I get the warning "Forcing resource type is not supported when sling including on the client side"
There is a failed(404) GET request to http://localhost:4502/content/myproject/qna-index-page/jcr:content/qna-parsys/qna/title.html in the browser console (like it's trying to find the renderer for the title resource at that path).
In the same qnaforum.hbs file, Adobe is using the same include for their subscriptions component and it seems to work fine.
{{include this.id path="subscriptions" resourceType="/libs/social/subscriptions/components/hbs/subscriptions"}}
Does this type of include only work for Social Communities components? If so, how can I include a custom resource in the handlebars template?
I helped some one else who was facing a similar issue. I am attaching the code snippet that caused the issue you are facing (disappearing QnA list), and the fix for that.
The overlaid QnAForum component looked like this
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- Other QnA code --}}
</div>
But code should be like this
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- moving line1 from previous code snippet inside this parent div}}
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{!-- rest of QnA Code }}
</div>
The change I made is, moving line1 in first code snippet into line 5.
The JS console does say missing HTML, but it gets included though. The reason for console error is the way include works.We try to fetch the html, and if we fail in fetching the HTML, we ask to sling to resolve the component.
I'm trying to get the Gumby.js library to work with Meteor, but cant get it to work.
I've tried both installing it manually in /client/lib folder and using 'mrt add gumby'.
The CSS part seems to work pretty fine with the grid working perfectly, but the JS modules dont work.
I'm setting a responsive Navbar just like this
<template name="nav">
<div class="row navbar centered" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a id="nav-toggle" class="toggle" gumby-trigger="#nav-ul" href="#"><i class="icon-menu"></i></a>
<ul id="nav-ul" class="eight columns">
<li>Quienes somos</li>
<li>Marcas</li>
<li>Servicios</li>
<li>Laboratorios</li>
<li>Contacto</li>
<li>Otros</li>
</ul>
</div>
</template>
but the menu just does not popup on mobile width. And other modules like Folders and skip dont work at all when defined.
you can see a sample here
any idea on how to get it up and running?
Not sure about the real situation, because the js files are packed in the website and it's hard for me to tell from the source code. However, there is some clue you may find useful.
I assume you want to run the js script after the template is rendered. In this case, you need to write like this.
Template.nav.rendered = function() {
// Run the js to render the dropdown or whatever.
}
This is the Meteor programming paradigm. If you simply run the js files directly, the template may not be ready when you run that part of the code. The "rendered" callback is the place you need to place some actions after this template is ready.
In addition, you can refer the official document here http://docs.meteor.com/#template_rendered