[freebooard] freeboard自定外掛踩雷

在測試自定義freeboard外掛的時候，發現設定屬性填空字串或空陣列，

初始化整個儀表版是會錯誤的。有用這個套件的朋友要注意一下。

[AngularJS] i18n 使用筆記

記錄一下angular translate的使用快速筆記。

環境設定

請引用angular-translate.min.js
使用模組 pascalprecht.translate

語言檔

透過 $translateProvider新增多國語系檔對應的內容，你可以另存以下的js至zh_TW.js檔

angular.module('myApp.controllers').config(function ($translateProvider) {
 $translateProvider
 .useSanitizeValueStrategy('escaped')
 .translations('zh_TW', {
  TRANSLATION_ID: 'Hello world !!',
  TRANSLATION_ID_2: 'Hello world !! {{value}}',
  TRANSLATION_ID_3: 'Hello world !! {{value1}},{{value2}}',
 });
});

$translate service處理多語系

  $translate('').then(function(translation) {
                    //translation為取得的鍵值

                });

Filter處理多語系

{{ 'TRANSLATION_ID' | translate }}

動態取代多國語言參數

使用filter

{{ 'TRANSLATION_ID_2' | translate:'{"value": 'Ken' }' }}

使用filter與多個參數

{
'TRANSLATION_ID_3': 'Hello world !! {{value1}},{{value2}}'
}

如果要多參數時，請在新增一個json變數至scope，如 $scope.translationData = {value1: 'Ken',value2: 'Ken2'}

{{ 'TRANSLATION_ID_3' | translate: translationData }}

使用directive表示式 在元素內透過translate與translate-values二個directive進行資料繫結

translate="TRANSLATION_ID_3" translate-values="{ value1: translationData.value1,value2: translationData.value2 }

事件

可以取得當語言變更的事件

$rootScope.$on('$translateChangeSuccess', function () {

// Language has changed
 });

啟動app設定語言方法

myApp.config(['$translateProvider','$windowProvider',
    function($translateProvider,$windowProvider) {
    var defaultLanguage = 'zh_TW';//你定義的語系檔名稱

    $translateProvider.use(defaultLanguage);
}])

REF

http://angular-translate.github.io/docs/#/guide/00_installation

[CI] 客制化404控制器來處理查詢結果不存在的解法

因為想客制化404的頁面來處理當用戶查詢條件結果不存在時的對應頁面，

但又不想覆想原本的show_404();系統內建的方法。

因此新增了一個新的Error_404的控制器，裡面放了index()與object_not_found()二個方法。分別針對網址亂key in 的404處理與針對查詢結果失敗的404處理。

因此在其他查詢結果的控制器如果遇到查詢失敗時，直接呼叫Error_404控制器中的object_not_found方法，因此我們需要了解如何透過CI在控制器中如何呼叫另一個控制器的方法。

參考的解法如下

yes you can

load like this inside your controller 

$this->load->library('../controllers/whathever');

and call the following method:

$this->whathever->functioname();

[Apache] apache無法啟動: make_sock: could not bind to address 0.0.0.0:80 no listening sockets available

發現VM的apache無法啟動，噴了一些
make_sock: could not bind to address 0.0.0.0:80 no listening sockets available的錯誤，找到這篇wiki https://wiki.apache.org/httpd/CouldNotBindToAddress

可能是有其他process程式佔住port或不是root的權限(Unix based systems disallow non-root users to bind processes to port numbers below 1024. Get root!)

不過最後下了apachectrl start就開啟了....

[CI] 不使用其他library在樣版裡面再讀另一個樣版

簡單的在樣版裡面又load另一個樣版的範例如下：

你要載入的目的地樣版，注意這裡的$content請輸入你的樣版路徑

<div id="content"><?php $this->load->view($content) ?></div>

在控制器裡面新增一個content變數，裡面寫你樣版的路徑

$view_data = array();
$view_data['content'] = '另一個view的路徑';
$this->load->view('主view的路徑', $view_data);

http://stackoverflow.com/questions/15096828/load-a-view-inside-another-view

[php] htaccess: Options not allowed here 異常

今天在架CI的舊專案時，發現以下error。

[Fri Dec 04 15:51:36.019560 2015] [core:alert] [pid 19393] [client 10.211.55.2:58540] /var/www/<專案名稱>/.htaccess: Options not allowed here

解決方法是把原本htaccess下面的Options設定先註解掉就好了，

不知為何先前要寫這一行XD

#Options +FollowSymLinks

        

RewriteEngine On

RewriteCond %{REQUEST_URI} ^(system|application).*

RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L]

[Javascript] Slideout.js製作手機滑動的側欄選單

想要有mobile web app的側欄選單，可以參考Slideout.js。

此元件有跟angular的eeh-navigation module整合，

