Asciidoctor :: Discussion
Login  Register

Accordion extension idea

‹ Previous Topic Next Topic ›
 
classic Classic list List threaded Threaded
♦
♦
 1 message Options Options
 
Embed post
Permalink
mojavelinux
Reply | Threaded
Open this post in threaded view
♦
♦
| More
Print post
Permalink
Sep 24, 2014; 9:30pm

Accordion extension idea

mojavelinux
Administrator
2681 posts
Jim,

This is a great idea. You've definitely got the right idea (except the cord1 block should be an open block rather than a listing block).

I recommend checking out what Rob did for the show/hide logic for example output as the approach will be somewhat similar (though I like your proposal of a custom block).


Cheers,

-Dan

---------- Forwarded message ----------
From: jnorthr [via Asciidoctor :: Discussion] <[hidden email]>
Date: Wed, Sep 17, 2014 at 3:48 PM
Subject: Re: Borders for images
To: mojavelinux <[hidden email]>


Yes thanx for that Dan
i suspect that will save me some work when deploying jquery accordions. i was trying to think (if it were me) how i would like to declare a jquery accordion in an .adoc file. Maybe something like

= Jquery Accordion Samples
:asciidoctor-version: 0.1.4
:accordion: cord1
:accordion-style: darkness

== Here are some JQuery Accordion Samples

Remember that accordion samples will appear as full title+text in docbook and other alternate formats.

[cord1]
----
=== Recipes For Cakes
Use a lot of sugar

=== Recipes for Biscuits
Use a lot of flour
----

Then since :accordion: is specified as an attribute, i could auto-generate your two files below inserting correct names. The theme is 'darkness' and name of this accordion is 'cord1' :

.docinfo.html
[source,html]
----
----

