Category Archives: Jquery

Fix bug Foundation 6 doesn’t show Filename when choosing file

$(document).on('change', '[type=file]', function () {
    var $me = $(this),
        classFileName = 'file-name',
        $fileNameContainer = $me.next('.' + classFileName),
        fileName = baseName($me.get(0) && $(this).get(0).value),
        maxLength = 20;
    if (fileName.length > maxLength) {
        fileName = fileName.substring(0, maxLength - 1) + '...';
    }
    if (isEmpty($fileNameContainer)) {
        $fileNameContainer = $('<span class="' + classFileName + '">' + fileName + '</span>');
        $fileNameContainer.insertAfter($me);
    } else {
        $fileNameContainer.text(fileName);
    }
});
Advertisements

Gulp run as series of tasks

// task cleanDist
gulp.task('cleanDist', function(cb) {
  return del([
    './www/js/configuration.js'
  ]);
});
// task copy-local-files: require 'cleanDist' task
gulp.task('copy-local-files', ['cleanDist'], function(cb) {
  return gulp.src('./../config/local/**/*').pipe(gulp.dest('./www'));
});
// task lint: require 'copy-local-file' task
gulp.task('lint', ['copy-local-files'], function() {
  return gulp.src(paths.js)
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('jshint-stylish'));
});

Bonus: Ionic run task before server and after serve: config in ionic.project file

{
  "name": "songpham",
  "app_id": "20002005",
  "gulpDependantTasks": [ // before serve
    "lint"
  ],
  "gulpStartupTasks": [ // after serve
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

Khai báo hàm callback gọi lại trong Javascript

[script language=”javascript”]
var http = require(‘http’),
feed = ‘http://www.baomoi.com/&#8217;,
ready = false;
function decide (cb) {
console.log(‘deciding’);
setTimeout(function () {
if (Date.now() % 2) { return console.log(‘rejected’); }
ready = true;
cb();
}, 2000);
}
http.get(feed, function (res) {
res.on(‘readable’, function log () {
if (!ready) { return decide(log); }
console.log(res.read() + ”);
});
});
[/script]
Chú ý hàm log() được gọi lại nhiều lần

Cách xây dựng directive bằng Angular Js 1

Khi tạo 1 directive, đầu tiên ta phải suy nghĩ xem ta viết cái gì? Sau đó ta xem directive của ta hoạt động ra sao? Và cuối cùng là ta truyền vào cái gì để nó hoạt động?

Để mô tả luồng tư duy, mình thử viết 1 modal directive cơ bản nhất:
– Viết cái gì: Modal
– Hoạt động: Modal có tính năng click vào button thì hiện lên, click vào background thì tắt đi.
– Truyền vào: Biến bật/tắt và Content của modal.

Sau khi tư duy xong, ta có thể khái quát được mô hình như sau:
– name directive: modalWindow
– replace: true (dĩ nhiên)
– transclude: true (vì cần truyền content vào modal, sau này cứ khi nào directive cần truyền dynamic content vào thì transclude là true hết)
– biến bật/tắt: show (false là tắt, true là bật) Continue reading Cách xây dựng directive bằng Angular Js 1

Angular Js 1: Auth check when change state

Controller:

...
$stateProvider
  .state('home.contact', {
    url: '/contact',
    resolve: {
      currentAuth: function(AuthFactory) {
        return AuthFactory.authPromise();
      }
    }
  });
...

Service:

...
.factory('AuthFactory', function ($q, $timeout, $rootScope) {
  var factoryObject = {
    authPromise: function () { /* promise to check is login or not */
      // Initialize a new promise
      var deferred = $q.defer();
      $timeout(function () {
        if ($rootScope.isAuthenticated) {
          deferred.resolve();
        } else {
          deferred.reject('AUTH_REQUIRED');
        }
      });
      return deferred.promise;
    }
  };
  return factoryObject;
})
...

Root Controller:

...
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
  if (error === 'AUTH_REQUIRED') {
    $state.go('home.dash');
  }
});
...

Use promise in Angular Js 1

