Skip to main content
Topic: Click to expand quote (Read 1253 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Click to expand quote

Reply #15

OK I think the short lines are now sorted.

With quotes I'm sure there are many use cases that could make things misbehave, but this seems like a good start.
Be safe, Be kind, Happy Programing

Re: Click to expand quote

Reply #16

Quote from: Spuds  -  OK I think the short lines are now sorted.

With quotes I'm sure there are many use cases that could make things misbehave, but this seems like a good start.
Short Quote Test
Be safe, Be kind, Happy Programing

Re: Click to expand quote

Reply #17

seems to work fine now:thumbsup: 

 

Re: Click to expand quote

Reply #19

It would be easy to add a re-collapse button. The extra code is pretty insignificant, so might as well have it IMO.

(Swap text via PHP when checkbox is checked, and that triggers uncheck for collapse).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Click to expand quote

Reply #20

In doing some more testing I found a couple of, surprise, surprise, edge cases that needed fixing.  I've updated the code on my local with the changes, and cleaned up some of my left over test code that I had forgotten to remove.
Be safe, Be kind, Happy Programing

Re: Click to expand quote

Reply #21

I just took a quick look at the markup and CSS that is currently running here. I have a suspicion you are making it more difficult than it needs to be.

You are setting the hidden overflow and initial max-height on the blockquote, which I suspect is why you are running into issues with edge cases (particularly given that .quoteheader is currently separate).

My instinct would be to wallop the critter that is best suited to walloping, namely the div.quote-read-more parent element for the whole shebang. If that has the max-height and overflow set on it, any content becomes irrelevant. It will just plain work, regardless of what is nested inside it. "Edge cases" would be no problem.

ETA: Just thought, given the necessity to put the checkbox before the critter you are walloping (for a pure CSS solution) this may be a case where it makes sense to use jQ (or vanilla js) to do the job.

But it could still be done with pure CSS. You'd just need a suitable parent that contained the checkbox and the div.quote-read-more, then all the nested whatevers still get bunged into that.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Click to expand quote

Reply #22

It now wraps the parent quote with the read more markup, which is:
Code: [Select]
<div class="quote-read-more"> .. relative
<div class="quoteheader"></div> .. same as always
<blockquote class="bbc_quote"></blockquote> .. with a max height that is removed on input click
<input type="checkbox" class="quote-show-more"> .. absolute over the blockquote
</div>

nested quotes (if any) inside that parent get the standard
Code: [Select]
<div class="quoteheader"></div> 
<blockquote class="bbc_quote"></blockquote>

The primary issue was detecting when you had a long enough quote, by itself or due to the nested quotes inside, to warrant the parent wrapping.   A single quote was easy but nested quotes are a bit more involved.  Anyway now it will only have that wrap if the quoted text of that outer quote is more than 250 characters (random choice ATM) otherwise its just the same old quote markup we always had.

I can move the max height to the outer div vs the outer blockquote and the input click just overlays the bottom of that, should be easy to test.
Be safe, Be kind, Happy Programing

Re: Click to expand quote

Reply #23

Oi Spudseses,

I remember waffling about simplifying quote markup a while back, but can't find where it was. Anyway, this was what I had in mind. It uses the same basic markup as SMF 2.1, which I think is the most sensible way of doing it. I've bunged all the sources stuff into one file, with the CSS done as comments.

Code: [Select]
<?php
// Current markup (from GitHub).
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_BEFORE => '<div class="quoteheader">' . $txt['quote'] . '</div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
self::PARAM_ATTR_QUOTED => self::OPTIONAL,
),
),
self::ATTR_BEFORE => '<div class="quoteheader">' . $txt['quote_from'] . ': {author}</div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_EQUALS,
self::ATTR_BEFORE => '<div class="quoteheader">' . $txt['quote_from'] . ': $1</div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_QUOTED => self::OPTIONAL,
self::ATTR_PARSED_TAGS_ALLOWED => array(
'url',
'iurl',
),
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
),
'link' => array(
self::PARAM_ATTR_MATCH => '(?:board=\d+;)?((?:topic|threadid)=[\dmsg#\./]{1,40}(?:;start=[\dmsg#\./]{1,40})?|msg=\d{1,40}|action=profile;u=\d+)',
),
'date' => array(
self::PARAM_ATTR_MATCH => '(\d+)',
self::PARAM_ATTR_VALIDATE => 'htmlTime',
),
),
self::ATTR_BEFORE => '<div class="quoteheader"><a href="' . $scripturl . '?{link}">' . $txt['quote_from'] . ': {author} ' . ($modSettings['todayMod'] == 3 ? ' - ' : $txt['search_on']) . ' {date}</a></div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
),
),
self::ATTR_BEFORE => '<div class="quoteheader">' . $txt['quote_from'] . ': {author}</div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),


