select on focus directive
This commit is contained in:
perploug
@@ -0,0 +1,8 @@
|
||||
angular.module("umbraco.directives")
|
||||
.directive('selectOnFocus', function () {
|
||||
return function (scope, el, attrs) {
|
||||
$(el).bind("click", function(){
|
||||
this.select();
|
||||
});
|
||||
};
|
||||
});
|
||||
@@ -12,8 +12,11 @@ angular.module("umbraco.directives")
|
||||
},
|
||||
link: function (scope, iElement, iAttrs) {
|
||||
|
||||
var maxTabs = 5;
|
||||
|
||||
function collectFromDom(activeTab){
|
||||
var $panes = $('div.tab-content');
|
||||
|
||||
$panes.find('.tab-pane').each(function (index) {
|
||||
var $this = angular.element(this);
|
||||
var id = $this.attr("rel");
|
||||
@@ -31,44 +34,44 @@ angular.module("umbraco.directives")
|
||||
$this.removeClass('active');
|
||||
}
|
||||
|
||||
//this is sorta hacky since we add a tab object to the tabs collection
|
||||
//based on a dom element, there is most likely a better way...
|
||||
if (label) {
|
||||
scope.collectedTabs.push(tab);
|
||||
|
||||
//scope.visibleTabs.push(tab);
|
||||
|
||||
|
||||
if(label && (scope.visibleTabs.length < maxTabs || tab.id === 0)){
|
||||
scope.visibleTabs.push(tab);
|
||||
}else{
|
||||
scope.overflownTabs.push(tab);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
scope.showTabs = iAttrs.tabs ? true : false;
|
||||
scope.collectedTabs = [];
|
||||
scope.visibleTabs = [];
|
||||
scope.overflownTabs = [];
|
||||
|
||||
$timeout(function () {
|
||||
collectFromDom(undefined);
|
||||
}, 500);
|
||||
collectFromDom(undefined);
|
||||
}, 500);
|
||||
|
||||
//when the tabs change, we need to hack the planet a bit and force the first tab content to be active,
|
||||
//unfortunately twitter bootstrap tabs is not playing perfectly with angular.
|
||||
scope.$watch("tabs", function (newValue, oldValue) {
|
||||
|
||||
$(newValue).each(function(i, val){
|
||||
scope.collectedTabs.push({id: val.id, label: val.label});
|
||||
scope.visibleTabs.push({id: val.id, label: val.label});
|
||||
});
|
||||
//scope.collectedTabs = newValue;
|
||||
|
||||
|
||||
//don't process if we cannot or have already done so
|
||||
if (!newValue) {return;}
|
||||
//if (hasProcessed || !newValue.length || newValue.length == 0) return;
|
||||
if (!newValue.length || newValue.length === 0){return;}
|
||||
|
||||
//set the flag
|
||||
//hasProcessed = true;
|
||||
|
||||
|
||||
var activeTab = _.find(newValue, function (item) {
|
||||
return item.active;
|
||||
});
|
||||
|
||||
|
||||
//we need to do a timeout here so that the current sync operation can complete
|
||||
// and update the UI, then this will fire and the UI elements will be available.
|
||||
$timeout(function () {
|
||||
|
||||
@@ -84,8 +84,56 @@ angular.module('umbraco.mocks').
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Grid",
|
||||
label: "This",
|
||||
id: 4,
|
||||
properties: [
|
||||
{ alias: "valTest4", label: "Validation test", view: "validationtest", value: "asdfasdf" },
|
||||
{ alias: "bodyText4", label: "Body Text", description: "Here you enter the primary article contents", view: "rte", value: "<p>askjdkasj lasjd</p>", config: {} },
|
||||
{ alias: "textarea4", label: "textarea", view: "textarea", value: "ajsdka sdjkds", config: { rows: 4 } },
|
||||
{ alias: "map4", label: "Map", view: "googlemaps", value: "37.4419,-122.1419", config: { mapType: "ROADMAP", zoom: 4 } },
|
||||
|
||||
{ alias: "content4", label: "Content picker", view: "contentpicker", value: "1234,23242,23232,23231" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Is",
|
||||
id: 5,
|
||||
properties: [
|
||||
{ alias: "valTest5", label: "Validation test", view: "validationtest", value: "asdfasdf" },
|
||||
{ alias: "bodyText5", label: "Body Text", description: "Here you enter the primary article contents", view: "rte", value: "<p>askjdkasj lasjd</p>", config: {} },
|
||||
{ alias: "textarea5", label: "textarea", view: "textarea", value: "ajsdka sdjkds", config: { rows: 4 } },
|
||||
{ alias: "map5", label: "Map", view: "googlemaps", value: "37.4419,-122.1419", config: { mapType: "ROADMAP", zoom: 4 } },
|
||||
|
||||
{ alias: "content5", label: "Content picker", view: "contentpicker", value: "1234,23242,23232,23231" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Overflown",
|
||||
id: 6,
|
||||
properties: [
|
||||
{ alias: "valTest6", label: "Validation test", view: "validationtest", value: "asdfasdf" },
|
||||
{ alias: "bodyText6", label: "Body Text", description: "Here you enter the primary article contents", view: "rte", value: "<p>askjdkasj lasjd</p>", config: {} },
|
||||
{ alias: "textarea6", label: "textarea", view: "textarea", value: "ajsdka sdjkds", config: { rows: 4 } },
|
||||
{ alias: "map6", label: "Map", view: "googlemaps", value: "37.4419,-122.1419", config: { mapType: "ROADMAP", zoom: 4 } },
|
||||
|
||||
{ alias: "content6", label: "Content picker", view: "contentpicker", value: "1234,23242,23232,23231" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Tab # 7",
|
||||
id: 7,
|
||||
properties: [
|
||||
{ alias: "valTest7", label: "Validation test", view: "validationtest", value: "asdfasdf" },
|
||||
{ alias: "bodyText7", label: "Body Text", description: "Here you enter the primary article contents", view: "rte", value: "<p>askjdkasj lasjd</p>", config: {} },
|
||||
{ alias: "textarea7", label: "textarea", view: "textarea", value: "ajsdka sdjkds", config: { rows: 4 } },
|
||||
{ alias: "map7", label: "Map", view: "googlemaps", value: "37.4419,-122.1419", config: { mapType: "ROADMAP", zoom: 4 } },
|
||||
|
||||
{ alias: "content7", label: "Content picker", view: "contentpicker", value: "1234,23242,23232,23231" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Grid",
|
||||
id: 8,
|
||||
properties: [
|
||||
{ alias: "grid", label: "Grid", view: "grid", value: "test", hideLabel: true }
|
||||
]
|
||||
|
||||
@@ -212,6 +212,7 @@ angular.module('umbraco.mocks').
|
||||
"placeholders_username": "Enter your username",
|
||||
"placeholders_password": "Enter your password",
|
||||
"placeholders_entername": "Enter a name...",
|
||||
"placeholders_nameentity": "Name the %0%...",
|
||||
"placeholders_search": "Type to search...",
|
||||
"placeholders_filter": "Type to filter...",
|
||||
"editcontenttype_allowedchildnodetypes": "Allowed child nodetypes",
|
||||
|
||||
@@ -6,15 +6,18 @@
|
||||
<umb-panel>
|
||||
<umb-header tabs="content.tabs">
|
||||
|
||||
<div class="span4">
|
||||
<input type="text"
|
||||
<div class="span8">
|
||||
<input type="text"
|
||||
select-on-focus
|
||||
class="umb-headline"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
placeholder="@placeholders_nameentity:content.contentTypeName'"
|
||||
ng-model="content.name" />
|
||||
|
||||
{{content.contentTypeName}}
|
||||
</div>
|
||||
|
||||
<div class="span8">
|
||||
<div class="span4">
|
||||
|
||||
<div class="btn-toolbar pull-right umb-btn-toolbar">
|
||||
<div class="btn-group" ng-animate="'fade'" ng-show="formStatus">
|
||||
|
||||
@@ -4,9 +4,22 @@
|
||||
<div ng-transclude></div>
|
||||
|
||||
<ul ng-show="showTabs" class="nav nav-tabs umb-nav-tabs span12">
|
||||
<li ng-class="{active: $first, 'tab-error': tabHasError}" ng-repeat="tab in collectedTabs" val-tab>
|
||||
|
||||
<li ng-class="{active: $first, 'tab-error': tabHasError}" ng-repeat="tab in visibleTabs" val-tab>
|
||||
<a href="#tab{{tab.id}}" data-toggle="tab">{{ tab.label }}</a>
|
||||
</li>
|
||||
|
||||
<li ng-show="overflowTabs.length > 0">
|
||||
<a href="#tab0" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<localize key="general_more">More</localize> <i class="icon-navigation-down"></i>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-class="{active: $first, 'tab-error': tabHasError}" ng-repeat="tab in overflowTabs" val-tab>
|
||||
<a href="#tab{{tab.id}}" data-toggle="tab">{{ tab.label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,7 +47,7 @@ describe('edit content controller tests', function () {
|
||||
});
|
||||
|
||||
it('it should have a tabs collection', function () {
|
||||
expect(scope.content.tabs.length).toBe(5);
|
||||
expect(scope.content.tabs.length).toBe(9);
|
||||
});
|
||||
|
||||
it('it should have a properties collection on each tab', function () {
|
||||
|
||||
@@ -241,7 +241,7 @@
|
||||
<area alias="placeholders">
|
||||
<key alias="username">Enter your username</key>
|
||||
<key alias="password">Enter your password</key>
|
||||
|
||||
<key alias="nameentity">Name the %0%...</key>
|
||||
<key alias="entername">Enter a name...</key>
|
||||
<key alias="search">Type to search...</key>
|
||||
<key alias="filter">Type to filter...</key>
|
||||
@@ -353,6 +353,7 @@
|
||||
<key alias="logout">Logout</key>
|
||||
<key alias="macro">Macro</key>
|
||||
<key alias="move">Move</key>
|
||||
<key alias="more">More</key>
|
||||
<key alias="name">Name</key>
|
||||
<key alias="new">New</key>
|
||||
<key alias="next">Next</key>
|
||||
|
||||
Reference in New Issue
Block a user