// Story: One morning, a father says to his son: "Go and get the weather forecast, son!"
// Every Sunday morning, a father asks his son to go and find out the weather forecast for the afternoon, by using his super-strong telescope to look across the horizon from the tallest hill by their house. The son promises his dad he will go and get the weather forecast. He creates a promise with his dad at the door when he leaves.
// At that point, the dad decides if the weather tomorrow is good, he'll prepare a fishing trip for tomorrow. If it's bad he won't. Also, if the son is unable to get a forecast, he'll stay in as well.
// After 30mins or so, the son comes back. Different things happen from week-to-week
// ---------------------------------------------------------------------------
// can detect the result
var prepareFishingTrip = function (data) {
    console.log('the weather is fine');
    console.log(data);
};
var prepareSundayRoastDinner = function prepareSundayRoastDinner (data) {
    console.log('the weather is bad');
    console.log(data);
};
// can't detect the result
var dontKnowPrepareSundayRoastDinnerOrNot = function prepareSundayRoastDinner (res) {
    console.log('the son can\'t retrieve the weather, he return everything');
    console.log(res);
};
angular.module('myApp', [])
.factory('SonService', function ($http, $q) {
    return {
        getWeather: function() {
            // the $http API is based on the deferred/promise APIs exposed by the $q service
            // so it returns a promise for us by default
            return $http.get('http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=2de143494c0b295cca9337e1e96b00e0')
                .success(function(res) {
                    if (typeof res.data === 'object') {
                        return res.data;
                    } else {
                        // invalid response
                        return $q.reject(res);
                    }
                })
                .error(function(res) {
                    // something went wrong
                    return $q.reject(res);
                });
        }
    };
})
.controller('Ctrl', function($q, SonService) {
    SonService.getWeather()
        // success() called when son gets back
        .success(function(data) {
            // promise fulfilled
            if (data.wind && data.wind.speed > 2) { // if success
                prepareFishingTrip(data);
            } else {
                prepareSundayRoastDinner(data); // if the weather is not good
            }
        })
        .error(function(res) {
            // promise rejected
            dontKnowPrepareSundayRoastDinnerOrNot(res);
        });
});

Group Date, Month with Javascript Reduce

var data = [{
  date: '2015-10-30',
  title: 'jerry'
}, {
  date: '2015-10-30',
  title: 'tom'
}, {
  date: '2015-10-31',
  title: 'tom'
}, {
  date: '2015-10-31',
  title: 'tom'
}, {
  date: '2015-11-01',
  title: 'tom'
}, {
  date: '2015-11-01',
  title: 'tom'
}, {
  date: '2015-11-02',
  title: 'tom'
}, {
  date: '2015-11-02',
  title: 'tom'
}, {
  date: '2015-11-03',
  title: 'tom'
}, {
  date: '2015-11-03',
  title: 'tom'
}];

var groupsLevel1 = _.reduce(data, groupByDate, {});
var groupsLevel2 = _.reduce(groupsLevel1, groupByMonth, {});

console.log(groupsLevel2);

function groupByDate(groups, item) {
  var date = item.date;
  var group;

  if (!(date in groups)) {
    group = groups[date] = [];
  } else {
    group = groups[date];
  }

  group.push(item);
  
  return groups;
}

function groupByMonth (groups, item) {
  var date = item[0].date,
      month = date.substr(0, 7),
      group;
  if (!(month in groups)) {
    group = groups[month] = {};
  } else {
    group = groups[month];
  }
  group[date] = item;
  return groups;
}

Prevent multiple clicked with Javascript

$link.on('click', function (e, options) {
  if ($link.data("can-click") === false) {
	return false;
  }
  $link.data("can-click", false);
  preventActionDefault(e);
  ...
  // do something
  $link.data("can-click", true);
});

Sử dụng grunt

Grunt là 1 Javascript task runner. Tại sao phải dùng Javascript task runner? Vì ta cần automation code. Tức là khi làm việc trong 1 project, cứ mỗi sau khi sửa file sass, javascript… ta không thể nén file javascript (có hàng chục file), không thể ghép các file javascript lại với nhau (file nặng, ghép có thể gây ra lỗi)… Chỉ cần cài grunt vào, Grunt sẽ lo việc nén file, merge các file lại với nhau, ta không cần phải bận tâm vào việc đó mà chỉ cần tập trung vào build project sao cho tốt là được. Ngoài Grunt, bạn có thể chọn gulp để làm việc này. Nhìn chung bạn cần phải học cả grunt và gulp vì một số nơi dùng grunt, một số nơi dùng gulp, bạn sẽ dùng công nghệ nào tùy thuộc vào môi trường mà bạn làm việc.

Grunt

1) Update npm:

npm update -g npm

2) Install grunt CLI:

npm install -g grunt-cli

3) Tạo pakage.json:

{
  "name": "my-project",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-sass": "~0.9.2",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-contrib-concat": "~0.5.1",
    "grunt-contrib-uglify": "~0.9.1"
  }
}

Continue reading Sử dụng grunt