.docinfo-footer.html
[source,html]
----
<script>
  $(function() {
    $( "#cord1" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
  });
</script>
----

Sure this would bloat the download page first time thru and it's no good for docbook people or PDF crowd either i guess. But might render as:

<div id="cord1">
  <h3>Recipes For Cakes</h3>
  <div>
    <p>Use a lot of sugar
    </p>
  </div>

 <h3>Recipes For Biscuits</h3>
  <div>
    <p>Use a lot of flour
    </p>
  </div>
</div>

ok, maybe this is not so hot an idea as it would really take A/D more into the framework developer crowd than your target audience of document specialist :-{

well, just an idea
thx
jim




On Sep 16, 2014, at 11:31 PM, mojavelinux [via Asciidoctor :: Discussion] wrote:

Jim,

This document is now in my use-cases example, so I'll use it as a test scenario when playing around with features.

Btw, you can eliminate the pass through blocks at the top and bottom of the AsciiDoc file by using docinfo.html and docinfo-footer.html. Here's how I split that out:

.docinfo.html
[source,html]
----
----

.docinfo-footer.html
[source,html]
----
<script>
  $(function() {
    $( "#accordion" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
    $( "#accordion2" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
    $( "#accordion3" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
  });
</script>
----

Then just set the docinfo2 attribute in the document header or pass it via the attributes configuration and it will pull these files into the <head> and before the end of </body>, respectively.

Cheers,

-Dan

On Thu, Aug 7, 2014 at 1:51 AM, jnorthr [via Asciidoctor :: Discussion] <<a href="x-msg://3/user/SendEmail.jtp?type=node&amp;node=2230&amp;i=0" target="_top" rel="nofollow" link="external">[hidden email]> wrote:
Good morning Dan !

The asciidoc source for this groovy tutorial has not been pulled into groovy-code yet. I am only just learning how it all works and as Guillaume has put out a call for help documenting groovy bits, it seemed a nice time to write up a 'How-To Contribute To Groovy' doc while learning it (github,groovy,asciidocs) at the same time. :-)

It will possibly pulled into groovy-core after this summer when everyone has had a chance to offer ideas to improve.

For the moment, i've attached a copy of my .adoc here for you to see. There are no secret bits so i'm happy to let the cat out of the bag. This set uses jquery accordions.

//----------------------

@lines 10-12 -
jquery accordion stylesheet is 'blitzer' but there are others too
++++
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/blitzer/jquery-ui.css">
++++

// -------------------

At document bottom is call to activate the jquery accordion. i have 2 accordions in this example:
++++
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
  $(function() {
    $( "#accordion" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
    $( "#accordion2" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
  });
</script>
++++

// --------------------------------------
@line 71+ is where it's used:
++++
<div id="accordion2">
  <h3>Typical Workflow Steps</h3>
  <div>Dan says to always keep smiling !
  </div>

  <h3>Typical Steps @ The Pub</h3>
  <div><p>Dan says to always order Heineken !</p>
  </div>

</div>
++++


Yes I kind of think this would be lovely to include 'out-of-the-box' but it's another runtime hit to load jquery bits unless it's already in the browser cache and on top of the JRuby + Asciidoc bits, performance might suffer :-P

Have you seen Max Greau's live asciidoc editor @ http://wildfly-mgreau.rhcloud.com/ad-editor/  ?  I love it, something nice for the wiki me-thinks !

give me some links when we can contribute to the asciidocs stuff and i'll put in some effort there too :-D

more soon
thx
jim



On 06/08/14 23:44, mojavelinux [via Asciidoctor :: Discussion] wrote:
Wow, those docs are really *fancy*! I especially like the collapsible sections*. I'd definitely like to feature that on our "who's using AsciiDoc" page. We'll have a call for entries and a wiki page up shortly after the 1.5.0 release, but I've got your link noted down already.

Cheers,

-Dan

* I can definitely see that as something writers would like to have out of the box.



On Wed, Aug 6, 2014 at 3:38 PM, Dan Allen <[hidden email]> wrote:
Interesting, it seems as though adding a border causes the alignment to stop working. The styles must be working against each other in that case ;)

I'm definitely interested in hearing about both initiatives. I'll be following your progress!

Cheers,

-Dan


On Wed, Aug 6, 2014 at 6:23 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Wonderful Dan ! Thank you very much for that.

Have tried it as this:

[.thumb]
image::images/example1.png[Groovy Document Index, align="center"]

and get a border as you say though the image does not appear centered. It just comes out left justified, so i may just need to create a style as you describe to make it centered.

If you are interested, we are using asciidoctor to write documentation on how people can contribute to the groovy project. See here : http://builders.mybluemix.net/docs

My next project is to write a groovy template engine that serves *.adoc files directly from a groovy-powered server like : http://caelyf.de.a9sapp.eu/ using asciidoctorJ 0.1.4 - well that's the plan anyway :-}


thanx for all your hard work too !

kind regards
jim




On 05/08/14 23:41, mojavelinux [via Asciidoctor :: Discussion] wrote:
If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc
----
[.thumb]
image::image.jpg[]
----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc
----
[.bordered]
image::image.jpg[]
----

.docinfo.html
----
<style>
.imageblock.bordered img {
  border: 1px solid black;
}
</style>
----

 $ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan



On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML
... [show rest of quote]


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p1960.html
To unsubscribe from Borders for images, click here.
NAML
... [show rest of quote]



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p1961.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML
... [show rest of quote]



--
... [show rest of quote]


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p1963.html
To unsubscribe from Borders for images, click here.
NAML
... [show rest of quote]


groovy-contributions.adoc (51K) Download Attachment


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p1965.html
To start a new topic under Asciidoctor :: Discussion, email <a href="x-msg://3/user/SendEmail.jtp?type=node&amp;node=2230&amp;i=1" target="_top" rel="nofollow" link="external">[hidden email]
To unsubscribe from Asciidoctor :: Discussion, <a href="x-msg://3/" target="_blank" rel="nofollow" link="external">click here.
NAML
... [show rest of quote]



--


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p2230.html
To unsubscribe from Borders for images, click here.
NAML
... [show rest of quote]



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p2242.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Free forum by Nabble Edit this page