I am trying to incorporate Polymer with Rails 4 using the polymer-rails and polymer-paper-rails Gems.
I seem to be having a lot of problems getting any elements to display in Firefox. After looking around and quite a lot of searching on Google, I have come to the conclusion that it must be an issue with my platfom.js file.
I have followed the instructions for installing both the aforementioned gems to the letter and really don't know what I'm doing wrong. The paper elements work perfectly in Google Chrome.
In my Firefox dev console I see the Message
"platform.js is not the first script on the page. See
http://www.polymer-project.org/docs/start/platform.html#setup for
details." platform.js:12".
This is what my application.js file looks like:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
//= require elements/ripple
//= require forms/select
$(function(){ $(document).foundation(); });
The section of my HTML looks like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= javascript_include_tag 'polymer/platform' %>
<%= stylesheet_link_tag "application" %>
<%= html_import_tag 'application'%>
<%= javascript_include_tag "vendor/modernizr" %>
<%= csrf_meta_tags %>
</head>
The platform.js documentation seem to be outdated (related to 0.5 version of Polymer)
For compatibility on browsers that do not fully support webcomponents you should include
//= require webcomponentsjs/webcomponents-lite
After that you should see the components in FF/Safari the same way you see in chrome
Related
How do I configure Jasmine in the Rails 6 environment (where Webpack replaces the asset pipeline for Javascript) so I can test the Javascript modules I've written for my app?
I installed the jasmine gem, ran rails generate jasmine:install, and edited jasmine.yml to point to the location of my Javascript source and specs.
The problem is that I can't use import/export statements. (For example, attempting to load my first module to test results in this error in Chrome: Uncaught SyntaxError: Unexpected token 'export')
From what I can tell, I need to set up Jasmine to use babel; but, I'm not having any luck finding instructions on how to do this in the new Rails 6 layout.
Yes, you're right. The main problem of jasmine-gem is that it doesn't pipe the spec through babel. Let me post the quickest solution to your problem and after that, I will think of the possible implementation of a similar approach in jasmine-gem.
The main idea is to pipe the specs through the rails webpack as long as it has all the required babel configurations.
Install jasmine-core since we will not use jasmine-gem in this solution
yarn add jasmine-core -D
Now create two additional webpack packs.
One is for Jasmine and will contain only Jasmine and the test runner
// app/javascript/packs/jasmine.js
import 'jasmine-core/lib/jasmine-core/jasmine.css'
import 'jasmine-core/lib/jasmine-core/jasmine-html.js'
import 'jasmine-core/lib/jasmine-core/boot.js'
import 'jasmine-core/images/jasmine_favicon.png'
And the second one for your application code and the specs
// app/javascript/packs/specs.js
// First load your regular JavaScript (copy all the JavaScript imports from your main pack).
let webpackContext = require.context('../javascripts', true, /\.js(\.erb)?$/)
for(let key of webpackContext.keys()) { webpackContext(key) }
// Then load the specs
let specsContext = require.context('../spec', true, /\.js(\.erb)?$/)
for(let key of specsContext.keys()) { specsContext(key) }
Pay attention to your '../javascripts' and '../spec' paths. For me it looked like '../../assets/javascripts' and '../../../spec' respectevly.
Then add the Webpack ProvidePlugin for Jasmine (add this code to config/webpack/environment.js)
// config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
jasmineRequire: 'jasmine-core/lib/jasmine-core/jasmine.js',
}))
Add Jasmine ranner page to your application
# config/routes.rb
Rails.application.routes.draw do
# ...
if Rails.env.development? || Rails.env.test?
get 'jasmine', to: 'jasmine#index'
end
end
# app/controllers/jasmine_controller.rb
class JasmineController < ApplicationController
layout false
def index
end
end
# app/views/jasmine/index.html.haml
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<%= stylesheet_pack_tag 'jasmine', :media => 'all' %>
</head>
<body>
<%= javascript_pack_tag 'jasmine' %>
<%= javascript_pack_tag 'specs' %>
</body>
</html>
Now your Jasmine should work on /jasmine route
This answer is prepared on the basis of this post, however, I've rechecked the instructions on ruby 2.6.3, rails 6.0.2, added appropriate changes to the recommendations and prove that this works.
Please, let me know if my answer was helpful for you or you need some additional information. However, I'm going to work on a solution that will succeed with jasmine gem or similar implementation.
I'm using wickedpdf to try to generate a nice looking pdf report. When using show_as_html: true to make sure everything looks right, the page looks great, it uses the correct template, and all content is loaded as they should. There are no reference errors or asset errors, those were corrected by creating a wickedpdf specific scss and js (see below):
However, when I set it up to disposition: 'attachment' for it to actually generate the pdf, it looks nothing like the page above and the result is a pdf that lacks formatting and with disjointed components across multiple pages. The graphs are also not rendering and show no data. It seems like it's not applying the correct bootstrap/custom css and it's not running the javascript files needed to create the layout as shown on the html view. Any ideas why this is happening? My understanding is using show_as_html: true would render the exact same page as it would look in the pdf and then creating the pdf would use those exact contents to create the pdf document. I've looked at all other wicked-pdf questions but I haven't found anything that helps.
Below is the current setup in the controller:
format.pdf do
render pdf: "#{#interest.name}",
template: "interests/pdf_export.html.erb",
layout: 'pdf.html', disposition: 'attachment',
title: "#{#interest.name}",
#default_header: true,
#default_footer: true,
header: { spacing: 10,
html: {
content: "interests/report_header",
layout: 'pdf.html', # optional, use 'pdf_plain' for a pdf_plain.html.pdf.erb file, defaults to main layout
}
},
viewport_size: '1280x1024',
#show_as_html: true,
javascript_delay: 10000,
enable_plugins: true,
page_size: 'A4'
end
Here is the pdf layout:
<!DOCTYPE html>
<html>
<head>
<title>PDF</title>
<%= wicked_pdf_stylesheet_link_tag 'wickedpdf' %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JAVASCRIPT DEPENDENCIES ---->
<!-- jquery -->
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- popper -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.19.0/feather.js"></script>
<%= wicked_pdf_javascript_include_tag 'wickedpdf'%>
</head>
<body>
<div class='container'>
<%= yield %>
</div>
</body>
</html>
wickedpdf.scss:
#import 'stack/bootstrap';
#import 'stack/fonts/flag-icon-css/css/flag-icon';
#import 'stack/vendors/extensions/pace';
#import 'stack/vendors/extensions/unslider';
#import 'stack/plugins/extensions/noui-slider';
#import "stack/bootstrap-extended";
#import "stack/colors";
#import "wickedpdf/components";
#import 'stack/core/menu/menu-types/vertical-menu';
#import 'stack/core/colors/palette-gradient';
#import 'style';
wickedpdf.js:
//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/chart.min
//= require stack/vendors/charts/jquery.sparkline.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/extensions/wNumb
//= require stack/vendors/extensions/nouislider.min
//= require stack/vendors/extensions/jquery.steps.min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/vendors/tables/datatable/datatables.min
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common
//= stub ./common/subscriptions
My understanding is using show_as_html: true would render the exact same page as it would look in the pdf
This is a misunderstanding. I'm sorry it may have seemed that way from whatever documentation you read, but show_as_html: true will display the HTML that will be sent to wkhtmltopdf, however wkhtmltopdf is like a very old version of Chrome (around version 13, I think). It doesn't support flexbox and a lot of nice things like that, which I think newer versions of Bootstrap need. Probably some of your JS libraries, too.
That option is there to help you more rapidly develop and debug. It's a lot tougher to view-source on a PDF.
My advice would be to strip away all CSS and JS first, and try and get the most important part working (the charts), then implement the layout with tables or floats or fixed-width containers, then copy over the bits of CSS you need specifically for the styles shown on the page, and not all of Bootstrap.
If this is a page that does double duty (both format.html and format.pdf versions are served), I would suggest breaking the PDF out into it's own separate template, so HTML visitors still get the beautiful interactive webpage.
I thought I followed the directions, but maybe I missed something?
Gemfile:
gem 'foundation-rails'
ran bundle
ran rails g foundation:install
This added and made changes to:
views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*/
assets/stylesheets/foundation_and_overrides.scss
// -- snip --
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true;
#import 'foundation';
assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){ $(document).foundation(); });
I have successfully seen buttons display correctly, but other things just refuse to display as expected. The first thing I looked at was the grid example, so i copied and pasted the source, but it didn't shade as the example. The spacing seems correct...
Then I tried accordian. I copied and pasted from the source code of the examples. It displayed the list bullets but didn't expand/contract.
Then I tried the top bar. I copied and pasted from the source code of the examples. It put a horizontal bar at the top, but the menu items are not inline.
Then I tried making a brand new rails project just to test foundation. I followed the same steps, and got the same results. (mumbles something about insanity...)
I've used foundation before, but apparently I'm missing something important.
$ rvm list
rvm rubies
=* ruby-2.2.1 [ x86_64 ]
# => - current
# =* - current && default
# * - default
$ rails -v
Rails 4.2.4
foundation-rails gem currently loads foundation 5, while the website has examples for foundation 6. It would appear that they are NOT compatible ;)
To test, see the documentation for foundation 5
I have a running Angular-app in my ruby on rails project and now I want to implement some typeahead search using angular.js and can not find the solution how to make typeahead directive running.
Question: How to install angular typeahead directive into my project ?
With present solution described bellow I am getting this console :
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/template/typeahead/typeahead.html
ng-app is working and related js and css files linked into html as well.
I am following this source: bootstrap-ui-angularjs
What I did already :
downloaded angular-ui-bootstrap.js into
public\assets\javascripts directory
manifested asset pipeline as usually:
//= require jquery
//= require jquery_ujs
//= require jquery.tokeninput
//= require bootstrap
//= require angular
//= require angular-ui-bootstrap
//= require_tree .
3.checked if js are on the page:(just scripts in question)
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/angular.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-ui-bootstrap.js?body=1" type="text/javascript"></script>
my ng-app:
<div ng-app='plunker'>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{result | json}}</pre>
<input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
</div>
</div>
<script>
angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope, $http, limitToFilter) {
//http://www.geobytes.com/free-ajax-cities-jsonp-api.htm
$scope.cities = function(cityName) {
return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q="+cityName).then(function(response){
return limitToFilter(response.data, 15);
});
};
}
</script>
Is there something what I am missing in connection to installing existing angular directives? e.g. from this link
Instead of using ui-bootstrap.js, you can use ui-bootstrap-tpls.js. This js file comes with the templates.
To use ui-bootstrap-tpls.js you have to add js file to your html:
<script src="/scripts/angular-ui/ui-bootstrap-tpls.js"></script>
AND in your module you have to add these dependencies:
angular.module('myModule', ['ui.bootstrap', 'ui.bootstrap.typeahead']);
If you do these 2 steps you won't get this message anymore:
Failed to load resource: the server responded with a status of 404
(Not Found) _http://localhost:3000/template/typeahead/typeahead.html
What happens often is that people only add the js file and forget to add the dependency to the module.
The GitHub code also contains a folder called template, inside which there is a template folder for typeahead. Have you downloaded that and added to your project at the correct location.
The error seems to be coming due to this typeahead template html file missing. In case it has been added check if location is correct.
You can add the templates to your web page if the ui-bootstrap-tpls.js file doesn't work or if you want to use the ui-bootstrap.js file:
<script type="text/ng-template" id="template/typeahead/typeahead-popup.html">
<ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
<li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}">
<div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
</li>
</ul>
</script>
<script type="text/ng-template" id="template/typeahead/typeahead-match.html">
<a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
</script>
Make sure to include the correct .js file which contains the templates.
I replaced "ui-bootstrap.min.js" with "ui-bootstrap-tpls.min.js"
This fixed it for me. Also see What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?
Solution:
create a new folder public\template\typeahead
download typeahead.html from this source into directory created in step 1.
I followed the guide but can't apply styles.
How can I make the page background blue?
I have the following file: app/assets/stylesheets/main.css.scss
Contents are: body { background-color: #123456;}
I have the following in my app/assets/application.css.scss file:
/*
*
*= require_self
*= require_tree .
*/
The web page, once loaded includes the following line in the head tag:
<link href="/assets/main.css?body=1" media="all" rel="stylesheet" type="text/css" />
But my webpage is not blue so I am ;)
How do I get the webpage background-color to be blue?
I've stopped and started the server to try and make sure that asset compilation is taking place.
Your css link needs to reference application.css - that is the main file name that the rest of the css is compiled into.
<link href="/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
also, in rails it's preferred to use the asset helpers:
<%= stylesheet_link_tag "application" %>
See http://guides.rubyonrails.org/asset_pipeline.html for more documentation.