use Elementor\Utils;
use function Roots\view;
+use function Roots\asset;
class SolutionGrid extends _Base {
* @return array Widget scripts dependencies.
*/
public function get_script_depends() {
- return [];
+ wp_enqueue_script('solution-grid', asset('/scripts/solution-grid.js'), ['jquery'], false, true);
+ return ['solution-grid'];
}
/**
* Register the widget controls.
'url' => Utils::get_placeholder_image_src(),
],
],
+ [
+ 'name' => 'pdf',
+ 'label' => __('Printable PDF', 'cube'),
+ 'label_block' => true,
+ 'type' => 'file-select', // Using the file-select-control-for-elementor plugin
+ 'placeholder' => __('PDF URL'),
+ ],
],
'title_field' => '<# var pName = puzzle.url.split("/").pop().split(".").shift(); sName = solution.url.split("/").pop().split(".").shift(); #><div style="margin:1.25em 0;display:grid;grid-gap:1em;grid-template-columns:repeat(2, 1fr);text-align:center;"><div><img src="{{{ puzzle.url }}}" style="display:block;margin-bottom:0.5em">{{{ pName }}}</div><div><img src="{{{ solution.url }}}" style="display:block;margin-bottom:0.5em">{{{ sName }}}</div></div>',
]
"lost": "^8.3.1",
"mix-tailwindcss": "^1.0.2",
"npm-run-all": "^4.1",
+ "print-js": "^1.5.0",
"purgecss-with-wordpress": "^2.1.0",
"rimraf": "^3.0.2",
"rupture": "^0.7.1",
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
+<g>
+ <g>
+ <circle fill="#FF9B11" cx="40" cy="40" r="40"/>
+ </g>
+ <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
+ <g>
+ <path fill="#FFFFFF" d="M9.774,9.086H8.751c-0.142,0-0.257-0.115-0.257-0.257c0-0.142,0.115-0.257,0.257-0.257h1.023
+ c0.14,0,0.255-0.115,0.255-0.257V5.743c0-0.142-0.114-0.257-0.255-0.257H3.94c-0.14,0-0.255,0.115-0.255,0.257v2.571
+ c0,0.142,0.114,0.257,0.255,0.257h1.023c0.142,0,0.257,0.115,0.257,0.257c0,0.142-0.115,0.257-0.257,0.257H3.94
+ c-0.424,0-0.769-0.346-0.769-0.771V5.743c0-0.425,0.345-0.771,0.769-0.771h5.834c0.424,0,0.769,0.346,0.769,0.771v2.571
+ C10.543,8.74,10.198,9.086,9.774,9.086z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M4.964,6.514H4.452c-0.142,0-0.257-0.115-0.257-0.257C4.195,6.115,4.31,6,4.452,6h0.512
+ c0.142,0,0.257,0.115,0.257,0.257C5.221,6.399,5.106,6.514,4.964,6.514z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M8.571,10.8H5.143c-0.142,0-0.257-0.115-0.257-0.257V7.286c0-0.142,0.115-0.257,0.257-0.257h3.429
+ c0.142,0,0.257,0.115,0.257,0.257v3.257C8.829,10.685,8.713,10.8,8.571,10.8z M5.4,10.286h2.914V7.543H5.4V10.286z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M8.571,5.486H5.143c-0.142,0-0.257-0.115-0.257-0.257V3.686c0-0.425,0.323-0.771,0.72-0.771h2.502
+ c0.397,0,0.72,0.346,0.72,0.771v1.543C8.829,5.371,8.713,5.486,8.571,5.486z M5.4,4.971h2.914V3.686
+ c0-0.139-0.094-0.257-0.206-0.257H5.606C5.494,3.429,5.4,3.546,5.4,3.686V4.971z"/>
+ </g>
+ </g>
+</g>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
+<g>
+ <g>
+ <circle fill="#03A9ED" cx="40" cy="40" r="40"/>
+ </g>
+ <g>
+ <g>
+ <g>
+ <path fill="#FFFFFF" d="M40,19.627c-0.829,0-1.5-0.671-1.5-1.5V15c0-0.829,0.671-1.5,1.5-1.5s1.5,0.671,1.5,1.5v3.126
+ C41.5,18.955,40.829,19.627,40,19.627z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M53.94,25.124c-0.396,0-0.792-0.156-1.086-0.466c-0.571-0.6-0.548-1.549,0.052-2.121l2.324-2.212
+ c0.6-0.57,1.549-0.547,2.121,0.052c0.571,0.6,0.548,1.549-0.052,2.121l-2.324,2.212C54.684,24.987,54.312,25.124,53.94,25.124z"
+ />
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M63,38.388h-3.286c-0.829,0-1.5-0.672-1.5-1.5c0-0.829,0.671-1.5,1.5-1.5H63c0.829,0,1.5,0.671,1.5,1.5
+ C64.5,37.716,63.829,38.388,63,38.388z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M56.264,53.865c-0.372,0-0.744-0.137-1.034-0.413l-2.324-2.212c-0.6-0.571-0.624-1.521-0.052-2.121
+ c0.572-0.6,1.521-0.624,2.121-0.053l2.324,2.212c0.6,0.571,0.624,1.521,0.052,2.121C57.056,53.709,56.66,53.865,56.264,53.865z"
+ />
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M26.06,25.124c-0.372,0-0.744-0.137-1.034-0.414l-2.324-2.212c-0.6-0.571-0.624-1.521-0.052-2.121
+ c0.572-0.6,1.521-0.622,2.121-0.052l2.324,2.212c0.6,0.571,0.624,1.521,0.052,2.121C26.851,24.967,26.456,25.124,26.06,25.124z"
+ />
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M20.286,38.388H17c-0.829,0-1.5-0.672-1.5-1.5c0-0.829,0.671-1.5,1.5-1.5h3.286
+ c0.829,0,1.5,0.671,1.5,1.5C21.786,37.716,21.114,38.388,20.286,38.388z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M23.736,53.865c-0.396,0-0.792-0.156-1.086-0.466c-0.571-0.6-0.548-1.55,0.052-2.121l2.324-2.212
+ c0.6-0.571,1.549-0.547,2.121,0.053s0.548,1.55-0.052,2.121l-2.324,2.212C24.479,53.729,24.107,53.865,23.736,53.865z"/>
+ </g>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M40,62.5c-3.716,0-7.501-2.819-7.501-5.587v-5.722c0-1.801-0.804-3.555-2.206-4.813
+ c-2.905-2.608-4.571-6.347-4.571-10.257c0-7.458,6.539-13.759,14.278-13.759s14.278,6.301,14.278,13.759
+ c0,3.911-1.666,7.649-4.571,10.257c-1.401,1.259-2.205,3.013-2.205,4.813v5.722C47.501,59.681,43.716,62.5,40,62.5z M40,25.362
+ c-6.113,0-11.278,4.927-11.278,10.759c0,3.06,1.303,5.985,3.575,8.025c2.035,1.827,3.201,4.395,3.201,7.046v5.722
+ c0,0.709,2.044,2.587,4.501,2.587s4.501-1.878,4.501-2.587v-5.722c0-2.651,1.167-5.219,3.201-7.046
+ c2.272-2.04,3.576-4.965,3.576-8.025C51.278,30.289,46.113,25.362,40,25.362z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M47.698,52.745H32.302c-0.829,0-1.5-0.672-1.5-1.5s0.671-1.5,1.5-1.5h15.396c0.829,0,1.5,0.672,1.5,1.5
+ S48.526,52.745,47.698,52.745z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M47.698,57.078H32.302c-0.829,0-1.5-0.672-1.5-1.5s0.671-1.5,1.5-1.5h15.396c0.829,0,1.5,0.672,1.5,1.5
+ S48.526,57.078,47.698,57.078z"/>
+ </g>
+ </g>
+</g>
+</svg>
--- /dev/null
+import printJS from 'print-js'
+
+$(document).on('click', '[data-print-solution]', function(event) {
+ event.preventDefault();
+ let PDF = $(this).attr('href');
+
+ if (PDF !== '') {
+ printJS(PDF);
+ }
+});
+below(768px)
grid-template-columns: repeat(2, 1fr)
- img
+ &-item
border-radius: 1vw
+ overflow: hidden
+ position: relative
+above($content-max-width)
border-radius: 16px
+
+ &:hover
+ .solution-grid-overlay
+ opacity: 1
+ pointer-events: auto
+
+ &-overlay
+ @apply opacity-0 pointer-events-none // only visible on hover
+ @apply absolute top-0 left-0 w-full h-full
+ @apply flex items-center justify-center
+ @apply bg-dark-blue bg-opacity-80
+ transition: opacity 0.3s
+
+ &-icon
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7) !important
+ border-radius: 50% !important
+ transition: transform 0.2s ease-out
+
+ &:hover
+ transform: scale(1.1)
<div class="solution-grid">
@foreach($items as $item)
- <a href="{{ $item['solution']['url'] }}">
+ <div class="solution-grid-item">
<img class="solution-grid-thumbnail" src="{{ $item['puzzle']['url'] }}">
- </a>
+ <div class="solution-grid-overlay">
+ <a href="{{ $item['solution']['url'] }}" class="flex-initial ml-3 mr-5">
+ <img src="@asset('images/solution.svg')" title="{{ __('Solution') }}" width="76" height="76" class="solution-grid-icon">
+ </a>
+ <a href="{{ $item['pdf'] }}" class="flex-initial mr-3" data-print-solution>
+ <img src="@asset('images/print.svg')" title="{{ __('Print') }}" width="76" height="76" class="solution-grid-icon">
+ </a>
+ </div>
+ </div>
@endforeach
</div>
colors: {
'dark-blue': '#0c2448',
},
+ backgroundOpacity: {
+ '80': '0.8',
+ },
},
},
variants: {},
mix.stylus('resources/assets/styles/editor.styl', 'styles');
mix.js('resources/assets/scripts/app.js', 'scripts')
+ .js('resources/assets/scripts/solution-grid.js', 'scripts')
.js('resources/assets/scripts/customizer.js', 'scripts')
.blocks('resources/assets/scripts/editor.js', 'scripts')
.extract();
resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+print-js@^1.5.0:
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/print-js/-/print-js-1.5.0.tgz#6f7e68c6d542ed5eeb535b2ad2469fc24fc9888c"
+ integrity sha512-Vy7UG2NGpNRMR1CcwoaK813tM3uUB0I4vTylxmFLXMb77gJb+6GB5aUmeasyT+CetddbmXUZsHr9BF+0VDN/fg==
+
private@^0.1.8, private@~0.1.5:
version "0.1.8"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
projects / stop-the-robots.git / commitdiff
