Showing posts with label extension. Show all posts
Showing posts with label extension. Show all posts

Tuesday, May 12, 2009

finished the extension

Here is the extension:https://addons.mozilla.org/zh-CN/firefox/addon/11911

var highlightbloggercode = {
onLoad: function(event){
this.initialized = true;
this.codeTypes = 'bsh,c,cc,cpp,cs,csh,cyc,cv,htm,html,java,js,m,mxml,perl,pl,pm,py,rb,sh,xhtml,xml,xsl';
this.oPrefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");

var doc = event.originalTarget;
if (!doc || doc == null || doc.location == null)
return;
var href = doc.location.href;
var reg = /^http:\/\/www\.blogger\.com\/post-(create|edit)\.g\?blogID=/i;
if (href && href.match(reg)) {
var _this = this;
// wait for the richedit load completed.
setTimeout(function(){
new _this.AddCode(window.content, window.content.document);
}, 1000);
}
},
AddCode: function(win, doc){
this.win = win;
this.doc = doc;
this.btn = null;
this.btnId = '_height_code_btn';
this._codeDiv = null;
this.langs = [];

this.addBtn();
},
initOptions: function(){
try {
var types = this.oPrefs.getCharPref('highlightbloggercode.code.type');
document.getElementById('code-type').value = types;
}
catch (e) {
document.getElementById('code-type').value = this.codeTypes;
}
},
saveOptions: function(){
var types = document.getElementById('code-type').value;
this.oPrefs.setCharPref('highlightbloggercode.code.type', types);
}
};
highlightbloggercode.AddCode.prototype = {
addBtn: function(){
try {
this.btn = this.doc.getElementById(this.btnId);
if (!this.btn) {
var input = this._create('input');
input.type = 'button';
input.id = this.btnId;
input.value = "Code";
this.doc.getElementById('htmlbar_Buttons').appendChild(input);
this.btn = input;
var _this = this;
var handler = function(){
_this._doAddCode();
}
this.btn.addEventListener('click', handler, false);
}
}
catch (e) {
alert(e);
}
},
_doAddCode: function(){
try {
var div = this._create('div');
this._setStyle(div, 'font-size: 12px;border: 2px solid green;-moz-border-radius: 10px;padding: 5px;position: fixed;background: #f0f0f0;z-index:999;top:-5000px;');

div.appendChild(document.createTextNode('Paste your code here'));
div.appendChild(this._create('br'));

// textarea
var textarea = this._create('textarea');
this._setStyle(textarea, "font-size: 12px;font-family: 'Courier New', Courier, monospace;");
div.appendChild(textarea);

// paste code button
var input = this._create('input');
input.type = 'button';
input.value = 'OK';
div.appendChild(input);
var _this = this;
var handler = function(){
_this._doPasteCode();
}
input.addEventListener('click', handler, false);

// options for code type
var types = highlightbloggercode.codeTypes;
try {
var types = highlightbloggercode.oPrefs.getCharPref('highlightbloggercode.code.type');
}
catch (e) {
}

this.langs = types.replace(/[,\s]+/g, ',').split(',');


var select = this._create('select');
for (var i = 0; i != this.langs.length; ++i) {
var opt = this._create('option');
opt.value = opt.text = this.langs[i];
select.appendChild(opt);
}
div.appendChild(select);

// close button
input = this._create('input');
input.type = 'button';
input.value = 'close';
div.appendChild(input);
handler = function(){
_this._marker.parentNode.removeChild(_this._marker);
_this._codeDiv.parentNode.removeChild(_this._codeDiv);
}
input.addEventListener('click', handler, false);


// create a marker
var marker = this._create('div');
this._setStyle(marker, 'position: fixed;top:0;left:0;background: black; opacity: .4;z-index:998;');

this.doc.getElementsByTagName('body')[0].appendChild(marker);
this.doc.getElementsByTagName('body')[0].appendChild(div);

// update the div position
var w = 600;
var h = 340;
var maxW = window.content.window.innerWidth;
var maxH = window.content.window.innerHeight;
if(w > maxW) w = maxW - 40; // div padding
if(h > maxH) h = maxH - 80;
textarea.style.width = w + 'px';
textarea.style.height = h + 'px';
div.style.top = parseInt((maxH - h)/3) + 'px';
div.style.left = parseInt((maxW - w)/2) + 'px';

marker.style.width = maxW + 'px';
marker.style.height = maxH + 'px';

this._marker = marker;
this._codeDiv = div;
}
catch (e) {
alert(e);
}
},
_doPasteCode: function(){
try {
var code = this._codeDiv.getElementsByTagName('textarea')[0].value;
var type = this._codeDiv.getElementsByTagName('select')[0].value;
this._codeDiv.parentNode.removeChild(this._codeDiv);
this._marker.parentNode.removeChild(this._marker);
this._pasteCode(code, type);
}
catch (e) {
alert(e);
}
},
_pasteCode: function(code, type){
try {
var src = ['<code class="prettyprint lang-' + type + '">', this._encode(code), '</code>'];
var str = 'javascript:Textbar.wrapSelection(\'\', \'' + this._convert(src.join("\n")) + '\')';
this.win.location.href = str;
}
catch (e) {
alert(e);
}
},
_encode: function(str){
str = str.replace(/&/g, '&amp;');
str = str.replace(/</g, '&lt;');
str = str.replace(/>/g, '&gt;');
str = str.replace(/</g, '&lt;');
str = str.replace(/\t/g, ' ');
str = str.replace(/(\r\n|\n)/g, '\n');
return str;
},
_convert: function(str){
str = str.replace(/(['\\])/g, '\\$1');
str = str.replace(/\n/g, '\\n');
return str;
},
_create: function(tag){
return this.doc.createElement(tag);
},
_setStyle: function(ele, style){
var ss = style.split(';');
for(var i=0; i != ss.length; ++i) {
var maps = ss[i].split(':');
if(maps.length < 2) continue;
var key = maps[0];
var val = maps[1];
var _key = '';
for(var k=0; k != key.length; ++k) {
if (key.charAt(k) == '-') {
++k;
_key += key.charAt(k).toUpperCase();
} else {
_key += key.charAt(k);
}
}
_key = _key.replace(/(^\s+|\s+$)/, '');
val = val.replace(/(^\s+|\s+$)/, '');
ele.style[_key] = val;
}
}
}
window.addEventListener("DOMContentLoaded", function(e){
highlightbloggercode.onLoad(e);
}, false);

firefox extension for blogger, quick paste code to your post

OK, I'm a little lazy. It take my whole afternoon for this tool, only 160 line codes. Because I forget how to execute the js code on a web page via extension. At last I found the solution in Javascript Shell , it change the location.href = 'javascript:...'; maybe I did this before, but I don't know whether it's a good idea.
Maybe you know google blogger doesn't support code highlight, thanks for pretty print, we can post our beautiful code (how to use see here plz), but it's a little troublesome you need to modify the html code, and add to surrond it, the nightmare is you cannot post html code (there is another tool for u to hightlight your html code, see ASH).
This small tool add a button "Code" in the normal mode, you can paste code in your posts conveniently.
A little more work should be done: user auto customize the code type they frequently use.
Maybe the window for us to paste code could be look better.
bugs I haven't found.
now, I don't know how to share this tool...

var highlightbloggercode = {
onLoad: function(event){
this.initialized = true;
var doc = event.originalTarget;
if (!doc || doc == null || doc.location == null)
return;
var href = doc.location.href;
var reg = /^http:\/\/www\.blogger\.com\/post-(create|edit)\.g\?blogID=/i;
// reg = /^http:\/\/127\.0\.0\.1/i;
if (href && href.match(reg)) {
// alert(href);
// doc.location.href = 'javascript:bar()';
// return ;
if(!window._a) window._a = [];
window._a.push(event);
this.win = window.content.window;
this.doc = window.content.document;

var _this = this;
setTimeout(function() {
new _this.AddCode(window.content, window.content.document);
}, 1000);
}
},
AddCode: function(win, doc) {
this.win = win;
this.doc = doc;
this.btn = null;
this.btnId = '_height_code_btn';
this._codeDiv = null;

this.langs = ['*', 'cpp', 'js', 'html'];
this.addBtn();
}
};
highlightbloggercode.AddCode.prototype = {
addBtn: function(){
try {
this.btn = this.doc.getElementById(this.btnId);
if (!this.btn) {
var input = this._create('input');
input.type = 'button';
input.id = this.btnId;
input.value = "Code";
this.doc.getElementById('htmlbar_Buttons').appendChild(input);
this.btn = input;
var _this = this;
var handler = function(){
_this._doAddCode();
}
this.btn.addEventListener('click', handler, false);
}
} catch(e) {
alert(e);
}
},
_doAddCode: function() {
try {
var div = this._create('div');
div.style.position = 'fixed';
div.style.top = '100px';
div.style.left = '100px';
div.style.zIndex = 999;
div.style.width = '500px';
div.style.height = '300px';
div.style.padding = '10px';
div.style.border = '2px solid green';
div.style.background = '#f0f0f0';

// textarea
var textarea = this._create('textarea');
textarea.style.width = '480px';
textarea.style.height = '240px';
div.appendChild(textarea);

// paste code button
var input = this._create('input');
input.type = 'button';
input.value = 'OK';
div.appendChild(input);
var _this = this;
var handler = function(){
_this._doPasteCode();
}
input.addEventListener('click', handler, false);

// options for code type
var select = this._create('select');
for (var i = 0; i != this.langs.length; ++i) {
var opt = this._create('option');
opt.value = opt.text = this.langs[i];
select.appendChild(opt);
}
div.appendChild(select);

// close button
input = this._create('input');
input.type = 'button';
input.value = 'close';
div.appendChild(input);
handler = function() {
_this._codeDiv.parentNode.removeChild(_this._codeDiv);
}
input.addEventListener('click', handler, false);

this.doc.getElementsByTagName('body')[0].appendChild(div);
this._codeDiv = div;
}catch(e) {
alert(e);
}
},
_doPasteCode: function() {
try {
var code = this._codeDiv.getElementsByTagName('textarea')[0].value;
var type = this._codeDiv.getElementsByTagName('select')[0].value;
this._codeDiv.parentNode.removeChild(this._codeDiv);
this._pasteCode(code, type);
}catch(e) {
alert(e);
}
},
_pasteCode: function(code, type) {
try {
var src = ['<code class="prettyprint lang-' + type + '">', this._encode(code), '</code>'];
var str = 'javascript:Textbar.wrapSelection(\'\', \'' + this._convert(src.join("\n")) + '\')';
this.win.location.href = str;
}catch(e) {
alert(e);
}
},
_encode: function(str) {
str = str.replace(/&/g,'&amp;');
str = str.replace(/</g,'&lt;');
str = str.replace(/>/g,'&gt;');
str = str.replace(/</g,'&lt;');
str = str.replace(/\t/g, ' ');
str = str.replace(/(\r\n|\n)/g, '\n');
return str;
},
_convert: function(str) {
str = str.replace(/(['\\])/g, '\\$1');
str = str.replace(/\n/g, '\\n');
return str;
},
_create: function(tag) {
return this.doc.createElement(tag);
}
}
//DOMContentLoaded
window.addEventListener("DOMContentLoaded", function(evt){
try {
highlightbloggercode.onLoad(evt);
}catch (e) {
alert(e);
}
}, false);