In Middleman that uses layout files, how can we append a js file for a specific html file during compile time? - haml

I'm using Middleman, and I have a layout file that appends the jQuery CDN at the bottom for all .html.haml files. The layout file adds the jQuery CDN after all the html elements have been rendered.
One of my .html.haml files will have an additional js file that uses jQuery; however, it needs to see the jQuery CDN loaded first.
How can I tell Middleman that during compile time, append the js file for this specific .html.haml file? I tried appending = javascript_include_tag "jsfile" at the bottom of my .html.haml file, but it errored out because it needed jQuery loaded first which won't happen until I reach the end of the layout file.
layout file:
!!! 5
%html{lang: 'en'}
%head
%body{class: current_page.data.body_class || 'page'}
= yield
// jQuery
= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"
//I need to insert my js file here, but only for a specific HTML file.
P.S. Also, I need to place the jQuery at the bottom of the file to make rendering more efficient, so I can't place it in the head.

Providing my answer here after figuring out what worked for me:
First, I had to set a flag via index_options in the .html.haml file:
---
title: My Site
index_options: target_file
---
Then, I had to update the layout file with an if statement
!!! 5
%html{lang: 'en'}
%head
%body{class: current_page.data.body_class || 'page'}
= yield
// jQuery
= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"
//Here's the added update:
= javascript_include_tag "my_jsFile" if (current_page.data.index_options == "target_file")

Related

typo3 9.5 - how to get rid of gray header box?

When I use my h1 and h2 styles in a text content element in typo3 9.5, they get nicely displayed as I want.
However when I use the header field of the element, I get this grey box and not my h1 format.
How can I configure typo3 to show h1 style there?
If you use fluid styled content (FSC) or packages which are using FSC (like bootstrap package) you will find the templates of your content elements (CE) in these extensions, from where you can copy it to your site extension and after adding your path to the paths list your modified template is used to render that CE.
This is the typoscript configuration to modify the rendering of the extension bootstrap_package:
lib {
contentElement {
layoutRootPaths {
// 0 = EXT:bootstrap_package/Resources/Private/Layouts/ContentElements/
10 = EXT:my_site_extension/Resources/Private/Layouts/ContentElements/
}
partialRootPaths {
// 0 = EXT:bootstrap_package/Resources/Private/Partials/ContentElements/
10 = EXT:my_site_extension/Resources/Private/Partials/ContentElements/
}
templateRootPaths {
// 0 = EXT:bootstrap_package/Resources/Private/Templates/ContentElements/
10 = EXT:my_site_extension/Resources/Private/Templates/ContentElements/
}
}
}
The entries with 0 = are set by the ext:bootstrap_package (or similar by ext:fluid_styled_content) and show you the path to the templates which are used without your override.
The entries with 10 = (you could use any higher number to give preference to your templates) should show to the folders in your site extension (ext:my_site_extension), where you hold your modified copies.
You only need to copy templates you modify as the original paths are fallback to any template file which is referenced as template, layout or partial. Keep an eye on the paths as those files can be referenced with a (relative) path.
EDIT:
For FSC the rendering for a specific CE is done with a template of the same name in the template folder configured in typoscript (see above)
These files normally contain a call to the same layout file (Layouts/Default.html) which renders the header with the partial Header/All and different other html for spacing and anchors.
In the partial Header/All we have further partials which render the fields header, subheader and date if given with appropriate partials.
Note the additional arguments to these partials: layout, positionClass, link, default which will influence the appearance of the header.
Maybe your unusual appearance is given because there is a special header_layout in your records.
Or another extension already has overwritten the default templates (partials) to get those boxed headers instead of the h1-h6 HTML tags which are used in the FSC extension.

Nuxt.js ignore (Is there any way to ignore original tags)

