I want codefilter to provide a more controlled interface like:
http://www.lullabot.com/articles/modifying-forms-drupal-5-and-6

The javascript is:

Drupal.behaviors.fancycode = function(context) {
  $("div.codeblock", context).each(function(){
    var contentwidth = $(this).contents().width();
    var blockwidth = $(this).width(); 
    if(contentwidth > blockwidth) {
      $(this).hover(function() {
          // 870px - 12px padding on either side - 2px for border on either side
          $(this).animate({ width: "844px"}, 250, function() { $(this).css('overflow-x', 'auto'); });
        }, function() {
          $(this).css('overflow-x', 'hidden').animate({ width: blockwidth }, 250);
      });
    }
  });

But not sure where to best insert the codeblock div.

Comments

mgifford’s picture

mgifford
he/him
Primary language English
commented

The codeblock div gets spit out with multi-line objects, not single line, so that explained a piece of this.

Other relevant code from the great folks at Lullabot:

div.codeblock {
  padding:12px 20px;
  background:#f0f0f0;
  border:solid 1px #ddd;
  border-radius:4px;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  margin:1em 0;
  background:#f0f0f0
  repeat-y;
}
div.codeblock {
  position:relative;z-index:1;
  overflow-x:hidden;
  white-space:nowrap;
  margin:12px 0;
}
mgifford’s picture

mgifford
he/him
Primary language English
commented

Or possibly...

http://www.viget.com/inspire/simple-jquery-solution-to-a-simple-problem/
http://digwp.com/2009/07/making-an-expanding-code-box/

(function ($) {

$(document).ready(function() {
  $("pre").hover(
    function () {
      $(this).animate({ width: "950px"}, 250, function() { $(this).css('overflow-x', 'visible'); });
    },
    function () {
      $(this).css('overflow-x', 'hidden').animate({ width: "630px" }, 250);
    }
  );
});

})(jQuery);
cameron tod’s picture

cameron tod commented
Assigned: Unassigned » cameron tod

I like this. Taking a look.

cameron tod’s picture

cameron tod commented

I have got this working locally, but in Drupal 7, the default packaged themes all wrap code in codefilter blocks, so the whole thing is a bit moot.

I might still backport for D6, and I might have a look at setting this as a configurable option. When on, codefilter would disable wrapping for code blocks, and attach the JS.

cameron tod’s picture

cameron tod commented
Status: Active » Fixed

I have added this functionality. You can see a demo of it here:

http://camerontodtest.devcloud.acquia-sites.com/node/6

There is now a configurable option on the codefilter settings, which allows you to enable Javascript expansion:

http://f.cl.ly/items/0B230C0t2a3b3b0l2G2E/Screen%20Shot%202012-12-15%20a...

Let me know if this suits, and please test it if you can!

cameron tod’s picture

cameron tod commented
Title: Looking for Lullabot style javascript animation » Expand codeblocks to fit long-lines in with Javascript
cameron tod’s picture

cameron tod commented
Title: Expand codeblocks to fit long-lines in with Javascript » Expand codeblocks to fit long-lines with Javascript
mgifford’s picture

mgifford
he/him
Primary language English
commented

It doesn't look (to me) like the expansion code is in the demo working. I'm looking at it in Firefox and the code goes way off the screen and a mouse-over does nothing.

Am I missing something? Let me know if you need a screenshot.

Great addition btw to make it configurable.

cameron tod’s picture

cameron tod commented
Status: Fixed » Needs work
cameron tod’s picture

cameron tod commented
Status: Needs work » Needs review

I was trying to be too clever and load the JS/CSS when the text was processed. I have now moved this into the .info file, so it should work. Give it another shot.

http://camerontodtest.devcloud.acquia-sites.com/node/6

mgifford’s picture

mgifford
he/him
Primary language English
commented

It works better, but when I first load the page it still looks wrong. It only behaves properly once there's been a mouseover.

This is in FF on a mac.

cameron tod’s picture

cameron tod commented

So when you say it looks wrong, do you mean that the code breaks out of it's box, and after a hover, it is contained but truncated?

cameron tod’s picture

cameron tod commented

Because if that's the case, I've just pushed a fix :)

Take a look!

mgifford’s picture

mgifford
he/him
Primary language English
commented

That works great.. Looks good!

cameron tod’s picture

cameron tod commented
Status: Needs review » Fixed
Issue tags: +Needs tests

Great! This is all committed on the dev branch. I'm gonna try and clear out the bug queue a bit more and write some tests. Once that is all done, there will be a 1.1 release, which this will be a part of.

cameron tod’s picture

cameron tod commented
Issue tags: -Needs tests

Tests are now added.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.