Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Override breaks javascript load order #5

Open
International opened this issue Sep 8, 2013 · 8 comments
Open

Override breaks javascript load order #5

International opened this issue Sep 8, 2013 · 8 comments

Comments

@International
Copy link
Contributor

Using the latest version of monologue-markdown does not load the markdown editor. The error is:

ReferenceError: $ is not defined

After an investigation, I found the following being generated in the view:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Monologue</title>
  <script src="/assets/monologue-markdown/epiceditor/epiceditor.min.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue-markdown/epiceditor_load.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue-markdown/application.js?body=1" type="text/javascript"></script>
<link href="/assets/monologue-markdown/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<link href="/assets/monologue/admin/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/monologue/bootstrap/bootstrap.min.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/monologue/bootstrap/bootstrap-responsive.min.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/monologue/bootstrap/bootstrap-datepicker.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/bootstrap/bootstrap.min.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/bootstrap/bootstrap-datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/bootstrap/bootstrap-datepicker-fr.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce/preinit.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce/tiny_mce_jquery_src.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce/jquery.tinymce.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce-jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/admin/tinymce-config.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/admin/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="js/19TXyvHR6caydG48Mlvc/mRC/q11DP8IcpwR2YeQ=" name="csrf-token" />

Due to some parsing errors ( see spree/deface#84 and spree/deface#105 ), deface considers this to be it's DOM:

<!DOCTYPE html> <html> <head> <title>Monologue</title> <code erb-loud> stylesheet_link_tag &quot;monologue/admin/application&quot; </code> <code erb-loud> javascript_include_tag &quot;monologue/admin/application&quot; </code> <code erb-loud> csrf_meta_tags </code> </head> <body> <code erb-silent> if current_user </code> <code erb-loud> render &quot;layouts/monologue/admin/nav_bar&quot; </code> <code erb-silent> end </code> <div class="container"> <code erb-silent> flash.each do |name, msg| </code> <code erb-loud> content_tag :div, msg, :id =&gt; &quot;flash_#{name}&quot;, :class =&gt; (name == :notice ? &quot;alert alert-info&quot; : &quot;alert alert-error&quot;) </code> <code erb-silent> end </code>
<code erb-loud> yield </code> </div> </body> </html>

With this internal representation:

=> 0;34#(Document:0x67a9332 {
name = "document",
children = [
0;34#(DTD:0x601f86e { name = "html" }),
0;34#(Element:0x601f59e {
name = "html",
children = [
0;34#(Text "\n"),
0;34#(Element:0x601ed88 {
name = "head",
children = [
0;34#(Text "\n "),
0;34#(Element:0x6023798 {
name = "title",
children = [ 0;34#(Text "Monologue")]
}),
0;34#(Text "\n ")]
}),
0;34#(Element:0x6022d84 {
name = "body",
children = [
0;34#(Element:0x6022a00 {
name = "code",
attributes = [
0;34#(Attr:0x602288e { name = "erb-loud", value = "" })],
children = [
0;34#(Text " stylesheet_link_tag \"monologue/admin/application\" ")]
}),
0;34#(Text "\n "),
0;34#(Element:0x602b574 {
name = "code",
attributes = [
0;34#(Attr:0x602b42a { name = "erb-loud", value = "" })],
children = [
0;34#(Text " javascript_include_tag \"monologue/admin/application\" ")]
}),
0;34#(Text "\n "),
0;34#(Element:0x602a7a0 {
name = "code",
attributes = [
0;34#(Attr:0x602a390 { name = "erb-loud", value = "" })],
children = [ 0;34#(Text " csrf_meta_tags ")]
}),
0;34#(Text "\n\n \n "),
0;34#(Element:0x6029724 {
name = "code",
attributes = [
0;34#(Attr:0x67fadb8 { name = "erb-silent", value = "" })],
children = [ 0;34#(Text " if current_user ")]
}),
0;34#(Text "\n "),
0;34#(Element:0x67fa44e {
name = "code",
attributes = [
0;34#(Attr:0x67fa304 { name = "erb-loud", value = "" })],
children = [
0;34#(Text " render \"layouts/monologue/admin/nav_bar\" ")]

By bumping the version of deface to 1.0.0.rc4 the editor appears, and preview works, and the JS error disappears. However, after creating a post, the markdown isn't preserved. I will continue looking into that, and update once I've found the issue.

@jipiboily
Copy link
Owner

Related to #4.

monologue-markdown adds a field that is called something like is_markdown. Make sure it is set to the right value, it might be as simple as that. If you have an open source repository that has everything setup and helps to reproduce that issue, let me know.

@International
Copy link
Contributor Author

Could you tell me the commit hashes for both monologue and monologue-markdown where both projects are working correctly? Perhaps you could have a look on your blog's Gemfile.lock ? I'd like to use this as the basis of my diff/patch, and figure out what went wrong from there.

@jipiboily
Copy link
Owner

monologue-markdown -> b1bad45 (in code-higlighting branch, bummer, I just realized I might not have told you this)
monologue -> 0.2.0 (from Rubygems)

@jipiboily
Copy link
Owner

Thanks for your time on this @International, I really appreciate it!

@International
Copy link
Contributor Author

@jipiboily using the version you specified does not perform any syntax highlighting. I was however able to get some colouring by doing the following modification in the monologue-markdown gem ( based on b1bad45 ):

Deface::Override.new(:virtual_path => "layouts/monologue/application",
                     :name => "insert_coderay_assets_in_layout",
                     :insert_bottom => "head",
                     :partial => "monologue-markdown/overrides/assets")

where the assets partial has the following:

<%= stylesheet_link_tag "monologue-markdown/code-highlighting" %>

But I seem to be getting into the same problem with leading spaces. I may be doing something extremely moronic, but I can't see to figure out what that is. No matter what I do, I keep getting some leading spaces, which get syntax highlighted as some kind of errors. A sample code that could reproduce the leading spaces problem is this, taken from http://datatables.net/plug-ins/sorting

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
 "date-eu-pre": function ( date ) {
   var date = date.replace(" ", "");

   if (date.indexOf('.') > 0) {
     /*date a, format dd.mn.(yyyy) ; (year is optional)*/
     var eu_date = date.split('.');
   } else {
     /*date a, format dd/mn/(yyyy) ; (year is optional)*/
     var eu_date = date.split('/');
   }

   /*year (optional)*/
   if (eu_date[2]) {
     var year = eu_date[2];
   } else {
     var year = 0;
   }

   /*month*/
   var month = eu_date[1];
   if (month.length == 1) {
     month = 0+month;
   }

   /*day*/
   var day = eu_date[0];
   if (day.length == 1) {
     day = 0+day;
   }

   return (year + month + day) * 1;
  },

  "date-eu-asc": function ( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },

  "date-eu-desc": function ( a, b ) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});

Could you give any hints as to why this is?

@jipiboily
Copy link
Owner

I can't get the first issue reproduced.

For the second one, I might just be not still be awaken enough, but I really don't understand the problem with dates and monologue-markdown :S

@jipiboily
Copy link
Owner

FYI, Monologue 0.3.0 is about to be released (https://github.com/jipiboily/monologue/tree/0-3-stable) and works with monologue-markdown's master...:)

@International
Copy link
Contributor Author

Mmmm ... are you sure? If I use the following: 0-3-stable and monologue-markdown master ( 5cc4f ), I receive a migration error:

==  AddIsMarkownToPostsRevision: migrating ====================================
-- add_column(:monologue_posts_revisions, :is_markdown, :boolean)
rake aborted!
An error has occurred, this and all later migrations canceled:

PG::Error: ERROR:  relation "monologue_posts_revisions" does not exist

20130916182947_create_monologue_posts_revisions.monologue.rb

If I remove 20130916184101_merge_markdown_revisions_into_posts.monologue_markdown.rb, and modify the other migration to this:

class AddIsMarkownToPostsRevision < ActiveRecord::Migration
  def up
    add_column :monologue_posts, :is_markdown, :boolean
    ::Monologue::Post.update_all(:is_markdown => false)
  end

  def down
    remove_column :monologue_posts, :is_markdown
  end
end

then I can get them to pass.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants