createjs TextField CJK text wrapping support

The TextField of official createjs supports only very basic text wrapping. It sucks when the content is CJK characters like Chinese, Korean & Japanese.

Here you are the workaround:

find the private method p._drawText in createjs (or easeljs for non combinded) and replace with the following code
this code has been well tested with one of my projects for half year

/**
  * Draws multiline text.
  * @method _drawText
  * @param {CanvasRenderingContext2D} ctx
  * @param {Object} o
  * @param {Array} lines
  * @return {Object}
  * @protected
  **/
 p._drawText = function(ctx, o, lines) {
  var paint = !!ctx;
  if (!paint) {
   ctx = Text._workingContext;
   ctx.save();
   this._prepContext(ctx);
  }
  var lineHeight = this.lineHeight || this.getMeasuredLineHeight();

  var maxW = 0,
   count = 0;
  var hardLines = String(this.text).split(/(?:\r\n|\r|\n)/);
  for (var i = 0, l = hardLines.length; i < l; i++) {
   var str = hardLines[i];
   var w = null;

   if (this.lineWidth != null && (w = ctx.measureText(str).width) > this.lineWidth) {
    // text wrapping:
    // hanyeah CJK wrapping
    var words0;
    var words;
    if ((/[\u4e00-\u9fa5]+/).test(str)) { //contains CJK characters
     words0 = str.split(/(\s)/);
     words = [];
     for (var hi = 0; hi < words0.length; hi++) {
      var hs = "";
      for (var hj = 0; hj < words0[hi].length; hj++) {
       var hjs = words0[hi][hj];
       if (hjs.charCodeAt(0) > 255) {
        if (hs != "") {
         words.push(hs);
        }
        words.push(hjs);
        hs = "";
       } else {
        hs += hjs;
       }
      }
      if (hs != "") {
       words.push(hs);
      }
     }
    } else {
     words = str.split(/(\s)/);
    }
    str = words[0];
    w = ctx.measureText(str).width;

    for (var j = 1, jl = words.length; j < jl; j += 1) {
     // Line needs to wrap:
     var wordW = ctx.measureText(words[j]).width;
     if (w + wordW > this.lineWidth) {
      if (paint) {
       this._drawTextLine(ctx, str, count * lineHeight);
      }
      if (lines) {
       lines.push(str);
      }
      if (w > maxW) {
       maxW = w;
      }
      str = words[j];
      w = ctx.measureText(str).width;
      count++;
     } else {
      str += words[j];
      w += wordW;
     }
    }
   }
   //end hanyeah CJK wrapping
   if (paint) {
    this._drawTextLine(ctx, str, count * lineHeight);
   }
   if (lines) {
    lines.push(str);
   }
   if (o && w == null) {
    w = ctx.measureText(str).width;
   }
   if (w > maxW) {
    maxW = w;
   }
   count++;
  }

  if (o) {
   o.width = maxW;
   o.height = count * lineHeight;
  }
  if (!paint) {
   ctx.restore();
  }
  return o;
 };

XAMPP Apache Custom Directory list

To modify the default ugly directory list, normaly we need to modify mod_autoindex and recompile blar blar.

For me, i have no any knowledge of C, such actions will drive me nuts.

We are going to re write the directory using PHP, CSS & HTML. no C knowledge required

Here are the summary of what we'll doing:

1. Config .htaccess file

2. Prepare html assets

3. Hide original Directory output

4. Inject our php code

For easier to explain, i will create everything in root folder (rootFolder)

the default root folder of xampp should be c:/xampp/htdocs/
create a folder (custom_dir) in rootFolder which contains your custom html code
create a .htaccess file in rootFolder and copy the following code

<!-- .htaccess -->

# DIRECTORY CUSTOMIZATION 
<IfModule mod_autoindex.c> 
 # SET INDEX OPTIONS - this enable using FancyIndexing and tell apache we will use our own html to generate the directory list
 IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble

 # SPECIFY HEADER FILE - tell Apache where our header file stores
 HeaderName /custom_dir/header.php 

 # SPECIFY FOOTER FILE - tell Apache where our footer file stores (yes, we use ReadmeName as our footer, since ReadmeName will keep generated at the bottom)
 ReadmeName /custom_dir/footer.html 

 # IGNORE THESE FILES - hide our html asset file in directory list
 IndexIgnore /custom_dir 
</IfModule>
    

create a header.php into custom_dir, we will write our own code to generate the list

<!-- header.php -->   

<?php
$serverRoot = $_SERVER['DOCUMENT_ROOT'];
$cssPath = $serverRoot.'/custom_dir/css.php';

$currentPath = $_SERVER['DOCUMENT_ROOT'].$_SERVER['REQUEST_URI']; //always get the 'current' folder
$dirList = new DirectoryIterator(str_replace('/', '\\', $currentPath)); //just replace front-slash in case there're
?>
 
<html> 
 <head> 
  <title>Directory Title</title>
  
  <!-- make our directory responsive -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <style>
   <?php include_once($cssPath); //hide our system path?> 
  </style>
 </head>

 <body>
  <header>
   <h1>Directory Title</h1>
  </header>

  <div>
   <table class='dirTable'> 
    <tr>
     <th>Name</th>
     <th>Last modified</th>
    </tr> 

    <?php foreach($dirList as $fileInfo): ?>
    <tr class='dirItem'>
     <td> <a href='<?=$fileInfo->getFilename() ?>'><?=$fileInfo->getFilename() ?></a> </td>
     <td> <?=date( "Y-m-d H:i", $fileInfo->getMTime()) ?> </td>
    </tr>
    <?php endforeach; ?>
   </table>
  </div>
    

then create the footer.php and do whatever you like

<!-- footer.php -->
   <footer class='yourFooterClass'>
    YOUR OWN FOOTER HTML CODE
   </footer>
 </body>
</html>
  

next, create css.php, by doing this instead of <link> is to hide the source path

/*the default list is generated by pre, we simply hide this by applying this css rule*/
pre { display:none; !important};

/*then do whatever you like*/ 
  

solve createjs DOMElement responsive

replace the function p._handleDrawEnd in Easeljs with the code below

credits to Ferry Kranenburg
http://stackoverflow.com/questions/27593088/using-domelement-input-text-and-resizing-canvas

p._handleDrawEnd = function(evt) {
  var o = this.htmlElement;
  if (!o) { return; }
  var style = o.style;

  var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix;

  var visibility = props.visible ? "visible" : "hidden";
  if (visibility != style.visibility) { style.visibility = visibility; }
  if (!props.visible) { return; }

  // Change position of domElement
  var stage = this.getStage();        
  var ratio = $(canvas).width() / 1000; //replace the number to your canvas width
  mtx.scale(ratio,ratio);
  mtx.tx = mtx.tx*ratio;
  mtx.ty = mtx.ty*ratio;
  // End change position of domElement

  var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix;
  var n = 10000; // precision

  if (!oldMtx || !oldMtx.equals(mtx)) {
   var str = "matrix(" + (mtx.a*n|0)/n +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n +","+ (mtx.tx+0.5|0);
   style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0) +")";
   style.MozTransform = str +"px,"+ (mtx.ty+0.5|0) +"px)";
   if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); }
   oldProps.matrix.copy(mtx);
  }

  if (oldProps.alpha != props.alpha) {
   style.opacity = ""+(props.alpha*n|0)/n;
   oldProps.alpha = props.alpha;
  }

 };

Solve Error: Version required to extract this entry not supported (788) on SWC

to solve this issue

1. rename your xxxx.swc to xxxx.zip
2. unzip it
3. rezip it
4. rename .zip back to .swc

done~ : D

remove  BOM

http://stackoverflow.com/questions/10290849/how-to-remove-multiple-utf-8-bom-sequences-before-doctype

credits to Jasonhao

//Remove UTF8 Bom

function remove_utf8_bom($text)
{
$bom = pack('H*','EFBBBF');
$text = preg_replace("/^$bom/", '', $text);
return $text;
}

php pass data to include_once() require_once()

The following code shows how to pass params to included files in php
it works also in the following functions:
include()
include_once()
require()
require_once()

application.php

Using an Associative array to carry variables would be an ideal option.

<?php
$m = new Main();

$items = array(
 'name'=> 'John Doe',
 'items'=>array('stone', 'knife', 'card', 'etc...')
);

$m->loadViewWithParams('item_list_view.php', $items);
?>

Main.php
For variables which visibles to the line above the include(), they also visibles to the included file.
We simply create variables just above the include() just the way that many people do so.
Since we've passed an associative array to loadViewWithParams(), we will break the array into variables in runtime.

<?php
class Main {
/**
*
*@param $path string the file path to load.
*@param $params array an associative array which carry data to the loaded file.
*/
  public function loadViewWithParams($path, $params = array()){
    //we use a foreach to parse the array to variables
    foreach ($params as $key => $value ) {
      $$key = $value;
    }

    include_once($path);
  }
}
?>

item_list_view.php
consider the application.php above
the loadViewWithParams() method converted the array into variables
now both $name and $item were passed to the included file

