forked from pkp/pkp-lib
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* pkp#9932 Introduce VueModal.php
- Loading branch information
1 parent
28bb050
commit ac9468b
Showing
2 changed files
with
172 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
<?php | ||
/** | ||
* @file classes/linkAction/request/AjaxModal.php | ||
* | ||
* Copyright (c) 2014-2024 Simon Fraser University | ||
* Copyright (c) 2000-2024 John Willinsky | ||
* Distributed under the GNU GPL v3. For full terms see the file docs/COPYING. | ||
* | ||
* @class VueModal | ||
* | ||
* @ingroup linkAction_request | ||
* | ||
* @brief A modal that open native Vue.js side modal. | ||
*/ | ||
|
||
namespace PKP\linkAction\request; | ||
|
||
class VueModal extends Modal | ||
{ | ||
/** @var string Component name, needs to be registered in ModalManager.vue. */ | ||
public $_component; | ||
|
||
/** @var string Component props */ | ||
|
||
public $_props; | ||
|
||
/** | ||
* Constructor | ||
* | ||
*/ | ||
public function __construct( | ||
$component, | ||
$props, | ||
) { | ||
parent::__construct($component, $props); | ||
|
||
$this->_component = $component; | ||
$this->_props = $props; | ||
} | ||
|
||
|
||
// | ||
// Getters and Setters | ||
// | ||
/** | ||
* Get the Component name. | ||
* | ||
* @return string | ||
*/ | ||
public function getComponent() | ||
{ | ||
return $this->_component; | ||
} | ||
|
||
|
||
/** | ||
* Get the Props for Vue.js modal. | ||
* | ||
* @return string | ||
*/ | ||
public function getProps() | ||
{ | ||
return $this->_props; | ||
} | ||
|
||
// | ||
// Overridden methods from LinkActionRequest | ||
// | ||
/** | ||
* @see LinkActionRequest::getLocalizedOptions() | ||
*/ | ||
public function getLocalizedOptions() | ||
{ | ||
return array_merge( | ||
parent::getLocalizedOptions(), | ||
[ | ||
'modalHandler' => '$.pkp.controllers.modal.VueModalHandler', | ||
'component' => $this->getComponent(), | ||
'props' => $this->getProps() | ||
|
||
] | ||
); | ||
} | ||
} | ||
|
||
if (!PKP_STRICT_MODE) { | ||
class_alias('\PKP\linkAction\request\VueModal', '\VueModal'); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
/** | ||
* @file js/controllers/modal/VueModalHandler.js | ||
* | ||
* Copyright (c) 2014-2024 Simon Fraser University | ||
* Copyright (c) 2000-2024 John Willinsky | ||
* Distributed under the GNU GPL v3. For full terms see the file docs/COPYING. | ||
* | ||
* @class VueModalHandler | ||
* @ingroup js_controllers_modal | ||
* | ||
* @brief A modal that opens native Vue.js component. | ||
* It needs to be added in ModalManager to be available. | ||
*/ | ||
(function($) { | ||
|
||
|
||
/** | ||
* @constructor | ||
* | ||
* @extends $.pkp.controllers.modal.ModalHandler | ||
* | ||
* @param {jQueryObject} $handledElement The clickable element | ||
* the modal will be attached to. | ||
* @param {Object} options non-default Dialog options | ||
* to be passed into the dialog widget. | ||
* | ||
* Options are: | ||
* - component name, needs to be added in ModalManager.vue. | ||
* - props - props passed to the component. | ||
*/ | ||
$.pkp.controllers.modal.VueModalHandler = function($handledElement, options) { | ||
this.parent($handledElement, options); | ||
|
||
}; | ||
$.pkp.classes.Helper.inherits($.pkp.controllers.modal.VueModalHandler, | ||
$.pkp.controllers.modal.ModalHandler); | ||
|
||
|
||
// | ||
// Protected methods | ||
// | ||
/** @inheritDoc */ | ||
$.pkp.controllers.modal.VueModalHandler.prototype.checkOptions = | ||
function(options) { | ||
// Check the mandatory options of the ModalHandler handler. | ||
if (!this.parent('checkOptions', options)) { | ||
return false; | ||
} | ||
|
||
// Check for our own mandatory options. | ||
return typeof options.component === 'string'; | ||
}; | ||
|
||
|
||
/** @inheritDoc */ | ||
$.pkp.controllers.modal.VueModalHandler.prototype.mergeOptions = | ||
function(options) { | ||
|
||
// Call parent. | ||
return /** @type {Object} */ (this.parent('mergeOptions', options)); | ||
}; | ||
|
||
|
||
/** | ||
* Open the modal | ||
* @param {jQueryObject} $handledElement The clickable element | ||
* the modal will be attached to. | ||
* @protected | ||
*/ | ||
$.pkp.controllers.modal.VueModalHandler.prototype.modalOpen = | ||
function($handledElement) { | ||
this.parent('modalOpen', $handledElement); | ||
// Retrieve remote modal content. | ||
pkp.eventBus.$emit('open-modal-vue', { | ||
component: this.options.component, | ||
modalId: this.uniqueModalId, | ||
// passing modalHandler to be able to bridge events | ||
options: Object.assign({}, this.options, {modalHandler: this}) | ||
}); | ||
}; | ||
|
||
|
||
|
||
}(jQuery)); |