93 lines
3.5 KiB
JavaScript
93 lines
3.5 KiB
JavaScript
/*
|
|
Logic Solution
|
|
WeeeCarbonFootprint
|
|
ui.slider
|
|
*/
|
|
|
|
angular.module('ui.slider', []);
|
|
|
|
angular.module('ui.slider')
|
|
.controller('sliderCtrl', ['$scope', '$window', function($scope, $window) {
|
|
$scope.slider_content_list =
|
|
[];
|
|
|
|
}])
|
|
.directive('slider', [function() {
|
|
return {
|
|
restrict: 'E',
|
|
replace: true,
|
|
scope: {
|
|
height: '@',
|
|
},
|
|
controller: function($scope, $window) {
|
|
$scope.slide_count = 0; // 向左滑動次數
|
|
$scope.slider_content_list = $scope.$parent.slider_content_list;
|
|
var slide_length = $scope.slider_content_list.length;
|
|
var slider_body = $window.document.getElementsByClassName('slider_body')[0];
|
|
$scope.slider_body_wrap_width = document.getElementsByClassName('slider_wrap')[0].clientWidth;
|
|
$scope.wrap_width = $scope.slider_body_wrap_width - $scope.height * 2;
|
|
var wrap_width = $scope.wrap_width;
|
|
$scope.show = 0;
|
|
while (wrap_width > 216) {
|
|
wrap_width -= 216;
|
|
$scope.show++;
|
|
}
|
|
|
|
if ($scope.show < $scope.slider_content_list.length) {
|
|
$scope.center = false;
|
|
} else {
|
|
$scope.center = true;
|
|
}
|
|
|
|
$scope.sliderInit = function () {
|
|
$scope.slider_left_arrow = '../Browser_Local/img/slider_left_arrow.png';
|
|
$scope.slider_right_arrow = '../Browser_Local/img/slider_right_arrow.png';
|
|
}
|
|
|
|
$scope.slide = function (n) {
|
|
var wrap_width = $scope.height * 2 + 16;
|
|
if((n - $scope.slide_count) == -1) {
|
|
if($scope.slide_count > ($scope.show - slide_length)) {
|
|
$scope.slide_count--;
|
|
}
|
|
} else if((n - $scope.slide_count) == 1) {
|
|
if($scope.slide_count < 0) {
|
|
$scope.slide_count++;
|
|
}
|
|
}
|
|
slider_body.style.setProperty('left', (wrap_width * $scope.slide_count) + 'px');
|
|
}
|
|
},
|
|
template:
|
|
'<div class=\"slider_wrap\" ng-style=\"{height: height + \'px\'}\" ng-init=\"sliderInit()\">' +
|
|
'<div class=\"slider_left_arrow\" ng-click=\"slide(slide_count - 1)\"}\" ng-style=\"{width: height + \'px\'}\"' +
|
|
'ng-mouseenter=\"slider_left_arrow = \'../Browser_Local/img/slider_left_arrow_active.png\'\"' +
|
|
'ng-mouseleave=\"slider_left_arrow = \'../Browser_Local/img/slider_left_arrow.png\'\">' +
|
|
'<img ng-src=\"{{slider_left_arrow}}\"></img>' +
|
|
'</div>' +
|
|
'<div class=\"slider_body_wrap\" ng-style=\"{width: wrap_width + \'px\'}\">' +
|
|
'<div class=\"slider_body\" ng-style=\"{width: (slider_content_list.length * (height * 2 + 16)) + \'px\', margin: center? \'0 auto\': 0, left: center? \'auto\': \'0px\' }\">' +
|
|
'<div ng-repeat=\"content in slider_content_list\" class=\"slider_content\"' +
|
|
'ng-style=\"{width: height * 2 + \'px\'}\">' +
|
|
'<img ng-src=\"{{content}}\"></img>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class=\"slider_right_arrow\" ng-click=\"slide(slide_count + 1)\" ng-style=\"{width: height + \'px\'}\"' +
|
|
'ng-mouseenter=\"slider_right_arrow = \'../Browser_Local/img/slider_right_arrow_active.png\'\"' +
|
|
'ng-mouseleave=\"slider_right_arrow = \'../Browser_Local/img/slider_right_arrow.png\'\">' +
|
|
'<img ng-src=\"{{slider_right_arrow}}"></img>' +
|
|
'</div>' +
|
|
'</div>'
|
|
}
|
|
}])
|
|
|
|
function sliderBodyWrap() {
|
|
var domElt = document.getElementsByClassName('slider_body_wrap')[0];
|
|
scope = angular.element(domElt).scope();
|
|
scope.$apply(function () {
|
|
scope.slider_body_wrap_width = window.innerWidth - 40 - parseFloat(scope.height) * 2;
|
|
});
|
|
}
|
|
|
|
window.onresize = sliderBodyWrap; |