first commit
This commit is contained in:
CHIEFSOFT\ameye
+9
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress-bar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress-bar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress {
|
||||
--cnvs-progress-background: #f8f9fa;
|
||||
--cnvs-progress-border-radius: .25rem;
|
||||
--cnvs-progress-font-size: .75rem;
|
||||
--cnvs-progress-bar-background: #007bff;
|
||||
--cnvs-progress-bar-color: #fff;
|
||||
--cnvs-progress-striped-bar-background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
font-size: var(--cnvs-progress-font-size);
|
||||
background-color: var(--cnvs-progress-background);
|
||||
border-radius: var(--cnvs-progress-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-progress-bar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
color: var(--cnvs-progress-bar-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: width .6s ease;
|
||||
transition: width .6s ease;
|
||||
background-color: var(--cnvs-progress-bar-background);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-primary .cnvs-block-progress-bar {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-secondary .cnvs-block-progress-bar {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-success .cnvs-block-progress-bar {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-info .cnvs-block-progress-bar {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-warning .cnvs-block-progress-bar {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-danger .cnvs-block-progress-bar {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-light .cnvs-block-progress-bar {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-dark .cnvs-block-progress-bar {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.cnvs-block-progress-bar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-progress-striped .cnvs-block-progress-bar {
|
||||
background-image: var(--cnvs-progress-striped-bar-background-image);
|
||||
background-size: 1rem 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-progress-animated .cnvs-block-progress-bar {
|
||||
-webkit-animation: cnvs-block-progress-stripes 1s linear infinite;
|
||||
animation: cnvs-block-progress-stripes 1s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes cnvs-block-progress-stripes {
|
||||
from {
|
||||
background-position: 1rem 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cnvs-block-progress-stripes {
|
||||
from {
|
||||
background-position: 1rem 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress {
|
||||
--cnvs-progress-background: #f8f9fa;
|
||||
--cnvs-progress-border-radius: .25rem;
|
||||
--cnvs-progress-font-size: .75rem;
|
||||
--cnvs-progress-bar-background: #007bff;
|
||||
--cnvs-progress-bar-color: #fff;
|
||||
--cnvs-progress-striped-bar-background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
font-size: var(--cnvs-progress-font-size);
|
||||
background-color: var(--cnvs-progress-background);
|
||||
border-radius: var(--cnvs-progress-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-progress-bar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
color: var(--cnvs-progress-bar-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: width .6s ease;
|
||||
transition: width .6s ease;
|
||||
background-color: var(--cnvs-progress-bar-background);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-primary .cnvs-block-progress-bar {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-secondary .cnvs-block-progress-bar {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-success .cnvs-block-progress-bar {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-info .cnvs-block-progress-bar {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-warning .cnvs-block-progress-bar {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-danger .cnvs-block-progress-bar {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-light .cnvs-block-progress-bar {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-dark .cnvs-block-progress-bar {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.cnvs-block-progress-bar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-progress-striped .cnvs-block-progress-bar {
|
||||
background-image: var(--cnvs-progress-striped-bar-background-image);
|
||||
background-size: 1rem 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-progress-animated .cnvs-block-progress-bar {
|
||||
-webkit-animation: cnvs-block-progress-stripes 1s linear infinite;
|
||||
animation: cnvs-block-progress-stripes 1s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes cnvs-block-progress-stripes {
|
||||
from {
|
||||
background-position: 1rem 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cnvs-block-progress-stripes {
|
||||
from {
|
||||
background-position: 1rem 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=80)}({1:function(e,t,n){var r;
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var i=typeof r;if("string"===i||"number"===i)e.push(r);else if(Array.isArray(r)){if(r.length){var c=o.apply(null,r);c&&e.push(c)}}else if("object"===i)if(r.toString===Object.prototype.toString)for(var u in r)n.call(r,u)&&r[u]&&e.push(u);else e.push(r.toString())}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},135:function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r);function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=l(e);if(t){var o=l(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return f(this,n)}}function f(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function l(e){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var p=wp.element,y=p.Component,b=p.Fragment,h=wp.components.ResizableBox,m=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}(f,e);var t,n,r,i=s(f);function f(){return c(this,f),i.apply(this,arguments)}return t=f,(n=[{key:"render",value:function(){var e=this.props,t=e.setAttributes,n=e.isSelected,r=this.props.className,i=this.props.attributes,c=i.height,u=i.width,a=i.striped,s=i.animated,f=i.displayPercent,l=i.canvasClassName;return r=o()("cnvs-block-progress",{"cnvs-block-progress-striped":a,"cnvs-block-progress-animated":a&&s,"is-selected":n},l,r),wp.element.createElement(b,null,wp.element.createElement(h,{className:r,size:{height:c},minHeight:"1",maxHeight:"20",enable:{bottom:!0},onResizeStop:function(e,n,r,o){t({height:parseInt(c+o.height,10)})}},wp.element.createElement(h,{className:"cnvs-block-progress-bar",size:{width:"".concat(u,"%")},minHeight:"1",maxHeight:"100",enable:{right:!0},onResizeStop:function(e,n,r,o){t({width:Math.min(100,Math.max(0,u+parseInt(100*o.width/jQuery(r).parent().width(),10)))})}},f?"".concat(u,"%"):"")))}}])&&u(t.prototype,n),r&&u(t,r),f}(y);(0,wp.hooks.addFilter)("canvas.customBlock.editRender","canvas/progress/editRender",(function(e,t){return"canvas/progress"===t.name?wp.element.createElement(m,t):e}))},80:function(e,t,n){e.exports=n(135)}});
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import ProgressBlockEdit from './edit.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Progress block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/progress' === blockProps.name ) {
|
||||
return (
|
||||
<ProgressBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/progress/editRender', editRender );
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
ResizableBox,
|
||||
} = wp.components;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class ProgressBlockEdit extends Component {
|
||||
render() {
|
||||
const {
|
||||
setAttributes,
|
||||
isSelected,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
height,
|
||||
width,
|
||||
striped,
|
||||
animated,
|
||||
displayPercent,
|
||||
canvasClassName,
|
||||
} = this.props.attributes;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-progress',
|
||||
{
|
||||
'cnvs-block-progress-striped': striped,
|
||||
'cnvs-block-progress-animated': striped && animated,
|
||||
'is-selected': isSelected,
|
||||
},
|
||||
canvasClassName,
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<ResizableBox
|
||||
className={ className }
|
||||
size={ {
|
||||
height,
|
||||
} }
|
||||
minHeight="1"
|
||||
maxHeight="20"
|
||||
enable={ { bottom: true } }
|
||||
onResizeStop={ ( event, direction, elt, delta ) => {
|
||||
setAttributes( {
|
||||
height: parseInt( height + delta.height, 10 ),
|
||||
} );
|
||||
} }
|
||||
>
|
||||
<ResizableBox
|
||||
className="cnvs-block-progress-bar"
|
||||
size={ {
|
||||
width: `${ width }%`,
|
||||
} }
|
||||
minHeight="1"
|
||||
maxHeight="100"
|
||||
enable={ { right: true } }
|
||||
onResizeStop={ ( event, direction, elt, delta ) => {
|
||||
setAttributes( {
|
||||
width: Math.min( 100, Math.max( 0, width + parseInt( 100 * delta.width / jQuery( elt ).parent().width(), 10 ) ) ),
|
||||
} );
|
||||
} }
|
||||
>
|
||||
{ displayPercent ? `${ width }%` : '' }
|
||||
</ResizableBox>
|
||||
</ResizableBox>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Progress block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
if ( $attributes['striped'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-progress-striped';
|
||||
|
||||
if ( isset( $attributes['animated'] ) && $attributes['animated'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-progress-animated';
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
|
||||
<div class="cnvs-block-progress-bar" role="progressbar" aria-valuenow="<?php echo esc_attr( $attributes['width'] ); ?>" aria-valuemin="0" aria-valuemax="<?php echo esc_attr( $attributes['width'] ); ?>">
|
||||
<?php
|
||||
if ( $attributes['displayPercent'] ) {
|
||||
echo esc_html( $attributes['width'] . '%' );
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user