EaselJS的Shap如何加入mouse over

EaselJS很好用，但不知為什麼想要加入mourse over的事件，弄半天查半天資料，卻一直只能click卻不能mouse over，看半天才發現有底下兩個有關

enableMouseOver();
mouseEnabled = true;

在stage中的item若要mouse over能被偵測到，stage必需要enableMourseOver且mouseEnabled也要打開才行，預設下mouseEnabled是開啟，但enableMourseOver則否，要特別啟動它。所以code如下：

var stage = new createjs.Stage("text");
stage.mouseEnabled = true;
stage.enableMouseOver();
var circle = new createjs.Shape();
circles.on("mouseover", function (evt) {
    var target = evt.target;
    //do something...
});
stage.addChild(circles);
stage.update();

更動滑鼠標示：
target.cursor = "pointer";

參考網址：
EASELJS MOUSE INTERACTION
Mouse event example
TweenLite－Example

使用FB.ui在手機上畫面問題

最近接一個案子，需要在pc及手機上都能用FB.ui來分享文字，不過發現在手機上會有底下的狀況，左邊是android手機，又邊是iOS

看起來有2個問題

1. Layout中的z-index安排
2. 寬高在不同device有不同的顯示方式，但高都用到100%

查了半天資料，大多數的解決方案是

1. 使用fbxml重新定義
2. 直接使用css去控制

解決問題時發現，若是要針對整個對話框做設定，例如z-Index，是一定要用fb_dialog，若是對話框的寬高，就要用FB_UI_Dialog。

/*Facebook UI的對話框整個 */
.fb_dialog{

  z-Index: 99999 !important;

}

/*控制對話框寬高使用底下這個*/
.FB_UI_Dialog {
  width: 320px !important;
}

參考網址：
How to resize Facebook UI dialog
Facebook “Invite” 弹出窗口

FB ui在Loading時一直出現500的error

今天案子放上正式機上，FB.ui就出現無法使用的狀況，可笑的是“只有我和主要設計師不能用”，更可笑的是“我不知道只有我和主要設計師不能用，還一直找bug”，弄半天才有人跟我講，他可以用，我才找朋友測看看，才知道只有我不能用，而我已經將想得到的方法測過一輪了。而這資訊立即讓我想到之前清除Facebook Open Graph快取及測試Facebook分享的畫面，八成是Cache無法清除。趕緊去https://developers.facebook.com/tools/debug/og/object/ 丟入原測試用link清掉，到丟入上線網址清掉，再試一次就沒問題了。

仔細想想造成這問題的原因，八成是底下的幾個狀況

1. 使用同一個appid，但上線前沒改url，發現不對後才改
2. 在開發時就開放此api，上線時沒改url，即使改了url，也可能導致cache住，最好是要先關閉 -> 更改url ->開放
3. 在開發時因為時常在debug，所以ui開一開也沒有關，或上傳錯誤資料到一半就掛掉，造成cache住

下回還是要注意一下，要嘛分開用，要嘛上線前先更動url，要嘛就隨時清cache.....

儲存console.log的特定資料

今天在處理圖檔資料時，一直發現無法取樣到pixel，使用console.log一個個log出來，pixel有兩三十萬筆，一個個print出來資料量太大沒用外，也造成瀏覽器整個delay，畢竟我的需求是想查看Array中資料是否有0以外的資料，我是否有取錯圖檔等，最後想到儲成file再用編輯器看是最快，不過遇到兩個問題

1. 陣列要一個個拿出來print再存？
2. js怎存檔？

第一個問題，可以直接用JSON處理。
第二個問題查了下，看到這篇 How to save the output of a console.log(object) to a file? 就解決了我這兩個需求。這邊做下記錄。

(function(console){

console.save = function(data, filename){

    if(!data) {
        console.error('Console.save: No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }
})(console);

文中也提到，Chrome其實可以直接save，link: Right click > Save as in the Console panel to save the logged messages to a file.

參考資料
How to save the output of a console.log(object) to a file?
A collection of helpful snippets to use inside of browser devtools － console-save.js

稍微強化script_tags防止XSS攻擊

用strip_tags用這麼久才知道，原來它沒法完全去除，雖然還是有些東西可以拿掉，如：onmuouse="alert('text')這類，但script tag拿不掉，很容易就中XSS攻擊，參考了下wordpress中的wp_strip_all_tags的寫法，基本上只是增加了pre_replace這行，至少將style或script的內容拿掉就能阻止大多數的XSS攻擊了。

function strip_all($string){
    $string = preg_replace( '@<(script|style)[^>]*?>.*?</\\1>@si', '', $string );
    $string = strip_tags($string);
    return $string;
}

參考網址：
Function Reference/wp strip all tags