The Foundation 6 Responsive menu shows the mobile version on initial page load / refresh and is not "responsive". When Turbolinks loads the page, The proper menu appears and it is "responsive". "responsive" meaning the Javascript to change between the menus.
This is super weird because the usual Turbolinks problem is the opposite, where it works on the initial page load but not on subsequent ones. All other Foundation 6 related Javascript, like modals, work as expected no matter how the page is loaded.
I have just moved to an updated version of rails 5.2. I was on 5.2.1, webpacker 3.5, and foundation 6.5.0-rc.4. Everything worked as expected. Turbolinks has not changed versions.
I am now using Foundation 6.5.3, Rails 5.2.3, Webpack 4.34.0, Stimulus 1.1.1 ,and Turbolinks 5.2.0. No additional Gems except necessary Rails and dependencies are used. I have tried Foundation 6.5.3, 6.5.2, 6.5.1, 6.5.0, 6.5.0-rc.4, 6.4.3. None seem to revert back to normal behavior.
I have tried to reorder my Webpack application.js pack file to load modules and initialize foundation. I have tried initializing Foundation in a stimulus controller's initialize function. I have tried attaching the listener with and without Jquery. I refuse to try an inline script at the end of the html and allow unsafe-inline in my CSP. I have tried CSS solutions, no effect. I have tried messing with data-show-for attributes as well as html visibility classes but that didn't help either. I have tried adding and removing parent elements, no change. There are no errors in the browser console. Adding "ready" to the listener for "turbolinks:load" does nothing. I have looked for other Turbolinks listeners to try, but found none that made sense. I have tried to initialize it outside of and in addition to the turbolinks:load listener and it still fails, however errors show up this time in the console show foundation is initializing twice. (Tried to initialize responsive-toggle on an element that already has a Foundation plugin.)
I have included all the pertinent files to recreate this issue, unfortunately I don't have a live site to put up at the moment.
rails new foundationtestsite -T -d postgresql -S --webpack=stimulus --skip-listen
package.json (fluff removed)
{
...,
"dependencies": {
"#rails/webpacker": "^4.0.7",
"actioncable": "^5.2.3",
"activestorage": "^5.2.3",
"foundation-sites": "^6.5.3",
"jquery": "^3.4.1",
"rails-ujs": "^5.2.3",
"stimulus": "^1.1.1",
"turbolinks": "^5.2.0",
"webpack": "^4.34.0",
"what-input": "^5.2.3"
},
...
}
application.js (webpack entry / pack file)
import $ from 'jquery'
import jQuery from 'jquery'
import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import cable from 'actioncable';
// import "controllers"
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /.js$/)
// Turbolinks
application.load(definitionsFromContext(context))
Turbolinks.start()
// images
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)
// style sheets
import '../stylesheets/application.scss';
// foundation sites 6
import foundation from 'foundation-sites';
import '../javascripts/foundation_startup.js';
foundation_startup.js
import $ from 'jquery'
import jQuery from 'jquery'
import 'rails-ujs'
import 'foundation-sites'
$(document).on('turbolinks:load', function(){
$(function(){ $(document).foundation() })
});
html from menu partial (rendered as first element of body)
<div data-controller="menu" data-target="menu.menu" class="cell shrink header medium-cell-block-container">
<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="medium" data-target="menu.titleBar">
<button class="menu-icon" type="button" data-toggle="example-animated-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-animated-menu" data-target="menu.topBar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li><%= link_to "Home", root_path%></li>
</ul>
</div>
</div>
</div>
Related
I am newbie in ember. In this ember app, the legacy code displays Images, but I want to add some videos between the images.
My test code is given as below, here simply replace the image with video.
{{!-- Carousel --}}
{{#bs-carousel
class=(concat "carousel" (if imagesLoading ' invisible height-none'))
autoPlay=false
interval=0
wrap=true
model=imageCaptures
showControls=showControls
showIndicators=showIndicators
index=activeImage
as |caro|}}
{{#each imageCaptures as |slide|}}
{{#caro.slide}}
{{!-- <img alt='' src='{{slide.image_url}}'> --}}
<video>
<source src='{{slide.image_url}} type="video/mp4"'>
</video>
{{/caro.slide}}
{{/each}}
{{/bs-carousel}}
Video is shown, but it is cut, not auto scaled in the div where the image was shown.
Can you tell me how to display video in Carousel?
ember-carousel
An ember addon for Carousel component
DEMO
Usage
From within your Ember CLI application, run the following:
ember install ember-carousel
Add invoke the component as follows
{{#carousel-container transitionInterval=400 as |ui controls|}}
<div class="carousel-body">
{{#ui.item}}
Emberjs
{{/ui.item}}
{{#ui.item}}
Reactjs
{{/ui.item}}
{{#ui.item}}
Angularjs
{{/ui.item}}
</div>
<button onclick={{controls.previous}}>
Slide Left
</button>
<button onclick={{controls.next}}>
Slide Right
</button>
{{/carousel-container}}
API
{{carousel-container}}
This is the primary component to start displaying carousel items.
Attributes
transitionInterval - Defaults to 500.
onSlide - Optional, an action that receives one parameter, an object like { index: 3, previousIndex: 2, direction: 'right' }.
Triggered before the transition is completed.
Yielded Params
This component yields two hashes, e.g. {{#carousel-container as |ui act|}}.
These parameters ui and act can be called anything, but they contain the following items:
ui - is a hash with the following component items:
item - A component that should contain your slide contents, used like so {{ui.item}}you content{{/ui.item}}.
controls - is a hash with the following action items:
previous - A closure action that changes to the previous slide.
next - A closure action that changes to the next slide.
Development
git clone this repository
npm install
bower install
Running
ember server
Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
SOURCE:https://github.com/selvagsz/ember-carousel#readme
I would like to add Vue to my Django project, but i'm having troubles understanding
some parts of it.
At the actual moment, my project already has a bunch of templates and views. Everything is rendered by the views, the only JS i'm using is for Jquery. The need to add Vue comes to improve my UI. I don't need Vue to be my frontend, i only want to add some Vue components to my templates here and there.
After making some research, i found about the Webpack + Vue approach. It's not the right approach for my project since it should be used for a project where the frontend is entirely built on Vue and is divided from the Django backend, so it is not the right way for me.
At this point, the only way to go would be to add it using the CDN on my django html template:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
Would this approach be possible?
Yes, this is possible.
Just add the script inside your template:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
And then you can initialize the Vue components inside other script tags. It is advisable to change interpolation brackets from {{ }} to [[ ]], to avoid conflict with Django templating engine.
<div id="example">
<p>[[ hello ]]</p>
</div>
<script>
new Vue({
el: '#example',
delimiters: ['[[', ']]'],
data: { hello: 'Hello World!' }
})
</script>
I am using ember-bootstrap's Navbar example code in a simple Ember test app:
{{#bs-navbar as |navbar|}}
<div class="navbar-header">
{{navbar.toggle}}
<a class="navbar-brand" href="#">Brand</a>
</div>
{{#navbar.content}}
{{#navbar.nav as |nav|}}
{{#nav.item}}
{{#nav.link-to "home"}}Home{{/nav.link-to}}
{{/nav.item}}
{{#nav.item}}
{{#nav.link-to "navbars"}}Navbars{{/nav.link-to}}
{{/nav.item}}
{{/navbar.nav}}
{{/navbar.content}}
{{/bs-navbar}}
However I'm having strange results; the navbar is showing up 12 times in my page. For what it's worth, the toggle button doesn't do anything either - but that might be connected to the reason the navbar appears 12 times. See the following screenshot:
Here are the steps I took to set up this project:
ember new bootstrap-test
Inside /bootstrap-test:
ember install ember-bootstrap
ember g ember-bootstrap --bootstrap-version=4
Here is the contents of my ember-cli-build.js file:
/* eslint-env node */
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
'ember-bootstrap': {
'bootstrapVersion': 4,
'importBootstrapFont': false,
'importBootstrapCSS': false
}
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree();
};
Finally, I'm using ember-cli version 2.14.2. Any help to figure this out would be greatly appreciated. Thank you!
It might be caused by re-rendering due to property update in didRender or didInsertElement hook. If that's the case then you surely you will get assertion error in console.
I always look for the first error, if there is more no of errors reported in the console. that helped me a lot in my development.
I have an edit action that I would like to put on a modal window on my App, and when it's closed I need to refresh a part of my view.
Does anybody knows how can I do that using Rails 4?
Lets assume you want to open the user edit page in a modal. Here's the solution I prefer:
# Create a ajax link somewhere that opens the user modal:
<%= link_to user.name, edit_user_path(user), remote: true %>
# This link calls your controller action:
class UsersController < ApplicationController
def edit
#user = User.find(params[:id])
render_js_modal(:any_id, 'edit')
end
end
class ApplicationController
def render_js_modal(id, partial, options)
#id = id
#partial = partial
#options = options
respond_to do |format|
format.js { render 'application/render_modal' }
end
end
end
# The view depends on which CSS library you are using. This
# example is if you use semantic ui. If you use something like
# bootstrap you will probably need to create a bit more html in the JS.
# views/application/render_modal.js.erb:
$(body).append('<div id="<%= #id %>"></div>');
var element = $('#<%= #id %>');
element.html('<%= j(render partial: #partial, #options) %>');
element.modal('show');
Hope this helps. If you get any errors, remember to look in the rails server log for details. For JS details look in the browser console. Note you can pass locals to the partial in the options param. You can create many other useful methods like this:
render_js_modal_hide: hide a modal on screen by id. Useful when the user is created successfully. Consider replacing the page flash messages with the JS response as well.
render_js_content_replace: replaces a div on the page with the content of provided partial. This is useful for replacing the content of a modal if there are validation errors.
etc.
I've done this in that way (using Slim):
.text-center = link_to 'Visualizar Documentos', 'Visualizar Documentos', class: 'btn btn-default btn-primary btn-large', "data-toggle" => "modal", "data-target" => "#meioambiente"
.modal.fade id="meioambiente" tabindex="-1" role="dialog" aria-labelledby="meioambiente-label" aria-hidden="true"
And everything worked perfectly. Thanks!
Twitter Bootstrap and ZURB Foundation both have modal components. You will need to use JavaScript to update the DOM.
Codecademy is a free online learning website and have great tutorials to learn JavaScript and jQuery. I would also suggest Code School since they have a free course on JavaScript, jQuery and Angular.js.
I have some troubles to make Reveal work properly from a dynamic link.
This is working fine if the link is loaded with the page. If the link is appended later on, it won't work:
<div id="deleteConfirm" class="reveal-modal" data-reveal>
Delete Confirm Modal
</div>
<a data-modal="deleteConfirm">Test</a>
JS:
$('body').on('click','a[data-modal]',function(){
$(document).foundation();
$('#deleteConfirm').foundation('reveal', 'open');
});
You need to use reflow. I assume that you are loading some html using ajax which includes a reveal link
If you have div#ajax-content you can use the following javascript
$(document).on('replace', '#ajax-content', function (e, new_path, original_path) {
$(document).foundation('reveal', 'reflow');
});