From abb60fe20d53bb8bd26d0a07defe84bed2d079b5 Mon Sep 17 00:00:00 2001 From: CJ Cenizal <cj@cenizal.com> Date: Tue, 5 Jul 2016 19:29:26 -0700 Subject: [PATCH] Remove Bootstrap carousel and slide component styles and directives. --- .../angular-bootstrap/carousel/carousel.html | 8 - .../angular-bootstrap/carousel/carousel.js | 293 ------------------ .../angular-bootstrap/carousel/slide.html | 7 - src/ui/public/angular-bootstrap/index.js | 16 - src/ui/public/styles/bootstrap/bootstrap.less | 1 - src/ui/public/styles/bootstrap/carousel.less | 270 ---------------- src/ui/public/styles/bootstrap/variables.less | 17 - src/ui/public/styles/theme/bootstrap.less | 1 - .../styles/variables/bootstrap-mods.less | 14 - 9 files changed, 627 deletions(-) delete mode 100755 src/ui/public/angular-bootstrap/carousel/carousel.html delete mode 100755 src/ui/public/angular-bootstrap/carousel/carousel.js delete mode 100755 src/ui/public/angular-bootstrap/carousel/slide.html delete mode 100644 src/ui/public/styles/bootstrap/carousel.less diff --git a/src/ui/public/angular-bootstrap/carousel/carousel.html b/src/ui/public/angular-bootstrap/carousel/carousel.html deleted file mode 100755 index 9769b383a6f4d..0000000000000 --- a/src/ui/public/angular-bootstrap/carousel/carousel.html +++ /dev/null @@ -1,8 +0,0 @@ -<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()"> - <ol class="carousel-indicators" ng-show="slides.length > 1"> - <li ng-repeat="slide in slides track by $index" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li> - </ol> - <div class="carousel-inner" ng-transclude></div> - <a class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1"><span class="glyphicon glyphicon-chevron-left"></span></a> - <a class="right carousel-control" ng-click="next()" ng-show="slides.length > 1"><span class="glyphicon glyphicon-chevron-right"></span></a> -</div> diff --git a/src/ui/public/angular-bootstrap/carousel/carousel.js b/src/ui/public/angular-bootstrap/carousel/carousel.js deleted file mode 100755 index 9d91004da70fc..0000000000000 --- a/src/ui/public/angular-bootstrap/carousel/carousel.js +++ /dev/null @@ -1,293 +0,0 @@ -/** -* @ngdoc overview -* @name ui.bootstrap.carousel -* -* @description -* AngularJS version of an image carousel. -* -*/ -angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition']) -.controller('CarouselController', ['$scope', '$timeout', '$interval', '$transition', function ($scope, $timeout, $interval, $transition) { - var self = this, - slides = self.slides = $scope.slides = [], - currentIndex = -1, - currentInterval, isPlaying; - self.currentSlide = null; - - var destroyed = false; - /* direction: "prev" or "next" */ - self.select = $scope.select = function(nextSlide, direction) { - var nextIndex = slides.indexOf(nextSlide); - //Decide direction if it's not given - if (direction === undefined) { - direction = nextIndex > currentIndex ? 'next' : 'prev'; - } - if (nextSlide && nextSlide !== self.currentSlide) { - if ($scope.$currentTransition) { - $scope.$currentTransition.cancel(); - //Timeout so ng-class in template has time to fix classes for finished slide - $timeout(goNext); - } else { - goNext(); - } - } - function goNext() { - // Scope has been destroyed, stop here. - if (destroyed) { return; } - //If we have a slide to transition from and we have a transition type and we're allowed, go - if (self.currentSlide && angular.isString(direction) && !$scope.noTransition && nextSlide.$element) { - //We shouldn't do class manip in here, but it's the same weird thing bootstrap does. need to fix sometime - nextSlide.$element.addClass(direction); - var reflow = nextSlide.$element[0].offsetWidth; //force reflow - - //Set all other slides to stop doing their stuff for the new transition - angular.forEach(slides, function(slide) { - angular.extend(slide, {direction: '', entering: false, leaving: false, active: false}); - }); - angular.extend(nextSlide, {direction: direction, active: true, entering: true}); - angular.extend(self.currentSlide||{}, {direction: direction, leaving: true}); - - $scope.$currentTransition = $transition(nextSlide.$element, {}); - //We have to create new pointers inside a closure since next & current will change - (function(next,current) { - $scope.$currentTransition.then( - function(){ transitionDone(next, current); }, - function(){ transitionDone(next, current); } - ); - }(nextSlide, self.currentSlide)); - } else { - transitionDone(nextSlide, self.currentSlide); - } - self.currentSlide = nextSlide; - currentIndex = nextIndex; - //every time you change slides, reset the timer - restartTimer(); - } - function transitionDone(next, current) { - angular.extend(next, {direction: '', active: true, leaving: false, entering: false}); - angular.extend(current||{}, {direction: '', active: false, leaving: false, entering: false}); - $scope.$currentTransition = null; - } - }; - $scope.$on('$destroy', function () { - destroyed = true; - }); - - /* Allow outside people to call indexOf on slides array */ - self.indexOfSlide = function(slide) { - return slides.indexOf(slide); - }; - - $scope.next = function() { - var newIndex = (currentIndex + 1) % slides.length; - - //Prevent this user-triggered transition from occurring if there is already one in progress - if (!$scope.$currentTransition) { - return self.select(slides[newIndex], 'next'); - } - }; - - $scope.prev = function() { - var newIndex = currentIndex - 1 < 0 ? slides.length - 1 : currentIndex - 1; - - //Prevent this user-triggered transition from occurring if there is already one in progress - if (!$scope.$currentTransition) { - return self.select(slides[newIndex], 'prev'); - } - }; - - $scope.isActive = function(slide) { - return self.currentSlide === slide; - }; - - $scope.$watch('interval', restartTimer); - $scope.$on('$destroy', resetTimer); - - function restartTimer() { - resetTimer(); - var interval = +$scope.interval; - if (!isNaN(interval) && interval > 0) { - currentInterval = $interval(timerFn, interval); - } - } - - function resetTimer() { - if (currentInterval) { - $interval.cancel(currentInterval); - currentInterval = null; - } - } - - function timerFn() { - var interval = +$scope.interval; - if (isPlaying && !isNaN(interval) && interval > 0) { - $scope.next(); - } else { - $scope.pause(); - } - } - - $scope.play = function() { - if (!isPlaying) { - isPlaying = true; - restartTimer(); - } - }; - $scope.pause = function() { - if (!$scope.noPause) { - isPlaying = false; - resetTimer(); - } - }; - - self.addSlide = function(slide, element) { - slide.$element = element; - slides.push(slide); - //if this is the first slide or the slide is set to active, select it - if(slides.length === 1 || slide.active) { - self.select(slides[slides.length-1]); - if (slides.length == 1) { - $scope.play(); - } - } else { - slide.active = false; - } - }; - - self.removeSlide = function(slide) { - //get the index of the slide inside the carousel - var index = slides.indexOf(slide); - slides.splice(index, 1); - if (slides.length > 0 && slide.active) { - if (index >= slides.length) { - self.select(slides[index-1]); - } else { - self.select(slides[index]); - } - } else if (currentIndex > index) { - currentIndex--; - } - }; - -}]) - -/** - * @ngdoc directive - * @name ui.bootstrap.carousel.directive:carousel - * @restrict EA - * - * @description - * Carousel is the outer container for a set of image 'slides' to showcase. - * - * @param {number=} interval The time, in milliseconds, that it will take the carousel to go to the next slide. - * @param {boolean=} noTransition Whether to disable transitions on the carousel. - * @param {boolean=} noPause Whether to disable pausing on the carousel (by default, the carousel interval pauses on hover). - * - * @example -<example module="ui.bootstrap"> - <file name="index.html"> - <carousel> - <slide> - <img src="http://placekitten.com/150/150" style="margin:auto;"> - <div class="carousel-caption"> - <p>Beautiful!</p> - </div> - </slide> - <slide> - <img src="http://placekitten.com/100/150" style="margin:auto;"> - <div class="carousel-caption"> - <p>D'aww!</p> - </div> - </slide> - </carousel> - </file> - <file name="demo.css"> - .carousel-indicators { - top: auto; - bottom: 15px; - } - </file> -</example> - */ -.directive('carousel', [function() { - return { - restrict: 'EA', - transclude: true, - replace: true, - controller: 'CarouselController', - require: 'carousel', - templateUrl: 'template/carousel/carousel.html', - scope: { - interval: '=', - noTransition: '=', - noPause: '=' - } - }; -}]) - -/** - * @ngdoc directive - * @name ui.bootstrap.carousel.directive:slide - * @restrict EA - * - * @description - * Creates a slide inside a {@link ui.bootstrap.carousel.directive:carousel carousel}. Must be placed as a child of a carousel element. - * - * @param {boolean=} active Model binding, whether or not this slide is currently active. - * - * @example -<example module="ui.bootstrap"> - <file name="index.html"> -<div ng-controller="CarouselDemoCtrl"> - <carousel> - <slide ng-repeat="slide in slides" active="slide.active"> - <img ng-src="{{slide.image}}" style="margin:auto;"> - <div class="carousel-caption"> - <h4>Slide {{$index}}</h4> - <p>{{slide.text}}</p> - </div> - </slide> - </carousel> - Interval, in milliseconds: <input type="number" ng-model="myInterval"> - <br />Enter a negative number to stop the interval. -</div> - </file> - <file name="script.js"> -function CarouselDemoCtrl($scope) { - $scope.myInterval = 5000; -} - </file> - <file name="demo.css"> - .carousel-indicators { - top: auto; - bottom: 15px; - } - </file> -</example> -*/ - -.directive('slide', function() { - return { - require: '^carousel', - restrict: 'EA', - transclude: true, - replace: true, - templateUrl: 'template/carousel/slide.html', - scope: { - active: '=?' - }, - link: function (scope, element, attrs, carouselCtrl) { - carouselCtrl.addSlide(scope, element); - //when the scope is destroyed then remove the slide from the current slides array - scope.$on('$destroy', function() { - carouselCtrl.removeSlide(scope); - }); - - scope.$watch('active', function(active) { - if (active) { - carouselCtrl.select(scope); - } - }); - } - }; -}); diff --git a/src/ui/public/angular-bootstrap/carousel/slide.html b/src/ui/public/angular-bootstrap/carousel/slide.html deleted file mode 100755 index 451e4fba3e04c..0000000000000 --- a/src/ui/public/angular-bootstrap/carousel/slide.html +++ /dev/null @@ -1,7 +0,0 @@ -<div ng-class="{ - 'active': leaving || (active && !entering), - 'prev': (next || active) && direction=='prev', - 'next': (next || active) && direction=='next', - 'right': direction=='prev', - 'left': direction=='next' - }" class="item text-center" ng-transclude></div> diff --git a/src/ui/public/angular-bootstrap/index.js b/src/ui/public/angular-bootstrap/index.js index 7945c4f25a1be..27ce00243db31 100644 --- a/src/ui/public/angular-bootstrap/index.js +++ b/src/ui/public/angular-bootstrap/index.js @@ -19,7 +19,6 @@ angular.module('ui.bootstrap', [ 'ui.bootstrap.alert', 'ui.bootstrap.bindHtml', 'ui.bootstrap.buttons', - 'ui.bootstrap.carousel', 'ui.bootstrap.dateparser', 'ui.bootstrap.position', 'ui.bootstrap.datepicker', @@ -37,8 +36,6 @@ angular.module('ui.bootstrap', [ angular.module('ui.bootstrap.tpls', [ 'template/alert/alert.html', - 'template/carousel/carousel.html', - 'template/carousel/slide.html', 'template/datepicker/datepicker.html', 'template/datepicker/day.html', 'template/datepicker/month.html', @@ -66,7 +63,6 @@ import './accordion'; import './alert'; import './bindHtml'; import './buttons'; -import './carousel'; import './collapse'; import './dateparser'; import './datepicker'; @@ -89,18 +85,6 @@ angular.module('template/alert/alert.html', []).run(['$templateCache', function( $templateCache.put('template/alert/alert.html', alert); }]); -import carousel from './carousel/carousel.html'; - -angular.module('template/carousel/carousel.html', []).run(['$templateCache', function($templateCache) { - $templateCache.put('template/carousel/carousel.html', carousel); -}]); - -import slide from './carousel/slide.html'; - -angular.module('template/carousel/slide.html', []).run(['$templateCache', function($templateCache) { - $templateCache.put('template/carousel/slide.html', slide); -}]); - import datepicker from './datepicker/datepicker.html'; angular.module('template/datepicker/datepicker.html', []).run(['$templateCache', function($templateCache) { diff --git a/src/ui/public/styles/bootstrap/bootstrap.less b/src/ui/public/styles/bootstrap/bootstrap.less index 1c0477805fa93..381cca8882dc4 100644 --- a/src/ui/public/styles/bootstrap/bootstrap.less +++ b/src/ui/public/styles/bootstrap/bootstrap.less @@ -49,7 +49,6 @@ @import "modals.less"; @import "tooltip.less"; @import "popovers.less"; -@import "carousel.less"; // Utility classes @import "utilities.less"; diff --git a/src/ui/public/styles/bootstrap/carousel.less b/src/ui/public/styles/bootstrap/carousel.less deleted file mode 100644 index 252011e9e2508..0000000000000 --- a/src/ui/public/styles/bootstrap/carousel.less +++ /dev/null @@ -1,270 +0,0 @@ -// -// Carousel -// -------------------------------------------------- - - -// Wrapper for the slide container and indicators -.carousel { - position: relative; -} - -.carousel-inner { - position: relative; - overflow: hidden; - width: 100%; - - > .item { - display: none; - position: relative; - .transition(.6s ease-in-out left); - - // Account for jankitude on images - > img, - > a > img { - &:extend(.img-responsive); - line-height: 1; - } - - // WebKit CSS3 transforms for supported devices - @media all and (transform-3d), (-webkit-transform-3d) { - .transition-transform(~'0.6s ease-in-out'); - .backface-visibility(~'hidden'); - .perspective(1000px); - - &.next, - &.active.right { - .translate3d(100%, 0, 0); - left: 0; - } - &.prev, - &.active.left { - .translate3d(-100%, 0, 0); - left: 0; - } - &.next.left, - &.prev.right, - &.active { - .translate3d(0, 0, 0); - left: 0; - } - } - } - - > .active, - > .next, - > .prev { - display: block; - } - - > .active { - left: 0; - } - - > .next, - > .prev { - position: absolute; - top: 0; - width: 100%; - } - - > .next { - left: 100%; - } - > .prev { - left: -100%; - } - > .next.left, - > .prev.right { - left: 0; - } - - > .active.left { - left: -100%; - } - > .active.right { - left: 100%; - } - -} - -// Left/right controls for nav -// --------------------------- - -.carousel-control { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: @carousel-control-width; - .opacity(@carousel-control-opacity); - font-size: @carousel-control-font-size; - color: @carousel-control-color; - text-align: center; - text-shadow: @carousel-text-shadow; - background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug - // We can't have this transition here because WebKit cancels the carousel - // animation if you trip this while in the middle of another animation. - - // Set gradients for backgrounds - &.left { - #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); - } - &.right { - left: auto; - right: 0; - #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); - } - - // Hover/focus state - &:hover, - &:focus { - outline: 0; - color: @carousel-control-color; - text-decoration: none; - .opacity(.9); - } - - // Toggles - .icon-prev, - .icon-next, - .glyphicon-chevron-left, - .glyphicon-chevron-right { - position: absolute; - top: 50%; - margin-top: -10px; - z-index: 5; - display: inline-block; - } - .icon-prev, - .glyphicon-chevron-left { - left: 50%; - margin-left: -10px; - } - .icon-next, - .glyphicon-chevron-right { - right: 50%; - margin-right: -10px; - } - .icon-prev, - .icon-next { - width: 20px; - height: 20px; - line-height: 1; - font-family: serif; - } - - - .icon-prev { - &:before { - content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) - } - } - .icon-next { - &:before { - content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) - } - } -} - -// Optional indicator pips -// -// Add an unordered list with the following class and add a list item for each -// slide your carousel holds. - -.carousel-indicators { - position: absolute; - bottom: 10px; - left: 50%; - z-index: 15; - width: 60%; - margin-left: -30%; - padding-left: 0; - list-style: none; - text-align: center; - - li { - display: inline-block; - width: 10px; - height: 10px; - margin: 1px; - text-indent: -999px; - border: 1px solid @carousel-indicator-border-color; - border-radius: 10px; - cursor: pointer; - - // IE8-9 hack for event handling - // - // Internet Explorer 8-9 does not support clicks on elements without a set - // `background-color`. We cannot use `filter` since that's not viewed as a - // background color by the browser. Thus, a hack is needed. - // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer - // - // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we - // set alpha transparency for the best results possible. - background-color: #000 \9; // IE8 - background-color: rgba(0,0,0,0); // IE9 - } - .active { - margin: 0; - width: 12px; - height: 12px; - background-color: @carousel-indicator-active-bg; - } -} - -// Optional captions -// ----------------------------- -// Hidden by default for smaller viewports -.carousel-caption { - position: absolute; - left: 15%; - right: 15%; - bottom: 20px; - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; - color: @carousel-caption-color; - text-align: center; - text-shadow: @carousel-text-shadow; - & .btn { - text-shadow: none; // No shadow for button elements in carousel-caption - } -} - - -// Scale up controls for tablets and up -@media screen and (min-width: @screen-sm-min) { - - // Scale up the controls a smidge - .carousel-control { - .glyphicon-chevron-left, - .glyphicon-chevron-right, - .icon-prev, - .icon-next { - width: (@carousel-control-font-size * 1.5); - height: (@carousel-control-font-size * 1.5); - margin-top: (@carousel-control-font-size / -2); - font-size: (@carousel-control-font-size * 1.5); - } - .glyphicon-chevron-left, - .icon-prev { - margin-left: (@carousel-control-font-size / -2); - } - .glyphicon-chevron-right, - .icon-next { - margin-right: (@carousel-control-font-size / -2); - } - } - - // Show and left align the captions - .carousel-caption { - left: 20%; - right: 20%; - padding-bottom: 30px; - } - - // Move up the indicators - .carousel-indicators { - bottom: 20px; - } -} diff --git a/src/ui/public/styles/bootstrap/variables.less b/src/ui/public/styles/bootstrap/variables.less index b057ef5bf907b..abc3a4fadaada 100644 --- a/src/ui/public/styles/bootstrap/variables.less +++ b/src/ui/public/styles/bootstrap/variables.less @@ -799,23 +799,6 @@ @breadcrumb-separator: "/"; -//== Carousel -// -//## - -@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); - -@carousel-control-color: #fff; -@carousel-control-width: 15%; -@carousel-control-opacity: .5; -@carousel-control-font-size: 20px; - -@carousel-indicator-active-bg: #fff; -@carousel-indicator-border-color: #fff; - -@carousel-caption-color: #fff; - - //== Close // //## diff --git a/src/ui/public/styles/theme/bootstrap.less b/src/ui/public/styles/theme/bootstrap.less index a68568990f093..50bf65d0550f3 100644 --- a/src/ui/public/styles/theme/bootstrap.less +++ b/src/ui/public/styles/theme/bootstrap.less @@ -46,7 +46,6 @@ @import "~ui/styles/bootstrap/modals.less"; @import "~ui/styles/bootstrap/tooltip.less"; @import "~ui/styles/bootstrap/popovers.less"; -@import "~ui/styles/bootstrap/carousel.less"; // Utility classes @import "~ui/styles/bootstrap/utilities.less"; diff --git a/src/ui/public/styles/variables/bootstrap-mods.less b/src/ui/public/styles/variables/bootstrap-mods.less index cf89cce9fda7b..17bb71b5d3233 100644 --- a/src/ui/public/styles/variables/bootstrap-mods.less +++ b/src/ui/public/styles/variables/bootstrap-mods.less @@ -745,20 +745,6 @@ @breadcrumb-separator: "/"; -//== Carousel -// -//## - -@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); -@carousel-control-color: @white; -@carousel-indicator-active-bg: @white; -@carousel-indicator-border-color: @white; -@carousel-caption-color: @white; -@carousel-control-width: 15%; -@carousel-control-opacity: .5; -@carousel-control-font-size: 20px; - - //== Close // //##