// Proposed markup (simpler, easier to deal with).
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_BEFORE => '<blockquote><cite>' . $txt['quote'] . '</cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
self::PARAM_ATTR_QUOTED => self::OPTIONAL,
),
),
self::ATTR_BEFORE => '<blockquote><cite>' . $txt['quote_from'] . ': {author}</cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_EQUALS,
self::ATTR_BEFORE => '<blockquote><cite>' . $txt['quote_from'] . ': $1</cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_QUOTED => self::OPTIONAL,
self::ATTR_PARSED_TAGS_ALLOWED => array(
'url',
'iurl',
),
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
),
'link' => array(
self::PARAM_ATTR_MATCH => '(?:board=\d+;)?((?:topic|threadid)=[\dmsg#\./]{1,40}(?:;start=[\dmsg#\./]{1,40})?|msg=\d{1,40}|action=profile;u=\d+)',
),
'date' => array(
self::PARAM_ATTR_MATCH => '(\d+)',
self::PARAM_ATTR_VALIDATE => 'htmlTime',
),
),
self::ATTR_BEFORE => '<blockquote><cite><a href="' . $scripturl . '?{link}">' . $txt['quote_from'] . ': {author} ' . ($modSettings['todayMod'] == 3 ? ' - ' : $txt['search_on']) . ' {date}</a></cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
),
),
self::ATTR_BEFORE => '<blockquote><cite>' . $txt['quote_from'] . ': {author}</cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),

/*
CSS for the proposed new markup would essentially be:

/* ---------------------------- */
/* themes/default/css/index.css */
/* ---------------------------- */

/* The "Quote:" and "Code:" header parts... *//*
.codeheader, blockquote > cite {
font-size: var(--font13);
font-weight: 600;
padding: .2em .4em;
border-bottom: 1px solid;
}

.codeheader {
margin-top: .4em;
border-top: 3px solid;
border-bottom: none;
}

/* [Select] link to copy code. *//*
.codeoperation {
font-weight: normal;
}

/* A quote, perhaps from another post. *//*
blockquote,
/* A code block - maybe PHP ;) - shared styles. *//*
.bbc_code {
font-size: var(--font13);
overflow: auto;
margin: 0 0 1em 0;
padding: .4em .67em;
border: 1px solid;
border-top: none;
}

blockquote {
margin: .4em 0 1em 0;
border: 1px solid;
}

/* ---------------------------- */
/* themes/default/css/light.css */
/* ---------------------------- */

/* The "Quote:" and "Code:" header parts... *//*
.codeheader, blockquote > cite {
color: var(--body_text);
border-color: var(--primary_border);
background: var(--primary_white);
}

*/


// Fancy stuffz from BBCParser.php... (Ant liketh not teh fancy stuffz. :P )
protected function alternateQuoteStyle(array &$tag)
{
// Start with standard
$quote_alt = false;
$first_quote = 0;

foreach ($this->open_tags as $open_quote)
{
if (isset($open_quote[Codes::ATTR_TAG]) && $open_quote[Codes::ATTR_TAG] === 'quote')
{
$quote_alt = !$quote_alt;
$first_quote++;
}
}
if ($first_quote === 0)
{
// First quote (of nested or single) receives a wrapper so its markup will be:
// <div class="quote-read-more"> .. relative
// <input type="checkbox" class="quote-show-more">.. absolute over the blockquote
// <blockquote> .. same as always ... with a max height that is removed on input click
// </div>
$tag[Codes::ATTR_BEFORE] = str_replace('<blockquote>', '<div class="quote-read-more"><input type="checkbox" class="quote-show-more"><blockquote>', $tag[Codes::ATTR_BEFORE]);
$tag[Codes::ATTR_AFTER] = str_replace('</blockquote>', '</blockquote></div>', $tag[Codes::ATTR_AFTER]);
}
else
{
// Nested quotes, located inside the above parent quote
// @NOTE: I might be missing something, but I can't see why you would need anything extra here.
// With the proposed change in quote markup, a simple max-height and hidden overflow on the first quote should deal with all child elements.
}
}

?>
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Click to expand quote

Reply #24

Thanks:cool:

I'll give that new markup a try, but I reserve the option to add in some fancy:hot_pepper:  sauce here and there.  I have a branch with a bunch of theme cleanup (well what I consider cleanup ha) that I can make those changes in. 
Be safe, Be kind, Happy Programing

Re: Click to expand quote

Reply #25

Oh yeah, one bit I forgot. The cites would have to be declared as display: block; in index.css (cites are inline by default).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Click to expand quote

Reply #26

I updated my local with those changes (and a few other tweaks where  .bbc_quote in the css needs to now be blockquote)  Seems to work fine and saves some markup which is good.

I will need to update all of the parse_bbc tests since the output markup has changed.  Also need to check on the editor and wizzy toggling just to make sure nothing got (way) out of wack there.

Question .... as the new markup specifically targets the blockquote tag (as its class-less), any concerns with un-intended spillover?  We could do blockquote class="bbc_quote" as well.
Be safe, Be kind, Happy Programing

Re: Click to expand quote

Reply #27

AFAIK blockquotes are not used in any other context, so the class should not be necessary. Quotes in portal blocks call the same markup and CSS as in standard posts, and even if someone did want an unusual use and/or presentation they should be able to get that with a descendant. SMF 2.1 is just using the tag, sans class, and is fine with that.

But sure, keep the class if you want to. It won't do any harm, particularly if it also means less code to edit. Although I probably wouldn't bother keeping .quoteheader for the cites.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Click to expand quote

Reply #28

QuoteSMF 2.1 is just using the tag, sans class, and is fine with that
You are making a compelling reason to add the class:smiley_cat:
QuoteBut sure, keep the class if you want to. It won't do any harm, particularly if it also means less code to edit. Although I probably wouldn't bother keeping .quoteheader for the cites.
That is pretty much what I did, Uh Huh that's right. 
Be safe, Be kind, Happy Programing

Re: Click to expand quote

Reply #29

Should now be updated with the new markup ....  but not the tests just yet, you know life and all that.
Be safe, Be kind, Happy Programing