I am creating a web page using Nuxt.js. (Static file built with the
nuxt generate command)
As a requirement,I need to write the original tag in the static file
that I built. The original tag is for displaying the data obtained
on the server side. Writing an original tag in a vue file naturally
gives an error.
For example, in the image below,
Is there a way to ignore original tags in the vue file?
vue file(example)
// disabled-next-line
{{^ server-side-display-data}}
<button> button </ button>
// disabled-next-line
{{/ server-side-display-data}}
Build file(example)
{{^ server-side-display-data}}
<button> button </ button>
{{/ server-side-display-data}}
Tried
It seemed possible to ignore certain "files" like below, but I haven't found a way to ignore certain "tags"
https://ja.nuxtjs.org/api/configuration-ignore/
Please help
I had the same issue and was looking for a solution... you can try with this solution i've used.
in your nuxt.config.js
...
vue: {
config: {
ignoredElements: [string or regexp],
},
},
...
see this documentation for more details

Vue.js with widget js file containing document.write

I know how to load external js files to Vue.js or Nuxt.js but I have a specific problem with eg. french Shom Widget files.
Shom (for tides predictions) give access to a widget via a js file containing a lot of dirty document.write (you can see a sample at https://services.data.shom.fr/hdm/vignette/grande/CAP_FERRET?locale=fr)
var rid="vignette_shom_"+Math.round(Math.random()*10000000);
document.write("<iframe width='675' id='"+rid+"' height='900' frameborder='0' scrolling='no'></iframe>");var ifrm = document.getElementById(rid);ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document:ifrm.contentDocument;ifrm.document.open();
ifrm.document.write('<!DOCTYPE html>');ifrm.document.write('<html>');ifrm.document.write('<head>');
.. ans so on...
Trying to load this script into the mounted method is ok, but i'm unable to display content into component.
Any idea ?
thanks

chronoforms v5 multi file upload...cannot choose multiple files

I am trying to configure this in v5 and cannot find any documentation. This is what I have so far...
followed the V4 documentation as close as possible, but cannot get the form to allow me to choose multiple files!
Under HTML Render I have Form Tag Attachment = enctype="multipart/form-data"
Under the designer tab I have file field element on the form. Under this I have
Field Name = file1[]
Field ID = file1
Multiple=Yes
Under the settings tab I have the files upload action in the on submit event. In the files upload action I have
Enabled=Yes
Files config = file1:jpg-png-gif-txt
Array fields = file1
is there anything else I need to do?
Turns out this is a bug and will be fixed in the next update. Workaround by creating a custom file upload element with the word multiple as a parameter.

Facebook Like Box social plugin doesn't work with Turbolinks

I'm using the Like Box social plugin (https://developers.facebook.com/docs/reference/plugins/like-box/) and it works great.
Problem is that I'm using it within a Rails 4 application with Turbolinks. Whenever I reload a page, the like box shows up. If I click on any link, the next page loads and the Like Box doesn't show up.
I tried this already but didn't worked =/
http://reed.github.io/turbolinks-compatibility/facebook.html
Any ideas on how to solve this problem?
The link you have posted in original question is quite nice. It asks us to create three functions:
1) saveFacebookRoot: This is needed so that the div#fb-root can be restored at a later point. This is called upon page:fetch. page:fetch is called while the DoM is still of the old page. i.e: new page has not replaced the old page
2) restoreFacebookRoot: This is needed to that the div#fb-root can be appended back to the page. It is called on page:change. page:change is called when the new DoM is available.
3) There is minor typo in there. We need to call this in page:load
FB.XFBML.parse() // Correct
Instead of :
FB?.XFBML.parse() // InCorrect
Remember that when the page is first reloaded, only the page:change is called out of these three.
The trick here is the use of global variables fb_root and fb_events_bound. These must be accessible in all other pages, but this is the reason why we hate turbolinks in the first place.
References: http://reed.github.io/turbolinks-compatibility/facebook.html
Install observejs:
gem 'observejs'
Then add tag to the widget:
<div as="FB" class="fb-comments" data-href="<%= request.original_url %>"></div>
Then create a new script in javascripts folder (fb.coffee in my example):
ObserveJS.bind 'FB', class
root: document.createElement('div')
#::root.id = 'fb-root'
loaded: =>
if !document.body.contains(#root)
document.body.appendChild(#root)
if FB?
FB.XFBML.parse()
else
#initialize()
initialize: =>
js = document.createElement('script')
script = document.getElementsByTagName('script')[0]
js = document.createElement('script')
js.id = 'facebook-jssdk'
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID&version=VERSION_OF_API"
script.parentNode.insertBefore(js, script)
Include the js files in your application.js
//= require observejs
//= require fb