先記錄一下。有使用再來寫使用說明。

[Handlerbar.js] 如何透過handlebar.js取得資料集內的資料

如果使用handlebar.js想要取得綁定的索引值的話，其內建的helpe就有提供@index與@key，供我們取得索引。

陣列資料

{{#each array}}

{{@index}}: {{this}}

{{/each}}

物件資料

{{#each object}}

{{@key}}: {{this}}

{{/each}}

基本上你可以取得索引值後，可以將這個值render在元素的屬性上，

例如data-index="{{#index}}"，之後用jquery綁定元素可以簡單取得資料集裡面的目標資料了。

[Bower] ubuntu run bower 發生錯誤

在新裝的ubuntu裝完npm又裝bower後，發現bower無法使用

bigd@ubuntu:~$ bower
/usr/bin/env: node: No such file or directory


可以安裝 nodejs-legacy就可以解決

sudo apt-get install nodejs-legacy

[jQuery] ajax request queue 蒐集

記錄一些使用jquery ajax queue的解決方案，目前要找的需求是要能支援concurrent ajax requ，而不是一個接著一個發送。

$.ajaxMultiQueue
https://github.com/GeReV/jQuery.ajaxMultiQueue

$.AjaxQueue https://gist.github.com/iambigd/46fe33eaf3dec450e965

http://dreamerslab.com/demos/javascript-loose-coupling-with-jquery-queue-plugin

目前使用$ajaxQueue方案，再多用一個Wrapper包起來即可。

[Android] 解除選單背景色變透明度(background-is-always-transparent)的問題

最近在處理APP選單變透明的問題，
會導致畫面的字會重疊，因此就被發bug了，
試了一些解法，最後成功的方式，記錄一下免得有新手爆雷XD

只要在styles.xml裡面加入android:panelBackground控制就好，
完整擷圖如下：

參考:
http://stackoverflow.com/questions/27787890/android-optionsmenu-issue-background-is-always-transparent

[AngularJS-3rd] eeh-navigation 選單模組

 eeh-navigation強大的選單模組，作者也提供完整的範例。

[Andriod] 使用按鈕觸發選單: openOptionsMenu();

使用按鈕觸發menu被顯示。

Button menuBtn = (Button)this.findViewById(R.id.topic_3_menu_button);
menuBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Log.d(TAG,"點擊功能選單鈕");
openOptionsMenu();
}


});

http://stackoverflow.com/questions/18913635/how-to-trigger-a-menu-button-click-event-through-code-in-android

Youtube 讓iframe有透明度

記錄一下在做youtube iframe滿版時遇到元素被遮住的問題，
可以加wmode=transparent 字串到Video的URL後面即可。
遇到IE瀏覽器記得要下meta讓IE執行edge模式

Add this in your html:

http-equiv="X-UA-Compatible" content="IE=edge" />

The page in IE is rendering in Quirk mode.

Try using Youtubes iframe embed method (if thats not what you are already doing, and add: ?wmode=transparent to the url (replace ? with & if it is not the first url variable)

[UI-Bootstrap] 讓0.12.1版的popup value支援html

如果為了讓popover的支援顯示html語法，可以自行手動新增這個directive。

記錄一下google後的記錄~~

代碼如下：

備註: 0.13版似乎已被merge進主幹了

/*新增一個ui.bootstrap.popover*/
angular.module( 'ui.bootstrap.popover' )
.directive( 'popoverHtmlUnsafePopup', function () {
    return {
        restrict: 'EA',
        replace: true,
        scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
        template: '










'
    };
})
.directive( 'popoverHtmlUnsafe', [ '$tooltip', function ( $tooltip ) {
    return $tooltip('popoverHtmlUnsafe', 'popover', 'click' );
}]);

其他用法:

1. 另外在往後的版本還有新增popover-is-open，可以提供更多彈性的控制
Starting with the 0.13.4 release, we've added the ability to programmatically control when your tooltip/popover is open or closed via the tooltip-is-open or popover-is-open attributes.

2. popover-trigger="mouseenter" 提供mouse觸發顯示

3. 手機顯示時，讓popover只維持一個關掉的方法

 angular.element(document.body).bind('click', function (e) {
         logger.debug('body click from ng');
         //Find all elements with the popover attribute
         var popups = document.querySelectorAll('*[popover]');

         if (popups) {
             //Go through all of them
             for (var i = 0; i < popups.length; i++) {
                 //The following is the popover DOM elemet
                 var popup = popups[i];
                 //The following is the same jQuery lite element
                 var popupElement = angular.element(popup);

                 var content;
                 var arrow;
                 if (popupElement.next()) {
                     //The following is the content child in the popovers first sibling
                     content = popupElement.next()[0].querySelector('.popover-content');
                     //The following is the arrow child in the popovers first sibling
                     arrow = popupElement.next()[0].querySelector('.arrow');
                 }
                 //If the following condition is met, then the click does not correspond
                 //to a click on the current popover in the loop or its content.
                 //So, we can safely remove the current popover's content and set the
                 //scope property of the popover
                 if (popup != e.target && e.target != content && e.target != arrow) {
                     if (popupElement.next().hasClass('popover')) {
                         //Remove the popover content
                         popupElement.next().remove();
                         //Set the scope to reflect this
                         popupElement.scope().tt_isOpen = false;
                     }
                 }
             }
         }
     });

參考:

    

http://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-outside

https://jsfiddle.net/mattdlockyer/C5GBU/2/

http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

http://stackoverflow.com/questions/23048990/can-bootstrap-tooltips-be-turned-off-based-on-device-screen-size

http://plnkr.co/edit/fhsy4V?p=preview

https://github.com/angular-ui/bootstrap/issues/618

http://stackoverflow.com/questions/31770019/angular-ui-bootstrap-popover-how-add-a-close-button

[Java] log4j 的設定檔配置筆記

先前有筆記一下如何設定log4j，這篇只要蒐集一些有關log4j.xml的一些工作手寫:D

• log4j.xml 的優先權會大於 log4j.properties
• log4j.jar不要放在每個application中
• Web專案的話log4j.xml 的檔案路徑請放在 WEB-INF/classes/之下
• Java專案的話可以建一個resoucrce資料夾，並把log4j.xml放在之下
• 或著自行指定路徑，再利用DOMConfigurator.configure去讀取ex: DOMConfigurator.configure(log4jConfigurationFilename);

參考
http://wiki.apache.org/logging-log4j/Log4jConfigurationHelp

[Android] 解決SearchView發生 API版本錯誤

今天在使用SearchView時，

發生elicpse會發生View requires API Level11 (current min is 7): 錯誤

只要

Right click on the project folder > Android tools > Clear Link Markers 就可以解決啦

[Anroid] EditText onTextChanged 低級錯誤 infini loop

很腦的bug，記錄一下，不小心造成onTextChanged無窮執行，

起因在於更新UI Text時，又call了一下setText的函數，因為onTextChanged觸發時，Text已在UI變更，不應再使用setText

[GoogleMap] 如何動態載入Googlemap API

最近試著使用google map的離線api，目前google可以找到不同版本的，目前測試是3.8.2。

如果是在頁面直接透過script標籤引入mapapi.js是沒什麼大問題的!!

不過由於要實作讓使用者切換線上與離線地圖就發現了很扯的bug，

記錄以下失敗的方法，有需要的朋友可以參考。

嘗試失敗的方法

使用document.write，整個瀏覽器白畫面，無法使用且google map無法完全載入

                     var jsTag = '<' + 'script src="http://localhost:8080/js/libs/offlinemap/google/mapapi.js"' +
                        ' type="text/javascript"><' + '/script>';
                document.write(jsTag);

使用document.createElement的方法，console會噴以下這個錯誤 
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

   var element = document.createElement("script");
                element.src = "js/libs/offlinemap/google/mapapi.js";
                element.type = "text/javascript";
                document.getElementsByTagName("head")[0].appendChild(element);

成功的方法

[Java] Granule Asset 函式庫測試

記錄一下使用Granule來編譯js/css檔的過程，雖然專案有點舊了，但試用起來效果還不錯。
主要是看上有JSP Tag很好整合。

功能如下

1. Combine and compresses JS and CSS using different methods: on fly or in build process, CSS and JS fast compression or more sophisticated Google Closure compression, or just simple file combining.
2. No-lock in solution. The tag just put around existing scripts. The tag can be turn on/off on the different levels: page and application.
3. Debug and production modes.
4. Calculate dependencies using Closure Library package/namespace system.
5. Can automatically choose optimization methods.
6. Multiple combinations of JS/CSS even with different compression methods on one page.
7. Support JSP includes.
8. Several types of cache, memory and file.
9. Automatically regenerates the bundle if you modify an included file.
10. Proxy-friendly GZip support.
11. Rewrites relative URLs in your CSS files.
12. JSP, JSF, Grails integration.
13. Multiple loggers support (SLF4J, Log4J, Apache Logger)
14. Can be setup to preserve license headers of JS libraries.
15. JDK1.5 and higher even for Google Closure Compiler.

安裝

[Java] Granule 解決tomcat8 檔案路徑回傳null問題

https://github.com/JonathanWalsh/Granule

最近找了這個工具來幫js/css瘦身，在tomcat 8下轉換assets file路徑會在getRealPath下產生Exception。

The parameter for getRealPath() is a 'virtual path' which - unfortunately - is a concept used in the Java docs but not actually defined anywhere. It is assumed to be a path to a resource in your web application and the separator in that case is always '/' regardless of platform.

解決方法要在html頁面引用javascript file時，要多加一個/

[Shellscript] 批次修改檔名

一行指令修改檔案: D 測試環境Mac OSX已ok

 find . -name '*.jpg' -exec sh -c 'mv "$0" "${0%.jpg}.png"' {} \;


For M$ windows可以參考這個軟體

[Raphael.js] ie8 圖片無法置中

今天測試在ie8執行時，發現圖片會無法置中，找到以下這個討論

https://github.com/DmitryBaranovskiy/raphael/issues/361


主要是svg使用vml轉換時的問題，解決方法如下：

只要打開原始碼找到以下這段

fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);

修改如下即可解決

fill.size = _.fillsize[0] * abs(sx)/1.34 + "pt" + S + _.fillsize[1] * abs(sy)/1.34 + "pt";

[jQuery Plugin] jqplot 重新調整tooltip

在jqplot裡面的highlighter擴充模組提供了tooltipContentEditor方法讓使用者可以處理tooltip的效果，測試ok的範例如下：



tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) { plugin.logger.debug('tooltipContentEditor (x,y): ' + str); // console.log('str: ' + str);// x , y // console.log('seriesIndex: ' + seriesIndex); // console.log('pointIndex: ' + pointIndex); // console.log(jqPlot.options.axes.xaxis.ticks); // console.log(jqPlot.data[seriesIndex]); // console.log(jqPlot); var xAxis = jqPlot.options.axes.xaxis.ticks[parseInt(str) - 1]; // str.split(',')[0]; var yAxis = str.split(',')[1];//這樣取比較準 var newElem = '
' + '' //以下這個方法有時候取得的值會異常，例如設成年的時候 // +'

' + jqPlot.series[seriesIndex]["label"] + '
x axis:	' + xAxis + '
y axis:	' + jqPlot.data[seriesIndex][pointIndex] + '

'; + '
y axis:
' + yAxis + '
'; return newElem; }
http://stackoverflow.com/questions/17719534/jqplot-tooltip-content-editor

2015/12/28後記

被qa發了tooltip值異常的問題，擷圖來記錄一下，最後修正最完了的xaxis的解法請參上的範例即可。

[jQuery plugin] 解決jqplot 動態繪圖記憶體一直長大的問題

目前在專案上使用jqplot來繪圖，遇到記憶體一直長大的問題，
經過測試以下這個作者的解法是可用的
https://edsilverton.wordpress.com/2011/04/11/avoiding-jqplot-memory-leaks/

在每次重新繪圖時需要把元素整個幹掉，記憶體才會真的往下嶧放掉。

[CI] 記錄一下CI框架新手功能

記錄一些CI框架Seed常用的功能手記，讓日後可以快速回憶 :D

雖然已經是被很多人放棄的技術，不過還是有他方便的地方XD

測試版本

CI 2.x

設定起始的base url

http://stackoverflow.com/questions/18075257/set-dynamic-base-url-in-codeigniter

Just overwrite the line in config/config.php with the following:

$config['base_url']    = 'http://'.$_SERVER['HTTP_HOST'].'/';

If you are using the sub folder you can use following code:

$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url']    = "$root";

設定資料庫

application/config/database.php：

設定啟動的控制器

打開application/config/routes.php：
$route['default_controller'] = 'index';

設定啟動時載入相關的helper

打開application/config/autoload.php：

// $autoload['helper'] = array();

$autoload['helper'] = array('form','url','assets','images','load_view_helper');

[Wordpress] Limit Login Attempts 設定使用者登入太多次的鎖定外掛

如果要預防使用者一直嘗試登入電腦，可以透過 Limit Login Attempts
來限制使用者可以登入錯誤的次數，不過外掛已經有二年未更新了XD

https://wordpress.org/plugins/limit-login-attempts/

[Docker] 快快樂樂學Docker指令集

由於上周為了在MAC上面安裝跟開發機一樣的環境，結果費時費力還會爆炸，決定使用docker來統一一下開發的環境。

測試環境

Mac OS X 10.9.5

安裝Docker

1. 下載boot2docker
https://github.com/boot2docker/osx-installer/releases/

安裝後docker 和 boot2docker 的執行檔就已經放在 /usr/local/bin，而且也會多裝一個Virtualbox，因為docker是要跑在linux核心上面

2. 安裝新的linuxVM

$boot2docker init

執行過程中，會去下載 boot2docker.iso，並建立 Linux VM

3. 啟動 boot2docker-vm 虛擬機器 => 有了這個VM才有辦法開始使用docker
$boot2docker start

啟動後會提示需要export 以上設定，否則無法使用docker指令集

另外boot2docker安裝後，可以在應用程式看到一個boot2ocker iCON，也可以用來開這個vm

boot2docker 其他指令集

#取得boot2docker VM IP

$boot2docker ip

#可以在啟動前，先檢查有沒有新版的images
$boot2docker upgrade

docker常用指令集

[Android] 無法產生R.java檔

記錄一下第一次import要android專案踩到的雷，基本上網路上都找的到，但大家遇到的CASE都不一定相同。以下自已的解決方法，希望可以幫助遇到一樣問題的人。

R.java無法產生的問題如下：

• ADT更新不完成 => 套用的SDK版本相關的組件沒安gk
• 專案內的libs:裡面也放了參照的library，造成偵測到二個版本而無法編譯

          

• res內的 *.xml一定有格式爆炸了，所以才會無法產生。
• 有遇到新增新的Activity時，對應的樣版xml檔案內缺少XML 文件宣告而爆炸
• 重覆引用appcompat_v7 專案的library(這個是新增Android自行產生的專案lib): 僅需使用android-support-v7-appcompat (這專案是從android-sdk_r24.3.3-macosx.zip下載之後內的專案匯入的，主要是要import它build出來的android-support-v7-appcompat.jar與android-support-v4.jar)

如何設定android-support-v7-appcompat設定成專案可以引用的libraries

1. 首先從下載android-sdk_r24.3.3-macosx.zip 解開後，把裡面的/Applications/eclipse/android-sdk-macosx/extras/android/support/v7的專案import到eclipse的workspace

2. 匯入後，在android-support-v7-appcompat的專案按右鍵，選properties，跳出下圖視窗，照紅色框線步驟點擊，第三步要把Library內的is Library打勾，我們就可以build一個library

3. 接著在匯入的專案指定要referenc android-support-v7-appcompat專案所產生的lib，按下ADD按鈕後，會跳出讓你選你要參考的專案lib，記得只能選擇android-support-v7-appcompat的lib而不要選appcompat_v7 專案的lib

請教完同事後，建議沒事不要亂更新IDE的SDK，除非是專案有必要，不然很容易爆炸的XD

android模擬器常發生專案無法run上去的情形，但大原則是專案只要沒有紅色的警告，接上手機來build code基本上都是可以跑的，筆記筆記。

[jQuery plugin] 讓table能夠支援變更行寬大小與調整行的位置

如果要實作table的拖拉行與行寬大小可以參考這二個元件:D

http://www.jqueryscript.net/table/Simple-jQuery-Plugin-For-Draggable-Table-Columns-Dragtable.html

http://dobtco.github.io/jquery-resizable-columns/

[jQuery API] textarea加入change 事件

記錄一下如何監聽textarea裡面的文件被改變

$('#textareaID').bind('input propertychange', function() {

});

[NetBeans] tomcat8.0.x 如何在netbeans 8成功執行

當使用tomcat8要在netbeans8執行時會發生錯誤，
可以修改catalina.bat裡面的JAVA_OPTS參數設定，
請照以下三步驟即可解決無法run tomcat的問題。


Step1: 打開你的catalina.bat
C:\\apache-tomcat-8.0.23\apache-tomcat-8.0.23\bin\catalina.bat


Step2: 找到以下的設定

:noJuliConfig
set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%"

:noJuliManager
set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_MANAGER%"

Step3: 移掉雙引號

:noJuliConfig
set JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%

:noJuliManager
set JAVA_OPTS=%JAVA_OPTS% %LOGGING_MANAGER%

[AngularJS-3rd] angular-dialog-service 模組輕鬆整合訊息對話窗效果

記錄一下整合angular-dialog-service的程式筆記

主程式

libs/angular-dialog-service/dialogs.min.js => version 5.0.0

其他相依模組

required ngSanitize, bootstrap.ui,ngTranslate

Demo

以一個編輯用戶的LIST來做說明

編輯使用者

             $scope.editUser = function($index, user) {
            logger.info('edit user');
               var dlg = dialogs.create(
                'partials/users/dialog/dialog.updateUserInfo.html',
                'DialogUpdateUserInfoCtrl',
                user, {}
            );
            dlg.result.then(function(resultData) {

                $scope.users[$index] = resultData; //update users data

               
            }, function() {

            });
        };

刪除使用者

  $scope.deleteUser = function($index, user) {
            logger.info('delete user');
            // console.log(user);
            var dlg = dialogs.confirm(
                '刪除帳戶',
                '你確定要刪除帳戶' + user.U_Email + '嗎?'
            );
            dlg.result.then(function(resultData) {
//reload user data
            });

        };

[AngularJS] 不透過type=reset來清除表單

記錄一下如何在angular清除表單內的值呢?
一般來說除了透過在頁面上放置一個按鈕類型為reset的效果最快。
但如果要在送出表單後，Server確定新增正確後，
再清除表單可自已新增一個resetForm的方法來處理。
以下是一個新建用戶的頁面來說明：

重設2按鈕是使用自訂的方法來清除表單資料，這裡需要額外注意type=mail資料驗證失敗是不會被寫入進$scope的，透過手動來清除，透過上圖可以清除看到$scope.user物件並無存到已輸入的錯誤文字

 $scope.resetForm = function(formModel) {
            logger.debug('resetForm');
            console.log(formModel);


            $scope.addForm.$setPristine();
            angular.copy({}, formModel);

            $scope.user.email = '';//解決email input無法清除的問題，email欄位要在通過規則後才會被model綁定
        };

頁面元素放入 ng-click="resetForm(user)，user則為表單的物件

  <button type="button"
                                 ng-click="resetForm(user)" class="btn btn-default">
                                <i class="fa fa-refresh"></i> 重設2</button>

[CSS] 處理內部元素無法完全顯示的問題，當父元素加入overflow:hidden時

之前遇到頁面上做了一個contextmenu的選單效果，但一直被顯示時，選單會因為父元素裡面設了overflow:hidde，導致這個問題。


討論串位址:
http://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent

This is an old question but encountered it myself.

I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")

If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.

If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.

[jQuery Plugins] fancybox 執行在1.9.x的jquery錯誤處理

處理一些新版jquery跑fancybox 1.3.4的處理方法:

討論位址:

http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

It seems like it exists a bug in jQuery reported here : http://bugs.jquery.com/ticket/13183 that breaks the Fancybox script.

Also check https://github.com/fancyapps/fancyBox/issues/485 for further reference.

As a workaround, rollback to jQuery v1.8.3 while either the jQuery bug is fixed or Fancybox is patched.

---

UPDATE (Jan 16, 2013): Fancybox v2.1.4 has been released and now it works fine with jQuery v1.9.0.

For fancybox v1.3.4- you still need to rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.

---

UPDATE (Jan 17, 2013): Workaround for users of Fancybox v1.3.4 :

Patch the fancybox js file to make it work with jQuery v1.9.0 as follow :

1. Open the jquery.fancybox-1.3.4.js file (full version, not pack version) with a text/html editor.
2. Find around the line 29 where it says :

   isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,

   and replace it by (EDITED March 19, 2013: more accurate filter):

   isIE6 = navigator.userAgent.match(/msie [6]/i) && !window.XMLHttpRequest,

   UPDATE (March 19, 2013): Also replace $.browser.msie by navigator.userAgent.match(/msie [6]/i) around line 615 (and/or replace all $.browser.msieinstances, if any), thanks joofow ... that's it!

Or download the already patched version from HERE (UPDATED March 19, 2013 ... thanksfairylee for pointing out the extra closing bracket)

NOTE: this is an unofficial patch and is unsupported by Fancybox's author, however it works as is. You may use it at your own risk ;)

Optionally, you may rather rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.

[Javascript] 如果透過window物件來將字串轉換成執行程式

先前需要遇到不同狀況時，
呼叫不同含式，
但函式內部只是call不同api，
於是為了簡寫一點程式，利用字串的方法來取得函式物件，
可以使用window[你的函式字串]來轉換含式

           var runAPI = '';
                switch (reportType) {

                    case 'datastream':
                        runAPI = 'FUN_A';
                        break;

                    case 'avg':
                        runAPI = 'FUN_B';
                        break;

                    case 'max':
                        runAPI = 'FUN_C';
                        break;

                    case 'min':
                        runAPI = 'FUN_B';

                        break;

                }//end of switch

                //conv to real js function !!important
                var fnRunAPI = window[runAPI];

接著funRunAPI就變一個可執行的函式了

2015/10/21 更新

另外要使用物件或帶入參數也是可行的


window[你的函式字串](參數)

window[物件Class名稱][物件函式字串](參數)

[工具] 好用的線上影像地圖工具

http://www.maschek.hu/imagemap
透過這個工具就可以簡單選取出影像地圖所要使用的坐標範圍，非常方便:D

[Java] Java專案的JS/CSS minify

針對Java專案js/css最小化相關open souces資源記錄

pack-tag

A JSP Taglib for delivering minified, combined and gzip-compressed resources (JavaScript and CSS).

https://github.com/galan/packtag

Jawr

https://github.com/ic3fox/jawr

Granule

Java JS/CSS optimization solution (tag and ant,servlet). Whitespace remover and Google Closure compilator integration
https://github.com/JonathanWalsh/Granule

wro4j

Free and Open Source Java project which brings together almost all the modern web tools: JsHint, CssLint, JsMin, Google Closure compressor, YUI Compressor, UglifyJs, Dojo Shrinksafe, Css Variables Support, JSON Compression, Less, Sass, CoffeeScript and much more. In the same time, the aim is to keep it as simple as possible and as extensible as

https://github.com/wro4j/wro4j

[CSS] backgroud 與 backgroud-image 小踩雷

今天在弄二層下拉選單時(以前都有美工拉好T_T)，
在mouse hover的時候設定要改一下背景色，結果卻把a裡面設定的backgroupd-image ICON蓋掉了，
原來是用錯指令啦，記得要使用backgroupd-color

.sub-nav li a:hover,.sub-nav li:hover{
    color:  #000 !important;
/*    border-bottom:  2px solid  #58616d;*/

    /*background是設背景圖，會把icon換掉的，要改backgroupd-color即可*/
    /*background:#dfdfdf !important;*/ 
     background-color: #dfdfdf !important;
}

[AngularJS-3rd] ui-select 操作筆記

記錄一下ui-select這個元件的操作
https://github.com/angular-ui/ui-select

ui-select transclude 錯誤

遇到這個問題只要升級angular的版本到1.2.18即可:D

// Recreates old behavior of ng-transclude. Used internally.
        .directive('uisTranscludeAppend', function () {
            return {
                link: function (scope, element, attrs, ctrl, transclude) {
                    transclude(scope, function (clone) {
                        element.append(clone);
                    });
                }
            };
        })

[jQuery API] 如何讓元素透過tabindex來達到Focus效果

今天在實作一個下拉選單顯示與隱藏的效果(透過點擊一個按鈕)，
當下拉選單出現時，設定呼叫focus()，反之在失去Focus時，會自動hide。

加入tabindex屬性，讓元素(div or ul)支援focus方法

//再focus執行前，加入tabindex屬性
  $dropdownMenu.attr('tabindex',-1).fadeIn().focus();

偵測被Focus的元素的方法

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

去除瀏覽器的tabindex外框

當你讓選單focus的時候，會發現外框出現的色框

可以透過以下css，讓border消失

:focus { 
    outline: none; 
}

參考

• http://stackoverflow.com/questions/5594431/jquery-focus-not-working-without-tabindex-attribute-of-div
• http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery

[Bootstrap 3] 替下拉式選單加上三角形的對話框圖

如果想讓bootstrap的下拉選單多了一個三角形的圖案的視覺效果， 可以加入二個虛擬元素 before與after，如下所示：

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

效果

[Bootstrap 3] 讓Label顯示於input的左側

今天想讓Label配置在input的左側，可以參考以下作法，加了一個control-label即可。


http://stackoverflow.com/questions/18404003/bootstrap-3-label-on-the-left-side-instead-above-a-input-field

[AngularJS-3rd] UI-Router 常用筆記

本篇慢慢記錄UI-Router相關的操作心得

UI-Router $state帶參數轉頁

  
$state.go('admin.productlist.uuid', 
{
uuid: product.FD_CurrentFilePathHash
});

 
// Admin page for productlist/:uuid
   $stateProvider
    .state('admin', {
     abstract: true,
     template: "",
     data: {
      authorizedRoles: [USER_ROLES.admin]
     }
    })
.state('admin.productlist.uuid', {

    /*manage user page */
    url: '/productlist/:uuid',

    views: {

     // the main template will be placed here (relatively named)
     // replace unnamed view '


'  in this state's parent state, 'home'.
     '': {
      templateUrl: 'partials/global.index.html'
     },

     //viewname@statusname
     // the child views will be defined here (absolutely named)

     'header@admin.productlist': {
      templateUrl: 'partials/global.header.html',
      controller: 'HeaderCtrl'
     },

     'main_body@admin.productlist': {

      templateUrl: 'partials/product_dm/productlist.body.html',
      controller: 'ProductListCtrl'
     },

     // for column two, we'll define a separate controller
     'footer@admin.productlist': {
      templateUrl: 'partials/global.footer.html'
     }

    },

    data:{
     pageTitle: '產品DM'
    }
   });

[AngularJS] 小踩雷筆記: select option 綁定

當我們使用select做資料綁定的時候，需要注意一下綁型的變數型別是什麼字串或數值。
今天遇到的問題是，從db撈回來的select 設定的值是字串(String)，但元件上綁定為數值(Int)
所以在設定model綁定的時候忘記轉成字串，就會發現綁定失敗XD

示意圖(圖好像合成錯張了，紅色是這次的注意的重點)

[UI-Bootstrap] 小踩雷筆記 Tabset元件的scope操作

記錄一下使用Tabset取得控制child scope變數的筆記：
由於Tabset會建立child scope，
所以想要存在tab內部的scope變化除了用 $parent.scope變數 (如果又巢狀的scope可能會發生錯誤例外)，
也可以在parent controller宣告一致的變數，就能方便取值了。
以下這個Tabset的範例可以參考:
http://plnkr.co/edit/vclolFBfF7QMQAQgNmiL?p=preview


範例目的：
Justified這個tab裡面的input，一但值被改變，外面的parent scope會一起連動。

在tabset內綁定了一個parent scope宣告的model(model.selection)

<div ng-controller="TabsDemoCtrl">
  {{model.selection}}
  <tabset>
    <tab heading="Justified">
      <input ng-model="model.selection">
    </tab>
  </tabset>
</div>

宣告一個model的物件在parent scope，所以當tab裡面的input變動時，就容易取到變動的值了。

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
  ];

  $scope.model = {selection: ''};
  $scope.options = ['a', 'b', 'c', 'd'];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert("You've selected the alert tab!");
    });
  };

  $scope.navType = 'pills';
};

https://github.com/angular/angular.js/wiki/Understanding-Scopes
https://github.com/angular-ui/bootstrap/issues/1553

[AngularJS] 多個信箱驗證的directive實作

記錄一下多個信箱驗證的directive實作。

.directive('multimails', function() {

    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl, ngModel) {

            var validator = function(value) {
                // console.log('validator: ' + value);
                if (value != '' && typeof(value) != 'undefined') {
                    var splitMailsArr = value.split(';');
                    // .filter(function(el) {return el.length != 0});
                    for (var i = 0; i < splitMailsArr.length; i++) {
                        var currMail = splitMailsArr[i];
                        // console.log('currMail: ' + currMail);
                        if (currMail != '') {
                            if (/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i.test(currMail)) {
                                ctrl.$setValidity('multimails', true);
                                // console.log('pass');

                            } else {

                                ctrl.$setValidity('multimails', false);
                                // console.log('no pass');
break;
                            }
                        }

                    }
                    return value;

                }

            };

            //驗證規則的順序
            ctrl.$parsers.unshift(validator);
            ctrl.$formatters.unshift(validator);
        }
    };
})

[GIT] 改壞了怎麼回到上一個版本

記錄一下GIT如何回到上一個版本的指令集

 Reverting Working Copy to Most Recent Commit To revert to previous commit, ignoring any changes:

