Creating comment from admin - disable JQueryRotate in that particular comment

marthajane77

Hi all,

Firstly, apologies if this has been asked before I could not find my answer upon searching.

I have JQueryRotate & rotate90 javascript files, running through the ImageUpload plugin (see thread: http://vanillaforums.org/discussion/24908/image-upload-orientation-changer/p1)
What I want to achieve is for admin to post banner ads in the comments section which will be linked to a company product for that particular category, but I have the JQueryRotate files running (which means when the banner is clicked, even though the link html works, it rotates the banner). I would like to be able to write (in html) those particular comments, either disabling the JQueryRotate or creating a new class - which I have really struggled to make either work). This is if it is even possible.

I am using Vanilla 2.0.18.8. I am using GrayScale Blue custom theme (heavily modified) - http://vanillaforums.org/addon/grayscale+blue-theme.

I can find my way around the files to add/change/adapt, but I am not a coder by any means.

I've already been helped so much by this community, and once the forum is up and running I intend to be making donations (and hopefully plugin contributions once my knowledge increases).

Thanks again,
Lisa.

hgtonight

Do you now what formatter you are using? (E.g. Markdown, Html, BBCode)

marthajane77

html - please

hgtonight

The biggest issue you will run into is that HTMLawed strips out inline declarations by default, if I recall correctly. You want to insert images that are not picked up by your rotate plugin but want to choose which images through some means, and you want to restrict this ability to admins. Is this correct?

Do you have a live site I could check out just to get my head wrapped around your rotating solution?

marthajane77

Sorry, I confused myself just typing out my question!

It doesn't have to be html (the easiest and/or most effective way will be great).
I'm just a little more comfortable using html.

Basically, I am forum admin, and will be posting banner adverts in each model category that I do not want the rotate click function attached to.
It doesn't have to be restricted to admin permissions. It's not secure content.

I would just like to be able to comment with a banner, which so far I have been doing through html.

The live site is http://www.rrcuk.com (I will message you the admin login details & page info).

Thanks @hgtonight, I appreciate your help.

x00

I would make more sense to prevent the event from happening, by excluding your case from the logic.

You might be able to prevent the event from being reached too.

Better solution would to create short tag for you banners or a special type of post, through a plugin.

I expect you are adding these manually for a reason.

marthajane77

Hi @x00,

I am open to whichever works easiest. If it means all images on that particular page cannot rotate then that would not be a problem, as the pages I want this on would tend to have just admin ad banners.

I want to add them manually as I am already using Pockets for my main banner, and the ads I will be posting will be constantly changing (and I would like them to remain on the thread too). The easiest way I could see was to insert the image code into a comment.
But again, I am no expert.

Thankyou.

x00

My view this a usability issue where any image in comments is rotated indiscriminately when clicked on, especially within an anchor.

I would the plugin maker should refine this idea.

hgtonight

EDIT - Please don't use this solution! @peregrine provided a better one below

After looking in to this (thanks for the PM), this is my recommended action.

Use theme hooks to add a class on discussions/comments created by admins and update your jquery selector to not include elements with this class.

In your theme hooks file, add this:

public function DiscussionController_BeforeCommentDisplay_Handler($Sender) {
  $this->_InjectCssClass($Sender);
}

public function PostController_BeforeCommentDisplay_Handler($Sender) {
  $this->_InjectCssClass($Sender);
}

private function _InjectCssClass($Sender) {
  $Object = GetValue('Object', $Sender->EventArguments);
  $CssRoles = $Object ? GetValue('Roles', $Object, array()) : FALSE;
  if(!$CssRoles)
    return;

  foreach($CssRoles as &$RawRole)
    $RawRole = 'role-' . str_replace(' ', '_', strtolower(Gdn_Format::Url($RawRole)));

  if(count($CssRoles))
    $Sender->EventArguments['CssClass'] .= ' ' . implode(' ', $CssRoles);
}

/**
 * Add the insert user's roles to the comment data so we can visually
 * identify different roles in the view.
 */
public function DiscussionController_Render_Before($Sender) {
  $Session = Gdn::Session();
  if($Session->IsValid()) {
    $JoinUser = array($Session->User);
    RoleModel::SetUserRoles($JoinUser, 'UserID');
  }
  if(property_exists($Sender, 'Discussion')) {
    $JoinDiscussion = array($Sender->Discussion);
    RoleModel::SetUserRoles($JoinDiscussion, 'InsertUserID');
    RoleModel::SetUserRoles($Sender->CommentData->Result(), 'InsertUserID');
  }
}

public function PostController_Render_Before($Sender) {
  if(property_exists($Sender, 'CommentData') && is_object($Sender->CommentData))
    RoleModel::SetUserRoles($Sender->CommentData->Result(), 'InsertUserID');
}

public function Setup() {

}

Then modify your /ImageUpload/js/rotate90.js file:

var value = 0;
$( 'li:not("role-administrator") div.Message img').live( "click", function() {
  value +=90;
  $(this).rotate({ animateTo:value})
}); 

NOTE - I couldn't test this on your site, so let me know if that doesn't work. Also, I shamelessly copied the code for your theme hooks file from Role Title by Lincoln. You could use that plugin if you don't mind the roles being inserted by the usernames.

P.S. The rotate90.js code saves the rotation value so all subsequent rotations (even on different images) will rotate by 90 degrees more than the last one. Not sure if you noticed that.

hgtonight

The only issue with my solution is that no images will ever be rotated on click if they are posted by an administrator.

You could modify the jQuery selector to only rotate images that aren't wrapped in a link (a tag).

peregrine

I can't get into your site to see.

x00

all of this is very backwards. /ImageUpload/js/rotate90.js shouldn't rotate on click anyway, that is just poor IMO, they should come up with an interface for rotating images, or make a specific class for uploaded images.

better still rotate in the author interface on the client then do the equivalent on the server and insert the correctly orientated image. or save the orientation to be applied on display.

peregrine

@marthajane77

when inserting image - just use class .norotate

<img class="norotate" alt="image" src="https://us.v-cdn.net/5018160/uploads/userpics/797/n19R2RA82NXE7.jpg">

and change the rotate90

var value = 0
$( 'div.Message img:not(".norotate")' ).live( "click", function() { 
            value +=90;
            $(this).rotate({ animateTo:value})
        });

worked for me.

hgtonight

I thought HTMLawed stripped out classes.

I learn something new everyday!

peregrine

I learn something new everyday!

hg - is that harvard grad

x00

hg is Mercurial SCM

peregrine

@x00 said:
hg is Mercurial SCM

he said he wasn't mercurial in a previous discussion. I'm still trying to guess the meaning of hg, maybe something to do with htmlawed .

vrijvlinder

I think hg is short for high, hightonight and every night after that lol

when inserting image - just use class .norotate

how Brilliant !

peregrine

I'd like to point out this is a model discussion by the OP.

• version mentioned.
• good description
• gratitude expressed
• new post with new issue.

• and a link for reference.

  follow in the footsteps of @marthajane77 and you will be fine.

for new posters let me recommend

http://vanillaforums.org/discussion/23130/forum-post-ettikett-etiquette

http://vanillaforums.org/discussion/17954/food-for-thought-forum-etiquette

marthajane77

Yet again you guys have all given me lots to implement

Thank you!

@peregrine - you're giving me a big head!

marthajane77

Sorry for the delayed reply too, something came up.
I shall let you all know how I get on!
I will try @peregrine's solution first and then yours @hgtonight. I appreciate the hard work you've put in for me.