Skip to content
This repository was archived by the owner on May 27, 2021. It is now read-only.

Commit

Permalink
#26: Use angular.element() instead of $
Browse files Browse the repository at this point in the history
  • Loading branch information
@nghuuphuoc
nghuuphuoc committed Nov 17, 2013
1 parent 400e053 commit d04e839
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 66 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ v1.2.2
* #23: Upgrade Bootstrap to v3.0.2
* #24: Upgrade Font Awesome to v4.0.3
* #25: Upgrade AngularJS to v1.2.1
* #26: Use angular.element() instead of $

v1.2.1 (2013/10/18)

Expand Down
63 changes: 31 additions & 32 deletions dist/js/responsivetest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ angular.module('ResponsiveTest', []).directive('rtDevice', [
restrict: 'EA',
replace: true,
scope: { brands: '=' },
link: function ($scope, $element, $attrs) {
var template = '<ul class="dropdown-menu">', brands = $scope.brands, numBrands = brands.length;
$scope.openStatus = new Array(numBrands);
$scope.openStatus[0] = true;
$scope.lastHoverBrand = 0;
$scope.toggleBrand = function (i) {
$scope.openStatus[i] = true;
if (i != $scope.lastHoverBrand) {
$scope.openStatus[$scope.lastHoverBrand] = false;
$scope.lastHoverBrand = i;
link: function (scope, element, attrs) {
var template = '<ul class="dropdown-menu">', brands = scope.brands, numBrands = brands.length;
scope.openStatus = new Array(numBrands);
scope.openStatus[0] = true;
scope.lastHoverBrand = 0;
scope.toggleBrand = function (i) {
scope.openStatus[i] = true;
if (i != scope.lastHoverBrand) {
scope.openStatus[scope.lastHoverBrand] = false;
scope.lastHoverBrand = i;
}
};
for (var i = 0; i < numBrands; i++) {
Expand All @@ -33,59 +33,59 @@ angular.module('ResponsiveTest', []).directive('rtDevice', [
}
template += '</ul>';
var newElement = angular.element(template);
$compile(newElement)($scope);
$element.replaceWith(newElement);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
};
}
]).directive('rtFrameLoading', function () {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
var $loader = $('<div/>').css({
link: function (scope, element, attrs) {
var loader = angular.element('<div/>').css({
position: 'absolute',
top: 0,
width: 0,
margin: 0,
padding: 0,
width: '100%',
height: '100%'
}).addClass('rt-loader').prependTo($element.parent());
$element.on('load', function () {
$loader.hide();
}).addClass('rt-loader').prependTo(element.parent());
element.on('load', function () {
loader.hide();
});
$scope.$watch('frameSrc', function () {
if ($scope.frameSrc) {
$loader.show();
scope.$watch('frameSrc', function () {
if (scope.frameSrc) {
loader.show();
}
});
}
};
}).directive('rtResizable', function () {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
var parentScope = $scope.$parent;
$element.css('position', 'relative');
var $mask = $('<div/>').css({
link: function (scope, element, attrs) {
var parentScope = scope.$parent;
element.css('position', 'relative');
var mask = angular.element('<div/>').css({
position: 'absolute',
top: 0,
width: 0,
margin: 0,
padding: 0,
width: '100%',
height: '100%'
}).hide().prependTo($element);
$element.resizable({
}).hide().prependTo(element);
element.resizable({
start: function (event, ui) {
$mask.show();
mask.show();
},
stop: function (event, ui) {
$mask.hide();
mask.hide();
},
resize: function (event, ui) {
$scope.w = ui.size.width * $scope.pxd;
$scope.h = ui.size.height * $scope.pxd;
scope.w = ui.size.width * scope.pxd;
scope.h = ui.size.height * scope.pxd;
parentScope.$apply();
}
});
Expand All @@ -103,8 +103,7 @@ angular.module('ResponsiveTest', []).directive('rtDevice', [
}).config([
'$httpProvider',
function ($httpProvider) {
var numLoadings = 0;
var loadingScreen = $('<div style="position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%;"><div style="position: absolute; top: 50%; left: 0; width: 100%;"><div class="row"><div class="col-lg-6 col-lg-offset-3"><div class="progress progress-striped active"><div class="progress-bar" style="width: 100%;"></div></div></div></div></div></div>').appendTo($('body')).hide();
var numLoadings = 0, loadingScreen = angular.element('<div style="position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%;"><div style="position: absolute; top: 50%; left: 0; width: 100%;"><div class="row"><div class="col-lg-6 col-lg-offset-3"><div class="progress progress-striped active"><div class="progress-bar" style="width: 100%;"></div></div></div></div></div></div>').appendTo(angular.element('body')).hide();
$httpProvider.responseInterceptors.push(function () {
return function (promise) {
numLoadings++;
Expand Down
2 changes: 1 addition & 1 deletion dist/js/responsivetest.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 34 additions & 33 deletions src/js/responsivetest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,18 @@ angular
scope: {
brands: '='
},
// templateUrl: 'app/views/device.html',
link: function($scope, $element, $attrs) {
var template = '<ul class="dropdown-menu">', brands = $scope.brands, numBrands = brands.length;
link: function(scope, element, attrs) {
var template = '<ul class="dropdown-menu">', brands = scope.brands, numBrands = brands.length;

$scope.openStatus = new Array(numBrands);
$scope.openStatus[0] = true;
$scope.lastHoverBrand = 0;
scope.openStatus = new Array(numBrands);
scope.openStatus[0] = true;
scope.lastHoverBrand = 0;

$scope.toggleBrand = function(i) {
$scope.openStatus[i] = true;
if (i != $scope.lastHoverBrand) {
$scope.openStatus[$scope.lastHoverBrand] = false;
$scope.lastHoverBrand = i;
scope.toggleBrand = function(i) {
scope.openStatus[i] = true;
if (i != scope.lastHoverBrand) {
scope.openStatus[scope.lastHoverBrand] = false;
scope.lastHoverBrand = i;
}
};

Expand All @@ -54,33 +53,33 @@ angular
template += '</ul>';

var newElement = angular.element(template);
$compile(newElement)($scope);
$element.replaceWith(newElement);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
};
})
// Add loading indicator while the frame is loading
.directive('rtFrameLoading', function() {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
var $loader = $('<div/>').css({
link: function(scope, element, attrs) {
var loader = angular.element('<div/>').css({
position: 'absolute',
top: 0,
width: 0,
margin: 0,
padding: 0,
width: '100%',
height: '100%'
}).addClass('rt-loader').prependTo($element.parent());
$element.on('load', function() {
$loader.hide();
}).addClass('rt-loader').prependTo(element.parent());
element.on('load', function() {
loader.hide();
});

// Show the loader indicator when the URL is changed
$scope.$watch('frameSrc', function() {
if ($scope.frameSrc) {
$loader.show();
scope.$watch('frameSrc', function() {
if (scope.frameSrc) {
loader.show();
}
});
}
Expand All @@ -90,31 +89,31 @@ angular
.directive('rtResizable', function() {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
var parentScope = $scope.$parent;
link: function(scope, element, attrs) {
var parentScope = scope.$parent;

// Cannot move the mouse out of the frame after resizing the frame
$element.css('position', 'relative');
var $mask = $('<div/>').css({
element.css('position', 'relative');
var mask = angular.element('<div/>').css({
position: 'absolute',
top: 0,
width: 0,
margin: 0,
padding: 0,
width: '100%',
height: '100%'
}).hide().prependTo($element);
}).hide().prependTo(element);

$element.resizable({
element.resizable({
start: function(event, ui) {
$mask.show();
mask.show();
},
stop: function(event, ui) {
$mask.hide();
mask.hide();
},
resize: function(event, ui) {
$scope.w = ui.size.width * $scope.pxd;
$scope.h = ui.size.height * $scope.pxd;
scope.w = ui.size.width * scope.pxd;
scope.h = ui.size.height * scope.pxd;
parentScope.$apply();
}
});
Expand All @@ -135,8 +134,10 @@ angular
})
// Show the loading indicator when getting the data via an Ajax request
.config(function($httpProvider) {
var numLoadings = 0;
var loadingScreen = $('<div style="position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%;"><div style="position: absolute; top: 50%; left: 0; width: 100%;"><div class="row"><div class="col-lg-6 col-lg-offset-3"><div class="progress progress-striped active"><div class="progress-bar" style="width: 100%;"></div></div></div></div></div></div>').appendTo($('body')).hide();
var numLoadings = 0,
loadingScreen = angular.element('<div style="position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%;"><div style="position: absolute; top: 50%; left: 0; width: 100%;"><div class="row"><div class="col-lg-6 col-lg-offset-3"><div class="progress progress-striped active"><div class="progress-bar" style="width: 100%;"></div></div></div></div></div></div>')
.appendTo(angular.element('body'))
.hide();
$httpProvider.responseInterceptors.push(function() {
return function(promise) {
numLoadings++;
Expand Down

0 comments on commit d04e839

Please sign in to comment.