Skip to content

O
origin-web-common
Commit f7cc04d6 by Sam Padgett Committed by GitHub
Options

Merge pull request #101 from rhamilto/migrating-popup 

Migrating popup directive from console
parents b6fc2bef 2049d122
Showing with 317 additions and 5 deletions
dist/origin-web-common-ui.js
......@@ -21,7 +21,9 @@ angular.module('openshiftCommonUI', [])
pattern: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
maxlength: 253,
description: 'Name must consist of lower-case letters, numbers, periods, and hyphens. It must start and end with a letter or a number.'
});
})
// http://stackoverflow.com/questions/9038625/detect-if-device-is-ios
.constant('IS_IOS', /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
hawtioPluginLoader.addModule('openshiftCommonUI');
......@@ -892,6 +894,94 @@ angular.module('openshiftCommonUI')
;'use strict';
angular.module('openshiftCommonUI')
// This triggers when an element has either a toggle or data-toggle attribute set on it
.directive('toggle', function(IS_IOS) {
// Sets the CSS cursor value on the document body to allow dismissing the tooltips on iOS.
// See https://github.com/twbs/bootstrap/issues/16028#issuecomment-236269114
var setCursor = function(cursor) {
$('body').css('cursor', cursor);
};
var setCursorPointer = _.partial(setCursor, 'pointer');
var setCursorAuto = _.partial(setCursor, 'auto');
if (IS_IOS) {
$(document).on('shown.bs.popover', setCursorPointer);
$(document).on('shown.bs.tooltip', setCursorPointer);
$(document).on('hide.bs.popover', setCursorAuto);
$(document).on('hide.bs.tooltip', setCursorAuto);
}
return {
restrict: 'A',
scope: {
dynamicContent: '@?'
},
link: function($scope, element, attrs) {
var popupConfig = {
container: attrs.container || "body",
placement: attrs.placement || "auto"
};
if (attrs) {
switch(attrs.toggle) {
case "popover":
// If dynamic-content attr is set at all, even if it hasn't evaluated to a value
if (attrs.dynamicContent || attrs.dynamicContent === "") {
$scope.$watch('dynamicContent', function() {
$(element).popover("destroy");
// Destroy is asynchronous. Wait for it to complete before updating content.
// See https://github.com/twbs/bootstrap/issues/16376
// https://github.com/twbs/bootstrap/issues/15607
// http://stackoverflow.com/questions/27238938/bootstrap-popover-destroy-recreate-works-only-every-second-time
// Destroy calls hide, which takes 150ms to complete.
// https://github.com/twbs/bootstrap/blob/87121181c8a4b63192865587381d4b8ada8de30c/js/tooltip.js#L31
setTimeout(function() {
$(element)
.attr("data-content", $scope.dynamicContent)
.popover(popupConfig);
}, 200);
});
}
$(element).popover(popupConfig);
$scope.$on('$destroy', function(){
$(element).popover("destroy");
});
break;
case "tooltip":
// If dynamic-content attr is set at all, even if it hasn't evaluated to a value
if (attrs.dynamicContent || attrs.dynamicContent === "") {
$scope.$watch('dynamicContent', function() {
$(element).tooltip("destroy");
// Destroy is asynchronous. Wait for it to complete before updating content.
// See https://github.com/twbs/bootstrap/issues/16376
// https://github.com/twbs/bootstrap/issues/15607
// http://stackoverflow.com/questions/27238938/bootstrap-popover-destroy-recreate-works-only-every-second-time
// Destroy calls hide, which takes 150ms to complete.
// https://github.com/twbs/bootstrap/blob/87121181c8a4b63192865587381d4b8ada8de30c/js/tooltip.js#L31
setTimeout(function() {
$(element)
.attr("title", $scope.dynamicContent)
.tooltip(popupConfig);
}, 200);
});
}
$(element).tooltip(popupConfig);
$scope.$on('$destroy', function(){
$(element).tooltip("destroy");
});
break;
case "dropdown":
if (attrs.hover === "dropdown") {
$(element).dropdownHover({delay: 200});
$(element).dropdown();
}
break;
}
}
}
};
});
;'use strict';
angular.module('openshiftCommonUI')
// The HTML5 `autofocus` attribute does not work reliably with Angular,
// so define our own directive
.directive('takeFocus', function($timeout) {
......
dist/origin-web-common.js
......@@ -192,7 +192,9 @@ angular.module('openshiftCommonUI', [])
pattern: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
maxlength: 253,
description: 'Name must consist of lower-case letters, numbers, periods, and hyphens. It must start and end with a letter or a number.'
});
})
// http://stackoverflow.com/questions/9038625/detect-if-device-is-ios
.constant('IS_IOS', /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
hawtioPluginLoader.addModule('openshiftCommonUI');
......@@ -1063,6 +1065,94 @@ angular.module('openshiftCommonUI')
;'use strict';
angular.module('openshiftCommonUI')
// This triggers when an element has either a toggle or data-toggle attribute set on it
.directive('toggle', ["IS_IOS", function(IS_IOS) {
// Sets the CSS cursor value on the document body to allow dismissing the tooltips on iOS.
// See https://github.com/twbs/bootstrap/issues/16028#issuecomment-236269114
var setCursor = function(cursor) {
$('body').css('cursor', cursor);
};
var setCursorPointer = _.partial(setCursor, 'pointer');
var setCursorAuto = _.partial(setCursor, 'auto');
if (IS_IOS) {
$(document).on('shown.bs.popover', setCursorPointer);
$(document).on('shown.bs.tooltip', setCursorPointer);
$(document).on('hide.bs.popover', setCursorAuto);
$(document).on('hide.bs.tooltip', setCursorAuto);
}
return {
restrict: 'A',
scope: {
dynamicContent: '@?'
},
link: function($scope, element, attrs) {
var popupConfig = {
container: attrs.container || "body",
placement: attrs.placement || "auto"
};
if (attrs) {
switch(attrs.toggle) {
case "popover":
// If dynamic-content attr is set at all, even if it hasn't evaluated to a value
if (attrs.dynamicContent || attrs.dynamicContent === "") {
$scope.$watch('dynamicContent', function() {
$(element).popover("destroy");
// Destroy is asynchronous. Wait for it to complete before updating content.
// See https://github.com/twbs/bootstrap/issues/16376
// https://github.com/twbs/bootstrap/issues/15607
// http://stackoverflow.com/questions/27238938/bootstrap-popover-destroy-recreate-works-only-every-second-time
// Destroy calls hide, which takes 150ms to complete.
// https://github.com/twbs/bootstrap/blob/87121181c8a4b63192865587381d4b8ada8de30c/js/tooltip.js#L31
setTimeout(function() {
$(element)
.attr("data-content", $scope.dynamicContent)
.popover(popupConfig);
}, 200);
});
}
$(element).popover(popupConfig);
$scope.$on('$destroy', function(){
$(element).popover("destroy");
});
break;
case "tooltip":
// If dynamic-content attr is set at all, even if it hasn't evaluated to a value
if (attrs.dynamicContent || attrs.dynamicContent === "") {
$scope.$watch('dynamicContent', function() {
$(element).tooltip("destroy");
// Destroy is asynchronous. Wait for it to complete before updating content.
// See https://github.com/twbs/bootstrap/issues/16376
// https://github.com/twbs/bootstrap/issues/15607
// http://stackoverflow.com/questions/27238938/bootstrap-popover-destroy-recreate-works-only-every-second-time
// Destroy calls hide, which takes 150ms to complete.
// https://github.com/twbs/bootstrap/blob/87121181c8a4b63192865587381d4b8ada8de30c/js/tooltip.js#L31
setTimeout(function() {
$(element)
.attr("title", $scope.dynamicContent)
.tooltip(popupConfig);
}, 200);
});
}
$(element).tooltip(popupConfig);
$scope.$on('$destroy', function(){
$(element).tooltip("destroy");
});
break;
case "dropdown":
if (attrs.hover === "dropdown") {
$(element).dropdownHover({delay: 200});
$(element).dropdown();
}
break;
}
}
}
};
}]);
;'use strict';
angular.module('openshiftCommonUI')
// The HTML5 `autofocus` attribute does not work reliably with Angular,
// so define our own directive
.directive('takeFocus', ["$timeout", function($timeout) {
......
dist/origin-web-common.min.js
......@@ -83,7 +83,7 @@ screenXlgMin:1600
pattern:/^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
maxlength:253,
description:"Name must consist of lower-case letters, numbers, periods, and hyphens. It must start and end with a letter or a number."
}), hawtioPluginLoader.addModule("openshiftCommonUI"), angular.module("openshiftCommonUI").run([ "$templateCache", function($templateCache) {
}).constant("IS_IOS", /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream), hawtioPluginLoader.addModule("openshiftCommonUI"), angular.module("openshiftCommonUI").run([ "$templateCache", function($templateCache) {
"use strict";
$templateCache.put("src/components/binding/bindApplicationForm.html", '<div class="bind-form">\n <form>\n <div class="form-group">\n <label>\n <h3>Bind a service to <strong>{{ctrl.applicationName}}</strong></h3>\n </label>\n <span class="help-block">\n Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.\n </span>\n </div>\n </form>\n\n <form name="ctrl.formName">\n <fieldset>\n <div class="radio">\n <label ng-if="ctrl.allowNoBinding">\n <input type="radio" ng-model="ctrl.serviceToBind" value="">\n Do not bind at this time.\n </label>\n <div ng-if="ctrl.allowNoBinding" class="bind-description">\n <span class="help-block service-instance-name">\n You can create the binding later from your project.\n </span>\n </div>\n <div ng-repeat="serviceInstance in ctrl.bindableServiceInstances">\n <label>\n <input type="radio" ng-model="ctrl.serviceToBind" value="{{serviceInstance.metadata.name}}">\n {{ctrl.serviceClasses[serviceInstance.spec.serviceClassName].osbMetadata.displayName || serviceInstance.spec.serviceClassName}}\n </label>\n <div class="bind-description">\n <span class="pficon pficon-info"\n ng-if="!(serviceInstance | isServiceInstanceReady)"\n data-content="This service is not yet ready. If you bind to it, then the binding will be pending until the service is ready."\n data-toggle="popover"\n data-trigger="hover">\n </span>\n <span class="help-block service-instance-name">\n {{serviceInstance.metadata.name}}\n </span>\n </div>\n </div>\n <h4 ng-if="!ctrl.bindableServiceInstances.length">\n <span class="pficon pficon-info" aria-hidden="true"></span>\n <span class="help-block service-instance-name">\n There are no bindable services in this project\n </span>\n </h4>\n </div>\n </fieldset>\n </form>\n</div>\n'),
$templateCache.put("src/components/binding/bindResults.html", '<div ng-if="!ctrl.error">\n <div ng-if="!(ctrl.binding | isBindingReady)" class="bind-status" ng-class="{\'text-center\': !ctrl.progressInline, \'show-progress\': !ctrl.progressInline}">\n <div class="spinner" ng-class="{\'spinner-sm\': ctrl.progressInline, \'spinner-inline\': ctrl.progressInline, \'spinner-lg\': !ctrl.progressInline}" aria-hidden="true"></div>\n <h3 class="bind-message">\n <span class="sr-only">Pending</span>\n <div class="bind-pending-message" ng-class="{\'progress-inline\': ctrl.progressInline}">The binding was created but is not ready yet.</div>\n </h3>\n </div>\n <div ng-if="(ctrl.binding | isBindingReady)">\n <div class="bind-status">\n <span class="pficon pficon-ok" aria-hidden="true"></span>\n <span class="sr-only">Success</span>\n <h3 class="bind-message">\n <strong>{{ctrl.serviceToBind}}</strong>\n <span>has been bound</span>\n <span ng-if="ctrl.bindType === \'application\'"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n </h3>\n </div>\n <div class="sub-title">\n The binding operation created the secret\n <a ng-if="ctrl.secretHref && \'secrets\' | canI : \'list\'"\n ng-href="{{ctrl.secretHref}}">{{ctrl.binding.spec.secretName}}</a>\n <span ng-if="!ctrl.secretHref || !(\'secrets\' | canI : \'list\')">{{ctrl.binding.spec.secretName}}</span>\n that you may need to reference in your application.\n <span ng-if="ctrl.showPodPresets">Its data will be available to your application as environment variables.</span>\n </div>\n <div class="alert alert-info bind-info">\n <span class="pficon pficon-info" aria-hidden="true"></span>\n <span class="sr-only">Info</span>\n The binding secret will only be available to new pods. You will need to redeploy your application.\n </div>\n </div>\n</div>\n<div ng-if="ctrl.error">\n <div class="bind-status">\n <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>\n <span class="sr-only">Error</span>\n <h3 class="bind-message">\n <span>Binding Failed</span>\n </h3>\n </div>\n <div class="sub-title">\n <span ng-if="ctrl.error.data.message">\n {{ctrl.error.data.message | upperFirst}}\n </span>\n <span ng-if="!ctrl.error.data.message">\n An error occurred creating the binding.\n </span>\n </div>\n</div>\n'),
......@@ -340,7 +340,49 @@ return ctrl.$setValidity("oscUnique", !_.includes(list, value)), value;
});
}
};
}), angular.module("openshiftCommonUI").directive("takeFocus", [ "$timeout", function($timeout) {
}), angular.module("openshiftCommonUI").directive("toggle", [ "IS_IOS", function(IS_IOS) {
var setCursor = function(cursor) {
$("body").css("cursor", cursor);
}, setCursorPointer = _.partial(setCursor, "pointer"), setCursorAuto = _.partial(setCursor, "auto");
return IS_IOS && ($(document).on("shown.bs.popover", setCursorPointer), $(document).on("shown.bs.tooltip", setCursorPointer), $(document).on("hide.bs.popover", setCursorAuto), $(document).on("hide.bs.tooltip", setCursorAuto)), {
restrict:"A",
scope:{
dynamicContent:"@?"
},
link:function($scope, element, attrs) {
var popupConfig = {
container:attrs.container || "body",
placement:attrs.placement || "auto"
};
if (attrs) switch (attrs.toggle) {
case "popover":
(attrs.dynamicContent || "" === attrs.dynamicContent) && $scope.$watch("dynamicContent", function() {
$(element).popover("destroy"), setTimeout(function() {
$(element).attr("data-content", $scope.dynamicContent).popover(popupConfig);
}, 200);
}), $(element).popover(popupConfig), $scope.$on("$destroy", function() {
$(element).popover("destroy");
});
break;
case "tooltip":
(attrs.dynamicContent || "" === attrs.dynamicContent) && $scope.$watch("dynamicContent", function() {
$(element).tooltip("destroy"), setTimeout(function() {
$(element).attr("title", $scope.dynamicContent).tooltip(popupConfig);
}, 200);
}), $(element).tooltip(popupConfig), $scope.$on("$destroy", function() {
$(element).tooltip("destroy");
});
break;
case "dropdown":
"dropdown" === attrs.hover && ($(element).dropdownHover({
delay:200
}), $(element).dropdown());
}
}
};
} ]), angular.module("openshiftCommonUI").directive("takeFocus", [ "$timeout", function($timeout) {
return {
restrict:"A",
link:function(scope, element) {
......
src/components/popups/popups.js 0 → 100644
'use strict';
angular.module('openshiftCommonUI')
// This triggers when an element has either a toggle or data-toggle attribute set on it
.directive('toggle', function(IS_IOS) {
// Sets the CSS cursor value on the document body to allow dismissing the tooltips on iOS.
// See https://github.com/twbs/bootstrap/issues/16028#issuecomment-236269114
var setCursor = function(cursor) {
$('body').css('cursor', cursor);
};
var setCursorPointer = _.partial(setCursor, 'pointer');
var setCursorAuto = _.partial(setCursor, 'auto');
if (IS_IOS) {
$(document).on('shown.bs.popover', setCursorPointer);
$(document).on('shown.bs.tooltip', setCursorPointer);
$(document).on('hide.bs.popover', setCursorAuto);
$(document).on('hide.bs.tooltip', setCursorAuto);
}
return {
restrict: 'A',
scope: {
dynamicContent: '@?'
},
link: function($scope, element, attrs) {
var popupConfig = {
container: attrs.container || "body",
placement: attrs.placement || "auto"
};
if (attrs) {
switch(attrs.toggle) {
case "popover":
// If dynamic-content attr is set at all, even if it hasn't evaluated to a value
if (attrs.dynamicContent || attrs.dynamicContent === "") {
$scope.$watch('dynamicContent', function() {
$(element).popover("destroy");
// Destroy is asynchronous. Wait for it to complete before updating content.
// See https://github.com/twbs/bootstrap/issues/16376
// https://github.com/twbs/bootstrap/issues/15607
// http://stackoverflow.com/questions/27238938/bootstrap-popover-destroy-recreate-works-only-every-second-time
// Destroy calls hide, which takes 150ms to complete.
// https://github.com/twbs/bootstrap/blob/87121181c8a4b63192865587381d4b8ada8de30c/js/tooltip.js#L31
setTimeout(function() {
$(element)
.attr("data-content", $scope.dynamicContent)
.popover(popupConfig);
}, 200);
});
}
$(element).popover(popupConfig);
$scope.$on('$destroy', function(){
$(element).popover("destroy");
});
break;
case "tooltip":
// If dynamic-content attr is set at all, even if it hasn't evaluated to a value
if (attrs.dynamicContent || attrs.dynamicContent === "") {
$scope.$watch('dynamicContent', function() {
$(element).tooltip("destroy");
// Destroy is asynchronous. Wait for it to complete before updating content.
// See https://github.com/twbs/bootstrap/issues/16376
// https://github.com/twbs/bootstrap/issues/15607
// http://stackoverflow.com/questions/27238938/bootstrap-popover-destroy-recreate-works-only-every-second-time
// Destroy calls hide, which takes 150ms to complete.
// https://github.com/twbs/bootstrap/blob/87121181c8a4b63192865587381d4b8ada8de30c/js/tooltip.js#L31
setTimeout(function() {
$(element)
.attr("title", $scope.dynamicContent)
.tooltip(popupConfig);
}, 200);
});
}
$(element).tooltip(popupConfig);
$scope.$on('$destroy', function(){
$(element).tooltip("destroy");
});
break;
case "dropdown":
if (attrs.hover === "dropdown") {
$(element).dropdownHover({delay: 200});
$(element).dropdown();
}
break;
}
}
}
};
});
src/openshiftCommonUI.module.js
......@@ -21,7 +21,9 @@ angular.module('openshiftCommonUI', [])
pattern: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
maxlength: 253,
description: 'Name must consist of lower-case letters, numbers, periods, and hyphens. It must start and end with a letter or a number.'
});
})
// http://stackoverflow.com/questions/9038625/detect-if-device-is-ios
.constant('IS_IOS', /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
hawtioPluginLoader.addModule('openshiftCommonUI');
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment