Long time lurker, first time asker.
I am currently writing a custom theme for Tumblr blogs to embed a widget after every post, regardless of their type. This widget requires the post's title, and if there is none, then it takes the blog's title.
According to Tumblr, {Title} refers to the blog title. However, if we have a Text post or a Chat post, {Title} refers to the post title.
Here is my code:
var title;
if ('{PostType}' === 'text' || '{PostType}' === 'chat')
title = '{Title}';
else if ('{PostType}' === 'photo' || '{PostType}' === 'photoset' || '{PostType}' === 'audio' || '{PostType}' === 'video')
title = '{PlaintextCaption}';
else if ('{PostType}' === 'quote')
title = '{PlaintextQuote}';
else if ('{PostType}' === 'link')
title = '{PlaintextName}';
else if ('{PostType}' === 'answer')
title = '{PlaintextQuestion}';
if (title === '')
title = '{Title}';
If I have a Photo post with no caption for example, then title will be correctly set to the blog title. But if I have a Text post with no title, then title will be set to [empty string] instead of the blog title.
So my question is: how can I get the blog title when I am inside of a Text or Chat post?
What you can do is set the blog title as a variable before you enter into your {block:Posts}. So in your <head>, you can do this:
var blogTitle = '{Title}';
Then modify your code like this:
var title;
if ('{PostType}' === 'text' || '{PostType}' === 'chat')
title = blogTitle;
else if ('{PostType}' === 'photo' || '{PostType}' === 'photoset' || '{PostType}' === 'audio' || '{PostType}' === 'video')
title = '{PlaintextCaption}';
else if ('{PostType}' === 'quote')
title = '{PlaintextQuote}';
else if ('{PostType}' === 'link')
title = '{PlaintextName}';
else if ('{PostType}' === 'answer')
title = '{PlaintextQuestion}';
if (title === '')
title = '{Title}';
Also, be careful, as {PostType} will never == 'photoset'. Photoset post types always come out as 'photo'. What I usually do to counter that when making class names is this:
class="type-{PostType}{block:Photoset}set{/block:Photoset}
...and the output will be class="type-photoset".
Related
I believe my if/else statements are not running and end up not making the changes to the elements I target. When I run it, I believe the parent element is not being called correctly for the first function. For the second function, it is stating that it's not a node?
Function expandArticleBody()
Find the article in which the button that was clicked belongs.
If the text on the button that was clicked is a V, then set the display property of the article's body to none. Also set the text on the button to >.
If the text on the button that was clicked is not a V, then set the display property of the article's body to block. Also set the text on the button to V.
function highlightArticle()
Find the article in which the button that was clicked belongs.
If the text on the button is +, then add the .highlight class to the article and set the text on the button to -.
If the text on the button is not +, then remove the .highlight class from the article and set the text on the button to +.
function expandArticleBody() {
const allBtns = document.querySelectorAll(".expand_button");
allBtns.forEach((btn) => {
btn.addEventListener("click", (event) => {
let parent = event.target.parentElement;
let text = event.target.innerHTML;
if(text !== "V"){
parent.style.display = "block";
event.target.innerHTML = "V";
} else if(text == "V"){
parent.style.display = "none";
event.target.innerHTML = ">";
}
});
});
}
function highlightArticle() {
const highlight = document.querySelectorAll(".highlightBtn");
highlight.forEach((btn) => {
btn.addEventListener("click", (event) => {
let text = event.target.innerHTML;
if(text == "+"){
event.target.classList.add(".highlight");
event.target.innerHTML = "-";
} else if(text !== "+"){
event.target.classList.remove(".highlight");
event.target.innerHTML = "+";
}
});
});
}
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editorUrdu"></textarea>
<script>
CKEDITOR.plugins.addExternal( 'easykeymap', '/ckeditor/plugins/easykeymap', 'plugin.js' );
CKEDITOR.replace( 'editorUrdu',{
extraPlugins: 'easykeymap',
contentsLangDirection: 'rtl'
});
</script>
</body>
</html>
/**
* This work is mine, and yours. You can modify it as you wish.
* #Author: Roni Saha<roni.cse#gmail.com>
*
* This source file is subject to the MIT license that is bundled
* with this source code in the file LICENSE.
*/
CKEDITOR.plugins.add('easykeymap',
{
requires : ['wysiwygarea'],
init: function (editor) {
//var keyMaps = CKEDITOR.tools.extend({}, editor.config.easykeymaps || {}, true);
//Not using keymap specification from config variables, but using internally defined ones from param below
function isRegisteredKeystroke(code) {
if(typeof editor.keystrokeHandler.keystrokes[code] != 'undefined') {
console.warn("the keystroke : " + code + " is being attached to another event")
return true;
}
return false;
}
var sm1 = []; var en1 = [];
sm1[192]="؏"; en1[192]="~";
sm1[49]="۱"; en1[49]="1";
sm1[50]="۲"; en1[50]="2";
sm1[51]="۳"; en1[51]="3";
sm1[52]="۴"; en1[52]="4";
sm1[53]="۵"; en1[53]="5";
sm1[54]="۶"; en1[54]="6";
sm1[55]="۷"; en1[55]="7";
sm1[56]="۸"; en1[56]="8";
sm1[57]="۹"; en1[57]="9";
sm1[48]="۰"; en1[48]="0";
sm1[189]="-"; en1[189]="-";
sm1[187]="="; en1[187]="=";
//sm1[8]=""; en1[8]="";//BACKSPACE
var sm2 = []; var en2 = [];
sm2[9]=""; en2[9]="";//TAB
sm2[81]="ق"; en2[81]="Q";
sm2[87]="و"; en2[87]="W";
sm2[69]="ع"; en2[69]="E";
sm2[82]="ر"; en2[82]="R";
sm2[84]="ت"; en2[84]="T";
sm2[89]="ے"; en2[89]="Y";
sm2[85]="ء"; en2[85]="U";
sm2[73]="ی"; en2[73]="I";
sm2[79]="ہ"; en2[79]="O";
sm2[80]="پ"; en2[80]="P";
sm2[219]="'"; en2[219]="{";
sm2[221]="ﷲ"; en2[221]="}";
sm2[220]="÷"; en2[220]="\\";
var sm3 = []; var en3 = [];
//sm3[20]=""; en3[20]="";//CAPSLOCK
sm3[65]="ا"; en3[65]="A";
sm3[83]="س"; en3[83]="S";
sm3[68]="د"; en3[68]="D";
sm3[70]="ف"; en3[70]="F";
sm3[71]="گ"; en3[71]="G";
sm3[72]="ح"; en3[72]="H";
sm3[74]="ج"; en3[74]="J";
sm3[74]="ک"; en3[75]="K";
sm3[76]="ل"; en3[76]="L";
sm3[186]="؛"; en3[186]=":";
sm3[222]=","; en3[222]="\"";
sm3[13]=""; en3[13]="";//ENTER
var sm4 = []; var en4 = [];
//sm4[16]=""; en4[16]="";//SHIFT
sm4[90]="ز"; en4[90]="Z";
sm4[88]="ش"; en4[88]="X";
sm4[67]="چ"; en4[67]="C";
sm4[86]="ط"; en4[86]="V";
sm4[66]="ب"; en4[66]="B";
sm4[78]="ن"; en4[78]="N";
sm4[77]="م"; en4[77]="M";
sm4[188]="،"; en4[188]="<";
sm4[190]="۔"; en4[190]=">";
sm4[191]="/"; en4[191]="?";
sm4[16]=""; en4[16]="";//SHIFT
var keyBoard = {};
keyBoard.Row1 = { "sm" : sm1, "en" : en1 };
keyBoard.Row2 = { "sm" : sm2, "en" : en2 };
keyBoard.Row3 = { "sm" : sm3, "en" : en3 };
keyBoard.Row4 = { "sm" : sm4, "en" : en4 };
function getMappedCharacter(code) {
console.info(code);
if (typeof keyBoard.Row1.sm[code] != 'undefined')
return keyBoard.Row1.sm[code]
else if (typeof keyBoard.Row2.sm[code] != 'undefined')
return keyBoard.Row2.sm[code]
else if (typeof keyBoard.Row3.sm[code] != 'undefined')
return keyBoard.Row3.sm[code]
else if (typeof keyBoard.Row4.sm[code] != 'undefined')
return keyBoard.Row4.sm[code]
else
return false;
}
editor.on( 'key', function( event ) {
var t = event.target;
var mappedCode = getMappedCharacter(event.data.keyCode);
if (mappedCode !== false && !isRegisteredKeystroke(event.data.keyCode)) {
event.cancel();
if(typeof mappedCode == 'function') {
return mappedCode.call(editor, editor);
}
editor.insertText(mappedCode);
}
} );
}
});
I'm using ckeditor for allowing my users to input Urdu text. Like Arabic, Urdu is cursive, and uses distinct ligatures when joined.
I'm using the
editor.on( 'key', function( event ))
event to intercept the
event.data.keyCode
and replace it using
editor.insertText()
function.
So, e.g. if the user types L and A, I replace it with the Urdu
ا (U+0627)
and
ل (U+0644).
Now, after being typed, they both appear as distinct characters, separate from each other. I can press space, or enter, and they both remain as they are. But I would like them to be replaced with their proper equivalent ligature ﻻ which is FEFB in this unicode chart
I see that ckeditor automatically correct this if I switch to Source view. There, inside the <p> block, it shows the separate, disjointed letter's already replace with proper cursive ligature. And it keeps it that way when I switch back from Source view. But whatever is causing this to happen, how can I trigger that to happen while typing?
Attaching images also.
After typing
After going to source view
After returning from source view
When ever you type L and A , editor.insertText() is just append it as two separate stings, instead of combining into one.
<p>"ل"
"ا"
<br>
</p>
that why its not producing desired output.
Added these two line
var $pTag = editor.getSelection().getRanges()[0].startContainer.$; // accessing the p tag
$pTag.innerText = $pTag.innerText+mappedCode; // modifing the inner text
replacing
editor.insertText(mappedCode); // in editor.on( 'key', function( event )
will output as "لا"
above fix has some issues to deal with like linebeak(new line)
Updated
replace the below snippet
var $pTag = editor.getSelection().getRanges()[0].startContainer.$;
var innerText =$pTag.innerText; // accessing the p tag data
$pTag.innerText = ""; // removing the existing data
editor.insertHtml(innerText+mappedCode); // concat with new string
with
editor.insertText(mappedCode); // in editor.on( 'key', function( event )
Example: codepen
The innerHTML I'm inserting doesn't show up on the browser until I resize the window. Here's the site I'm having the problem on: http://www.granthpark.me/outside
<h1 id="mainz">
<script>
jQuery(document).ready(function($) {
$.ajax({
url : "http://api.wunderground.com/api/c1ea49b3e06dc3b3/geolookup/conditions/q/CA/San_Francisco.json",
dataType : "jsonp",
success : function(parsed_json) {
var weather = parsed_json['current_observation']['weather'];
console.log(weather);
if (weather == "Patches of Fog" || weather == "Shallow Fog" || weather == "Partial Fog" || weather == "Overcast" || weather == "Clear" || weather == "Partly Cloudy" || weather == "Mostly Cloudy" || weather == "Scattered Clouds" || weather == "Light Mist" || weather == "Heavy Mist") {
document.getElementById("mainz").innerHTML = "The weather at Outside Lands is OKAY!";
}
else {
document.getElementById("mainz").innerHTML = "The weather at Outside Lands sucks right now.";
}
}
});
});
</script>
</h1>
<p id="weather" style="font-size:30px;">
<script>
jQuery(document).ready(function($) {
$.ajax({
url : "http://api.wunderground.com/api/c1ea49b3e06dc3b3/geolookup/conditions/q/CA/San_Francisco.json",
dataType : "jsonp",
success : function(parsed_json) {
var location = parsed_json['location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
var weather = parsed_json['current_observation']['weather'];
document.getElementById("weather").innerHTML = "Current temperature in " + location + " is " + temp_f + "°" + "F" + " and it's " + weather.toLowerCase() + ".";
}
});
});
</script>
</p>
Here's my CSS in case: http://www.granthpark.me/assets/css/main.css
Strange behaviour indeed.
It seems to come from your #wrapper stylesheet :
remove the position:fixed or replace it to position:absolute and it seems to work.
Don't clearly know why though, since your css is quite complicated.
It works for me in Crome and Firefox, but if you don't find a better solution you could try adding this line $(window).trigger('resize'); to the ajax success functions after modifying innerHTML.
I'm trying to write my own CodeMirror mode as documented here.
My objective is to change the color of specific keywords. For example, any "aaa" word needs to be red and any "bbb" word needs to be blue. Any other words need to have the default color.
This is my unsuccessful attempt (see jsfiddle). How to make this work?
HTML:
<textarea rows="4" cols="30" id="cm" name="cm">aaa bbb ccc</textarea>
CSS:
.style1 { color: red; }
.style2 { color: blue; }
Javascript:
CodeMirror.defineMode("mymode", function() {
return {
token: function(stream,state) {
if (stream.match("aaa") ) {
console.log("aaa found");
while ((ch = stream.next()) != null)
if (ch == " " && stream.next() == " ") break;
return "style1";
}
else if (stream.match("bbb") ) {
console.log("bbb found");
while ((ch = stream.next()) != null)
if (ch == " " && stream.next() == " ") break;
return "style2";
}
else
return null;
}
};
});
var editor = CodeMirror.fromTextArea(document.getElementById('cm'), {
mode: "mymode",
lineNumbers: true
});
You had two problems.
CodeMirror prefixed cm- to classes used to style tokens. The styles in your CSS have to account for that.
You were skipping the rest of the line after finding "aaa" or "bbb", althrough your description of your goal sounds like you didn't want to do that.
I've fixed both in the jsfiddle. You may also want to only match full words (currently fooaaabar also has aaa highlighted). To do that, first have your tokenizer read a whole word (stream.eatWhile(/\w/)), and then see if the resulting word is one of the words you are looking for (stream.current() == "aaa").
In WYSIHTML5 editor, when we add unordered list, it does not focus on the editable area in the Google Chrome browser. However, it works fine for other options such as bold, italic, etc. I have searched, but have been unable to find a solution for this bug.
In WYSIHTML5 js, search line wysihtml5.commands.insertUnorderedList and further look for
composer.commands.exec("formatBlock", "div", tempClassName);
tempElement = doc.querySelector("." + tempClassName);
isEmpty = tempElement.innerHTML === "" || tempElement.innerHTML === wysihtml5.INVISIBLE_SPACE;
composer.selection.executeAndRestoreSimple(function() {
list = wysihtml5.dom.convertToList(tempElement, "ul");
});
if (isEmpty) {
composer.selection.selectNode(list.querySelector("li"));
}
and comment or remove the condition part like :
composer.commands.exec("formatBlock", "div", tempClassName);
tempElement = doc.querySelector("." + tempClassName);
isEmpty = tempElement.innerHTML === "" || tempElement.innerHTML === wysihtml5.INVISIBLE_SPACE;
composer.selection.executeAndRestoreSimple(function() {
list = wysihtml5.dom.convertToList(tempElement, "ul");
});
//if (isEmpty) {
composer.selection.selectNode(list.querySelector("li"));
//}
It worked for me coz the condition isEmpty = tempElement.innerHTML === "" || tempElement.innerHTML === wysihtml5.INVISIBLE_SPACE; can never become true as we have inserted unordered list and editable area is not blank after that. Good luck..!!