Browse Source

Added ResourceLoader and ModalManager.

pull/179/head
Halil İbrahim Kalkan 9 years ago
parent
commit
46e54a7967
  1. 2
      src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml
  2. 13
      src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
  3. 2
      src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj
  4. 204
      src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ModalManager.js
  5. 87
      src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ResourceLoader.js
  6. 36
      src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js

2
src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml

@ -67,5 +67,5 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">@Localizer["Close"]</button>
<button type="button" class="btn btn-primary" id="btnUpdateUserSave">@Localizer["Save"]</button>
<button type="submit" class="btn btn-primary" id="btnUpdateUserSave">@Localizer["Save"]</button>
</div>

13
src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml

@ -4,14 +4,14 @@
@using Volo.Abp.Identity.Web.Areas.Identity.Localization.Resource
@inject IHtmlLocalizer<IdentityResource> L
@section styles {
<!-- TODO: Use minified on production, normal in development -->
<link rel="stylesheet" type="text/css" href="~/modules/identity/views/users/index.css" />
}
@section scripts {
<!-- TODO: Use minified on production, normal in development -->
<script type="text/javascript" src="~/modules/identity/helpers/jquery.js"></script>
<script type="text/javascript" src="~/modules/identity/helpers/datatables_helper.js"></script>
<script type="text/javascript" src="~/modules/identity/helpers/ResourceLoader.js"></script>
<script type="text/javascript" src="~/modules/identity/helpers/ModalManager.js"></script>
<script type="text/javascript" src="~/modules/identity/views/users/index.js"></script>
}
@ -42,13 +42,4 @@
</thead>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="createUpdateUserModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>

2
src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj

@ -22,6 +22,8 @@
<ItemGroup>
<Content Remove="Pages\Identity\Users\EditModal.cshtml" />
<Content Remove="Pages\Identity\_ViewImports.cshtml" />
<Content Remove="wwwroot\modules\identity\helpers\ModalManager.js" />
<Content Remove="wwwroot\modules\identity\helpers\ResourceLoader.js" />
</ItemGroup>
<ItemGroup>

204
src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ModalManager.js

@ -0,0 +1,204 @@
/**
* TODO: Document & prepare typescript definitions
*/
var abp = abp || {};
(function ($) {
abp.modals = abp.modals || {};
abp.ModalManager = (function () {
var _normalizeOptions = function (options) {
if (!options.modalId) {
options.modalId = 'Modal_' + (Math.floor((Math.random() * 1000000))) + new Date().getTime();
}
}
function _removeContainer(modalId) {
var _containerId = modalId + 'Container';
var _containerSelector = '#' + _containerId;
var $container = $(_containerSelector);
if ($container.length) {
$container.remove();
}
};
function _createContainer(modalId) {
_removeContainer(modalId);
var _containerId = modalId + 'Container';
return $('<div id="' + _containerId + '"></div>')
.append(
'<div id="' + modalId + '" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">' +
' <div class="modal-dialog" role="document">' +
' <div class="modal-content"></div>' +
' </div>' +
'</div>'
).appendTo('body');
}
return function (options) {
_normalizeOptions(options);
var _options = options;
var _$modal = null;
var _$form = null;
var _modalId = options.modalId;
var _modalSelector = '#' + _modalId;
var _modalObject = null;
var _publicApi = null;
var _args = null;
var _getResultCallback = null;
var _onCloseCallbacks = [];
function _saveModal() {
if (_modalObject && _modalObject.save) {
_modalObject.save();
} else if (_$form) {
_$form.submit();
}
}
function _initAndShowModal() {
_$modal = $(_modalSelector);
_$form = _$modal.find('form');
if (!_$form.length) {
_$form = null;
} else if (_options.ajaxForm !== false) { //TODO: This option should be set by the modal or modal class!
_$form.ajaxForm(function() {
_$modal.modal('hide');
});
}
_$modal.modal({
backdrop: 'static'
});
_$modal.on('hidden.bs.modal', function () {
_removeContainer(_modalId);
for (var i = 0; i < _onCloseCallbacks.length; i++) {
_onCloseCallbacks[i]();
}
});
_$modal.on('shown.bs.modal', function () {
_$modal.find('input:not([type=hidden]):first').focus();
});
var modalClass = abp.modals[options.modalClass];
if (modalClass) {
_modalObject = new modalClass();
if (_modalObject.init) {
_modalObject.init(_publicApi, _args);
}
}
_$modal.find('button[type=submit]').click(function () {
_saveModal();
});
_$modal.find('.modal-body').keydown(function (e) {
if (e.which === 13) {
if (e.target.tagName.toLocaleLowerCase() === "textarea") {
e.stopPropagation();
} else {
e.preventDefault();
_saveModal();
}
}
});
_$modal.modal('show');
};
var _open = function (args, getResultCallback) {
_args = args || {};
_getResultCallback = getResultCallback;
_createContainer(_modalId)
.find('.modal-content')
.load(options.viewUrl, $.param(_args), function (response, status, xhr) {
if (status == "error") {
//abp.message.warn(abp.localization.abpWeb('InternalServerError'));
//TODO: ERROR!
return;
};
if (options.scriptUrl) {
abp.ResourceLoader.loadScript(options.scriptUrl, function() {
_initAndShowModal();
});
} else {
_initAndShowModal();
}
});
};
var _close = function() {
if (!_$modal) {
return;
}
_$modal.modal('hide');
};
var _onClose = function (onCloseCallback) {
_onCloseCallbacks.push(onCloseCallback);
}
function _setBusy(isBusy) {
if (!_$modal) {
return;
}
_$modal.find('.modal-footer button').buttonBusy(isBusy);
}
_publicApi = {
open: _open,
reopen: function() {
_open(_args);
},
close: _close,
getModalId: function () {
return _modalId;
},
getModal: function () {
return _$modal;
},
getArgs: function () {
return _args;
},
getOptions: function() {
return _options;
},
setBusy: _setBusy,
setResult: function() {
_getResultCallback && _getResultCallback.apply(_publicApi, arguments);
},
onClose: _onClose
}
return _publicApi;
};
})();
})(jQuery);

