Issues loading assets for SlickGrid in Rails 4 - ruby-on-rails-4

I'm trying to use SlickGrid in a Rails 4 application and having a problem with getting some of the SlickGrid assets to load up properly.
Initially, I tried to use the SlickGrid-Rails gem, which loads the SlickGrid stuff into the Assets pipeline for you. However, it turns out that the gem isn't compatible with Rails 4 at this time.
So I went and downloaded the SlickGrid source and began manually placing the files in my app. Below is the setup I've performed.
My File Setup
Placed all of the JavaScript files into vendor/assets/javascripts
Placed all of the CSS files into vendor/assets/stylesheets
Placed all of the image files (.gif, .png, etc) in assets/images.
Assets Setup
In my application.js file, I added the line ::
//= require_tree ../../../vendor/assets/javascripts
In my application.css file, I added the line ::
*= require_tree ../../../vendor/assets/stylesheets
In my application.rb file, I added the line ::
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Building the SlickGrid
In my view file I have a single element ::
#my-slick-grid
My JavaScript file
$(document).ready(function(){
var rows = [
{
field_1: "value1",
field_2: "value2"
}, {
field_1: "value3",
field_2: "value4"
}
];
var columns = [
{
name: "Address",
field: "address",
id: "address",
sortable: true
},
{
name: "Rating, in %",
field: "rating",
id: "rating_percent",
resizable: false
}
];
var options = [];
var slickgrid = new Slick.Grid($("#my-slick-grid"), rows, columns, options);
});
The Results
When the view loads, I get "most" of the table, but it's not complete.
The Errors
Also, when I view the Chrome Console, I see the 2 following errors ::
GET http://localhost:3000/assets/images/header-columns-bg.gif 404 (Not Found)
GET http://localhost:3000/assets/images/ui-bg_glass_75_e6e6e6_1x400.png 404 (Not Found)
So, obviously Rails is having a problem either loading or knowing where to get the image files from. Does anyone see what I'm doing wrong? I suspect that perhaps I'm not placing the SlickGrid files in the appropriate locations. Perhaps someone can see what I'm doing wrong and correct me?
Thanks for your time!

So I figured it out.
I had to place all the SlickGrid image files into the public dir of my app.
Then I had to add the .scss extension onto each of the SlickGrid .css files.
Then, inside all of the SlickGrid .css.scss files, I had to replace all the
url('/assets/images/blahblah.gif')
with
url(asset-path('blahblah.gif'))
Now when I run the application, the table is fully drawn and there are no more 404 errors.

Related

ASP .NET MVC - Click on href link and update a table (ActionLink)

I have a partial view with this code:
<a href="http://www.teste.net/#Html.DisplayFor(modelItem =>
Model.Link)">#Html.DisplayFor(modelItem => Model.Titulo)<a>
This render a link in a View so the users can click on link and access the html pages outside application. It works fine.
But I need update a table when a user click in link so I need trigger an Action.
I've tried using this code:
#Html.ActionLink(#Html.DisplayFor(modelItem => Model.Titulo).ToString(), "GetHtmlFile", new { id = Model.ArtigoID , path = #Html.DisplayFor(modelItem => Model.Link) })
so the Action GetHtmlFile will need render html files in this way:
public ActionResult GetHtmlPage(int id, string path)
{
updateTableArticle(id);
return new FilePathResult(path, "text/html");
}
It works, but there's a problem. The html files are in relative path so many pictures aren't shown and many links are broken...
There is no easier way to click on the link and update the table in this cenario whithout must render the html files as a view ?

Can I convert browser generated image blob to image file for upload?