git reset --hard HEAD

where HEAD is the last commit in your current branch Reverting Working Copy to an Older Commit To revert to a commit that's older than the most recent commit: # Resets index to former commit; replace '56e05fced' with your commit code
git reset 56e05fced  # Moves pointer back to previous HEAD git reset --soft HEAD@{1}

 git commit -m "Revert to 56e05fced" # Updates working copy to reflect the new commit git reset --hard

http://stackoverflow.com/questions/4114095/revert-to-previous-git-commit


另一篇Apple大大建議

cherry-pick跟reset + rebase (有點難懂XD)

https://blog.wu-boy.com/2009/12/git-how-to-remove-file-and-commit-from-history%E5%A6%82%E4%BD%95%E7%A7%BB%E9%99%A4-commit-%E6%AD%B7%E5%8F%B2%E7%B4%80%E9%8C%84/

[Javascript 茶包筆記] 簡單列表網頁的小函式

最近有客戶需要列印網頁的內容，於是找到了簡單的方法:D

//列印網頁
function printPage(text){
 
 var text= document;
 print(text);
}

[AngularJS] 小踩雷筆記: ng-class的css name使用-符合

如果你的class name使用了-符號，搭配使用ng-class時，請加上''符號，不然則會失效

請參考: http://stackoverflow.com/questions/15557151/ngclass-style-with-dash-in-key

After hours of hacking around, it turns out the dash gets interpolated! Quotes are needed.

 class="icon-home" ng-class="{'icon-white': someBooleanValue}">

I hope this helps someone from tearing their hair out.

UPDATE:

In older versions of Angular, using a backslash also does the trick, but not in the newer versions.

 class="icon-home" ng-class="{icon\-white: someBooleanValue}">

The former is probably preferred, since you can search for it in your favorite editor.

[AngularJS] 小踩雷筆記: button鈕點擊一直發生submit form的動作

今日踩雷小筆記: 如果你在form表單裡放了button鈕，並自行綁定ng-click方法時，如果html的button忘記加入type="button"， angular將會貼心幫你觸發form submit XD

[Java] JPA 使用IN查詢

由於不習慣用jpa來操作db，第一次要使用in查詢式就踩雷了。
成功的方法如下：

  String cmd = "SELECT d FROM Device d  WHERE d.agentId IN :agentId";
            Query query  = entityManager.createQuery(cmd);
            query.setParameter("agentId", dealAgentIds);

備註: 

• 不要把 :agentId多包一個括號，例如(:agentId)，會炸給你看的。 
• d.agentId是你產生結構裡面的欄位命名，不要用原本database的欄位。