I'd like to pull in a static HTML file that I'll use as an Underscore template in my front-end JavaScript. I've tried the following with no luck:
<link rel="import" href="${resource(plugin: 'my-app-name', dir: 'tpl', file: 'foo.html')}"/>
<g:external dir="tpl" file="foo.html" type="html" />
The file sits at web-app/tpl/foo.html.
The ultimate goal is to use the new HTML import syntax to access the file's contents via JavaScript.
Why is that file at web-app/tpl?
Here's what you can do to import that template:
Move it to grails-app/views/tpl/.
Change the file name to _foo.gsp.
Use <g:render template="/tpl/foo" /> in your view to pull in that HTML.
Read more about the render tag here.
Also you can use an meta tag.
<meta name="layout" content="main"/>
And in the main.gsp tha must be at the view/layout/main.gsp you can use grails tags:
<g:layoutHead/>
and
<g:layoutBody/>
By the name you can understand that layoutHead insert head of your page to this layout. layout body insert body of page to this layout.
The following worked for me, though I'm not sure if it's the best solution: In UrMappings.groovy: static excludes = ['tpl/foo.html']. This made the link tag work in page.gsp <link rel="import" href="${resource(plugin: 'my-app-name', dir: 'tpl', file: 'foo.html')}"/>.
Related
I am new to MkDocs and I built up a website using MkDocs and I want to add some script into <head>...</head>.
I tried this code at top of my markdown file but it didn't work :
<head>
<script>
...
</script>
</head>
I found the script would show in <body>...</body> rather than in <head>...</head>.
How to place <script> in <head> tag?
You can use material. in your theme (mkdocs.yml), add a reference to custom dir, and in that dir, you can add a file named main.html which will be included in the "head" part
See https://squidfunk.github.io/mkdocs-material/customization/#overriding-partials for more details.
Assuming your are using MkDocs Material as your Theme, inside your mkdocs.yml you can add Entries to the extra_javascript List.
mkdocs.yml:
site_name: "..."
theme: "..."
# ...
extra_javascript:
- https://cdn.someCdn.someLibrary.js # Online Resource
- js/ourJsFile.js # Path relative to "docs" Directory
# Works the same way for CSS!
extra_css:
- css/someCSS.css # Again, relative to the "docs" Directory
For reference: https://squidfunk.github.io/mkdocs-material/customization/#adding-assets
The extrahead placeholder, which should be present in all themes, allows additions to be made to the <head>.
You need to specify a custom_dir in the YAML file and in this directory have a main.html with an extrahead block.
See:
https://www.mkdocs.org/user-guide/customizing-your-theme/#using-the-theme_dir
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://file.js"></script>
</head>
<body>
{{ content }}
</body>
</html>
On php, the implementation looks very simple, suppose we have files: header.html, body.html. Then our code index.php will look something like this:
<html>
<body>
<? = require(' header.html ')?>
<div class = "main">
<? = require(' body.html ')?>
</div>
</body>
</html>
Is it possible to do something like this?
<html>
<body>
<link rel = "import" href = "header.html">
<div class = "main">
<link rel = "import" href = "body.html">
</div>
<script>
/ * A magic js function that replaces <link rel = "import"> with the content of the html document * /
</script>
</body>
</html>
PS I understand that this will work on a very limited number of browsers.
A number of JavaScript template engines are available.
Handlebars.js and Mustache.js use curly brackets for variables.
Jade/Pug dispenses with brackets altogether.
You could build your own template library and use any format you want. The spectrum of browsers that it works on would depend on how far back in history you're willing to support.
Whereas PHP enables you to import static headers and footers, with JavaScript you're more likely to have a static template with the header and footer built in, and import the body content dynamically. We see this a lot with lazy loading content on sites like Google image search and Pinterest.
I'm creating a polymer datepicker using pikaday. Sadly it seems like I got something wrong.
I'd like to import pikaday.js and pikaday.css the right way.
At first I had a simple script-tag below my closing dom-module-tag, like
</dom-module>
<script src="../../pikaday/pikaday.js"></script>
<script>
Polymer({
//....
This way, the datepicker was created as expected. But after reading this SO-Thread I was under the impression I was supposed to import the js-file like this:
<link rel="import" href="../../paper-input/paper-input-behavior.html">
<link rel="import" href="../../paper-input/paper-input-error.html">
<link rel="import" href="../../pikaday/pikaday.js">
//more imports....
But after "fixing" my import, the file pikaday.js seems not to be visible from inside my component:
Uncaught ReferenceError: Pikaday is not defined
Furthermore I'm confused about using external css. After reading this guide it seems like I was supposed to copy & paste the contents of the provided css-file into a my-datepicker-style.html and to import it into my template like this:
<dom-module id="my-datepicker">
<template>
<style include="my-datepicker-style"></style>
<style>
:host {
//more css
I'm confused about the need to copy & paste existing code.
Until ES6 imports are more common, you need some kind of workaround for referencing dependencies.
The problem with <script> tag is that when it appears multiple times, it will be processed multiple times. This is not true for <link rel="import">. Same href will be processed only once.
You cannot, however, import javascript directly. The trick is to create pikaday-import.html file with the script reference
<script src="../../pikaday/pikaday.js"></script>
You then import that in your element's html
<link rel="import" href="pikaday-import.html" />
<dom-module id="my-datepicker"></dom-module>
This is the technique for example the <marked-element> uses.
This way instances of <my-datepicker> load pickaday only once. Unfortunately, if there are other components which reference it, you could end up loading the dependency multiple times.
I followed Summernote-rails official to add rich text editor in my Rails project.
Then in my edit.html.erb I added class place_editor to my text_area:
<%= f.text_area :text, class: "place_editor form-control col-md-7 col-xs-12", rows: "15j ,placeholder: "Text", required: "required"%>
and then JavaScript as:
<script type="text/javascript">
$(function() {
$('.place_editor').summernote();
var edit = function () {
$('.click2edit').summernote({ focus: true });
};
$("#edit").click(function () {
$('.click2edit').summernote({ focus: true });
});
$("#save").click(function () {
var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
$('.click2edit').destroy();
});
// Adding Css to give border to text editor
$(".note-editor").css("border", "solid 1px #e7eaec");
});
</script>
Everything works fine except ICONS.
It's Simple
Just Download summernote compile zip file click here.
Unzip the file. Copy font folder. Paste it you summernote.css root. Be sure your summernote.css file stay with font folder. Now Refresh your Browser using Ctrl + F5.
Folder Location demo:
Demo Output:
I searched for hours and finally solved it.
Actually, summernote doesn't save icons locally, instead it download it
I added this links in header
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
And it did the job
I 'll welcome if someone can elaborate it further
Import the font files, it will work.
I tried import through CSS #font-face rule. You can import in javascript also.
#font-face {
font-family: summernote;
src : url('/fonts/summernote.ttf');
src : url('/fonts/summernote.eot'),
url('/fonts/summernote.woff');
}
After unzipping the Summernote distribution download, you must copy the Font folder to the same place you put the summernote.css file.
In this example, Elmer is the root folder of the website, and both summernote.css and the Font folder are copied to the /assets/css folder.
Similarly, the summernote.js file is copied to the /assets/js folder. If you're not using plugins or languages, that's all you need to install.
Here's the code to put in the header to load those files as shown:
<!-- include summernote css/js-->
<link rel="stylesheet" type="text/css" charset="utf-8" href="/assets/css/summernote.css">
<script type="text/javascript" charset="utf-8" src="/assets/js/summernote.js"></script>
Note: Including the charset="utf-8" attribute is important.
Though an answer is already accepted, still I would like to post a better answer for people seeking a solution to the problem in question.
Of course this will work:
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">
But I prefer to STORE ASSETS LOCALLY. It eliminates the need of CDN which affects the loading time of the page its embedded in.
By default "summernote" looks for font-awesome icons (and some other summernote fonts) in the directory /css/font/:
//=================== The style-sheets stacking
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/summernote.css">
//=================== The font goes here
/css/font/
So what u need to do is:
Download fontawesome,
Take out the fonts folder from the downloaded archive and rename it to font
Place the directory font inside the css directory of the project.
And this should work.
Considering your assets are available like this http://localhost:1337/css/font/summernote.ttf
//summernote.ttf is just an example
I hope this will help.
Thanks
Copy the font folder in your project css.
just like YourProject/css/font
that should work.
It's work with my project.
Do you have font-awesome included in your project? I believe that plugin uses font-awesome. If not, trying including this in your application.html.erb file as the src for a script tag: https://www.bootstrapcdn.com/fontawesome/
Also read this: https://github.com/summernote/summernote/issues/505
For anyone that may be having trouble with icons in MVC, it seems as though summernote looks at the base folder (in my case, Content) and the font folder needs to go in there. Here's a screenshot of my project's layout:
For whatever reason, summernote looks in the /summernote/font/ folder in Content rather than where summernote-lite.css is.
Hope this helps!
I found the same problem. The solution was I deleted the 'toolbar' key from the summernote config:
$(".summernote").summernote({
lang: 'hu-HU',
height: 300,
minHeight: null,
maxHeight: null,
toolbar: [
['font', ['roboto',]],
]
});
version: summernote v.0.8.12.
I am developing a simple pyramid application where I am using JQuery to do AJAX requests. I have until now had my javascript code within my chameleon templates. Now I want to extract my javascript into another location (e.g. as static resources).
My problem is that I find my javascript code relies on dynamically generated content like so:
$.post("${request.route_url('my_view')}",{'data': 'some data'}, function(html){
$("#destination").html(html);
});
The dynamic element being:
"${request.route_url('my_view')}"
Which is calling the route_url method of the request object within the template.
Is there a recognised pattern for separating such javascript files into their own templates and providing routes and views for them or do I simply keep my javascript in my page template?
Yes; you generally put context-specific information like expanded routes into the templates and access this information from your (static) JavaScript libraries.
Including the context info can be done in various ways, depending on taste:
You could use a data attribute on a tag in your generated HTML:
<body data-viewurl="http://www.example.com/route/to/view">
...
</body>
which you then, in your static JS code load with the jQuery .data() function:
var viewurl = $('body').data('viewurl');
Use a made-up LINK tag relationship to include links in the document head:
<head>
<link rel="ajax-datasource" id="viewurl"
href="http://www.example.com/route/to/view" />
...
</head>
which can be retrieved using $('link#viewurl').attr('href'), or $('link[rel=ajax-datasource]').attr('href'). This only really works for URL information.
Generate JS variables straight in your template, to be referenced from your static code:
<head>
...
<script type="text/javascript">
window.contextVariables = {
viewurl = "http://www.example.com/route/to/view",
...
};
</script>
</head>
and these variables are referable directly with contextVariables.viewurl.