<div>
 <h1>Welcome, <?php echo $name; ?> </h1>
 here are your items
 <ul>
  <?php foreach($myItemList as $item): ?>
  <li><?php echo $item; ?></li>
  <?php endforeach; ?>
 <ul>
</div>

Joomla must-have installation list

This is the list that i find that it is a MUST-HAVE extensions for starting a Joomla project:
(last review: 20th July, 2015)

• K2 (Component, Plugin, Module)
  This is a replacement of original Joomla article system which provide you a more flexible way to create content.
  
  K2 comes with some modules such as k2_content to let you display your k2 items in various way you like.
• Multiple-images-for-k2 (Plugin)
  Default, each k2 items can only insert 1 image, it enables K2 to insert more than 1 image per item.
• Flexi Custom Code (Module)
  It is a complete replacement of the built-in sucky Custom-HTML module. Say goodbye the Custom-HTML module~~. Now you can use php, css and js in your custom module WITHIN THE JOOMLA FRAMEWORK.
  
  As i introduced in my previous article, it saves your life in case of your Joomla project is full of custom requirements which cannot be done in normal way.
  
  
• Fabrik (Component, Plugin, Module)
  Fabrik gives you the power to create forms and tables that run inside Joomla without requiring knowledge of mySQL and PHP.
  
• Blank Component (Component)
  Simply let you create a blank module only section without creating a zero article category
  
  
• Modules Anywhere (Plugin, Editor button plugin)
  With this plugin, you can force display any module to anywhere you like. for example sometimes you would like to force display a module in another location... such as.. k2 Item...
• ACL Manager (paid) (Component)
  The complete replacement of built-in ACL manager. It makes the ACL interface much easier to use. The built-in ACL system is very confuse and hard to use. Although it is not free, it's worth to pay.
• Advanced Module Manager (Component, Plugin)
  A replacement of original module manager. It provide a more detail way to manage your modules. The free version is good enough.
  

i will keep updating this list once i discovered any new useful extensions. Hope those extensions helps you to develop Joomla site

Flexi Custom Code Joomla module

