In our previous installment we looked at setting our backend up so it could automatically retrieve the bit.ly URL for a given URL and store it as part of the data for a given instance of a Content model. What we're going to do this time is take a look at the front end components.
Sometimes I find that doing things backwards can actually make things a little more clear. That way you can see the end result and then, as you work backwards, see how all the pieces work together.
With that in mind, let's start with our view code, since that's the most important part of the whole thing. The first thing we are going to do is define our HTML.
<div id="sliderMessage">Message is previewed before it is sent</div>
<div id="sliderContainer">
<div id="slider" style="width: 80%; margin: auto;"></div>
<div style="width: 191px; margin-right: 40px;">
<div id="customTwitterMessage">
<textarea id="twitterMessage" name="twitterMessage"></textarea>
<font size="1">(Maximum characters: 140)
You have characters left.</font>
</div>
<div id="kudoTweetButton">
<a href="" target="_blank"><span style="color: white;">Tweet!</span></a></div>
<div class="kudos" id="slider-5" style="display: block;">Great Post!</div>
<div class="kudos" id="slider-4">Good Post</div>
<div class="kudos" id="slider-3">Decent Post</div>
<div class="kudos" id="slider-2">Didn't Like</div>
<div class="kudos" id="slider-1">Not Good</div>
</div>
</div>
<div id="sliderThanks">Thanks!</div>
There are a few elements in here. The first is the slider with the ID of "slider". The slider allows you to choose how high you want to rate the individual posting. After that we have some code for writing custom Twitter messages if the review is really low. It has the requisite 140 character limitation on it. That is relatively simple to do, so I won't go into counting the characters.
Below that is the Tweet button. It floats to the right, so it is printed before our ratings. After that are DIV tags that contain the individual messages. They all have an ID that corresponds to the value of the slider and are all hidden, to start out with, except for "slider-5". As the slider moves, each box will be displayed.
We have a couple of page-specific JavaScript variables that we need to have. None of them are "required" to do this, but they are what makes it a little more automated. All of the view script values are set in a controller.
var currentSlider = 5;
var twitterUser = "<php echo $this->twitterUser ?>";
var bitLy = "<php echo $this->content->getBitly() ?>";
$tags = array();
foreach ($this->content->getTags() as $t) {
$t = (string) $t;
$tags[] = '#' . preg_replace('/[W_]/', '', $t);
}
?>
var contentTags = ;
var twitterText = "";
currentSlider is the default value for the rating. twitterUser is for if you rate a posting badly you can mention the Twitter user instead of just saying it sucked. In other wordsd, it gives them a chance to redeem themselves. bitLy is the variable that contains the bit.ly URL that we had before. After that we echo out all of the tags that we have, but making them a little friendlier to Twitter but removing an non-white space and the underscore, since tags on Twitter generally don't have underscores. It also adds the hash on the front of each tag. They are then rendered as JSON because that's the easiest way to pass the information to the JavaScript in the view. twitterText contains the full message that will be sent.
Speaking of twitterText we need to be able to set it. That is done via the writeNormalTwitterMessage() function. Is there an "abnormal" Twitter message? Yep, but we'll look at that later.
function writeNormalTwitterMessage()
{
$("#customTwitterMessage").hide();
count = 0;
twitterText = $("#slider-" + currentSlider).text() + " " + bitLy + " ";
while (twitterText.length < 140 && count < contentTags.length
&& twitterText.length + contentTags[count].length < 140) {
twitterText += " " + contentTags[count++];
}
twitterText = escape(twitterText);
}
Because this function is only called when the slider is moved, the custom message box is first hidden. It is only used for non-kudos. Then it takes the value of the currently selected DIV element and starts the string with that value, appending the bit.ly value to the end of it. Then it iterates over a loop, adding the tags that we had created previously until we reach the 140 character limit or run out of tags. Then we escape that value and store it on the twitterText varialbe.
Now we have to implement the functionality in the slider so that when we slide it, it is able to actually set the message in the function we had just defined.
if (twitterUser && bitLy) {
$("#slider").slider({
min: 1,
max: 5,
value:5,
slide: function(event, ui) {
$("#slider-" + currentSlider).hide();
$("#slider-" + ui.value).show();
currentSlider = ui.value;
if (ui.value >= 3) {
writeNormalTwitterMessage();
} else {
if (ui.value == 1 ) {
$("#twitterMessage").val("@" + twitterUser + " " + bitLy + " wasn't good because ");
} else {
$("#twitterMessage").val("@" + twitterUser + " I didn't like " + bitLy + " because ");
}
setTwitterMessageLength();
$("#customTwitterMessage").show();
}
}
});
writeNormalTwitterMessage();
}
It looks like a bunch of code, but it's not. What we do is bind to the slider and use some JSON to configure it. We set the min as 1, the max as 5 and the default value as 5, or fully awesome kudos. Then, for the slide event we define our functionality. We first hide the previous slider caption DIV and then show the new one, resetting the previous value for the new one so we can hide it when we slide it again. Then we check the value of the slider that was passed. If it is greater or equal to 3 then the author did a good job and all we want to do is post the kudos. If the value is 2 or 1, we want to give the author the chance to redeem him, or herself. So we set it to give you a text box.
The last thing to do from this side is to actually submit the text. However, Twitter, for very good reasons, does not allow a web page to kick off some JavaScript and post a status update. Otherwise you'd be seeing Twitter accounts being used as a spambot the likes of which you have never seen. You could do it via an API, but your blog post isn't so important that someone will grant your website permission to do anything for them. So, to post this to Twitter, rather than using a form, we simply present a URL to be clicked on. And the way we present that is via this code.
$("#kudoTweetButton").mouseover(function(){
url = "http:///home?status="+twitterText;
$("#kudoTweetButton a").attr("href", url);
});
What this does is set the href attribute to our twitterText value so that when the user clicks on it they will be brought to the Twitter page with kudos pre-populated. It will look something like this.
The Twitter user then clicks "update" and the kudo is delivered.
Try it yourself a little bit and see what you think.
Comments
No comments yet...