I'm using fabric.js to dynamically create textures in Threes.js, and I need to save the textures to AWS. I'm using meteor-slingshot, which normally takes images passed in through a file selector input. Here's the uploader:
var uploader = new Slingshot.Upload("myFileUploads");
uploader.send(document.getElementById('input').files[0], function (error, downloadUrl) {
if (error) {
console.error('Error uploading', uploader.xhr.response);
alert (error);
}
else {
Meteor.users.update(Meteor.userId(), {$push: {"profile.files":downloadUrl}});
}
});
Uploading works fine from the drive ... but I'm generating my files in the browser, not getting them from the drive. Instead, they are generated from a canvas element with the following method:
generateTex: function(){
var canvTex = document.getElementById('texture-generator');
var canvImg = canvTex.toDataURL('image/jpeg');
var imageNew = document.createElement( 'img' );
imageNew.src = canvImg;
}
This works great as well. If I console.log the imageNew, I get my lovely image with base 64 encoding:
<img src=​"data:​image/​jpeg;​base64,/​9j/​
4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgID
//....carries on to 15k or so characters
If I console.log a file object added from the drive via filepicker ( not generated from a canvas ), I can see what the file object should look like:
file{
lastModified: 1384216556000
lastModifiedDate: Mon Nov 11 2013 16:35:56 GMT-0800 (PST)
name: "filename.png"
size: 3034
type: "image/png"
webkitRelativePath: ""
__proto__: File
}
But I can't create a file from the blob for upload, because there is no place in the file object to add the actual data.
To sum up I can:
Generate an image blob and display it in a dom element
Upload files from the drive using meteor-slingshot
inspect the existing file object
But I don't know how to convert the blob into a named file, so I can pass it to the uploader.
I don't want to download the image, (there are answers for that), I want to upload it. There is a "chrome only" way to do this with the filesystem API but I need something cross browser (and eventually cross platform). If someone could help me with this, I would have uncontainable joy.
Slingshot supports blobs just as well as files: https://github.com/CulturalMe/meteor-slingshot/issues/22
So when you have a canvas object called canvTex and a Slingshot.Upload instance called uploader, then uploading the canvas image is as easy as:
canvTex.toBlob(function (blob) {
uploader.send(blob, function (error, downloadUrl) {
//...
});
});
Because blobs have no names, you must take that into account when defining your directive. Do not attempt to generate a key based on the name of the file.

CSS files not compiled into app.css as expected in Ember CLI?

Ember CLI docs says about /app/styles folder following:
Contains your stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS (though only one type is allowed, see Asset Compilation). These are all compiled into app.css.
I have the following files in /app/styles: app.css, one.css, two.css.
I would expect when starting server that in folder /dist/assets there will be file called appName.css and the content would be concatenation of all three files. Instead there is only content of app.css file. So I resolved this with #import in app.css:
#import url("one.css");
#import url("two.css");
That worked with 0.0.46, although not optimal because of more request were made to server. Now I updated to 0.1.1 and files one.css and two.css are no longer copied to /dist/assets folder.
But main question is: How can I achieve the concatenation of all css files in /app/styles folder? Am I missing something basic or are there some commands needed to be included into Brocfile.js?
Updated
Here is the snippet of Brocfile.js showing how we concatenate our CSS files:
var concat = require('broccoli-concat');
var cleanCSS = require('broccoli-clean-css');
var concatenatedCss = concat('app/styles', {
inputFiles: [
'reset.css',
'common.css',
'layout.css',
...
],
outputFile: '/assets/appName.css',
wrapInFunction: false
});
if (app.env === 'production') {
concatenatedCss = cleanCSS(concatenatedCss, {restructuring: false});
}
module.exports = app.toTree([concatenatedCss]);
We manually add files to inputFiles array.
It's known issue with 0.1.1 version: Static css compiler broken (0.1.x regression)
You probably should wait for update.
As for main question, try broccoli-concat.
Now there is this ember-cli-concat add-on available: https://github.com/sir-dunxalot/ember-cli-concat.
Looks super easy to use: https://github.com/sir-dunxalot/ember-cli-concat/wiki/Installation

Gulp-Inject Not Working

