- console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
- }
- return isRequired;
-}
-
-/**
- * @function
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by update method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The data object, properly modified
- */
-function arrow(data, options) {
- var _data$offsets$arrow;
-
- // arrow depends on keepTogether in order to work
- if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
- return data;
+ return getClientRect(offset);
}
- var arrowElement = options.element;
+ /**
+ * Check if the given element is fixed or is inside a fixed parent
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Element} element
+ * @argument {Element} customContainer
+ * @returns {Boolean} answer to "isFixed?"
+ */
+ function isFixed(element) {
+ var nodeName = element.nodeName;
+ if (nodeName === 'BODY' || nodeName === 'HTML') {
+ return false;
+ }
+ if (getStyleComputedProperty(element, 'position') === 'fixed') {
+ return true;
+ }
+ var parentNode = getParentNode(element);
+ if (!parentNode) {
+ return false;
+ }
+ return isFixed(parentNode);
+ }
- // if arrowElement is a string, suppose it's a CSS selector
+ console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
+ }
+ return isRequired;
+ }
+
+ /**
+ * @function
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by update method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+ function arrow(data, options) {
+ var _data$offsets$arrow;
+
+ // arrow depends on keepTogether in order to work
+ if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
+ return data;
+ }
+
+ var arrowElement = options.element;
+
+ // if arrowElement is a string, suppose it's a CSS selector
- * Boundaries used by the modifier, can be `scrollParent`, `window`,
- * `viewport` or any DOM element.
+ * Computes the style that will be applied to the popper element to gets
+ * properly positioned.
+ *
+ * Note that this modifier will not touch the DOM, it just prepares the styles
+ * so that `applyStyle` modifier can apply it. This separation is useful
+ * in case you need to replace `applyStyle` with a custom implementation.
+ *
+ * This modifier has `850` as `order` value to maintain backward compatibility
+ * with previous versions of Popper.js. Expect the modifiers ordering method
+ * to change in future major versions of the library.
+ *
+ * @memberof modifiers
+ * @inner
*/
- boundariesElement: 'scrollParent'
- },
+ computeStyle: {
+ /** @prop {number} order=850 - Index used to define the order of execution */
+ order: 850,
+ /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
+ enabled: true,
+ /** @prop {ModifierFn} */
+ fn: computeStyle,
+ /**
+ * @prop {Boolean} gpuAcceleration=true
+ * If true, it uses the CSS 3D transformation to position the popper.
+ * Otherwise, it will use the `top` and `left` properties
+ */
+ gpuAcceleration: true,
+ /**
+ * @prop {string} [x='bottom']
+ * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
+ * Change this if your popper should grow in a direction different from `bottom`
+ */
+ x: 'bottom',
+ /**
+ * @prop {string} [x='left']
+ * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
+ * Change this if your popper should grow in a direction different from `right`
+ */
+ y: 'right'
+ },
- /**
- * Modifier used to make sure the reference and its popper stay near eachothers
- * without leaving any gap between the two. Expecially useful when the arrow is
- * enabled and you want to assure it to point to its reference element.
- * It cares only about the first axis, you can still have poppers with margin
- * between the popper and its reference element.
- * @memberof modifiers
- * @inner
- */
- keepTogether: {
- /** @prop {number} order=400 - Index used to define the order of execution */
- order: 400,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: true,
- /** @prop {ModifierFn} */
- fn: keepTogether
- },
+ /**
+ * Applies the computed styles to the popper element.
+ *
+ * All the DOM manipulations are limited to this modifier. This is useful in case
+ * you want to integrate Popper.js inside a framework or view library and you
+ * want to delegate all the DOM manipulations to it.
+ *
+ * Note that if you disable this modifier, you must make sure the popper element
+ * has its position set to `absolute` before Popper.js can do its work!
+ *
+ * Just disable this modifier and define your own to achieve the desired effect.
+ *
+ * @memberof modifiers
+ * @inner
+ */
+ applyStyle: {
+ /** @prop {number} order=900 - Index used to define the order of execution */
+ order: 900,
+ /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
+ enabled: true,
+ /** @prop {ModifierFn} */
+ fn: applyStyle,
+ /** @prop {Function} */
+ onLoad: applyStyleOnLoad,
+ /**
+ * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
+ * @prop {Boolean} gpuAcceleration=true
+ * If true, it uses the CSS 3D transformation to position the popper.
+ * Otherwise, it will use the `top` and `left` properties
+ */
+ gpuAcceleration: undefined
+ }
+ };
/**
- * This modifier is used to move the `arrowElement` of the popper to make
- * sure it is positioned between the reference element and its popper element.
- * It will read the outer size of the `arrowElement` node to detect how many
- * pixels of conjuction are needed.
- *
- * It has no effect if no `arrowElement` is provided.
- * @memberof modifiers
- * @inner
+ * The `dataObject` is an object containing all the information used by Popper.js.
+ * This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
+ * @name dataObject
+ * @property {Object} data.instance The Popper.js instance
+ * @property {String} data.placement Placement applied to popper
+ * @property {String} data.originalPlacement Placement originally defined on init
+ * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
+ * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
+ * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
+ * @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
+ * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
+ * @property {Object} data.boundaries Offsets of the popper boundaries
+ * @property {Object} data.offsets The measurements of popper, reference and arrow elements
- * The element which will define the boundaries of the popper position,
- * the popper will never be placed outside of the defined boundaries
- * (except if keepTogether is enabled)
+ * Whether events (resize, scroll) are initially enabled.
+ * @prop {Boolean} eventsEnabled=true
*/
- boundariesElement: 'viewport'
- },
-
- /**
- * Modifier used to make the popper flow toward the inner of the reference element.
- * By default, when this modifier is disabled, the popper will be placed outside
- * the reference element.
- * @memberof modifiers
- * @inner
- */
- inner: {
- /** @prop {number} order=700 - Index used to define the order of execution */
- order: 700,
- /** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
- enabled: false,
- /** @prop {ModifierFn} */
- fn: inner
- },
-
- /**
- * Modifier used to hide the popper when its reference element is outside of the
- * popper boundaries. It will set a `x-out-of-boundaries` attribute which can
- * be used to hide with a CSS selector the popper when its reference is
- * out of boundaries.
- *
- * Requires the `preventOverflow` modifier before it in order to work.
- * @memberof modifiers
- * @inner
- */
- hide: {
- /** @prop {number} order=800 - Index used to define the order of execution */
- order: 800,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: true,
- /** @prop {ModifierFn} */
- fn: hide
- },
+ eventsEnabled: true,
- /**
- * Computes the style that will be applied to the popper element to gets
- * properly positioned.
- *
- * Note that this modifier will not touch the DOM, it just prepares the styles
- * so that `applyStyle` modifier can apply it. This separation is useful
- * in case you need to replace `applyStyle` with a custom implementation.
- *
- * This modifier has `850` as `order` value to maintain backward compatibility
- * with previous versions of Popper.js. Expect the modifiers ordering method
- * to change in future major versions of the library.
- *
- * @memberof modifiers
- * @inner
- */
- computeStyle: {
- /** @prop {number} order=850 - Index used to define the order of execution */
- order: 850,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: true,
- /** @prop {ModifierFn} */
- fn: computeStyle,
/**
- * @prop {Boolean} gpuAcceleration=true
- * If true, it uses the CSS 3d transformation to position the popper.
- * Otherwise, it will use the `top` and `left` properties.
+ * Set to true if you want to automatically remove the popper when
+ * you call the `destroy` method.
+ * @prop {Boolean} removeOnDestroy=false
*/
- gpuAcceleration: true,
+ removeOnDestroy: false,
+
/**
- * @prop {string} [x='bottom']
- * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
- * Change this if your popper should grow in a direction different from `bottom`
+ * Callback called when the popper is created.<br />
+ * By default, it is set to no-op.<br />
+ * Access Popper.js instance with `data.instance`.
+ * @prop {onCreate}
*/
- x: 'bottom',
+ onCreate: function onCreate() {},
+
/**
- * @prop {string} [x='left']
- * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
- * Change this if your popper should grow in a direction different from `right`
+ * Callback called when the popper is updated. This callback is not called
+ * on the initialization/creation of the popper, but only on subsequent
+ * updates.<br />
+ * By default, it is set to no-op.<br />
+ * Access Popper.js instance with `data.instance`.
+ * @prop {onUpdate}
*/
- y: 'right'
- },
+ onUpdate: function onUpdate() {},
- /**
- * Applies the computed styles to the popper element.
- *
- * All the DOM manipulations are limited to this modifier. This is useful in case
- * you want to integrate Popper.js inside a framework or view library and you
- * want to delegate all the DOM manipulations to it.
- *
- * Note that if you disable this modifier, you must make sure the popper element
- * has its position set to `absolute` before Popper.js can do its work!
- *
- * Just disable this modifier and define you own to achieve the desired effect.
- *
- * @memberof modifiers
- * @inner
- */
- applyStyle: {
- /** @prop {number} order=900 - Index used to define the order of execution */
- order: 900,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: true,
- /** @prop {ModifierFn} */
- fn: applyStyle,
- /** @prop {Function} */
- onLoad: applyStyleOnLoad,
/**
- * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
- * @prop {Boolean} gpuAcceleration=true
- * If true, it uses the CSS 3d transformation to position the popper.
- * Otherwise, it will use the `top` and `left` properties.
+ * List of modifiers used to modify the offsets before they are applied to the popper.
+ * They provide most of the functionalities of Popper.js.
+ * @prop {modifiers}
*/
- gpuAcceleration: undefined
- }
-};
-
-/**
- * The `dataObject` is an object containing all the informations used by Popper.js
- * this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
- * @name dataObject
- * @property {Object} data.instance The Popper.js instance
- * @property {String} data.placement Placement applied to popper
- * @property {String} data.originalPlacement Placement originally defined on init
- * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
- * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
- * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
- * @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
- * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`)
- * @property {Object} data.boundaries Offsets of the popper boundaries
- * @property {Object} data.offsets The measurements of popper, reference and arrow elements.
+ * A pattern that recognizes a commonly useful subset of URLs that are safe.
+ *
+ * Shoutout to Angular 7 https://github.com/angular/angular/blob/7.2.4/packages/core/src/sanitization/url_sanitizer.ts
+ */
+
+ };
+ var SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi;
+ /**
+ * A pattern that matches safe data URLs. Only matches image, video and audio types.
+ *
+ * Shoutout to Angular 7 https://github.com/angular/angular/blob/7.2.4/packages/core/src/sanitization/url_sanitizer.ts
+ */
+
+ var DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[a-z0-9+/]+=*$/i;
+
+ function allowedAttribute(attr, allowedAttributeList) {
+ var attrName = attr.nodeName.toLowerCase();
+
+ if (allowedAttributeList.indexOf(attrName) !== -1) {
- $link.addClass(ClassName.ACTIVE); // Set triggered links parents as active
+ $link.addClass(ClassName$8.ACTIVE); // Set triggered links parents as active
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
- $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ", " + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE); // Handle special case when .nav-link is inside .nav-item
+ $link.parents(Selector$8.NAV_LIST_GROUP).prev(Selector$8.NAV_LINKS + ", " + Selector$8.LIST_ITEMS).addClass(ClassName$8.ACTIVE); // Handle special case when .nav-link is inside .nav-item
+ * A pattern that recognizes a commonly useful subset of URLs that are safe.
+ *
+ * Shoutout to Angular 7 https://github.com/angular/angular/blob/7.2.4/packages/core/src/sanitization/url_sanitizer.ts
+ */
+
+ };
+ var SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi;
+ /**
+ * A pattern that matches safe data URLs. Only matches image, video and audio types.
+ *
+ * Shoutout to Angular 7 https://github.com/angular/angular/blob/7.2.4/packages/core/src/sanitization/url_sanitizer.ts
+ */
+
+ var DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[a-z0-9+/]+=*$/i;
+
+ function allowedAttribute(attr, allowedAttributeList) {
+ var attrName = attr.nodeName.toLowerCase();
+
+ if (allowedAttributeList.indexOf(attrName) !== -1) {
- $link.addClass(ClassName.ACTIVE); // Set triggered links parents as active
+ $link.addClass(ClassName$8.ACTIVE); // Set triggered links parents as active
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
- $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ", " + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE); // Handle special case when .nav-link is inside .nav-item
+ $link.parents(Selector$8.NAV_LIST_GROUP).prev(Selector$8.NAV_LINKS + ", " + Selector$8.LIST_ITEMS).addClass(ClassName$8.ACTIVE); // Handle special case when .nav-link is inside .nav-item
- <TxtInput id={this.props.id+'-input'} name="Provider" placeholder="Put your provider here" tips="Add your own cost calculation here" onChange={this.handleProviderChange}
- class={this.classtxt(this.state.ProviderError)} Prepend="" InvalidMessage="Please provide a Provider"/>
- </div>
- <div className="col-3">
- <TxtInput id={this.props.id+'-input'} name="Service" placeholder="Put your service here" tips="Add your own cost calculation here" onChange={this.handleServiceChange}
- class={this.classtxt(this.state.ServiceError)} Prepend="" InvalidMessage="Please provide a Service"/>
- </div>
- <div className="col-3">
- <TxtInput id={this.props.id+'-input'} name={Costname} placeholder="Put your cost here" tips="Add your own cost calculation here" onChange={this.handleCostChange}
- class={this.classtxt(this.state.CostError)} Prepend={MainData.Currency} InvalidMessage="Please provide a correct numerical value" />
+
+ return (
+ <div className="container">
+ <div className="row align-items-baseline">
+ <div className="col-3">
+ <TxtInput id={this.props.id+'-input'} name="Provider" placeholder="Provider here" tips="Add your own cost calculation here" onChange={this.handleProviderChange}
+ class={this.classtxt(this.state.ProviderError)} Prepend="" InvalidMessage="Please provide a Provider"/>
+ </div>
+ <div className="col-3">
+ <TxtInput id={this.props.id+'-input'} name="Service" placeholder="Service here" tips="Add your own cost calculation here" onChange={this.handleServiceChange}
+ class={this.classtxt(this.state.ServiceError)} Prepend="" InvalidMessage="Please provide a Service"/>
+ if (conv.Enable) convout=<CostOutput id="convctotal"class="costoutput" name="Total Cost" value={ConvCurrency(this.state.total)} tips="Converted Total cost for the project"/>;
<h1 className="display-5"> EPFL Library <br/>Cost Calculator for Data Management</h1>
</div>
<div className="col-auto">
<img src="./icons/logo.png" width="200"/>
</div>
</div>
<div className="row">
<div className="col">
<p className="lead">
Welcome to our cost calculator this tool will help researcher to have an
estimate of the cost of managing, storing and publishing data.
</p>
<p className="lead">
Many providers are included in the service and you will be able to calculate a cost
based on your needs.
<br/>Total cost is calculated dynamically based on your inputs.
</p>
<p className="lead">
We hope you will enjoy this tool and it will be useful for you.
</p>
<ButtonInput class="btn btn-primary" id="head-howto" name="To Know More (HOWTO)" onClick={this.move2howto}/>
<a className="btn btn-danger" id="head-help" target="_blank" href={MainData.HelpUrl} ><img src="./icons/help.png" width="20"/> I need help with my DMP</a>
<p>This service has been developed by the <a href="https://researchdata.epfl.ch">Resarch Data Management Team</a> of the <a href="https://library.epfl.ch">EPFL Library</a> <br/>
This software is publish under GPL-3.0-only license and your are using <strong> Version {MainData.Version}</strong><br/>
Source code can be download <a href="https://c4science.ch/source/costcalc/">here</a></p>
<p><small>Icons are from the Noun Project (Book by Randi NI, Storage by I Pitu, Database by Novalyi, data cloud by Vectors Market, Information and Next by Gregor Cresnar, Database by Creative Mahira)</small></p>
+ <dt className="col-sm-3">Project Name and Duration</dt>
+ <dd className="col-sm-9">
+ <p> The Project name is only use for you.</p>
+ <p> <mark>Project Duration</mark> is used for subscription services charged by year : the yearly cost will be multiplied by the duration of the project.</p>
+ </dd>
+ </dl>
+
+
+
<dl className="row">
<dt className="col-sm-3">Categories</dt>
<dd className="col-sm-9">
This tool is divided by categories (for example Activate storage). Click
on the category name, and it will expand.
</dd>
</dl>
<dl className="row">
<dt className="col-sm-3">Providers</dt>
<dd className="col-sm-9">
<p>
Providers can be chosen from the <mark>Select a provider box</mark>. You can then tune your setting for this provider to fit your needs.
</p>
<p>
If the provider you want is not registered, you can add it manually with <mark>Provide your own provider</mark> and then enter your provider/service and cost.
</p>
</dd>
</dl>
<dl className="row">
<dt className="col-sm-3">Add or Remove Line</dt>
<dd className="col-sm-9">
<p>If you want to add a new provider use the <ButtonInput class="btn-success btn-sm" id="plugins-add-btn" name={<img className="img-fluid" src="icons\plus.png" width="20"/>}
tips={"Add a new category"} onClick={this.fctnull}/> button.
</p>
<p>
You can also remove a provider with <ButtonInput class="btn-danger btn-sm" id="plugins-add-btn"
ExtraInfo:'The costs of enabling access to research data under an SNSF grant are eligible. The data archives (data repositories) have to meet the FAIR principles.',
ExtraInfo:'The costs of enabling access to research data under an SNSF grant are eligible. The data archives (data repositories) have to meet the FAIR principles.',