Snippet placeholder text

[gudleik]

Hi,

I'm using jQuery to load and render the snippets after the page is loaded. However I'm seeing a lot of [snippet_x/y] placeholder texts before jQuery has loaded the content.

What is the purpose of the placeholder text? Could it be replaced/wrapped in a <div class="mercury-loading"> so I can style it with a spinner or hide it?

.gudleik

[jejacks0n]

yeah, I've used nokogiri to parse the content and replace snippets on load, which is one way.. the other way is with javascript..

So, the snippet_x/y stuff is the snippet identifier (like an id)/version -- the options are versioned so you can undo/redo changes along with content changes.

There's a fork that I've been meaning to pull code in from that will save the snippet content as text directly.. but I haven't gotten around to that -- it may help some of the things you're trying to do, but if you want to change things I'd say you can do it in javascript (using dom:loaded or .ready) to make some of your changes pre-render -- eg. setting a loading class, or removing the snippet_x/y stuff.

Let me know what you end up with, I'm always curious. =)

[kieranklaassen]

Hi, Is it an idea to write a wiki about snippets because it is still not that clear to everyone how to use them. I am willing to do that. What is the best section? Or do I have to create and reoganise some info? Please let me know.

[jejacks0n]

You can make one, that would be awesome. :)

On Jan 17, 2012, at 5:30 AM, Kieran Klaassenreply@reply.github.com wrote:

Hi, Is it an idea to write a wiki about snippets because it is still not that clear to everyone how to use them. I am willing to do that. What is the best section? Or do I have to create and reoganise some info? Please let me know.

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/108#issuecomment-3527130

[kieranklaassen]

I started here: https://github.com/jejacks0n/mercury/wiki/Snippets

[BrendonW]

OK, that is already helpful! It would be great if the link to the snippets page were added to the Home page on the Wiki -- since I never saw it until reviewing the issues.

[kieranklaassen]

added it to the wiki home but have to make some adjustments and give some examples.

[jejacks0n]

@kieranklaassen Cheers man! Appreciate it a lot. =)

[raphaelcosta]

someone could please share a nokogiri or js example to understand a little better what we need to do?

[mixonic]

A super basic/naive example with Nokogiri.

dom = Nokogiri::HTML.parse( full_original_html )
# This assumes a post-style update, not JSON.
params[:content].each do |id, value|
  region = dom.at_css(%Q{.mercury-editable##{id}}) # Or whatever class you use
  # You may want to use a `case` statement on values['type'] here. This
  # next section just assumes "editable", the WYSIWYG type.
  region.inner_html = values['value']
end
puts dom.to_s # Spits out the updated HTML

Do review the rdoc for Nokogiri. It takes a while to get up to speed on it, but it is a very flexible and powerful library.

http://nokogiri.org/README_rdoc.html

[raphaelcosta]

Thanks! This is my final code:

params[:content].each do |id, value|
  dom = Nokogiri::HTML.parse( value[:value] )

  dom.css(%Q{.mercury-snippet}).each do |snippet|
    snippet_id = snippet.attributes["data-snippet"].value
    snippet_obj = @page.snippet[snippet_id]
    snippet.inner_html = render_to_string(:partial => "mercury/snippets/#{snippet_obj['name']}/preview" , :locals => {:params => snippet_obj[:options]}, :layout => false) 
  end

  params[:content][id][:value] =dom.xpath('//body').inner_html 
end

[mixonic]

@raphaelcosta you probably want to use Nokogiri::HTML.fragment instead of parse, then you don't need to parse for body later on. There are a couple other wonky things in that code you've posted, but I assume you're solving what you need to get solved! Glad you're up and running.

[d33pjs]

Is there any full example for using snippets out there? I only get the placeholders and its not saved to the database. I dont know whats meant by "replacing [snippet_32/0]" in your wiki. How would i do that?

[gvarela]

http://github.com/modeset/cmsimple has a full implementation of snippets. It wraps the content hash in several objects to enable easy manipulation for rendering. The core method that replaces the contents of the snippet id are here: https://github.com/modeset/cmsimple/blob/master/app/models/cmsimple/region.rb#L16-L22 and in a helper here: https://github.com/modeset/cmsimple/blob/master/app/helpers/cmsimple/regions_helper.rb#L8-L13. With a description of using snippets here: https://github.com/modeset/cmsimple#snippets.

Hope that helps.

[d33pjs]

Thanks, gvarela. I will try to realize it in my project with the help of your examples :-).

[jejacks0n]

Snippets are about displaying dynamic content from your own back end system. They're complex because it's a complex thing to try and accomplish. When you render the content it's expected that you find the snippets in the content that you've likely saved in your database and replace them with the appropriate content/view.. this is why the snippet it cleared when saved, and has options. These options are saved with the content so the snippet can be re-rendered with different data.

Let's say for instance that you create a snippet that renders details about the current user.. that obviously doesn't apply to everyone, so shouldn't be placed into the content.. but by finding the snippet and rendering whatever you want at the time that it's displayed to the user is a great way to accomplish complex view logic that content editors can place in various places.

[johnny2k]

I'd like to know more about the fork you were talking about when you said..

There's a fork that I've been meaning to pull code in from that will save the snippet content as text directly.. but I haven't gotten around to that

I could write something to do this for my project but if this is going to be an option in the future I'd rather do it that way so future maintenance by other people will be easier.