I have a simple Gulp build process setup for testing. I've read the documentation many times but I can't seem to get Gulp-inject to inject the scripts I want into an index.html file.
My Gulp file looks like this:
gulp.task('inject1', function() {
return gulp.src('app/index.html')
.pipe(inject(gulp.src('./app/scripts/app.js', {read : false}))) // Not necessary to read the files (will speed up things), we're only after their paths
.pipe(gulp.dest("dist"));
});
gulp.task('inject2', function() {
return gulp.src('app/scripts/**/*.js', {read : false}) // Not necessary to read the files (will speed up things), we're only after their paths
.pipe(inject("./app/index.html"))
.pipe(gulp.dest("./dist"));
});
This is part of my Index.html:
<!-- inject:js -->
<!-- endinject-->
Both of these are copied from the documentation on github.
When I run either of these tasks the console just says "Started 'inject' Finished 'Inject' '
In my ./dist folder it creates an Index.html file but no js files are injected.
I've tried typing in the src and inject properties many different way but no luck. Any idea what I'm doing wrong?
First of all you have a mistake in your endinject tag:
<!-- endinject-->
should be
<!-- endinject -->
This plugin has worked great for me and others in various settings, so the problem is probably in your configuration.
Because when you are using streaming, you cannot be sure which files you pipe along, always try to use a plugin to see exactly what files you are piping. I recommend using gulp-using. Try this to debug your setup:
var debug = require('gulp-debug');
gulp.task('inject2', function() {
return gulp.src('app/scripts/**/*.js', {read : false})
.pipe(debug())
.pipe(inject("./app/index.html"))
.pipe(gulp.dest("./dist"));
});
Also make sure you use the same method to verify that you match your html file as well.
Other than that - it's just trial and error until you understand piping to get just the right files with the correct path.
If gulp-inject isn't injecting any files, that means you didn't pipe them correctly, or your target inject was not correct. The plugin works, and works great for me.
If you need to see an example working gulp file, check out this this gulpfile.js gist
I had the same problem with the following code:
var injectSrc = gulp.src(['./public/css/*.css', '.public/js/*.js'], {read: false});
var injectOptions = {
ignorePath: '/public'
};
var options = {
bowerJson: require('./bower.json'),
directory: './public/lib',
ignorePath: '../../public'
}
gulp.task('inject', function() {
return gulp.src('./src/views/*.html')
.pipe(debug())
.pipe(wiredep(options))
.pipe(debug())
.pipe(inject(injectSrc, injectOptions))
.pipe(debug())
.pipe(gulp.dest('./src/views'));
});
My index.html had the following:
<!--bower:css-->
<!--endbower-->
<!--bower:js-->
<!--endbower-->
<!--inject:css-->
<!--endinject-->
<!--inject:js-->
<!--endinject-->
Click on this link to see what my file structure was.
The inject was creating the css files correctly but not the js files. Also the bower dependencies were working just fine.
Finally I caught the missing '/' in the array passed to gulp.src(). After fixing that to:
var injectSrc = gulp.src(['./public/css/*.css', './public/js/*.js'], {read: false});
it works correctly.

Font asset without digest in Ruby on Rails 4

I've got a problem with my font assets being served without digest in production.
As soon as I do rake assets:precompile I get:
5futurebit-webfont-c133dbefd9e1ca208741ed53c7396062.eot
I was trying to link it with font-face in scss with asset-url, asset-path, font-url and font-path but all of them end up outputting path:
/assets/5futurebit-webfont.eot
For now I'm copying assets from /app/assets/fonts straight to /public/assets/ but it doesn't feel like that's the way to do it.
I've been looking at a similar issue and am currently using the non-stupid-digest-assets gem: https://github.com/alexspeller/non-stupid-digest-assets
For more info on how you can use it, see here.
Correct use of non-stupid-digest-assets gem
Now that being said, the link provided by Chris (specifically, https://stackoverflow.com/a/17367264/291640) seems like it may accomplish the same as the gem without the gem itself. I know I need to look into it further.
Make sure you have the exact filename WITH extention name of the font in your font-url declaration like:
Correct:
#font-face{
font-family: 'Sawasdee';
src: font-url('Sawasdee.ttf') format('truetype');
}
Wrong:
#font-face{
font-family: 'Sewasdee';
src: font-url('Sewasdee') format('truetype');
}
My font folder:
fonts
|_ Sewasdee.ttf
|_ Otherfont.ttf
Here is our solution, that is based partially on what Sprocets does. It is working with Rails4. It automatically generates a nondigest version for all assets, that were listed in config.assets.precompile, after precompilation was done.
# lib/tasks/assets_nondigest.rake
require 'fileutils'
namespace "assets:precompile" do
desc "Create nondigest versions of defined assets"
task :nondigest => :environment do
sprocket_task = Sprockets::Rails::Task.new ::Rails.application
assets = ::Rails.application.config.assets.precompile
paths = sprocket_task.index.each_logical_path(assets).to_a +
assets.select { |asset| Pathname.new(asset).absolute? if asset.is_a?(String)}
paths.each do |path|
if asset = sprocket_task.index.find_asset(path)
copy_target = File.join(sprocket_task.output, asset.digest_path)
target = File.join(sprocket_task.output, asset.logical_path)
sprocket_task.logger.info "Writing #{target}"
asset.write_to target
asset.write_to "#{target}.gz" if asset.is_a?(Sprockets::BundledAsset)
end
end
end
end
Rake::Task['assets:precompile'].enhance do
Rake::Task['assets:precompile:nondigest'].invoke
end