Joomla is good for quick cms project but once the client needs special requirement, welcome to the hell~~. (Yeh actually I'm wandering at the hell now . . . . .)

Im working on a project, for some reason, most of data were not retrieve from K2 items table nor Joomla article table but few another custom tables.

in this case, obviously, non of modules in the world fit our needs.

ok~ in short, the problem is:
1. Our content were not from Joomla Article nor K2 Items (for some reason, dont ask me why)
2. We need to migrate the whole Joomla site's module/plugins to support our content table

The built-in Custom HTML module is a joke. it Just simply STATIC HTML and thats it.

Plugin can extend your joomla site in many ways but you have no way to decide where your plugin should display.

here you're few solutions:

1. 
   

   Modify existing extensions

   Since the data source is not related to K2 items nor Joomla article now, we are free to modify the existing module to migrate our custom table, or simply download any modules with cool effect and ignores if it supports K2 or not.
   
   
   This solution will fits 1 requirement. what if another one? I mean use the same layout with completely different source. Would u like to add N settings in the module xml file or duplicate the module?
   
   
   Also modifying an module will makes the module setting useless since we're no need to/unable to care about them. it makes your module chaos --- What if i need this module to display normal k2 items in future?
   
2. 
   

   Sub-templating the mod_k2_content

   K2 comes with a cool module k2 content.  This module have a complete settings to let you filter your k2 items in whatever you want. and the coolest setting of k2 content is sub-templating.
   
   it lets you create custom layout of K2 items in any way you like
   
   Sounds cool eh? yes it is IF OUR DATA SOURCE ARE FROM K2 ITEMS.
   
   with this solution, you will need to create tons of subtemplates and you will also need to create helpers for each template. And the same cons -- it will ignores all setting of the module because you dont need to use them.
   

3. write your own

   it should be an ideal solution if time is not an issue.
   

so what im going to show you today is:
Flexi Custom Code I can say this is a robust version of built-in Custom HTML
This is a module to let you write your own html, php, js, css
It can use all Joomla classes such as JURI:base(), JFactory::getDBO()
You can even use exit() in this module
(the php include() function seems not work so well in this module)
the only setting of Flexi Custom Code is your source code. Feel free to write your own layout and feel free to call any fancy query and call from any other DB tables
Just think it as you write with plain php page~

Joomla installation hangs solusion

For those who hangs during the joomla installation, here is the solution:

at the <your-site-root>/libraries/joomla/filter/input.php
around line 660

// Convert decimal
//$source = preg_replace('/&#(\d+);/me', "utf8_encode(chr(\\1))", $source); // decimal notation
$source = preg_replace_callback('/&#(\d+);/m', function($m){return utf8_encode(chr($m[1]));}, $source); // decimal notation
  
// Convert hex
//$source = preg_replace('/&#x([a-f0-9]+);/mei', "utf8_encode(chr(0x\\1))", $source); // hex notation
$source = preg_replace_callback('/&#x([a-f0-9]+);/mi', function($m){return utf8_encode(chr('0x'.$m[1]));}, $source); // hex notation

font-weight: bold not works in safari

given CSS

@font-face {

 font-family: Frutiger;

 src: url('../fonts/frutiger_ce_45_light.otf'),

   url('../fonts/frutiger_ce_45_light.ttf') format('truetype'),

   url('../fonts/frutiger_ce_45_light.woff') format("woff"),

   url('../fonts/frutiger_ce_45_light.eot') format('embedded-opentype'),

   url('../fonts/frutiger_ce_45_light.eot?#iefix') format('embedded-opentype');

}



.someBoldFont {

 font-family: Frutiger;

}

<span class="someBoldFont">hello world</span>

you'll notice that the word wont bold in Safari


here are the solution

@font-face {

 font-family: Frutiger;



 /* add this 2 style rule */

 font-weight: normal;

 font-style: normal;

 /* end add */



 src: url('../fonts/frutiger_ce_45_light.otf'),

   url('../fonts/frutiger_ce_45_light.ttf') format('truetype'),

   url('../fonts/frutiger_ce_45_light.woff') format("woff"),

   url('../fonts/frutiger_ce_45_light.eot') format('embedded-opentype'),

   url('../fonts/frutiger_ce_45_light.eot?#iefix') format('embedded-opentype');

}

solve safari weird display when resize problem

the image shows the weired layout display at safari when resizing the html page

it looks totally fuxked up, but the HTML are just fine actually when you select any items on the page, because safari just render the graphic wrongly.

the problem causes is that i used negative z-index in my CSS

to solve it, simply change all negative z-index to >=0

php email 標題 主旨 寄件者 亂碼問題

<?php
function emailEncode($str) {
  return "=?UTF-8?B?".base64_encode($str)."?=";
}

$subject = emailEncode("hello world");
$sender = emailEncode("littleshell");
?>

2345 hao123 hijack solusion

小弟早排被萬惡的2345.com 綁架了
2345.com是大陸網站, 還是用中文寫吧

這個一般殺毒是掃不到的

上網看了不下100個所謂解決方法, 沒有一個有用

例如用甚麼軟件掃描
用甚麼anti malware 掃描
重改首頁 (這個可笑, 當然沒效, 那麼強力的hijacker 會那麼輕易讓你更改首頁嗎)
改regedit
裝甚麼修復器
更可笑是重新把瀏覽器捷徑重設, 這個就算成功也只是治標不治本 (聽說2345 是會把你的瀏覽器捷徑換成假的)


以上所有方法通通無用
終於讓我找到一個暴力解決方法 -- 360安全衛士

裝好後, 其他甚麼也不要理, 直接找系統急救箱, 開強力模式

別怕~~反正閣下的電腦本身都好毒, 確定就是~~
掃描好後, restart 電腦, 恭喜~~你所有瀏覽器都康復了~~

然後當然最後就是把360移除~~都康復了, 還留來幹?? 又多廣告又慢

成功的話請給小弟一個留言~~

input password placeholder workaround IE

the workaround solution for using placeholder on IE<10
it works for IE7~10

(credits to http://jsfiddle.net/q8ajJ/)

HTML

<!-- Style = display none for people who dont have javascript -->
<input id="fake_pass" name="fake_pass" style="display: none;" type="text" value="Enter Password:" />
<input id="real_pass" name="real_pass" type="password" />

JS

// On DOM ready, hide the real password
$('#real_pass').hide();

// Show the fake pass (because JS is enabled)
$('#fake_pass').show();

// On focus of the fake password field
$('#fake_pass').focus(function(){
    $(this).hide(); //  hide the fake password input text
    $('#real_pass').show().focus(); // and show the real password input password
});

// On blur of the real pass
$('#real_pass').blur(function(){
    if($(this).val() == ""){ // if the value is empty, 
        $(this).hide(); // hide the real password field
        $('#fake_pass').show(); // show the fake password
    }
    // otherwise, a password has been entered,
    // so do nothing (leave the real password showing)
});

vertical center css

content from http://blog.themeforest.net/tutorials/vertical-centering-with-css/

In this method, we will insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

<div id="floater">
<div id="content">
 Content here
</div>
</div>

#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}

THE GOODS

• Works in all browsers
• When there isn’t enough space (ie. the window shrinks) our content will not be cut off, and a scrollbar will appear.

THE BADS

• Only one I can think of is that it requires an extra empty element (which isn’t that bad, another subjective topic)

make a phone call on mobile using native html (no javascript needed)

simply an <a> tag:
using "tel:" protocol in the href like other protocols such as "email:", "javascript:"
<a href="tel:xxxxxxxx" >phone me</a>

if country code is needed, start with "+" and your country code,
the country in Hong kong is 852 so:
<a href="tel:+85218503">call HK Observatory</a>

example:
call 萬寧妹妹

the code were tested with the following devices using its default browser:
Galaxy S2(Android 4.0.4),
iphone 4S(IOS 5.0.1),
WinPhone 8

hope the information above can help u all

disable weird scroll bar in IE7

just a note for disabling the weird scrollbar in IE7

add the following css


html {
    overflow:auto;
}

facebook sharer 使用詳解 之 description, title 和 image

(本文最後檢閱日期 - 27th August, 2015)

facebook sharer 使用詳解是本部落格的人氣文章
謝謝各位的支持

若各下新接觸facebook sharer(後稱sharer) 的話
您在跟著本文實作時或會遇到一些困難,
這時不妨先到上述連結了解一下sharer是怎樣運作

今天繼續說明如何設定sharer其他重要的屬性

---

og:description

設定方法為 <meta name="og:description" content="blar blar blar" />
sharer 會先看看html裡有沒有設這個meta
  有:用這個meta 裡的content 屬性
  沒有:在html 裡找第一個多於120字(不包括120)的 <p>

兩個都找不到的話, 那description就會設為空白
這就是為甚麼通常share 出去的description 怪怪的原因

---

og:image

設定方法為 <meta name="og:image" content="http://absolute.image.path"/>

可設多張, 多copy一次就可

圖的url一定要absolute path 而且是published url

聽起來好像好簡單，那你就錯了

不要相信debugger裡og:image的結果, 那是騙你的
用來參考倒是可以的, 一切要以真正sharer 的結果為準

長氣點說多次, 若遇上甚麼問題, 請參閱facebook sharer 使用詳解

這裡sharer 會這樣做:

先看HTML裡有沒有設og:image

    有:圖片是否大過200x200? (不包括200)

      是:sharer會用這個圖

      否:sharer不會使用這圖片, 請繼續看下去

    否: 忽略此圖片, 並找找網頁裡有哪些 *有夠大 的<img>,

      如有: 放入thumbnail list 讓用家選擇

      沒有: 這個分享不會顯示任何thumbnail

* : 夠大的定義目前還未測試出來, 總之是大圖片

除了og:image 已證實必定要大過200x200外 (deleted on 18th June, 2015 -- its not always true)

其他由HTML extract出來的暫時都未太清楚甚麼size才會當做thumbnail,
簡單來說夠大的都會有機會

測試所得, sharer會比較喜歡找放在開頭的圖

---

og:title

這個是最簡單最正常的屬性

設法為<meta name="og:title" content="bi li ba la"/>

sharer 會先看有沒有設og:title

  有:用這個為title
  沒有:
     sharer會找<title>當title
     若<title>都沒有的話就會直接把網址當成title

文章如能幫到各下的話, 請留個comment讓小弟知道
謝謝

solution of strange extra width on 100% width input on iphone

given the following html and css:

html:

<div class="formWrapper">
 <input id="myName" type="text"/>
 blar..
 blar...
 blar....
</div>

css:

#myName {
 width:100%;
 border: 1px solid white;
}

as the css speaks, it draws a white border gracefully in many browsers such as chrome, Firefox, and android 4.0.4 browser.

however it fails in iphone, it adds some extra width to it.

with some research, there is a messy but a good solution below:
first, we need to add a wrapper to our textfield

<div class="formWrapper">
 <div class="border"><input id="myName" type="text"/></div>
 blar..
 blar...
 blar....
</div>

next, we add border to this wrapper instead of <input >

#myName {
 width:100%;

 /*we remove all styles on input*/
 margin: 0px;
 padding: 0px;
 border: 0px;
}

.border {
 border: 1px solid white;
}
 

and now it looks nicely in iphone and other browsers~~
this method works in chrome, firefox, safari and also works in IE6 IE7 & IE8

leave me a comment if it helps you~

phonegap opening a PDF file in Windows Phone

For those who suffering from opening PDF in your application
here you are the solusion

just simply upgrade your cordova framework to at least 2.6.0
and use the following js to open

window.open("your/pdf/link", "_system")

the package can be downloaded here

please leave me a comment if it solves your problem~