87
src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ResourceLoader.js

@ -0,0 +1,87 @@
/**
* abp.ResourceLoader can be used to load scripts when needed.
* It ensures that every script is only loaded once.
*/
var abp = abp || {};
(function ($) {
/* UrlStates enum */
var UrlStates = {
LOADING: 'LOADING',
LOADED: 'LOADED',
FAILED: 'FAILED'
};
/* UrlInfo class */
function UrlInfo() {
this.state = UrlStates.LOADING;
this.loadCallbacks = [];
this.failCallbacks = [];
}
UrlInfo.prototype.succeed = function () {
this.state = UrlStates.LOADED;
for (var i = 0; i < this.loadCallbacks.length; i++) {
this.loadCallbacks[i]();
}
};
UrlInfo.prototype.failed = function () {
this.state = UrlStates.FAILED;
for (var i = 0; i < this.failCallbacks.length; i++) {
this.failCallbacks[i]();
}
};
UrlInfo.prototype.handleCallbacks = function (loadCallback, failCallback) {
switch (this.state) {
case UrlStates.LOADED:
loadCallback && loadCallback();
break;
case UrlStates.FAILED:
failCallback && failCallback();
break;
case UrlStates.LOADING:
this.addCallbacks(loadCallback, failCallback);
break;
}
};
UrlInfo.prototype.addCallbacks = function (loadCallback, failCallback) {
loadCallback && this.loadCallbacks.push(loadCallback);
failCallback && this.failCallbacks.push(failCallback);
};
/* ResourceLoader API */
abp.ResourceLoader = (function () {
var _urlInfos = {};
var _loadScript = function (url, loadCallback, failCallback) {
var urlInfo = _urlInfos[url];
if (urlInfo) {
urlInfo.handleCallbacks(loadCallback, failCallback);
return;
}
_urlInfos[url] = urlInfo = new UrlInfo();
urlInfo.addCallbacks(loadCallback, failCallback);
$.getScript(url)
.done(function (script, textStatus) {
urlInfo.succeed();
})
.fail(function (jqxhr, settings, exception) {
urlInfo.failed();
});
};
return {
loadScript: _loadScript
}
})();
})(jQuery);

36
src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js

@ -3,6 +3,11 @@
var _identityUserAppService = volo.abp.identity.identityUser;
var _editModal = new abp.ModalManager({
viewUrl: abp.appPath + 'Identity/Users/EditModal'//,
//scriptUrl: abp.appPath + 'view-resources/Areas/AppAreaName/Views/Users/_CreateOrEditModal.js'
});
var _$wrapper = $('#IdentityUsersWrapper');
var _$table = _$wrapper.find('table');
@ -45,12 +50,9 @@
//Update user command
_$table.on('click', '.update-user', function () {
var id = $(this).data('id');
$('#createUpdateUserModal')
.modal('show')
.find('.modal-content')
.load(abp.appPath + 'Identity/Users/EditModal?id=' + id);
_editModal.open({
id: $(this).data('id')
});
});
//Delete user command
@ -100,25 +102,7 @@
});
});
$('#createUpdateUserModal').on('click', '#btnUpdateUserSave', function () {
var $updateUserForm = $('#updateUserForm');
//TODO: Use ajaxform instead!
//$updateUserForm.ajaxForm(function () {
// $('#createUpdateUserModal').modal('hide');
// _dataTable.ajax.reload();
//});
//$updateUserForm.submit();
$.ajax({
url: $updateUserForm.attr('action'),
method: "POST",
data: $updateUserForm.serialize()
}).then(function () {
$('#createUpdateUserModal').modal('hide');
_dataTable.ajax.reload();
});
_editModal.onClose(function() { //TODO: Only refresh if saved!
_dataTable.ajax.reload();
});
});
Loading…
Cancel
Save