├── .gitignore ├── LICENSE ├── README.md ├── composer.json ├── dist ├── css │ └── card.css ├── js │ └── card.js └── mix-manifest.json ├── package.json ├── resources ├── js │ ├── card.js │ └── components │ │ └── Card.vue └── sass │ └── card.scss ├── src ├── CardServiceProvider.php └── NovaCountdown.php └── webpack.mix.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /vendor 3 | /node_modules 4 | package-lock.json 5 | composer.phar 6 | composer.lock 7 | phpunit.xml 8 | .phpunit.result.cache 9 | .DS_Store 10 | Thumbs.db 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Swoo Inc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nova Countdown 2 | 3 | A countdown card for Laravel Nova. 4 | 5 | ## Installation 6 | 7 | Install the package with composer using the following command: 8 | 9 | ``` 10 | composer require swooinc/nova-countdown 11 | ``` 12 | 13 | ## Usage 14 | 15 | You can pass a Carbon instance for the countdown. 16 | 17 | ```php 18 | to(now()->addDays(30)) 39 | ->label('30 Days Later'), 40 | ]; 41 | } 42 | } 43 | ``` 44 | 45 | ## License 46 | 47 | The MIT License (MIT). Please see [License File](https://github.com/swooinc/nova-countdown/blob/master/LICENSE) for more information. 48 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swooinc/nova-countdown", 3 | "description": "A countdown card for Laravel Nova.", 4 | "keywords": [ 5 | "laravel", 6 | "nova", 7 | "countdown", 8 | "cards" 9 | ], 10 | "authors": [ 11 | { 12 | "name": "Chin Leung", 13 | "email": "chin@swoo.ca" 14 | }, 15 | { 16 | "name": "Jonathan Simard", 17 | "email": "jonathan@swoo.ca" 18 | } 19 | ], 20 | "license": "MIT", 21 | "require": { 22 | "php": ">=7.1.0", 23 | "laravel/nova": "*", 24 | "illuminate/support": "~5.6.0|~5.8.0|^6.0|^7.0|^8.0|^9.0" 25 | }, 26 | "autoload": { 27 | "psr-4": { 28 | "Swooinc\\NovaCountdown\\": "src/" 29 | } 30 | }, 31 | "extra": { 32 | "laravel": { 33 | "providers": [ 34 | "Swooinc\\NovaCountdown\\CardServiceProvider" 35 | ] 36 | } 37 | }, 38 | "config": { 39 | "sort-packages": true 40 | }, 41 | "minimum-stability": "dev", 42 | "prefer-stable": true 43 | } 44 | -------------------------------------------------------------------------------- /dist/css/card.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swooinc/nova-countdown/f48168b945290aa314dc2e00eeb38f06f552f188/dist/css/card.css -------------------------------------------------------------------------------- /dist/js/card.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function n(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},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=0)}([function(e,t,n){n(1),e.exports=n(6)},function(e,t,n){Nova.booting(function(e,t){e.component("nova-countdown",n(2))})},function(e,t,n){var i=n(3)(n(4),n(5),!1,null,null,null);e.exports=i.exports},function(e,t){e.exports=function(e,t,n,i,s,o){var r,a=e=e||{},c=typeof e.default;"object"!==c&&"function"!==c||(r=e,a=e.default);var u,d="function"==typeof a?a.options:a;if(t&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0),n&&(d.functional=!0),s&&(d._scopeId=s),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},d._ssrRegister=u):i&&(u=i),u){var m=d.functional,f=m?d.render:d.beforeCreate;m?(d._injectStyles=u,d.render=function(e,t){return u.call(t),f(e,t)}):d.beforeCreate=f?[].concat(f,u):[u]}return{esModule:r,exports:a,options:d}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:["card"],data:function(){return{timeLeft:"00:00:00",remainingTime:0,seconds:0,minutes:0,hours:0,days:0}},created:function(){this.remainingTime=this.card.to-(new Date).getTime()},mounted:function(){var e=this;this.remainingTime>0&&window.requestAnimationFrame(this.showTime),window.addEventListener("focus",function(){e.remainingTime<1e3&&(e.timeLeft="00:00:00:00",window.cancelAnimationFrame(e.showTime))})},methods:{pad:function(e){return("0"+Math.floor(e)).slice(-2)},showTime:function(){this.remainingTime=this.card.to-(new Date).getTime(),this.seconds=this.pad(this.remainingTime%6e4/1e3),this.minutes=this.pad(this.remainingTime%36e5/6e4),this.hours=this.pad(this.remainingTime%864e5/36e5),this.days=this.pad(this.remainingTime/864e5),this.remainingTime>=1e3?(this.timeLeft=this.days+":"+this.hours+":"+this.minutes+":"+this.seconds,window.requestAnimationFrame(this.showTime)):(window.cancelAnimationFrame(this.showTime),this.timeLeft="00:00:00:00")}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("card",{staticClass:"px-6 py-4"},[n("div",{staticClass:"flex mb-4"},[n("h3",{staticClass:"mr-3 text-base text-80 font-bold"},[e._v(e._s(e.card.name||"Countdown"))])]),e._v(" "),n("p",{staticClass:"flex items-center text-4xl mb-4"},[e._v(e._s(e.timeLeft))]),e._v(" "),n("div",{staticClass:"flex items-center"},[e.card.label?n("p",{staticClass:"text-80 font-bold"},[n("span",[e._v(e._s(e.card.label))])]):e._e()])])},staticRenderFns:[]}},function(e,t){}]); -------------------------------------------------------------------------------- /dist/mix-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "/js/card.js": "/js/card.js", 3 | "/css/card.css": "/css/card.css" 4 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "npm run development", 5 | "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 | "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 7 | "watch-poll": "npm run watch -- --watch-poll", 8 | "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 9 | "prod": "npm run production", 10 | "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 11 | }, 12 | "devDependencies": { 13 | "cross-env": "^5.0.0", 14 | "laravel-mix": "^1.0" 15 | }, 16 | "dependencies": { 17 | "vue": "^2.5.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /resources/js/card.js: -------------------------------------------------------------------------------- 1 | Nova.booting((Vue, router) => { 2 | Vue.component('nova-countdown', require('./components/Card')); 3 | }) 4 | -------------------------------------------------------------------------------- /resources/js/components/Card.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 64 | -------------------------------------------------------------------------------- /resources/sass/card.scss: -------------------------------------------------------------------------------- 1 | // Nova Card CSS 2 | -------------------------------------------------------------------------------- /src/CardServiceProvider.php: -------------------------------------------------------------------------------- 1 | withMeta([ 36 | 'label' => $label, 37 | ]); 38 | } 39 | 40 | /** 41 | * Get the displayable name of the metric. 42 | * 43 | * @param string $name 44 | * @return string 45 | */ 46 | public function name(string $name) 47 | { 48 | return $this->withMeta([ 49 | 'name' => $name, 50 | ]); 51 | } 52 | 53 | /** 54 | * Set the end date of the countdown. 55 | * 56 | * @param \Carbon\Carbon $date 57 | * @return self 58 | */ 59 | public function to(Carbon $date) 60 | { 61 | return $this->withMeta([ 62 | 'to' => $date->timestamp * 1000 63 | ]); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | let mix = require('laravel-mix') 2 | 3 | mix.setPublicPath('dist') 4 | .js('resources/js/card.js', 'js') 5 | .sass('resources/sass/card.scss', 'css') 6 | --------------------------------------------------------------------------------