diff --git a/dist/css/icon.gl.css.map b/dist/css/icon.gl.css.map index f0c5758a..f8d940ba 100644 --- a/dist/css/icon.gl.css.map +++ b/dist/css/icon.gl.css.map @@ -1 +1 @@ -{"version":3,"sources":["%3Cinput%20css%20kb3Tnx%3E"],"names":[],"mappings":"AAAA;;;;;;;;;;CAUC;AACD;;;;;;CAMC;AACD;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,cAAc;EACd,wCAAwC;EACxC,qBAAqB;EACrB,gCAAgC;AAClC;AACA;EACE,0BAA0B;AAC5B;AACA;EACE,cAAc;AAChB;AACA;EACE,WAAW;EACX,mBAAmB;AACrB;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;AACzB;;AAEA;;EAEE,uBAAuB;AACzB","file":"to.css","sourcesContent":["/**\n* icon.gl\n*\n* @description Icon Library\n* @author Scape Agency (https://www.scape.agency)\n* @version v1.0.0\n* @copyright 2020-2023 Scape Agency (https://www.scape.agency)\n* @website https://www.icon.gl/\n* @repository https://github.com/scape-agency/icon.gl/\n* @license Apache 2.0 License (https://github.com/scape-agency/icon.gl/blob/main/LICENSE)\n*/\n/**\nTABLE OF CONTENTS\n===============================================================================\n1.\n2.\n3. \n*/\n.igl_1x {\n font-size: 1em;\n}\n\n.igl_2x {\n font-size: 2em;\n}\n\n.igl_3x {\n font-size: 3em;\n}\n\n.igl_4x {\n font-size: 4em;\n}\n\n.igl_5x {\n font-size: 5em;\n}\n\n.igl_6x {\n font-size: 6em;\n}\n\n.igl_7x {\n font-size: 7em;\n}\n\n.igl_8x {\n font-size: 8em;\n}\n\n.igl_9x {\n font-size: 9em;\n}\n\n.igl_10x {\n font-size: 10em;\n}\n\n.igl_icon-interactive:hover {\n color: #0000cc;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n transform: scale(1.1);\n transition: all 0.3s ease-in-out;\n}\n.igl_icon-interactive:focus {\n outline: 2px solid #6666ff;\n}\n.igl_icon-interactive:active {\n color: #0000e6;\n}\n.igl_icon-interactive:disabled {\n color: gray;\n cursor: not-allowed;\n}\n\n.igl_rotate_90 {\n transform: rotate(90deg);\n}\n\n.igl_rotate_180 {\n transform: rotate(180deg);\n}\n\n.igl_rotate_270 {\n transform: rotate(270deg);\n}\n\n.igl_flip-horizontal {\n transform: scale(-1, 1);\n}\n\n.igl_flip-vertical {\n transform: scale(1, -1);\n}\n\n.igl_flip-both,\n.igl_flip-horizontal.igl_flip-vertical {\n transform: scale(1, -1);\n}"]} \ No newline at end of file +{"version":3,"sources":["%3Cinput%20css%20X9qmQT%3E"],"names":[],"mappings":"AAAA;;;;;;;;;;CAUC;AACD;;;;;;CAMC;AACD;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,cAAc;EACd,wCAAwC;EACxC,qBAAqB;EACrB,gCAAgC;AAClC;AACA;EACE,0BAA0B;AAC5B;AACA;EACE,cAAc;AAChB;AACA;EACE,WAAW;EACX,mBAAmB;AACrB;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;AACzB;;AAEA;;EAEE,uBAAuB;AACzB","file":"to.css","sourcesContent":["/**\n* icon.gl\n*\n* @description Icon Library\n* @author Scape Agency (https://www.scape.agency)\n* @version v1.0.0\n* @copyright 2020-2023 Scape Agency (https://www.scape.agency)\n* @website https://www.icon.gl/\n* @repository https://github.com/scape-agency/icon.gl/\n* @license Apache 2.0 License (https://github.com/scape-agency/icon.gl/blob/main/LICENSE)\n*/\n/**\nTABLE OF CONTENTS\n===============================================================================\n1.\n2.\n3. \n*/\n.igl_1x {\n font-size: 1em;\n}\n\n.igl_2x {\n font-size: 2em;\n}\n\n.igl_3x {\n font-size: 3em;\n}\n\n.igl_4x {\n font-size: 4em;\n}\n\n.igl_5x {\n font-size: 5em;\n}\n\n.igl_6x {\n font-size: 6em;\n}\n\n.igl_7x {\n font-size: 7em;\n}\n\n.igl_8x {\n font-size: 8em;\n}\n\n.igl_9x {\n font-size: 9em;\n}\n\n.igl_10x {\n font-size: 10em;\n}\n\n.igl_icon-interactive:hover {\n color: #0000cc;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n transform: scale(1.1);\n transition: all 0.3s ease-in-out;\n}\n.igl_icon-interactive:focus {\n outline: 2px solid #6666ff;\n}\n.igl_icon-interactive:active {\n color: #0000e6;\n}\n.igl_icon-interactive:disabled {\n color: gray;\n cursor: not-allowed;\n}\n\n.igl_rotate_90 {\n transform: rotate(90deg);\n}\n\n.igl_rotate_180 {\n transform: rotate(180deg);\n}\n\n.igl_rotate_270 {\n transform: rotate(270deg);\n}\n\n.igl_flip-horizontal {\n transform: scale(-1, 1);\n}\n\n.igl_flip-vertical {\n transform: scale(1, -1);\n}\n\n.igl_flip-both,\n.igl_flip-horizontal.igl_flip-vertical {\n transform: scale(1, -1);\n}"]} \ No newline at end of file diff --git a/dist/css/icon.gl.min.css.map b/dist/css/icon.gl.min.css.map index 13d029df..34ed45d8 100644 --- a/dist/css/icon.gl.min.css.map +++ b/dist/css/icon.gl.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["%3Cinput%20css%200W5sNb%3E"],"names":[],"mappings":"AAAA,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,SAAS,cAAc,CAAC,4BAAuC,mCAAmC,CAA9C,UAAU,CAAqC,oBAAoB,CAAC,8BAA8B,CAAC,4BAA4B,sBAAsB,CAAC,6BAA6B,aAAa,CAAC,+BAA+B,UAAU,CAAC,kBAAkB,CAAC,eAAe,uBAAuB,CAAC,gBAAgB,wBAAwB,CAAC,gBAAgB,wBAAwB,CAAC,qBAAqB,oBAAsB,CAA2C,yEAAsD,oBAAsB","file":"to.css","sourcesContent":[".igl_1x{font-size:1em}.igl_2x{font-size:2em}.igl_3x{font-size:3em}.igl_4x{font-size:4em}.igl_5x{font-size:5em}.igl_6x{font-size:6em}.igl_7x{font-size:7em}.igl_8x{font-size:8em}.igl_9x{font-size:9em}.igl_10x{font-size:10em}.igl_icon-interactive:hover{color:#00c;box-shadow:0 2px 4px rgba(0,0,0,.2);transform:scale(1.1);transition:all .3s ease-in-out}.igl_icon-interactive:focus{outline:2px solid #66f}.igl_icon-interactive:active{color:#0000e6}.igl_icon-interactive:disabled{color:gray;cursor:not-allowed}.igl_rotate_90{transform:rotate(90deg)}.igl_rotate_180{transform:rotate(180deg)}.igl_rotate_270{transform:rotate(270deg)}.igl_flip-horizontal{transform:scale(-1, 1)}.igl_flip-vertical{transform:scale(1, -1)}.igl_flip-both,.igl_flip-horizontal.igl_flip-vertical{transform:scale(1, -1)}"]} \ No newline at end of file +{"version":3,"sources":["%3Cinput%20css%20rv6jpM%3E"],"names":[],"mappings":"AAAA,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,SAAS,cAAc,CAAC,4BAAuC,mCAAmC,CAA9C,UAAU,CAAqC,oBAAoB,CAAC,8BAA8B,CAAC,4BAA4B,sBAAsB,CAAC,6BAA6B,aAAa,CAAC,+BAA+B,UAAU,CAAC,kBAAkB,CAAC,eAAe,uBAAuB,CAAC,gBAAgB,wBAAwB,CAAC,gBAAgB,wBAAwB,CAAC,qBAAqB,oBAAsB,CAA2C,yEAAsD,oBAAsB","file":"to.css","sourcesContent":[".igl_1x{font-size:1em}.igl_2x{font-size:2em}.igl_3x{font-size:3em}.igl_4x{font-size:4em}.igl_5x{font-size:5em}.igl_6x{font-size:6em}.igl_7x{font-size:7em}.igl_8x{font-size:8em}.igl_9x{font-size:9em}.igl_10x{font-size:10em}.igl_icon-interactive:hover{color:#00c;box-shadow:0 2px 4px rgba(0,0,0,.2);transform:scale(1.1);transition:all .3s ease-in-out}.igl_icon-interactive:focus{outline:2px solid #66f}.igl_icon-interactive:active{color:#0000e6}.igl_icon-interactive:disabled{color:gray;cursor:not-allowed}.igl_rotate_90{transform:rotate(90deg)}.igl_rotate_180{transform:rotate(180deg)}.igl_rotate_270{transform:rotate(270deg)}.igl_flip-horizontal{transform:scale(-1, 1)}.igl_flip-vertical{transform:scale(1, -1)}.igl_flip-both,.igl_flip-horizontal.igl_flip-vertical{transform:scale(1, -1)}"]} \ No newline at end of file diff --git a/dist/font/icon.gl.eot b/dist/font/icon.gl.eot index a16950b8..62d09bc1 100644 Binary files a/dist/font/icon.gl.eot and b/dist/font/icon.gl.eot differ diff --git a/dist/js/index.js b/dist/js/index.js new file mode 100644 index 00000000..fd2774c1 --- /dev/null +++ b/dist/js/index.js @@ -0,0 +1,3 @@ +"use strict"; +// Copyright 2020 Scape Agency BV +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/dist/package.json b/dist/package.json index cd687e89..9579d273 100644 --- a/dist/package.json +++ b/dist/package.json @@ -2,5 +2,25 @@ "name": "icon.gl", "version": "0.0.1", "description": "icon.gl is a icon library and framework developed by Scape Agency.", + "keywords": [ + "icon.gl", + "stylescape", + "icon", + "icons", + "icon-library", + "font", + "sprite", + "svg", + "sass", + "scss", + "woff", + "woff2", + "responsive", + "front-end", + "framework", + "web" + ], + "license": "Apache-2.0", + "homepage": "https://www.icon.gl/", "main": "index.js" } \ No newline at end of file diff --git a/dist/scss/_animate.scss b/dist/scss/_animate.scss new file mode 100644 index 00000000..0a992b34 --- /dev/null +++ b/dist/scss/_animate.scss @@ -0,0 +1,776 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// icon.gl | Animations +// ============================================================================ + + +@mixin animation_base( + $name: none, + $duration: 1s, + $timing-function: ease-in-out, + $iteration-count: infinite, + $delay: 0s, + $direction: normal +) { + animation-name: $name; + animation-duration: $duration; + animation-timing-function: $timing-function; + animation-iteration-count: $iteration-count; + animation-delay: $delay; + animation-direction: $direction; +} + + + +// if agent or operating system prefers reduced motion, disable animations +// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ +// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion +@media (prefers-reduced-motion: reduce) { + .animation_beat, + .animation_bounce, + .animation_fade, + .animation_beat_fade, + .animation_flip, + .animation_pulse, + .animation_shake, + .animation_spin, + .animation_spin-pulse { + animation-delay: -1ms; + animation-duration: 1ms; + animation-iteration-count: 1; + transition-delay: 0s; + transition-duration: 0s; + } +} + +// Spin +// ---------------------------------------------------------------------------- + +@mixin animation_spin( + $start-angle: 0deg, + $end-angle: 360deg, +) { + @include animation_base(animation_spin, 1s, linear, infinite); + @keyframes animation_spin { + 0% { transform: rotate($start-angle); } + 100% { transform: rotate($end-angle); } + } + +} + + +.#{$icongl_prefix}animation_spin { + @include animation_spin(); +} + + +.animation_spin-reverse { + @include animation_base; + --animation_animation-direction: reverse; +} + + +// Spin and Grow Animation: +// ---------------------------------------------------------------------------- + +@mixin animation_spin_grow($scale: 1.2, $duration: 2s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_spin_grow, $duration, $timing-function, $iteration-count); + @keyframes animation_spin_grow { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale($scale) rotate(180deg); } + } +} + +.#{$icongl_prefix}animation_spin_grow { + @include animation_spin_grow(); +} +// Beat +// ---------------------------------------------------------------------------- + +@mixin animation_beat( + $scale: 1.25, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_beat, $duration, $timing-function, $iteration-count); + @keyframes animation_beat { + 0%, 90% { transform: scale(1); } + 45% { transform: scale($scale); } + } +} + +.#{$icongl_prefix}animation_beat { + @include animation_beat(); +} + + + + + +.#{$icongl_prefix}animation_beat_fade { + @include animation_base; + animation-name: animation_beat_fade; + animation-timing-function: cubic-bezier(.4,0,.6,1); +} + + +@keyframes animation_beat_fade { + 0%, 100% { + opacity: (--animation_beat_fade-opacity, 0.4); + transform: scale(1); + } + 50% { + opacity: 1; + transform: scale(--animation_beat_fade-scale, 1.125); + } + } + +// Bounce +// ---------------------------------------------------------------------------- + + +@mixin animation_bounce( + $duration: 1s, + $timing-function: cubic-bezier(0.280, 0.840, 0.420, 1), + $iteration-count: infinite +) { + @include animation_base( + animation_bounce, + $duration, + $timing-function, + $iteration-count, + ); + @keyframes animation_bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-20%); } + } + // @keyframes animation_bounce { + // 0% { transform: scale(1,1) translateY(0); } + // 10% { transform: scale(var(--animation_bounce-start-scale-x, 1.1),var(--animation_bounce-start-scale-y, 0.9)) translateY(0); } + // 30% { transform: scale(var(--animation_bounce-jump-scale-x, 0.9),var(--animation_bounce-jump-scale-y, 1.1)) translateY(var(--animation_bounce-height, -0.5em); } + // 50% { transform: scale(var(--animation_bounce-land-scale-x, 1.05),var(--animation_bounce-land-scale-y, 0.95)) translateY(0); } + // 57% { transform: scale(1,1) translateY(--animation_bounce-rebound, -0.125em); } + // 64% { transform: scale(1,1) translateY(0); } + // 100% { transform: scale(1,1) translateY(0); } + // } + +} + +.animation_bounce { + @include animation_bounce(); +} + + +// Fade +// ---------------------------------------------------------------------------- + +@mixin animation_fade( + $duration: 1s, + // $timing-function: ease-in-out, + $timing-function: cubic-bezier(.4,0,.6,1), + $iteration-count: infinite +) { + @include animation_base( + animation_fade, + $duration, + $timing-function, + $iteration-count + ); + @keyframes animation_fade { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } + } + // @keyframes animation_fade { + // 50% { opacity: var(--animation_fade-opacity, 0.4); } + // } +} + +.animation_fade { + @include animation_fade(); +} + + +// Shake +// ---------------------------------------------------------------------------- + +@mixin animation_shake($duration: 0.5s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_shake, $duration, $timing-function, $iteration-count); + // @keyframes animation_shake { + // 0%, 100% { transform: translateX(0); } + // 50% { transform: translateX(-10px); } + // } + @keyframes animation_shake { + 0% { transform: rotate(-15deg); } + 4% { transform: rotate(15deg); } + 8%, 24% { transform: rotate(-18deg); } + 12%, 28% { transform: rotate(18deg); } + 16% { transform: rotate(-22deg); } + 20% { transform: rotate(22deg); } + 32% { transform: rotate(-12deg); } + 36% { transform: rotate(12deg); } + 40%, 100% { transform: rotate(0deg); } + } +} + +.animation_shake { + @include animation_shake(); +} + +// .animation_shake { +// @include animation_base; +// animation-name: animation_shake; +// animation-timing-function: linear; +// } + + +// Pulse +// ---------------------------------------------------------------------------- + +@mixin animation_pulse($duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_pulse, $duration, $timing-function, $iteration-count); + @keyframes animation_pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } + } +} + +.animation_pulse { + @include animation_pulse(); +} + +// .animation_pulse, +// .animation_spin-pulse { +// @include animation_base; +// animation-name: animation_spin; +// animation-direction: var(--animation_animation-direction, normal); +// animation-duration: var(--animation_animation-duration, 1s); +// animation-iteration-count: var(--animation_animation-iteration-count, infinite); +// animation-timing-function: steps(8); +// } + + +// Flip +// ---------------------------------------------------------------------------- + +@mixin animation_flip($duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_flip, $duration, $timing-function, $iteration-count); + @keyframes animation_flip { + 0% { transform: rotateY(0); } + 100% { transform: rotateY(360deg); } + } +} + +.animation_flip { + @include animation_flip(); +} + + +// @keyframes animation_flip { +// 50% { +// transform: rotate3d(var(--animation_flip-x, 0), var(--animation_flip-y, 1), var(--animation_flip-z, 0), var(--animation_flip-angle, -180deg); +// } +// } + + + +// Slide +// ---------------------------------------------------------------------------- + +@mixin animation_slide($direction: left, $distance: 100%, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_slide, $duration, $timing-function, $iteration-count); + @keyframes animation_slide { + 0% { transform: translateX(0); } + 100% { transform: translateX($direction == left ? -$distance : $distance); } + } +} + +.animation_slide { + @include animation_slide(left, 100%); +} + +// Slide Up +// ---------------------------------------------------------------------------- + +@mixin animation_slide_up($distance: 20px, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_slide_up, $duration, $timing-function, $iteration-count); + @keyframes animation_slide_up { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-$distance); } + } +} + +.animation_slide_up { + @include animation_slide_up(); +} + + + +// Glow +// ---------------------------------------------------------------------------- + +@mixin animation_glow($color: #f00, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_glow, $duration, $timing-function, $iteration-count); + @keyframes animation_glow { + 0%, 100% { box-shadow: 0 0 5px 0 $color; } + 50% { box-shadow: 0 0 15px 5px $color; } + } +} + +.animation_glow { + @include animation_glow(#f00); +} + + +// Zoom +// ---------------------------------------------------------------------------- + +@mixin animation_zoom($scale: 1.5, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_zoom, $duration, $timing-function, $iteration-count); + @keyframes animation_zoom { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale); } + } +} + +.animation_zoom { + @include animation_zoom(1.5); +} + + +// Wobble +// ---------------------------------------------------------------------------- + +@mixin animation_wobble($duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_wobble, $duration, $timing-function, $iteration-count); + @keyframes animation_wobble { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(-5deg); } + 50% { transform: rotate(5deg); } + 75% { transform: rotate(-5deg); } + } +} + +.animation_wobble { + @include animation_wobble(); +} + + + + +// Jiggle +// ---------------------------------------------------------------------------- + +@mixin animation_jiggle($duration: 0.5s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_jiggle, $duration, $timing-function, $iteration-count); + @keyframes animation_jiggle { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 50% { transform: translateX(5px); } + 75% { transform: translateX(-5px); } + } +} + +.animation_jiggle { + @include animation_jiggle(); +} + + +// Swing +// ---------------------------------------------------------------------------- + +@mixin animation_swing($angle: 15deg, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_swing, $duration, $timing-function, $iteration-count); + @keyframes animation_swing { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + +.animation_swing { + @include animation_swing(15deg); +} + + + +// Tada +// ---------------------------------------------------------------------------- + +@mixin animation_tada($scale: 1.1, $duration: 2s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_tada, $duration, $timing-function, $iteration-count); + @keyframes animation_tada { + 0%, 100% { transform: scale(1); } + 10%, 20% { transform: scale(0.9) rotate(-3deg); } + 30%, 50%, 70%, 90% { transform: scale($scale) rotate(3deg); } + 40%, 60%, 80% { transform: scale($scale) rotate(-3deg); } + } +} + +.animation_tada { + @include animation_tada(); +} + +// Hover +// ---------------------------------------------------------------------------- + +@mixin animation_hover($scale: 1.05, $duration: 0.3s, $timing-function: ease-in-out) { + transition: transform $duration $timing-function; + &:hover { + transform: scale($scale); + } +} + +.animation_hover { + @include animation_hover(); +} + + +// Hover Bounce +// ---------------------------------------------------------------------------- + +@mixin animation_hover_bounce($distance: 10px, $duration: 0.3s) { + transition: transform $duration ease-in-out; + &:hover { + animation-name: animation_bounce; + animation-duration: $duration; + animation-fill-mode: forwards; + @keyframes animation_bounce { + 0% { transform: translateY(0); } + 100% { transform: translateY(-$distance); } + } + } +} + +.animation_hover_bounce { + @include animation_hover_bounce(); +} + + +// Flash +// ---------------------------------------------------------------------------- + +@mixin animation_flash($duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_flash, $duration, $timing-function, $iteration-count); + @keyframes animation_flash { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } + } +} + +.animation_flash { + @include animation_flash(); +} + +// Roll +// ---------------------------------------------------------------------------- + +@mixin animation_roll($duration: 2s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_roll, $duration, $timing-function, $iteration-count); + @keyframes animation_roll { + 0% { transform: translateX(0) rotate(0deg); } + 100% { transform: translateX(100%) rotate(360deg); } + } +} + +.animation_roll { + @include animation_roll(); +} + + +// Pop +// ---------------------------------------------------------------------------- + +@mixin animation_pop($scale: 1.2, $duration: 0.5s, $timing-function: ease-in-out) { + @include animation_base(animation_pop, $duration, $timing-function, 1); + @keyframes animation_pop { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale); } + } +} + +.animation_pop { + @include animation_pop(1.2); +} + +// Ripple +// ---------------------------------------------------------------------------- + +@mixin animation_ripple($scale-end: 1.5, $opacity-end: 0, $duration: 1s, $timing-function: ease-out) { + @include animation_base(animation_ripple, $duration, $timing-function, infinite); + @keyframes animation_ripple { + 0% { transform: scale(1); opacity: 1; } + 100% { transform: scale($scale-end); opacity: $opacity-end; } + } +} + +.animation_ripple { + @include animation_ripple(); +} + + + + +// Wave +// ---------------------------------------------------------------------------- + +@mixin animation_wave($angle: 20deg, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_wave, $duration, $timing-function, $iteration-count); + @keyframes animation_wave { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + +.animation_wave { + @include animation_wave(); +} + + +// Twist +// ---------------------------------------------------------------------------- + +@mixin animation_twist($scale-end: 0.9, $rotation: 10deg, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_twist, $duration, $timing-function, $iteration-count); + @keyframes animation_twist { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale($scale-end) rotate($rotation); } + } +} + +.animation_twist { + @include animation_twist(); +} + + + +// Expand +// ---------------------------------------------------------------------------- + +@mixin animation_expand($scale-end: 1.2, $duration: 1s, $timing-function: ease-out, $iteration-count: infinite) { + @include animation_base(animation_expand, $duration, $timing-function, $iteration-count); + @keyframes animation_expand { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale-end); } + } +} + +.animation_expand { + @include animation_expand(); +} + + +// Heartbeat +// ---------------------------------------------------------------------------- + +@mixin animation_heartbeat($scale-min: 0.9, $scale-max: 1.1, $duration: 1s, $timing-function: linear, $iteration-count: infinite) { + @include animation_base(animation_heartbeat, $duration, $timing-function, $iteration-count); + @keyframes animation_heartbeat { + 0%, 100% { transform: scale(1); } + 25% { transform: scale($scale-min); } + 50% { transform: scale($scale-max); } + 75% { transform: scale($scale-min); } + } +} + +.animation_heartbeat { + @include animation_heartbeat(); +} + + + +// Float +// ---------------------------------------------------------------------------- + +@mixin animation_float($distance: 10px, $duration: 3s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_float, $duration, $timing-function, $iteration-count); + @keyframes animation_float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY($distance); } + } +} + +.animation_float { + @include animation_float(); +} + + + +// Sway +// ---------------------------------------------------------------------------- + +@mixin animation_sway($angle: 5deg, $duration: 2s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base(animation_sway, $duration, $timing-function, $iteration-count); + @keyframes animation_sway { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + +.animation_sway { + @include animation_sway(); +} + + +// Nod +// ---------------------------------------------------------------------------- + +@mixin animation_nod($angle: 10deg, $duration: 1s, $timing-function: ease-in-out, $iteration-count: infinite) { + @include animation_base( + animation_nod, + $duration, + $timing-function, + $iteration-count + ); + @keyframes animation_nod { + 0%, 100% { transform: rotateX(0deg); } + 50% { transform: rotateX($angle); } + } +} + +.animation_nod { + @include animation_nod(); +} + + + + + +// Slide In Left Animation +// ---------------------------------------------------------------------------- + +@mixin animation_slide_in_left($distance: 100%, $duration: 1s, $timing-function: ease-out) { + @include animation_base(animation_slide_in_left, $duration, $timing-function, 1); + @keyframes animation_slide_in_left { + 0% { transform: translateX(-$distance); } + 100% { transform: translateX(0); } + } +} + +.animation_slide_in_left { + @include animation_slide_in_left(); +} + + +// Slide In Right Animation +// ---------------------------------------------------------------------------- + +@mixin animation_slide_in_right($distance: 100%, $duration: 1s, $timing-function: ease-out) { + @include animation_base(animation_slide_in_right, $duration, $timing-function, 1); + @keyframes animation_slide_in_right { + 0% { transform: translateX($distance); } + 100% { transform: translateX(0); } + } +} + +.animation_slide_in_right { + @include animation_slide_in_right(); +} + + +// Slide Out Left Animation: +// ---------------------------------------------------------------------------- + +@mixin animation_slide_out_left($distance: 100%, $duration: 1s, $timing-function: ease-in) { + @include animation_base(animation_slide_out_left, $duration, $timing-function, 1); + @keyframes animation_slide_out_left { + 0% { transform: translateX(0); } + 100% { transform: translateX(-$distance); } + } +} + +.animation_slide_out_left { + @include animation_slide_out_left(); +} + +// Slide Out Right Animation: +// ---------------------------------------------------------------------------- + +@mixin animation_slide_out_right($distance: 100%, $duration: 1s, $timing-function: ease-in) { + @include animation_base(animation_slide_out_right, $duration, $timing-function, 1); + @keyframes animation_slide_out_right { + 0% { transform: translateX(0); } + 100% { transform: translateX($distance); } + } +} + +.animation_slide_out_right { + @include animation_slide_out_right(); +} + + +// Hover Scale +// ---------------------------------------------------------------------------- + +@mixin animation_hover_scale($scale: 1.1, $duration: 0.3s) { + transition: transform $duration ease-in-out; + &:hover { + transform: scale($scale); + } +} + +.animation_hover_scale { + @include animation_hover_scale(); +} + +// Hover Rotate +// ---------------------------------------------------------------------------- + +@mixin animation_hover_rotate($angle: 15deg, $duration: 0.5s) { + transition: transform $duration ease-in-out; + &:hover { + transform: rotate($angle); + } +} + +.animation_hover_rotate { + @include animation_hover_rotate(); +} + + + + + + +// Blink +// ---------------------------------------------------------------------------- + +@mixin animation_blink($duration: 1s, $timing-function: step-end, $iteration-count: infinite) { + @include animation_base(animation_blink, $duration, $timing-function, $iteration-count); + @keyframes animation_blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } + } +} + +.animation_blink { + @include animation_blink(); +} + + +// Hover Drop Animation: +// ---------------------------------------------------------------------------- + +@mixin animation_hover_drop($distance: 5px, $duration: 0.3s) { + transition: transform $duration ease-in-out; + &:hover { + transform: translateY($distance); + } +} + +.animation_hover_drop { + @include animation_hover_drop(); +} + + + + diff --git a/dist/scss/_button.scss b/dist/scss/_button.scss new file mode 100644 index 00000000..fb35653b --- /dev/null +++ b/dist/scss/_button.scss @@ -0,0 +1,50 @@ +$main-color: #some-color; // Replace #some-color with the actual color value + +.btn { + display: inline-block; + padding: 6px 12px; + font-size: 18px; + font-weight: 400; + line-height: 1.42857143; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-radius: 4px; + color: white; + background-color: $main-color; +} + + + +@mixin icon-button($size: 40px, $bg-color: #f5f5f5, $hover-color: darken($bg-color, 10%)) { + display: inline-flex; + align-items: center; + justify-content: center; + width: $size; + height: $size; + background-color: $bg-color; + border: none; + border-radius: 50%; + cursor: pointer; + transition: background-color 0.3s; + + &:hover { + background-color: $hover-color; + } + + // Icon size can be adjusted relative to the button size + i { + font-size: calc($size * 0.6); + } +} + +.icon-btn { + @include icon-button(40px, #f5f5f5); +} diff --git a/dist/scss/_icon.scss b/dist/scss/_icon.scss new file mode 100644 index 00000000..1466648b --- /dev/null +++ b/dist/scss/_icon.scss @@ -0,0 +1,583 @@ + + + + + + + + +svg-icon { + display: inline-block; + + svg { + fill: #999; + height: 1.2em; + width: 1.2em; + vertical-align: middle; + } +} + + + + +@mixin icon-style($size: 16px, $color: currentColor, $margin: 0) { + display: inline-block; + font-size: $size; + color: $color; + margin: $margin; + vertical-align: middle; + + // Additional styling if needed +} + +// Usage example +.icon { + @include icon-style(20px, #333, 5px); +} + + + + + + +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Elements | Icons +// ============================================================================ + + +@mixin icon { + @include reset_bleed; + @include box_content; + // position: relative; + // width: 100%; + // height: 100%; + // align-items: center; + // display: inline-flex; + // justify-content: center; + // fill: $color_02; + background-color: transparent; + position: relative; + overflow: visible; +} + + +@mixin icon_size_00 { + @include icon; + @include box_size_00; + svg { @include box_size_00; } + img { @include box_size_00; } +} + +@mixin icon_size_01 { + @include icon; + @include box_size_01; + svg { @include box_size_01; } + img { @include box_size_01; } +} + +@mixin icon_size_02 { + @include icon; + @include box_size_02; + svg { @include box_size_02; } + img { @include box_size_02; } +} + +@mixin icon_size_03 { + @include icon; + @include box_size_03; + svg { @include box_size_03; } + img { @include box_size_03; } +} + +@mixin icon_size_04 { + @include icon; + @include box_size_04; + svg { @include box_size_04; } + img { @include box_size_04; } +} + +@mixin icon_size_05 { + @include icon; + @include box_size_05; + svg { @include box_size_05; } + img { @include box_size_05; } +} + +@mixin icon_size_06 { + @include icon; + @include box_size_06; + svg { @include box_size_06; } + img { @include box_size_06; } +} + +@mixin icon_size_07 { + @include icon; + @include box_size_07; + svg { @include box_size_07; } + img { @include box_size_07; } +} + +@mixin icon_size_08 { + @include icon; + @include box_size_08; + svg { @include box_size_08; } + img { @include box_size_08; } +} + +@mixin icon_size_09 { + @include icon; + @include box_size_09; + svg { @include box_size_09; } + img { @include box_size_09; } +} + +@mixin icon_size_10 { + @include icon; + @include box_size_10; + svg { @include box_size_10; } + img { @include box_size_10; } +} + + +.icon { @include icon; } +.icon_size_00 { @include icon_size_00; } +.icon_size_01 { @include icon_size_01; } +.icon_size_02 { @include icon_size_02; } +.icon_size_03 { @include icon_size_03; } +.icon_size_04 { @include icon_size_04; } +.icon_size_05 { @include icon_size_05; } +.icon_size_06 { @include icon_size_06; } +.icon_size_07 { @include icon_size_07; } +.icon_size_08 { @include icon_size_08; } +.icon_size_09 { @include icon_size_09; } +.icon_size_10 { @include icon_size_10; } + + + +.footer_social_icon { + text-decoration: none; +} + +.footer_social_icon i { + width: 1rem; + height: 1rem; + padding-right: 1rem; + text-align: center; +} + +.main_social_icon { + text-decoration: none; +} + +.main_social_icon i { + width: 1rem; + height: 1rem; + padding-right: 1rem; + text-align: center; +} + + +// $icon-dimensions: 1.5rem !default +// $icon-dimensions-small: 1rem !default +// $icon-dimensions-medium: 2rem !default +// $icon-dimensions-large: 3rem !default +// $icon-text-spacing: 0.25em !default + +// .icon +// align-items: center +// display: inline-flex +// justify-content: center +// height: $icon-dimensions +// width: $icon-dimensions +// // Sizes +// &.is-small +// height: $icon-dimensions-small +// width: $icon-dimensions-small +// &.is-medium +// height: $icon-dimensions-medium +// width: $icon-dimensions-medium +// &.is-large +// height: $icon-dimensions-large +// width: $icon-dimensions-large + +// .icon-text +// align-items: flex-start +// color: inherit +// display: inline-flex +// flex-wrap: wrap +// line-height: $icon-dimensions +// vertical-align: top +// .icon +// flex-grow: 0 +// flex-shrink: 0 +// &:not(:last-child) +// +ltr +// margin-right: $icon-text-spacing +// +rtl +// margin-left: $icon-text-spacing +// &:not(:first-child) +// +ltr +// margin-left: $icon-text-spacing +// +rtl +// margin-right: $icon-text-spacing + +// div.icon-text +// display: flex + + + + +// /* =================================== +// 17. Icon +// ====================================== */ + +// /* icon size */ +// .icon-very-small {font-size: 16px} +// .icon-small {font-size: 24px} +// .icon-medium {font-size: 35px} +// .icon-extra-medium {font-size: 40px} +// .icon-large {font-size: 50px} +// .icon-round-small {border-radius: 100%; display: table-cell; height: 80px; margin: 0 auto; text-align: center; vertical-align: middle; width: 80px; font-size:32px} +// .icon-round-medium {border-radius: 100%; display: table-cell; height: 90px; margin: 0 auto; text-align: center; vertical-align: middle; width: 90px;} + +// /* social media icon */ +// .icon-social-very-small {font-size: 12px} +// .icon-social-small {font-size: 14px} +// .icon-social-medium {font-size: 16px} +// .icon-social-large {font-size: 20px} +// .icon-social-extra-large {font-size: 24px} +// .icon-social-very-small a i, .icon-social-small a i, .icon-social-medium a i {margin: 0 8px; vertical-align: middle;} +// .icon-social-large a i {margin: 0 4px; vertical-align: middle;} + +// /* social media icon style */ +// .extra-small-icon, .small-icon, .medium-icon, .large-icon, .extra-large-icon {list-style: none; padding: 0;} +// .extra-small-icon li, .small-icon li, .medium-icon li, .large-icon li, .extra-large-icon li {display: inline-block;} +// footer .extra-small-icon li:first-child, footer .small-icon li:first-child, footer .medium-icon li:first-child, footer .large-icon li:first-child, footer .extra-large-icon li:first-child {margin-left: 0;} +// footer .extra-small-icon li:last-child, footer .small-icon li:last-child, footer .medium-icon li:last-child, footer .large-icon li:last-child, footer .extra-large-icon li:last-child {margin-right: 0;} +// .extra-small-icon li {margin: 0 2px} +// .small-icon li {margin: 0 5px} +// .medium-icon li {margin: 0 8px} +// .large-icon li {margin: 0 10px} +// .extra-large-icon li {margin: 0 12px} +// .extra-small-icon a {font-size: 14px; width:30px; height:30px;line-height:29px;} +// .small-icon a {font-size: 16px; width: 40px; height:40px;line-height: 38px;} +// .medium-icon a {font-size: 20px; width: 50px; height:50px;line-height: 48px;} +// .large-icon a {font-size: 24px; width: 60px; height: 60px;line-height: 61px;} +// .extra-large-icon a {font-size: 30px; width: 70px; height: 70px;line-height: 68px;} + +// /* social icon style */ +// .social-icon-style-1 a.facebook,.social-icon-style-2 a.facebook,.social-icon-style-3 a.facebook,.social-icon-style-4 a.facebook span,.social-icon-style-10 a.facebook span {background-color: #3b5998} +// .social-icon-style-1 a.twitter,.social-icon-style-2 a.twitter,.social-icon-style-3 a.twitter,.social-icon-style-4 a.twitter span,.social-icon-style-10 a.twitter span {background-color: #00aced} +// .social-icon-style-1 a.google,.social-icon-style-2 a.google,.social-icon-style-3 a.google,.social-icon-style-4 a.google span,.social-icon-style-10 a.google span {background-color: #dc4a38} +// .social-icon-style-1 a.dribbble,.social-icon-style-2 a.dribbble,.social-icon-style-3 a.dribbble,.social-icon-style-4 a.dribbble span,.social-icon-style-10 a.dribbble span {background-color: #ea4c89} +// .social-icon-style-1 a.youtube,.social-icon-style-2 a.youtube,.social-icon-style-3 a.youtube,.social-icon-style-4 a.youtube span,.social-icon-style-10 a.youtube span {background-color: #bb0000} +// .social-icon-style-1 a.linkedin,.social-icon-style-2 a.linkedin,.social-icon-style-3 a.linkedin,.social-icon-style-4 a.linkedin span,.social-icon-style-10 a.linkedin span {background-color: #007bb6} +// .social-icon-style-1 a.instagram,.social-icon-style-2 a.instagram,.social-icon-style-3 a.instagram,.social-icon-style-4 a.instagram span,.social-icon-style-10 a.instagram span {background-color: #FE1F49} +// .social-icon-style-1 a.pinterest,.social-icon-style-2 a.pinterest,.social-icon-style-3 a.pinterest,.social-icon-style-4 a.pinterest span,.social-icon-style-10 a.pinterest span {background-color: #CB2027} +// .social-icon-style-1 a.flickr,.social-icon-style-2 a.flickr,.social-icon-style-3 a.flickr,.social-icon-style-4 a.flickr span,.social-icon-style-10 a.flickr span {background-color: #ff0084} +// .social-icon-style-1 a.rss,.social-icon-style-2 a.rss,.social-icon-style-3 a.rss,.social-icon-style-4 a.rss span,.social-icon-style-10 a.rss span {background-color: #f2890a} +// .social-icon-style-1 a.behance,.social-icon-style-2 a.behance,.social-icon-style-3 a.behance,.social-icon-style-4 a.behance span,.social-icon-style-10 a.behance span {background-color: #1769ff} +// .social-icon-style-1 a.vine,.social-icon-style-2 a.vine,.social-icon-style-3 a.vine,.social-icon-style-4 a.vine span,.social-icon-style-10 a.vine span {background-color: #00bf8f} +// .social-icon-style-1 a.email,.social-icon-style-2 a.email,.social-icon-style-3 a.email,.social-icon-style-4 a.email span,.social-icon-style-10 a.email span {background-color: #7d7d7d} +// .social-icon-style-1 a.sms,.social-icon-style-2 a.sms,.social-icon-style-3 a.sms,.social-icon-style-4 a.sms span,.social-icon-style-10 a.sms span {background-color: #ffbd00} +// .social-icon-style-1 a.sharethis,.social-icon-style-2 a.sharethis,.social-icon-style-3 a.sharethis,.social-icon-style-4 a.sharethis span,.social-icon-style-10 a.sharethis span {background-color: #95D03A} +// .social-icon-style-1 a.reddit,.social-icon-style-2 a.reddit,.social-icon-style-3 a.reddit,.social-icon-style-4 a.reddit span,.social-icon-style-10 a.reddit span {background-color: #ff4500} +// .social-icon-style-1 a.tumblr,.social-icon-style-2 a.tumblr,.social-icon-style-3 a.tumblr,.social-icon-style-4 a.tumblr span,.social-icon-style-10 a.tumblr span {background-color: #32506d} +// .social-icon-style-1 a.digg,.social-icon-style-2 a.digg,.social-icon-style-3 a.digg,.social-icon-style-4 a.digg span,.social-icon-style-10 a.digg span {background-color: #262626} +// .social-icon-style-1 a.stumbleupon,.social-icon-style-2 a.stumbleupon,.social-icon-style-3 a.stumbleupon,.social-icon-style-4 a.stumbleupon span,.social-icon-style-10 a.stumbleupon span {background-color: #eb4924} +// .social-icon-style-1 a.whatsapp,.social-icon-style-2 a.whatsapp,.social-icon-style-3 a.whatsapp,.social-icon-style-4 a.whatsapp span,.social-icon-style-10 a.whatsapp span {background-color: #25d366} +// .social-icon-style-1 a.vk,.social-icon-style-2 a.vk,.social-icon-style-3 a.vk,.social-icon-style-4 a.vk span,.social-icon-style-10 a.vk span {background-color: #4c6c91} +// .social-icon-style-1 a.weibo,.social-icon-style-2 a.weibo,.social-icon-style-3 a.weibo,.social-icon-style-4 a.weibo span,.social-icon-style-10 a.weibo span {background-color: #ff9933} +// .social-icon-style-1 a.odnoklassniki,.social-icon-style-2 a.odnoklassniki,.social-icon-style-3 a.odnoklassniki,.social-icon-style-4 a.odnoklassniki span,.social-icon-style-10 a.odnoklassniki span {background-color: #d7772d} +// .social-icon-style-1 a.xing,.social-icon-style-2 a.xing,.social-icon-style-3 a.xing,.social-icon-style-4 a.xing span,.social-icon-style-10 a.xing span {background-color: #1a7576} +// .social-icon-style-1 a.print,.social-icon-style-2 a.print,.social-icon-style-3 a.print,.social-icon-style-4 a.print span,.social-icon-style-10 a.print span {background-color: #222222} +// .social-icon-style-1 a.blogger,.social-icon-style-2 a.blogger,.social-icon-style-3 a.blogger,.social-icon-style-4 a.blogger span,.social-icon-style-10 a.blogger span {background-color: #ff8000} +// .social-icon-style-1 a.flipboard,.social-icon-style-2 a.flipboard,.social-icon-style-3 a.flipboard,.social-icon-style-4 a.flipboard span,.social-icon-style-10 a.flipboard span {background-color: #e12828} +// .social-icon-style-1 a.meneame,.social-icon-style-2 a.meneame,.social-icon-style-3 a.meneame,.social-icon-style-4 a.meneame span,.social-icon-style-10 a.meneame span {background-color: #ff6400} +// .social-icon-style-1 a.mailru,.social-icon-style-2 a.mailru,.social-icon-style-3 a.mailru,.social-icon-style-4 a.mailru span,.social-icon-style-10 a.mailru span {background-color: #168de2} +// .social-icon-style-1 a.delicious,.social-icon-style-2 a.delicious,.social-icon-style-3 a.delicious,.social-icon-style-4 a.delicious span,.social-icon-style-10 a.delicious span {background-color: #205cc0} +// .social-icon-style-1 a.livejournal,.social-icon-style-2 a.livejournal,.social-icon-style-3 a.livejournal,.social-icon-style-4 a.livejournal span,.social-icon-style-10 a.livejournal span {background-color: #00b0ea} + +// /* social icon style */ +// .social-icon-style-6 a.facebook:hover {border-color: #3b5998; color: #3b5998} +// .social-icon-style-6 a.twitter:hover {border-color: #00aced; color: #00aced} +// .social-icon-style-6 a.google:hover {border-color: #dc4a38; color: #dc4a38} +// .social-icon-style-6 a.dribbble:hover {border-color: #ea4c89; color: #ea4c89} +// .social-icon-style-6 a.youtube:hover {border-color: #bb0000; color: #bb0000} +// .social-icon-style-6 a.linkedin:hover {border-color: #0077b5; color: #0077b5} +// .social-icon-style-6 a.instagram:hover {border-color: #FE1F49; color: #FE1F49} +// .social-icon-style-6 a.pinterest:hover {border-color: #CB2027; color: #CB2027} +// .social-icon-style-6 a.flickr:hover {border-color: #ff0084; color: #ff0084} +// .social-icon-style-6 a.rss:hover {border-color: #f2890a; color: #f2890a} +// .social-icon-style-6 a.behance:hover {border-color: #1769ff; color: #1769ff} +// .social-icon-style-6 a.vine:hover {border-color: #00bf8f; color: #00bf8f} +// .social-icon-style-6 a.email:hover {border-color: #7d7d7d; color: #7d7d7d} +// .social-icon-style-6 a.sms:hover {border-color: #ffbd00; color: #ffbd00} +// .social-icon-style-6 a.sharethis:hover {border-color: #95D03A; color: #95D03A} +// .social-icon-style-6 a.reddit:hover {border-color: #ff4500; color: #ff4500} +// .social-icon-style-6 a.tumblr:hover {border-color: #32506d; color: #32506d} +// .social-icon-style-6 a.digg:hover {border-color: #262626; color: #262626} +// .social-icon-style-6 a.stumbleupon:hover {border-color: #eb4924; color: #eb4924} +// .social-icon-style-6 a.whatsapp:hover {border-color: #25d366; color: #25d366} +// .social-icon-style-6 a.vk:hover {border-color: #4c6c91; color: #4c6c91} +// .social-icon-style-6 a.weibo:hover {border-color: #ff9933; color: #ff9933} +// .social-icon-style-6 a.odnoklassniki:hover {border-color: #d7772d; color: #d7772d} +// .social-icon-style-6 a.xing:hover {border-color: #1a7576; color: #1a7576} +// .social-icon-style-6 a.print:hover{border-color: #222222; color: #222222} +// .social-icon-style-6 a.blogger:hover {border-color: #ff8000; color: #ff8000} +// .social-icon-style-6 a.flipboard:hover {border-color: #e12828; color: #e12828} +// .social-icon-style-6 a.meneame:hover {border-color: #ff6400; color: #ff6400} +// .social-icon-style-6 a.mailru:hover {border-color: #168de2; color: #168de2} +// .social-icon-style-6 a.delicious:hover {border-color: #205cc0; color: #205cc0} +// .social-icon-style-6 a.livejournal:hover {border-color: #00b0ea; color: #00b0ea} + +// /* social icon style */ +// .social-icon-style-7 a.facebook:hover {border-color: #3b5998; background-color: #3b5998} +// .social-icon-style-7 a.twitter:hover {border-color: #00aced; background-color: #00aced} +// .social-icon-style-7 a.google:hover {border-color: #dc4a38; background-color: #dc4a38} +// .social-icon-style-7 a.dribbble:hover {border-color: #ea4c89; background-color: #ea4c89} +// .social-icon-style-7 a.youtube:hover {border-color: #bb0000; background-color: #bb0000} +// .social-icon-style-7 a.linkedin:hover {border-color: #0077b5; background-color: #0077b5} +// .social-icon-style-7 a.instagram:hover {border-color: #FE1F49; background-color: #FE1F49} +// .social-icon-style-7 a.pinterest:hover {border-color: #CB2027; background-color: #CB2027} +// .social-icon-style-7 a.flickr:hover {border-color: #ff0084; background-color: #ff0084} +// .social-icon-style-7 a.rss:hover {border-color: #f2890a; background-color: #f2890a} +// .social-icon-style-7 a.behance:hover {border-color: #1769ff; background-color: #1769ff} +// .social-icon-style-7 a.vine:hover {border-color: #00bf8f; background-color: #00bf8f} +// .social-icon-style-7 a.email:hover {border-color: #7d7d7d; background-color: #7d7d7d} +// .social-icon-style-7 a.sms:hover {border-color: #ffbd00; background-color: #ffbd00} +// .social-icon-style-7 a.sharethis:hover {border-color: #95D03A; background-color: #95D03A} +// .social-icon-style-7 a.reddit:hover {border-color: #ff4500; background-color: #ff4500} +// .social-icon-style-7 a.tumblr:hover {border-color: #32506d; background-color: #32506d} +// .social-icon-style-7 a.digg:hover {border-color: #262626; background-color: #262626} +// .social-icon-style-7 a.stumbleupon:hover {border-color: #eb4924; background-color: #eb4924} +// .social-icon-style-7 a.whatsapp:hover {border-color: #25d366; background-color: #25d366} +// .social-icon-style-7 a.vk:hover {border-color: #4c6c91; background-color: #4c6c91} +// .social-icon-style-7 a.weibo:hover {border-color: #ff9933; background-color: #ff9933} +// .social-icon-style-7 a.odnoklassniki:hover {border-color: #d7772d; background-color: #d7772d} +// .social-icon-style-7 a.xing:hover {border-color: #1a7576; background-color: #1a7576} +// .social-icon-style-7 a.print:hover{border-color: #222222; background-color: #222222} +// .social-icon-style-7 a.blogger:hover {border-color: #ff8000; background-color: #ff8000} +// .social-icon-style-7 a.flipboard:hover {border-color: #e12828; background-color: #e12828} +// .social-icon-style-7 a.meneame:hover {border-color: #ff6400; background-color: #ff6400} +// .social-icon-style-7 a.mailru:hover {border-color: #168de2; background-color: #168de2} +// .social-icon-style-7 a.delicious:hover {border-color: #205cc0; background-color: #205cc0} +// .social-icon-style-7 a.livejournal:hover {border-color: #00b0ea; background-color: #00b0ea} + +// /* icon like counter */ +// a.likes-count {padding: 0 15px; width: auto; border-radius: 30px !important;} +// a.likes-count i {margin-right: 8px;} +// a.likes-count span {position: relative; top: -1px} + +// /* icon hover effect style 1 */ +// .social-icon-style-1 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; color: #fff} +// .social-icon-style-1 a:hover {border-radius: 100%;} + +// /* icon hover effect style 2 */ +// .social-icon-style-2 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; border-radius: 100%; color: #fff} +// .social-icon-style-2 a:hover {border-radius: 0;} + +// /* icon hover effect style 3 */ +// .social-icon-style-3 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; border-radius: 100%; color: #fff} +// .social-icon-style-3 a:hover i{transition: transform 0.4s ease-out; -webkit-transition: transform 0.4s ease-out; -moz-transition: transform 0.4s ease-out; -ms-transition: transform 0.4s ease-out; -o-transition: transform 0.4s ease-out; transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg);} + +// /* icon hover effect style 4 */ +// .social-icon-style-4 a {text-align: center; display:inline-block; border-radius: 100%; position: relative; border: 1px solid rgba(0, 0, 0, 0.1); color: #232323; text-align: center; z-index: 1;} +// .social-icon-style-4 a:hover {color: #fff;} +// .social-icon-style-4 a span {border-radius: 0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; width: 0;z-index: -1;} +// .social-icon-style-4 a:hover span{width:100%; height:100%; border-radius: 100%; top: 0; left: 0;} + +// /* icon hover effect style 5 */ +// .social-icon-style-5 a {text-align: center; display:inline-block; color: #232323} +// .social-icon-style-5 a:hover {color: #fff; border-radius: 100%; background-color: var(--base-color)} + +// /* icon hover effect style 5 light*/ +// .social-icon-style-5-light a {text-align: center; display:inline-block;color: #fff} +// .social-icon-style-5-light a:hover {color: #fff; border-radius: 100%; background-color: var(--base-color)} + +// /* icon hover effect style 6 */ +// .social-icon-style-6 a {text-align: center; display:inline-block;border: 1px solid rgba(0,0,0,0.1);color: #232323; background-color: transparent; border-radius: 100%;} +// .social-icon-style-6 a:hover {border-color: var(--base-color); color: var(--base-color); background-color: transparent;} + +// /* icon hover effect style 7 */ +// .social-icon-style-7 a {text-align: center; display:inline-block; border-radius: 100%; color: #232323; background-color: #fff;} +// .social-icon-style-7 a:hover {color: #fff; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); -o-transform: scale(1.2);} + +// /* icon hover effect style 8 */ +// .social-icon-style-8 ul li a {text-align: center; width: auto; height: auto} +// .social-icon-style-8 a:hover {color: var(--base-color) !important;} + +// /* icon hover effect style 9 */ +// .social-icon-style-9 ul li a {text-align: center; width: auto; height: auto} + +// /* social icon style */ +// .social-icon-style-9 a.facebook:hover {color: #3b5998;} +// .social-icon-style-9 a.twitter:hover {color: #00aced;} +// .social-icon-style-9 a.google:hover {color: #dc4a38;} +// .social-icon-style-9 a.dribbble:hover {color: #ea4c89;} +// .social-icon-style-9 a.youtube:hover {color: #bb0000;} +// .social-icon-style-9 a.linkedin:hover {color: #007bb6;} +// .social-icon-style-9 a.pinterest:hover {color: #CB2027} +// .social-icon-style-9 a.email:hover {color: #7d7d7d} +// .social-icon-style-9 a.sms:hover {color: #ffbd00} +// .social-icon-style-9 a.sharethis:hover {color: #95D03A} +// .social-icon-style-9 a.reddit:hover {color: #ff4500} +// .social-icon-style-9 a.tumblr:hover {color: #32506d} +// .social-icon-style-9 a.digg:hover {color: #262626} +// .social-icon-style-9 a.stumbleupon:hover {color: #eb4924} +// .social-icon-style-9 a.whatsapp:hover {color: #25d366} +// .social-icon-style-9 a.vk:hover {color: #4c6c91} +// .social-icon-style-9 a.weibo:hover {color: #ff9933} +// .social-icon-style-9 a.odnoklassniki:hover {color: #d7772d} +// .social-icon-style-9 a.xing:hover {color: #1a7576} +// .social-icon-style-9 a.print:hover {color: #222222} +// .social-icon-style-9 a.blogger:hover {color: #ff8000} +// .social-icon-style-9 a.flipboard:hover {color: #e12828} +// .social-icon-style-9 a.meneame:hover {color: #ff6400} +// .social-icon-style-9 a.mailru:hover {color: #168de2} +// .social-icon-style-9 a.delicious:hover {color: #205cc0} +// .social-icon-style-9 a.livejournal:hover {color: #00b0ea} + +// /* icon hover effect style 10 light */ +// .social-icon-style-10 {position: relative;} +// .social-icon-style-10 a {text-align: center; display:inline-block; border-radius: 100%; position: relative; text-align: center} +// .social-icon-style-10 a:hover {color: #fff;} +// .social-icon-style-10 a i {position: relative; z-index: 1;} +// .social-icon-style-10 a span {border-radius: 0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; width: 0;} +// .social-icon-style-10 a:hover span{width:100%; height:100%; border-radius: 100%; top: 0; left: 0;} + +// /* social icon style */ +// .social-icon-style-11 {position: relative;} +// .social-icon-style-11 a {text-align: center; display:inline-block; border-radius: 100%; position: relative; text-align: center} +// .social-icon-style-11 a.facebook {color: #3b5998} +// .social-icon-style-11 a.twitter {color: #00aced} +// .social-icon-style-11 a.google {color: #dc4a38} +// .social-icon-style-11 a.dribbble {color: #ea4c89} +// .social-icon-style-11 a.youtube {color: #bb0000} +// .social-icon-style-11 a.linkedin {color: #0077b5} +// .social-icon-style-11 a.instagram {color: #FE1F49} +// .social-icon-style-11 a.pinterest {color: #CB2027} +// .social-icon-style-11 a.flickr {color: #ff0084} +// .social-icon-style-11 a.rss {color: #f2890a} +// .social-icon-style-11 a.behance {color: #1769ff} +// .social-icon-style-11 a.vine {color: #00bf8f} +// .social-icon-style-11 a.email {color: #7d7d7d} +// .social-icon-style-11 a.sms {color: #ffbd00} +// .social-icon-style-11 a.sharethis {color: #95D03A} +// .social-icon-style-11 a.reddit {color: #ff4500} +// .social-icon-style-11 a.tumblr {color: #32506d} +// .social-icon-style-11 a.digg {color: #262626} +// .social-icon-style-11 a.stumbleupon {color: #eb4924} +// .social-icon-style-11 a.whatsapp {color: #25d366} +// .social-icon-style-11 a.vk {color: #4c6c91} +// .social-icon-style-11 a.weibo {color: #ff9933} +// .social-icon-style-11 a.odnoklassniki {color: #d7772d} +// .social-icon-style-11 a.xing {color: #1a7576} +// .social-icon-style-11 a.print{color: #222222} +// .social-icon-style-11 a.blogger {color: #ff8000} +// .social-icon-style-11 a.flipboard {color: #e12828} +// .social-icon-style-11 a.meneame {color: #ff6400} +// .social-icon-style-11 a.mailru {color: #168de2} +// .social-icon-style-11 a.delicious {color: #205cc0} +// .social-icon-style-11 a.livejournal {color: #00b0ea} +// .social-icon-style-11 a:hover {color: #fff;} + +// footer .small-icon li {margin: 0 8px;} + +// /* country flag icon */ +// .icon-country {width: 16px; height: 16px; display: inline-block; margin:0 10px 0 5px; vertical-align: middle;} +// .icon-country.usa {background:url("../images/country-flag-16X16/usa.png")} +// .icon-country.england {background:url("../images/country-flag-16X16/england.png")} +// .icon-country.china {background:url("../images/country-flag-16X16/china.png")} +// .icon-country.hong-kong {background:url("../images/country-flag-16X16/hong-kong.png")} +// .icon-country.france {background:url("../images/country-flag-16X16/france.png")} + + + + +$main-color: #your-color; // Replace #your-color with the actual color value + +.si-figure { + padding: 5px 0; + position: relative; + display: inline-block; + margin: 0; + background-color: #f9f9f9; + outline: 1px solid white; + height: 100px; + color: #999; + vertical-align: top; + text-align: center; + font-size: 14px; + cursor: pointer; + + svg { + width: 50px; + height: 50px; + fill: gray; + } + + &:hover { + background-color: #dfd; + color: $main-color; + + svg { + fill: $main-color; + } + } + + &.selected { + background-color: $main-color; + color: white; + opacity: .9; + + svg { + fill: orange; + } + } +} + +@media only screen and (min-width: 768px) { + .si-figure { + width: 12.5%; + } +} + +@media only screen and (max-width: 768px) { + .si-figure { + width: 25%; + } +} + +@media only screen and (max-width: 480px) { + .si-figure { + width: 50%; + } +} + +.si { + &.inline { + height: 1.2em; + width: 1.2em; + vertical-align: sub; + } + + &.white { + fill: white; + } +} diff --git a/dist/scss/_list.scss b/dist/scss/_list.scss new file mode 100644 index 00000000..6fa70e0b --- /dev/null +++ b/dist/scss/_list.scss @@ -0,0 +1,34 @@ +// Copyright 2020 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// icon.gl | List +// ============================================================================ + +// .#{$icongl_prefix}ul { +// list-style-type: none; +// margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin}); +// padding-left: 0; + +// > li { position: relative; } +// } + +// .#{$icongl_prefix}li { +// left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1); +// position: absolute; +// text-align: center; +// width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}); +// line-height: inherit; +// } \ No newline at end of file diff --git a/dist/scss/_size.scss b/dist/scss/_size.scss new file mode 100644 index 00000000..d024cd70 --- /dev/null +++ b/dist/scss/_size.scss @@ -0,0 +1,54 @@ +// Copyright 2020 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// icon.gl | Size +// ============================================================================ + + +$igl_size_scale_2xs : 10 !default; +$igl_size_scale_xs : 12 !default; +$igl_size_scale_sm : 14 !default; +$igl_size_scale_base : 16 !default; +$igl_size_scale_lg : 20 !default; +$igl_size_scale_xl : 24 !default; +$igl_size_scale_2xl : 32 !default; + +$igl_sizes: ( + "2xs" : $igl_size_scale_2xs, + "xs" : $igl_size_scale_xs, + "sm" : $igl_size_scale_sm, + "lg" : $igl_size_scale_lg, + "xl" : $igl_size_scale_xl, + "2xl" : $igl_size_scale_2xl +) !default; + +// icon.gl | Size | Literal Magnification Scale +// ---------------------------------------------------------------------------- + +@for $i from 1 through 10 { + .#{$icongl_prefix}#{$i}x { + font-size: $i * 1em; + } +} + +// icon.gl | Size | Step-Based Magnification Scale (with alignment) +// ---------------------------------------------------------------------------- + +// @each $size, $value in $igl_sizes { +// .#{$icongl_prefix}#{$size} { +// @include igl_size($value); +// } +// } \ No newline at end of file diff --git a/dist/scss/_state.scss b/dist/scss/_state.scss new file mode 100644 index 00000000..05500c37 --- /dev/null +++ b/dist/scss/_state.scss @@ -0,0 +1,49 @@ +// Copyright 2020 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// icon.gl | States +// ============================================================================ + +$primary-color: blue; // Define your primary color + +@mixin interactive-icon( + $hover-color: darken($primary-color, 10%), + $focus-outline: 2px solid lighten($primary-color, 20%), + $hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), + $hover-scale: 1.1, + $transition-duration: 0.3s +) { + &:hover { + color: $hover-color; + box-shadow: $hover-shadow; + transform: scale($hover-scale); + transition: all $transition-duration ease-in-out; + } + &:focus { + outline: $focus-outline; + } + &:active { + color: lighten($hover-color, 5%); + } + &:disabled { + color: grayscale($primary-color); + cursor: not-allowed; + } +} + +.#{$icongl_prefix}icon-interactive { + @include interactive-icon(); +} diff --git a/dist/scss/_transform.scss b/dist/scss/_transform.scss new file mode 100644 index 00000000..880980c2 --- /dev/null +++ b/dist/scss/_transform.scss @@ -0,0 +1,58 @@ +// Copyright 2020 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// icon.gl | Transformations +// ============================================================================ + + +// icon.gl | Transformations | Rotate +// ============================================================================ + + +@mixin rotate($degrees: 0deg) { + transform: rotate($degrees); +} + +.#{$icongl_prefix}rotate_90 { @include rotate(90deg); } +.#{$icongl_prefix}rotate_180 { @include rotate(180deg); } +.#{$icongl_prefix}rotate_270 { @include rotate(270deg); } +// .#{$icongl_prefix}rotate_by { @include rotate(var(--#{$fa-css-prefix}-rotate-angle, none)); } + + + +// icon.gl | Transformations | Flip +// ============================================================================ + +@mixin flip_horizontal { + transform: scale(-1, 1); +} + +@mixin flip_vertical { + transform: scale(1, -1); +} + +@mixin flip_both { + transform: scale(1, -1); +} + +.#{$icongl_prefix}flip-horizontal { @include flip_horizontal; } + +.#{$icongl_prefix}flip-vertical { @include flip_vertical; } + +.#{$icongl_prefix}flip-both, +.#{$icongl_prefix}flip-horizontal.#{$icongl_prefix}flip-vertical { + @include flip_both; +} \ No newline at end of file diff --git a/dist/scss/index.scss b/dist/scss/index.scss new file mode 100644 index 00000000..75c1105a --- /dev/null +++ b/dist/scss/index.scss @@ -0,0 +1,47 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@charset "utf-8"; + +/** +* icon.gl +* +* @description Icon Library +* @author Scape Agency (https://www.scape.agency) +* @version v1.0.0 +* @copyright 2020-2023 Scape Agency (https://www.scape.agency) +* @website https://www.icon.gl/ +* @repository https://github.com/scape-agency/icon.gl/ +* @license Apache 2.0 License (https://github.com/scape-agency/icon.gl/blob/main/LICENSE) +*/ + +@use "sass:math"; + +/** +TABLE OF CONTENTS +=============================================================================== +1. +2. +3. +*/ + + +$icongl_prefix: "igl_"; + + +@import "_size.scss"; +@import "_state.scss"; +@import "_transform.scss"; +@import "_list.scss"; diff --git a/dist/ts/index.ts b/dist/ts/index.ts new file mode 100644 index 00000000..910db536 --- /dev/null +++ b/dist/ts/index.ts @@ -0,0 +1,16 @@ +// Copyright 2020 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +export {}; \ No newline at end of file diff --git a/dist/ts/svg-icon-element.ts b/dist/ts/svg-icon-element.ts new file mode 100644 index 00000000..53c14d82 --- /dev/null +++ b/dist/ts/svg-icon-element.ts @@ -0,0 +1,50 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Import +// ============================================================================ + +'use strict'; + +import './style/svg-icon-element.less'; + + +// ============================================================================ +// Classes +// ============================================================================ + +class SvgIconElement extends HTMLElement { + + private generateSvgIcon(url: string, id: string): string { + return ``; + } + + private setContent(): void { + const url = this.getAttribute('url') || ''; + const type = this.getAttribute('type') || ''; + this.innerHTML = this.generateSvgIcon(url, type); + } + + connectedCallback(): void { + this.setContent(); + } + + attributeChangedCallback(): void { + this.setContent(); + } +} + +window.customElements.define('svg-icon', SvgIconElement); diff --git a/package.json b/package.json index 076b4817..d34d4aa6 100644 --- a/package.json +++ b/package.json @@ -61,10 +61,6 @@ "webpack-serve": "webpack serve --mode development --config webpack.config.js", "webpack-start": "webpack-dev-server --mode development --config webpack.config.js", "icons-process": "node script/js/index.js", - "icons-sprite": "svg-sprite --config svg-sprite.json --log=info \"dist/svg/*.svg\"", - "icons-font": "npm run icons-font-main", - "icons-font3": "npm run icons-font-main && npm run icons-font-min", - "icons-font-main": "fantasticon --debug", "icons-font-min": "cleancss -O1 --format breakWith=lf --with-rebase --output font/bootstrap-icons.min.css font/bootstrap-icons.css", "icons-compile3": "tsc filename.ts | node filename.js", "icons-zip": "cross-env-shell \"rm -rf bootstrap-icons-$npm_package_version bootstrap-icons-$npm_package_version.zip && cp -r icons/ bootstrap-icons-$npm_package_version && cp bootstrap-icons.svg bootstrap-icons-$npm_package_version && cp -r font/ bootstrap-icons-$npm_package_version && zip -qr9 bootstrap-icons-$npm_package_version.zip bootstrap-icons-$npm_package_version && rm -rf bootstrap-icons-$npm_package_version\"" diff --git a/script/js/class/DirectoryCreator.js b/script/js/class/DirectoryCreator.js new file mode 100644 index 00000000..61409612 --- /dev/null +++ b/script/js/class/DirectoryCreator.js @@ -0,0 +1,23 @@ +import { __awaiter } from "tslib"; +import fs from 'fs'; +import path from 'path'; +class DirectoryCreator { + createDirectories(basePath, directories) { + return __awaiter(this, void 0, void 0, function* () { + console.log(`directories: ${directories}`); + directories.forEach(dir => { + const dirPath = path.join(basePath, dir); + console.log(`creating ${dirPath}`); + if (!fs.existsSync(dirPath)) { + fs.mkdirSync(dirPath, { recursive: true }); + console.log(`Directory created: ${dirPath}`); + } + else { + console.log(`Directory already exists: ${dirPath}`); + } + }); + }); + } +} +export default DirectoryCreator; +//# sourceMappingURL=DirectoryCreator.js.map \ No newline at end of file diff --git a/script/js/class/DirectoryCreator.js.map b/script/js/class/DirectoryCreator.js.map new file mode 100644 index 00000000..5e55b10b --- /dev/null +++ b/script/js/class/DirectoryCreator.js.map @@ -0,0 +1 @@ +{"version":3,"file":"DirectoryCreator.js","sourceRoot":"","sources":["../../ts/class/DirectoryCreator.ts"],"names":[],"mappings":";AAqBA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AAqBxB,MAAM,gBAAgB;IAEZ,iBAAiB,CAAC,QAAgB,EAAE,WAAqB;;YAC3D,OAAO,CAAC,GAAG,CAAC,gBAAgB,WAAW,EAAE,CAAC,CAAC;YAE3C,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACtB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;gBACzC,OAAO,CAAC,GAAG,CAAC,YAAY,OAAO,EAAE,CAAC,CAAC;gBACnC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;oBAC1B,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;oBAC3C,OAAO,CAAC,GAAG,CAAC,sBAAsB,OAAO,EAAE,CAAC,CAAC;gBACjD,CAAC;qBAAM,CAAC;oBACJ,OAAO,CAAC,GAAG,CAAC,6BAA6B,OAAO,EAAE,CAAC,CAAC;gBACxD,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC;KAAA;CAEJ;AAOD,eAAe,gBAAgB,CAAC"} \ No newline at end of file diff --git a/script/js/class/FileCopier.js b/script/js/class/FileCopier.js new file mode 100644 index 00000000..9d47521c --- /dev/null +++ b/script/js/class/FileCopier.js @@ -0,0 +1,30 @@ +import { __awaiter } from "tslib"; +import fs from 'fs'; +import path from 'path'; +class FileCopier { + copyFiles(srcDir, destDir) { + return __awaiter(this, void 0, void 0, function* () { + try { + const resolvedSrcDir = path.resolve(srcDir); + const resolvedDestDir = path.resolve(destDir); + const files = fs.readdirSync(resolvedSrcDir); + console.log("FILES:", files); + files.forEach(file => { + const srcFile = path.join(resolvedSrcDir, file); + const destFile = path.join(resolvedDestDir, file); + if (fs.statSync(srcFile).isFile()) { + console.log("Copying file:", srcFile); + fs.copyFileSync(srcFile, destFile); + } + }); + console.log(`Files copied from ${resolvedSrcDir} to ${resolvedDestDir}`); + } + catch (error) { + console.error('Error copying files:', error); + throw error; + } + }); + } +} +export default FileCopier; +//# sourceMappingURL=FileCopier.js.map \ No newline at end of file diff --git a/script/js/class/FileCopier.js.map b/script/js/class/FileCopier.js.map new file mode 100644 index 00000000..e526ceff --- /dev/null +++ b/script/js/class/FileCopier.js.map @@ -0,0 +1 @@ +{"version":3,"file":"FileCopier.js","sourceRoot":"","sources":["../../ts/class/FileCopier.ts"],"names":[],"mappings":";AAqBA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AAgExB,MAAM,UAAU;IAEN,SAAS,CAAC,MAAc,EAAE,OAAe;;YAC3C,IAAI,CAAC;gBACD,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBAC5C,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBAE9C,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;gBAC7C,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;gBAE7B,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACjB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;oBAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;oBAElD,IAAI,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC;wBAChC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;wBACtC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;oBACvC,CAAC;gBACL,CAAC,CAAC,CAAC;gBAEH,OAAO,CAAC,GAAG,CAAC,qBAAqB,cAAc,OAAO,eAAe,EAAE,CAAC,CAAC;YAC7E,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;gBAC7C,MAAM,KAAK,CAAC;YAChB,CAAC;QACL,CAAC;KAAA;CACJ;AAMD,eAAe,UAAU,CAAC"} \ No newline at end of file diff --git a/script/js/class/FontGenerator.js b/script/js/class/FontGenerator.js new file mode 100644 index 00000000..d31fcda4 --- /dev/null +++ b/script/js/class/FontGenerator.js @@ -0,0 +1,50 @@ +import { __awaiter } from "tslib"; +import { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon'; +class FontGenerator { + generateFonts(sourceDirectory, outputDiectory) { + return __awaiter(this, void 0, void 0, function* () { + const config = { + inputDir: sourceDirectory, + outputDir: outputDiectory, + name: 'icon.gl', + fontTypes: [ + FontAssetType.TTF, + FontAssetType.WOFF, + FontAssetType.WOFF2, + FontAssetType.EOT, + FontAssetType.SVG, + ], + assetTypes: [ + OtherAssetType.CSS, + OtherAssetType.SCSS, + OtherAssetType.SASS, + OtherAssetType.HTML, + OtherAssetType.JSON, + OtherAssetType.TS, + ], + formatOptions: { + json: { indent: 4 }, + }, + pathOptions: { + json: './dist/font/icon.gl.json', + css: './dist/font/icon.gl.css', + scss: './dist/font/icon.gl.scss', + woff: './dist/font/icon.gl.woff', + woff2: './dist/font/icon.gl.woff2', + }, + selector: '.igl', + prefix: 'igl', + fontsUrl: './fonts', + }; + try { + yield generateFonts(config); + console.log('Fonts generated successfully.'); + } + catch (error) { + console.error('Error generating fonts:', error); + } + }); + } +} +export default FontGenerator; +//# sourceMappingURL=FontGenerator.js.map \ No newline at end of file diff --git a/script/js/class/FontGenerator.js.map b/script/js/class/FontGenerator.js.map new file mode 100644 index 00000000..d74cf2d0 --- /dev/null +++ b/script/js/class/FontGenerator.js.map @@ -0,0 +1 @@ +{"version":3,"file":"FontGenerator.js","sourceRoot":"","sources":["../../ts/class/FontGenerator.ts"],"names":[],"mappings":";AAqBA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO3E,MAAM,aAAa;IAET,aAAa,CAAC,eAAuB,EAAE,cAAsB;;YAE/D,MAAM,MAAM,GAAG;gBAIX,QAAQ,EAAE,eAAe;gBACzB,SAAS,EAAE,cAAc;gBAGzB,IAAI,EAAE,SAAS;gBACf,SAAS,EAAE;oBACP,aAAa,CAAC,GAAG;oBACjB,aAAa,CAAC,IAAI;oBAClB,aAAa,CAAC,KAAK;oBACnB,aAAa,CAAC,GAAG;oBACjB,aAAa,CAAC,GAAG;iBACpB;gBACD,UAAU,EAAE;oBACR,cAAc,CAAC,GAAG;oBAClB,cAAc,CAAC,IAAI;oBACnB,cAAc,CAAC,IAAI;oBACnB,cAAc,CAAC,IAAI;oBACnB,cAAc,CAAC,IAAI;oBACnB,cAAc,CAAC,EAAE;iBACpB;gBAID,aAAa,EAAE;oBAOf,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;iBAalB;gBACL,WAAW,EAAE;oBACT,IAAI,EAAI,0BAA0B;oBAClC,GAAG,EAAK,yBAAyB;oBACjC,IAAI,EAAI,0BAA0B;oBAClC,IAAI,EAAI,0BAA0B;oBAClC,KAAK,EAAG,2BAA2B;iBACtC;gBAWD,QAAQ,EAAE,MAAM;gBAOhB,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,SAAS;aAWlB,CAAC;YAEF,IAAI,CAAC;gBACD,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC5B,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;YACjD,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;YACpD,CAAC;QACL,CAAC;KAAA;CACJ;AAOD,eAAe,aAAa,CAAC"} \ No newline at end of file diff --git a/script/js/class/ModulePackager.js b/script/js/class/ModulePackager.js new file mode 100644 index 00000000..2815e9c2 --- /dev/null +++ b/script/js/class/ModulePackager.js @@ -0,0 +1,41 @@ +class ModulePackager { + constructor(svgs, version) { + if (!svgs || !version) { + throw new Error("Invalid constructor arguments"); + } + this.svgs = svgs; + this.version = version; + } + getSVGContent(source) { + return source.slice(source.indexOf('>') + 1).slice(0, -6); + } + createModulePackage() { + try { + const files = this.svgs.map(svg => { + const source = this.getSVGContent(svg.source); + const json = JSON.stringify(Object.assign(Object.assign({}, svg), { source })); + return { + filepath: `${svg.metadata.name}.js`, + source: `export default ${json};` + }; + }); + files.push({ + filepath: 'package.json', + source: `{ + "name": "@acme/module-icons", + "version": "${this.version}" + }` + }); + return { + name: 'module-icons', + files + }; + } + catch (error) { + console.error('Error creating module package:', error); + throw error; + } + } +} +export default ModulePackager; +//# sourceMappingURL=ModulePackager.js.map \ No newline at end of file diff --git a/script/js/class/ModulePackager.js.map b/script/js/class/ModulePackager.js.map new file mode 100644 index 00000000..ce58b134 --- /dev/null +++ b/script/js/class/ModulePackager.js.map @@ -0,0 +1 @@ +{"version":3,"file":"ModulePackager.js","sourceRoot":"","sources":["../../ts/class/ModulePackager.ts"],"names":[],"mappings":"AA2BA,MAAM,cAAc;IAKhB,YAAY,IAAW,EAAE,OAAe;QACpC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;QACrD,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IAC3B,CAAC;IAEO,aAAa,CAAC,MAAc;QAEhC,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9D,CAAC;IAEM,mBAAmB;QACtB,IAAI,CAAC;YACD,MAAM,KAAK,GAAW,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,iCAAM,GAAG,KAAE,MAAM,IAAG,CAAC;gBAEhD,OAAO;oBACH,QAAQ,EAAE,GAAG,GAAG,CAAC,QAAQ,CAAC,IAAI,KAAK;oBACnC,MAAM,EAAE,kBAAkB,IAAI,GAAG;iBACpC,CAAC;YACF,CAAC,CAAC,CAAC;YAEH,KAAK,CAAC,IAAI,CAAC;gBACP,QAAQ,EAAE,cAAc;gBACxB,MAAM,EAAE;;kCAEU,IAAI,CAAC,OAAO;kBAC5B;aACL,CAAC,CAAC;YAEH,OAAO;gBACH,IAAI,EAAE,cAAc;gBACpB,KAAK;aACR,CAAC;QACN,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC;YACvD,MAAM,KAAK,CAAC;QAChB,CAAC;IACL,CAAC;CACJ;AAOC,eAAe,cAAc,CAAC"} \ No newline at end of file diff --git a/script/js/class/PackageCreator.js b/script/js/class/PackageCreator.js new file mode 100644 index 00000000..8c2b3550 --- /dev/null +++ b/script/js/class/PackageCreator.js @@ -0,0 +1,18 @@ +import { __awaiter } from "tslib"; +import fs from 'fs'; +import path from 'path'; +class PackageCreator { + constructor(packageJson) { + this.packageJson = packageJson; + } + createPackageJson(outputDir) { + return __awaiter(this, void 0, void 0, function* () { + const filePath = path.join(outputDir, 'package.json'); + const data = JSON.stringify(this.packageJson, null, 2); + fs.writeFileSync(filePath, data, 'utf-8'); + console.log(`package.json created at ${filePath}`); + }); + } +} +export default PackageCreator; +//# sourceMappingURL=PackageCreator.js.map \ No newline at end of file diff --git a/script/js/class/PackageCreator.js.map b/script/js/class/PackageCreator.js.map new file mode 100644 index 00000000..1f6597db --- /dev/null +++ b/script/js/class/PackageCreator.js.map @@ -0,0 +1 @@ +{"version":3,"file":"PackageCreator.js","sourceRoot":"","sources":["../../ts/class/PackageCreator.ts"],"names":[],"mappings":";AAqBA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB,MAAM,cAAc;IAIhB,YAAY,WAAwB;QAChC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACnC,CAAC;IAEK,iBAAiB,CAAC,SAAiB;;YACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;YACtD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAEvD,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;YAC1C,OAAO,CAAC,GAAG,CAAC,2BAA2B,QAAQ,EAAE,CAAC,CAAC;QACvD,CAAC;KAAA;CAEJ;AAOD,eAAe,cAAc,CAAC"} \ No newline at end of file diff --git a/script/js/class/StyleProcessor.js b/script/js/class/StyleProcessor.js new file mode 100644 index 00000000..ffe27dee --- /dev/null +++ b/script/js/class/StyleProcessor.js @@ -0,0 +1,31 @@ +import { __awaiter } from "tslib"; +import * as sass from 'sass'; +import postcss from 'postcss'; +import fs from 'fs'; +import postcssConfigExpanded from '../config/postcss.config.expanded.js'; +import postcssConfigCompressed from '../config/postcss.config.compressed.js'; +class StyleProcessor { + processPostCSS(css, styleOption) { + return __awaiter(this, void 0, void 0, function* () { + const config = styleOption === 'expanded' ? postcssConfigExpanded : postcssConfigCompressed; + return postcss(config.plugins).process(css, { from: undefined, map: { inline: false } }); + }); + } + processStyles(inputFile, outputFile, styleOption) { + return __awaiter(this, void 0, void 0, function* () { + try { + const result = yield sass.compileAsync(inputFile, { style: styleOption }); + const processed = yield this.processPostCSS(result.css, styleOption); + fs.writeFileSync(outputFile, processed.css); + if (processed.map) { + fs.writeFileSync(`${outputFile}.map`, processed.map.toString()); + } + } + catch (err) { + console.error(`Error processing styles from ${inputFile}:`, err); + } + }); + } +} +export default StyleProcessor; +//# sourceMappingURL=StyleProcessor.js.map \ No newline at end of file diff --git a/script/js/class/StyleProcessor.js.map b/script/js/class/StyleProcessor.js.map new file mode 100644 index 00000000..545adfff --- /dev/null +++ b/script/js/class/StyleProcessor.js.map @@ -0,0 +1 @@ +{"version":3,"file":"StyleProcessor.js","sourceRoot":"","sources":["../../ts/class/StyleProcessor.ts"],"names":[],"mappings":";AAqBA,OAAO,KAAK,IAAI,MAAM,MAAM,CAAA;AAC5B,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,qBAAqB,MAAM,sCAAsC,CAAC;AACzE,OAAO,uBAAuB,MAAM,wCAAwC,CAAC;AAW7E,MAAM,cAAc;IAQV,cAAc,CAChB,GAAW,EACX,WAAsC;;YAEtC,MAAM,MAAM,GAAG,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,CAAC;YAC5F,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC7F,CAAC;KAAA;IAQK,aAAa,CACf,SAAiB,EACjB,UAAmC,EACnC,WAAsC;;YAEtC,IAAI,CAAC;gBAED,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,YAAY,CAClC,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CACpC,CAAC;gBAEF,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;gBAErE,EAAE,CAAC,aAAa,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;gBAE5C,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;oBAChB,EAAE,CAAC,aAAa,CAAC,GAAG,UAAU,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACpE,CAAC;YACL,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBAEX,OAAO,CAAC,KAAK,CAAC,gCAAgC,SAAS,GAAG,EAAE,GAAG,CAAC,CAAC;YACrE,CAAC;QACL,CAAC;KAAA;CACJ;AAOD,eAAe,cAAc,CAAC"} \ No newline at end of file diff --git a/script/js/class/SvgPackager.js b/script/js/class/SvgPackager.js new file mode 100644 index 00000000..14f024ea --- /dev/null +++ b/script/js/class/SvgPackager.js @@ -0,0 +1,109 @@ +import { __awaiter } from "tslib"; +import * as fs_extra from 'fs-extra'; +import { promises as fs } from 'fs'; +import * as glob from 'glob'; +import * as path from 'path'; +import { fileURLToPath } from "url"; +import SVGO from 'svgo'; +import { loadConfig } from 'svgo'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +class SvgPackager { + processSvgFiles(directory, outputDirectory, ts_output_directory, json_output_directory) { + return __awaiter(this, void 0, void 0, function* () { + const iconNames = []; + try { + console.log(`Processing directory: ${directory}`); + const svgFiles = glob.sync(`${directory}/**/*.svg`); + for (const file of svgFiles) { + console.log(`Processing file: ${file}`); + const iconName = this.sanitizeFileName(path.basename(file, '.svg')); + iconNames.push(iconName); + console.log(`Processing icon: ${iconName}`); + const svgContent = yield this.readSvgFile(file); + const optimizedSvg = yield this.optimizeSvg(file, svgContent); + const resultSvg = optimizedSvg.trim(); + yield this.writeSvgFile(file, iconName, resultSvg, outputDirectory); + yield this.writeTypeScriptFile(file, iconName, resultSvg, ts_output_directory); + } + yield this.writeIconsJson(iconNames, json_output_directory); + console.log(`Successfully processed ${svgFiles.length} SVG files.`); + } + catch (error) { + console.error('Error processing SVG files:', error); + throw error; + } + }); + } + readSvgFile(filePath) { + return __awaiter(this, void 0, void 0, function* () { + try { + const absolutePath = path.resolve(filePath); + const svgContent = yield fs.readFile(absolutePath, 'utf8'); + return svgContent; + } + catch (error) { + console.error('Error reading file:', filePath, error); + throw error; + } + }); + } + sanitizeFileName(fileName) { + return fileName.replace(/[^a-zA-Z0-9_]/g, '_'); + } + optimizeSvg(filePath, svgContent) { + return __awaiter(this, void 0, void 0, function* () { + try { + const config = yield loadConfig(path.join(__dirname, '../config/svgo.config.js')); + const result = yield SVGO.optimize(svgContent, Object.assign({ path: filePath }, config)); + return result.data; + } + catch (error) { + console.error('Error optimizing SVG:', error); + throw error; + } + }); + } + writeTypeScriptFile(filePath, iconName, svgContent, outputDirectory) { + return __awaiter(this, void 0, void 0, function* () { + try { + const tsContent = `export const icon_${iconName} = \`${svgContent}\`;\n`; + const outputPath = path.join(outputDirectory, `${iconName}.ts`); + yield fs_extra.outputFile(outputPath, tsContent); + } + catch (error) { + console.error(`Error creating TypeScript file for ${filePath}:`, error); + throw error; + } + }); + } + writeSvgFile(filePath, iconName, svgContent, outputDirectory) { + return __awaiter(this, void 0, void 0, function* () { + try { + const outputPath = path.join(outputDirectory, `${iconName}.svg`); + yield fs_extra.outputFile(outputPath, svgContent); + console.log(`SVG file written successfully for ${iconName}`); + } + catch (error) { + console.error(`Error writing SVG file for ${iconName}:`, error); + throw error; + } + }); + } + writeIconsJson(iconNames, outputDirectory) { + return __awaiter(this, void 0, void 0, function* () { + try { + const jsonContent = JSON.stringify(iconNames, null, 2); + const outputPath = path.join(outputDirectory, 'icons.json'); + yield fs_extra.outputFile(outputPath, jsonContent); + console.log('Icons JSON file created successfully'); + } + catch (error) { + console.error('Error writing icons JSON file:', error); + throw error; + } + }); + } +} +export default SvgPackager; +//# sourceMappingURL=SvgPackager.js.map \ No newline at end of file diff --git a/script/js/class/SvgPackager.js.map b/script/js/class/SvgPackager.js.map new file mode 100644 index 00000000..ec7e209f --- /dev/null +++ b/script/js/class/SvgPackager.js.map @@ -0,0 +1 @@ +{"version":3,"file":"SvgPackager.js","sourceRoot":"","sources":["../../ts/class/SvgPackager.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/script/js/class/SvgSpriteGenerator.js b/script/js/class/SvgSpriteGenerator.js new file mode 100644 index 00000000..8df1864d --- /dev/null +++ b/script/js/class/SvgSpriteGenerator.js @@ -0,0 +1,41 @@ +import { __awaiter } from "tslib"; +import svgSprite from 'svg-sprite'; +import fs from 'fs'; +import path from 'path'; +class SvgSpriteGenerator { + constructor(config) { + this.config = config; + } + generateSprite(sourceDir, outputDir) { + return __awaiter(this, void 0, void 0, function* () { + try { + const files = fs.readdirSync(sourceDir); + const sprite = new svgSprite(this.config); + files.forEach(file => { + if (path.extname(file) === '.svg') { + const svgPath = path.resolve(sourceDir, file); + const content = fs.readFileSync(svgPath, 'utf8'); + sprite.add(svgPath, null, content); + } + }); + sprite.compile((error, result) => { + if (error) { + throw error; + } + for (const mode in result) { + for (const resource in result[mode]) { + const outputPath = path.resolve(outputDir, result[mode][resource].path); + fs.mkdirSync(path.dirname(outputPath), { recursive: true }); + fs.writeFileSync(outputPath, result[mode][resource].contents); + } + } + }); + } + catch (err) { + console.error('Error generating SVG sprite:', err); + } + }); + } +} +export default SvgSpriteGenerator; +//# sourceMappingURL=SvgSpriteGenerator.js.map \ No newline at end of file diff --git a/script/js/class/SvgSpriteGenerator.js.map b/script/js/class/SvgSpriteGenerator.js.map new file mode 100644 index 00000000..3ac1f5b2 --- /dev/null +++ b/script/js/class/SvgSpriteGenerator.js.map @@ -0,0 +1 @@ +{"version":3,"file":"SvgSpriteGenerator.js","sourceRoot":"","sources":["../../ts/class/SvgSpriteGenerator.ts"],"names":[],"mappings":";AAqBA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,kBAAkB;IAGpB,YAAY,MAAW;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC;IAEK,cAAc,CAAC,SAAiB,EAAE,SAAiB;;YACrD,IAAI,CAAC;gBACD,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gBACxC,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAE1C,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACjB,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,MAAM,EAAE,CAAC;wBAChC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;wBAC9C,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;wBACjD,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;oBACvC,CAAC;gBACL,CAAC,CAAC,CAAC;gBAEH,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE;oBAC7B,IAAI,KAAK,EAAE,CAAC;wBACR,MAAM,KAAK,CAAC;oBAChB,CAAC;oBAED,KAAK,MAAM,IAAI,IAAI,MAAM,EAAE,CAAC;wBACxB,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;4BAClC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC;4BACxE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;4BAC5D,EAAE,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC;wBAClE,CAAC;oBACL,CAAC;gBACL,CAAC,CAAC,CAAC;YAEP,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACX,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,GAAG,CAAC,CAAC;YACvD,CAAC;QACL,CAAC;KAAA;CACJ;AAMD,eAAe,kBAAkB,CAAC"} \ No newline at end of file diff --git a/script/js/class/TypeScriptCompiler.js b/script/js/class/TypeScriptCompiler.js new file mode 100644 index 00000000..0a5fccc9 --- /dev/null +++ b/script/js/class/TypeScriptCompiler.js @@ -0,0 +1,15 @@ +import ts from 'typescript'; +class TypeScriptCompiler { + compile(filePaths, outDir) { + const options = { + module: ts.ModuleKind.CommonJS, + target: ts.ScriptTarget.ES2015, + outDir, + }; + const host = ts.createCompilerHost(options); + const program = ts.createProgram(filePaths, options, host); + program.emit(); + } +} +export default TypeScriptCompiler; +//# sourceMappingURL=TypeScriptCompiler.js.map \ No newline at end of file diff --git a/script/js/class/TypeScriptCompiler.js.map b/script/js/class/TypeScriptCompiler.js.map new file mode 100644 index 00000000..8abdf623 --- /dev/null +++ b/script/js/class/TypeScriptCompiler.js.map @@ -0,0 +1 @@ +{"version":3,"file":"TypeScriptCompiler.js","sourceRoot":"","sources":["../../ts/class/TypeScriptCompiler.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAE,MAAM,YAAY,CAAC;AAK5B,MAAM,kBAAkB;IAEpB,OAAO,CAAC,SAAmB,EAAE,MAAc;QACvC,MAAM,OAAO,GAAuB;YAChC,MAAM,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ;YAC9B,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM;YAC9B,MAAM;SAET,CAAC;QAEF,MAAM,IAAI,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC5C,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;QAE3D,OAAO,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;CACJ;AAED,eAAe,kBAAkB,CAAC"} \ No newline at end of file diff --git a/script/js/class/VersionWriter.js b/script/js/class/VersionWriter.js new file mode 100644 index 00000000..90b1eb2b --- /dev/null +++ b/script/js/class/VersionWriter.js @@ -0,0 +1,17 @@ +import { __awaiter } from "tslib"; +import { promises as fs } from 'fs'; +class VersionWriter { + writeVersionToFile(filePath, version) { + return __awaiter(this, void 0, void 0, function* () { + try { + yield fs.writeFile(filePath, version, 'utf8'); + console.log(`Version ${version} written to ${filePath}`); + } + catch (error) { + console.error(`Error writing version to file: ${error}`); + } + }); + } +} +export default VersionWriter; +//# sourceMappingURL=VersionWriter.js.map \ No newline at end of file diff --git a/script/js/class/VersionWriter.js.map b/script/js/class/VersionWriter.js.map new file mode 100644 index 00000000..7e156fca --- /dev/null +++ b/script/js/class/VersionWriter.js.map @@ -0,0 +1 @@ +{"version":3,"file":"VersionWriter.js","sourceRoot":"","sources":["../../ts/class/VersionWriter.ts"],"names":[],"mappings":";AAqBA,OAAO,EAAE,QAAQ,IAAI,EAAE,EAAE,MAAM,IAAI,CAAC;AAQpC,MAAM,aAAa;IAQT,kBAAkB,CAAC,QAAgB,EAAE,OAAe;;YACtD,IAAI,CAAC;gBAED,MAAM,EAAE,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;gBAC9C,OAAO,CAAC,GAAG,CAAC,WAAW,OAAO,eAAe,QAAQ,EAAE,CAAC,CAAC;YAC7D,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,kCAAkC,KAAK,EAAE,CAAC,CAAC;YAC7D,CAAC;QACL,CAAC;KAAA;CACJ;AAQD,eAAe,aAAa,CAAC"} \ No newline at end of file diff --git a/script/js/config/config.js b/script/js/config/config.js index fac65961..ecc00545 100644 --- a/script/js/config/config.js +++ b/script/js/config/config.js @@ -8,10 +8,13 @@ export const CONFIG = { sprite_output: './dist/sprite', font_input: './dist/svg', font_output: './dist/font', - style_input: './src/scss', - style_output: './dist/css', + scss_input: './src/scss', + scss_output: './dist/scss', + css_output: './dist/css', json_output: './dist', - ts_output: './src/ts/icons', + ts_input: './src/ts', + ts_output: './dist/ts', + ts_output_icons: './src/ts/icons', }, }; //# sourceMappingURL=config.js.map \ No newline at end of file diff --git a/script/js/config/config.js.map b/script/js/config/config.js.map index ae2d8273..c7d0c0be 100644 --- a/script/js/config/config.js.map +++ b/script/js/config/config.js.map @@ -1 +1 @@ -{"version":3,"file":"config.js","sourceRoot":"","sources":["../../ts/config/config.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,IAAI,EAAE;QACF,GAAG,EAAO,OAAO;QACjB,IAAI,EAAO,QAAQ;QAEnB,SAAS,EAAO,WAAW;QAC3B,UAAU,EAAM,YAAY;QAC5B,YAAY,EAAI,YAAY;QAC5B,aAAa,EAAG,eAAe;QAC/B,UAAU,EAAM,YAAY;QAC5B,WAAW,EAAK,aAAa;QAC7B,WAAW,EAAK,YAAY;QAC5B,YAAY,EAAI,YAAY;QAC5B,WAAW,EAAK,QAAQ;QAExB,SAAS,EAAO,gBAAgB;KACnC;CAEJ,CAAC"} \ No newline at end of file +{"version":3,"file":"config.js","sourceRoot":"","sources":["../../ts/config/config.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,IAAI,EAAE;QACF,GAAG,EAAO,OAAO;QACjB,IAAI,EAAO,QAAQ;QAEnB,SAAS,EAAO,WAAW;QAC3B,UAAU,EAAM,YAAY;QAC5B,YAAY,EAAI,YAAY;QAC5B,aAAa,EAAG,eAAe;QAC/B,UAAU,EAAM,YAAY;QAC5B,WAAW,EAAK,aAAa;QAC7B,UAAU,EAAK,YAAY;QAC3B,WAAW,EAAK,aAAa;QAC7B,UAAU,EAAI,YAAY;QAC1B,WAAW,EAAK,QAAQ;QAExB,QAAQ,EAAO,UAAU;QACzB,SAAS,EAAO,WAAW;QAC3B,eAAe,EAAO,gBAAgB;KACzC;CAEJ,CAAC"} \ No newline at end of file diff --git a/script/js/config/package.config.js b/script/js/config/package.config.js index 12e8a613..f72686be 100644 --- a/script/js/config/package.config.js +++ b/script/js/config/package.config.js @@ -4,6 +4,9 @@ const packageConfig = { name: pack.name, version: pack.version, description: pack.description, + keywords: pack.keywords, + license: pack.license, + homepage: pack.homepage, main: 'index.js', }; export default packageConfig; diff --git a/script/js/config/package.config.js.map b/script/js/config/package.config.js.map index c4ddaf62..30da3b64 100644 --- a/script/js/config/package.config.js.map +++ b/script/js/config/package.config.js.map @@ -1 +1 @@ -{"version":3,"file":"package.config.js","sourceRoot":"","sources":["../../ts/config/package.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,uBAAuB,CAAC,SAAS,IAAI,EAAE,MAAM,EAAE,CAAC;AAE7E,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;AAG7D,MAAM,aAAa,GAAG;IAClB,IAAI,EAAE,IAAI,CAAC,IAAI;IACf,OAAO,EAAE,IAAI,CAAC,OAAO;IACrB,WAAW,EAAE,IAAI,CAAC,WAAW;IAC7B,IAAI,EAAE,UAAU;CAEnB,CAAA;AAQD,eAAe,aAAa,CAAC"} \ No newline at end of file +{"version":3,"file":"package.config.js","sourceRoot":"","sources":["../../ts/config/package.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,uBAAuB,CAAC,SAAS,IAAI,EAAE,MAAM,EAAE,CAAC;AAE7E,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;AAG7D,MAAM,aAAa,GAAG;IAClB,IAAI,EAAE,IAAI,CAAC,IAAI;IACf,OAAO,EAAE,IAAI,CAAC,OAAO;IACrB,WAAW,EAAE,IAAI,CAAC,WAAW;IAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;IACvB,OAAO,EAAE,IAAI,CAAC,OAAO;IACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;IACvB,IAAI,EAAE,UAAU;CA2BnB,CAAA;AAMD,eAAe,aAAa,CAAC"} \ No newline at end of file diff --git a/script/js/index.js b/script/js/index.js index 44126aaf..5f5c0398 100644 --- a/script/js/index.js +++ b/script/js/index.js @@ -1,30 +1,33 @@ import { __awaiter } from "tslib"; import path from 'path'; -import FontGenerator from './FontGenerator.js'; -import SvgPackager from "./SvgPackager.js"; -import StyleProcessor from "./StyleProcessor.js"; -import SvgSpriteGenerator from "./SvgSpriteGenerator.js"; -import PackageCreator from './PackageCreator.js'; -import DirectoryCreator from './DirectoryCreator.js'; -import VersionWriter from './VersionWriter.js'; +import FontGenerator from './class/FontGenerator.js'; +import SvgPackager from "./class/SvgPackager.js"; +import StyleProcessor from "./class/StyleProcessor.js"; +import SvgSpriteGenerator from "./class/SvgSpriteGenerator.js"; +import PackageCreator from './class/PackageCreator.js'; +import DirectoryCreator from './class/DirectoryCreator.js'; +import VersionWriter from './class/VersionWriter.js'; +import FileCopier from './class/FileCopier.js'; +import TypeScriptCompiler from './class/TypeScriptCompiler.js'; import { CONFIG } from './config/config.js'; import svgspriteConfig from "./config/svgsprite.config.js"; import packageConfig from "./config/package.config.js"; +const directories = Object.values(CONFIG.path); +const dirCreator = new DirectoryCreator(); const svgPackager = new SvgPackager(); const fontGenerator = new FontGenerator(); const spriteGenerator = new SvgSpriteGenerator(svgspriteConfig); const styleProcessor = new StyleProcessor(); -const dirCreator = new DirectoryCreator(); -const directories = Object.values(CONFIG.path); const versionWriter = new VersionWriter(); const packageCreator = new PackageCreator(packageConfig); +const fileCopier = new FileCopier(); function main() { return __awaiter(this, void 0, void 0, function* () { try { console.log('Starting Directory creation...'); yield dirCreator.createDirectories('.', directories); console.log('Starting SVG processing...'); - yield svgPackager.processSvgFiles(CONFIG.path.svg_input, CONFIG.path.svg_output, CONFIG.path.ts_output, CONFIG.path.json_output); + yield svgPackager.processSvgFiles(CONFIG.path.svg_input, CONFIG.path.svg_output, CONFIG.path.ts_output_icons, CONFIG.path.json_output); console.log('SVG processing completed.'); console.log('Starting font generation...'); yield fontGenerator.generateFonts(CONFIG.path.font_input, CONFIG.path.font_output); @@ -33,11 +36,38 @@ function main() { yield spriteGenerator.generateSprite(CONFIG.path.sprite_input, CONFIG.path.sprite_output); console.log('SVG Sprite generation completed.'); console.log('Processing SASS...'); - yield styleProcessor.processStyles(path.join(CONFIG.path.style_input, 'index.scss'), path.join(CONFIG.path.style_output, 'icon.gl.css'), 'expanded'); - yield styleProcessor.processStyles(path.join(CONFIG.path.style_input, 'index.scss'), path.join(CONFIG.path.style_output, 'icon.gl.min.css'), 'compressed'); + yield styleProcessor.processStyles(path.join(CONFIG.path.scss_input, 'index.scss'), path.join(CONFIG.path.css_output, 'icon.gl.css'), 'expanded'); + yield styleProcessor.processStyles(path.join(CONFIG.path.scss_input, 'index.scss'), path.join(CONFIG.path.css_output, 'icon.gl.min.css'), 'compressed'); console.log('SASS Processing completed.'); + try { + yield fileCopier.copyFiles(CONFIG.path.ts_input, CONFIG.path.ts_output); + console.log('Files copied successfully.'); + } + catch (error) { + console.error('Error while copying files:', error); + } + try { + yield fileCopier.copyFiles(CONFIG.path.scss_input, CONFIG.path.scss_output); + console.log('Files copied successfully.'); + } + catch (error) { + console.error('Error while copying files:', error); + } yield versionWriter.writeVersionToFile('VERSION', packageConfig.version); yield packageCreator.createPackageJson(CONFIG.path.dist); + try { + const tsCompiler = new TypeScriptCompiler(); + const tsFiles = [ + './src/ts/index.ts', + ]; + const outputDir = './dist/js'; + console.log('Starting TypeScript compilation...'); + tsCompiler.compile(tsFiles, outputDir); + console.log('TypeScript compilation completed.'); + } + catch (error) { + console.error('An error occurred:', error); + } } catch (error) { console.error('An error occurred:', error); diff --git a/script/js/index.js.map b/script/js/index.js.map index e9dab1e6..de37105d 100644 --- a/script/js/index.js.map +++ b/script/js/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":";AAsBA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,aAAa,MAAM,4BAA4B,CAAA;AAQtD,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;AACtC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC;AAC1C,MAAM,eAAe,GAAG,IAAI,kBAAkB,CAAC,eAAe,CAAC,CAAC;AAChE,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC;AAC5C,MAAM,UAAU,GAAG,IAAI,gBAAgB,EAAE,CAAC;AAC1C,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC/C,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC;AAC1C,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,aAAa,CAAC,CAAC;AAWzD,SAAe,IAAI;;QAEf,IAAI,CAAC;YAMD,OAAO,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;YAE9C,MAAM,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;YAKrD,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;YAC1C,MAAM,WAAW,CAAC,eAAe,CAC7B,MAAM,CAAC,IAAI,CAAC,SAAS,EACrB,MAAM,CAAC,IAAI,CAAC,UAAU,EACtB,MAAM,CAAC,IAAI,CAAC,SAAS,EACrB,MAAM,CAAC,IAAI,CAAC,WAAW,CAC1B,CAAC;YACF,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;YAKzC,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;YAC3C,MAAM,aAAa,CAAC,aAAa,CAC7B,MAAM,CAAC,IAAI,CAAC,UAAU,EACtB,MAAM,CAAC,IAAI,CAAC,WAAW,CAC1B,CAAC;YACF,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;YAK1C,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;YACjD,MAAM,eAAe,CAAC,cAAc,CAChC,MAAM,CAAC,IAAI,CAAC,YAAY,EACxB,MAAM,CAAC,IAAI,CAAC,aAAa,CAC5B,CAAC;YACF,OAAO,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC;YAKhD,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;YAElC,MAAM,cAAc,CAAC,aAAa,CAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,EAChD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,EAClD,UAAU,CACb,CAAC;YAEF,MAAM,cAAc,CAAC,aAAa,CAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,EAChD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,EACtD,YAAY,CACf,CAAC;YACF,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;YAK1C,MAAM,aAAa,CAAC,kBAAkB,CAAC,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;YAMzE,MAAM,cAAc,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAK7D,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC;IAEL,CAAC;CAAA;AAID,IAAI,EAAE,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/script/js/interfaces/File.js b/script/js/interfaces/File.js new file mode 100644 index 00000000..7da5bc07 --- /dev/null +++ b/script/js/interfaces/File.js @@ -0,0 +1,2 @@ +"use strict"; +//# sourceMappingURL=File.js.map \ No newline at end of file diff --git a/script/js/interfaces/File.js.map b/script/js/interfaces/File.js.map new file mode 100644 index 00000000..861a8ab5 --- /dev/null +++ b/script/js/interfaces/File.js.map @@ -0,0 +1 @@ +{"version":3,"file":"File.js","sourceRoot":"","sources":["../../ts/interfaces/File.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/script/js/interfaces/PackageJson.js b/script/js/interfaces/PackageJson.js new file mode 100644 index 00000000..4f3242ce --- /dev/null +++ b/script/js/interfaces/PackageJson.js @@ -0,0 +1,2 @@ +"use strict"; +//# sourceMappingURL=PackageJson.js.map \ No newline at end of file diff --git a/script/js/interfaces/PackageJson.js.map b/script/js/interfaces/PackageJson.js.map new file mode 100644 index 00000000..8ba9bed3 --- /dev/null +++ b/script/js/interfaces/PackageJson.js.map @@ -0,0 +1 @@ +{"version":3,"file":"PackageJson.js","sourceRoot":"","sources":["../../ts/interfaces/PackageJson.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/script/js/interfaces/SVG.js b/script/js/interfaces/SVG.js new file mode 100644 index 00000000..e8b1633f --- /dev/null +++ b/script/js/interfaces/SVG.js @@ -0,0 +1,2 @@ +"use strict"; +//# sourceMappingURL=SVG.js.map \ No newline at end of file diff --git a/script/js/interfaces/SVG.js.map b/script/js/interfaces/SVG.js.map new file mode 100644 index 00000000..2bb813f8 --- /dev/null +++ b/script/js/interfaces/SVG.js.map @@ -0,0 +1 @@ +{"version":3,"file":"SVG.js","sourceRoot":"","sources":["../../ts/interfaces/SVG.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/script/package.json b/script/package.json deleted file mode 100644 index 076b4817..00000000 --- a/script/package.json +++ /dev/null @@ -1,139 +0,0 @@ -{ - "name": "icon.gl", - "description": "icon.gl is a icon library and framework developed by Scape Agency.", - "version": "0.0.1", - "config": { - "version_short": "0.0" - }, - "keywords": [ - "icon.gl", - "stylescape", - "icon", - "icons", - "icon-library", - "font", - "sprite", - "svg", - "sass", - "scss", - "woff", - "woff2", - "responsive", - "front-end", - "framework", - "web" - ], - "homepage": "https://www.icon.gl/", - "author": "Lars van Vianen", - "contributors": [ - "Scape Agency" - ], - "license": "Apache-2.0", - "repository": { - "type": "git", - "url": "git+https://github.com/scape-agency/icon.gl.git" - }, - "bugs": { - "url": "https://github.com/scape-agency/icon.gl/issues" - }, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/scape-foundation" - } - ], - "main": "src/scss/index.scss", - "type": "module", - "module": "dist/js/unit.gl.js", - "style": "dist/css/unit.gl.css", - "sass": "src/scss/index.scss", - "scripts": { - "format": "npx prettier --write .", - "lint": "eslint 'src/**/*.ts' || true", - "prettify": "prettier --write 'src/**/*.ts'", - "build": "npm run build-compile && npm run icons-process", - "build-compile2": "tsc -p tsconfig.build.json", - "build-compile": "tsc -p script/tsconfig.json", - "webpack-build": "npm run webpack-prod", - "webpack-build2": "npm run webpack-prod && npm run webpack-dev", - "webpack-dev": "webpack --mode development --config webpack.config.js", - "webpack-prod": "webpack --mode production --config webpack.config.js", - "webpack-serve": "webpack serve --mode development --config webpack.config.js", - "webpack-start": "webpack-dev-server --mode development --config webpack.config.js", - "icons-process": "node script/js/index.js", - "icons-sprite": "svg-sprite --config svg-sprite.json --log=info \"dist/svg/*.svg\"", - "icons-font": "npm run icons-font-main", - "icons-font3": "npm run icons-font-main && npm run icons-font-min", - "icons-font-main": "fantasticon --debug", - "icons-font-min": "cleancss -O1 --format breakWith=lf --with-rebase --output font/bootstrap-icons.min.css font/bootstrap-icons.css", - "icons-compile3": "tsc filename.ts | node filename.js", - "icons-zip": "cross-env-shell \"rm -rf bootstrap-icons-$npm_package_version bootstrap-icons-$npm_package_version.zip && cp -r icons/ bootstrap-icons-$npm_package_version && cp bootstrap-icons.svg bootstrap-icons-$npm_package_version && cp -r font/ bootstrap-icons-$npm_package_version && zip -qr9 bootstrap-icons-$npm_package_version.zip bootstrap-icons-$npm_package_version && rm -rf bootstrap-icons-$npm_package_version\"" - }, - "devDependencies": { - "@babel/core": "^7.23.6", - "@babel/preset-env": "^7.23.6", - "@babel/preset-typescript": "^7.23.3", - "@types/fs-extra": "^11.0.4", - "@types/glob": "^8.1.0", - "@types/node": "^20.10.5", - "@types/svg-sprite": "^0.0.38", - "@types/webpack": "^5.28.1", - "autoprefixer": "^10.4.15", - "babel-loader": "^9.1.3", - "clean-webpack-plugin": "^4.0.0", - "copy-webpack-plugin": "^11.0.0", - "css-loader": "^6.8.1", - "css-minimizer-webpack-plugin": "^5.0.0", - "del": "^7.1.0", - "eslint": "^8.41.0", - "eslint-config-prettier": "^9.0.0", - "eslint-import-resolver-webpack": "^0.13.2", - "eslint-plugin-prettier": "^5.0.1", - "fantasticon": "^2.0.0", - "fs-extra": "^11.2.0", - "glob": "^10.3.10", - "html-webpack-plugin": "^5.5.3", - "lodash": "^4.17.21", - "mini-css-extract-plugin": "^2.7.6", - "postcss-loader": "^7.3.3", - "postcss-preset-env": "^9.1.2", - "prettier": "^3.0.3", - "sass": "^1.66.1", - "sass-loader": "^13.3.2", - "style-loader": "^3.3.3", - "svg-sprite": "^2.0.2", - "svgo": "^3.1.0", - "terser": "^5.26.0", - "terser-webpack-plugin": "^5.3.9", - "ts-loader": "^9.4.3", - "ts-node": "^10.9.1", - "typescript": "^5.3.3", - "webpack": "^5.89.0", - "webpack-cli": "^5.1.4", - "webpack-dev-server": "^4.15.1", - "webpack-merge": "^5.9.0" - }, - "files": [ - "dist/svg/**/*.{svg}", - "dist/js/**/*.{js,map}", - "dist/css/**/*.{css,map}", - "dist/font/**/*.{eot,otf,ttf,woff,woff2}", - "src/ts/**/*.ts", - "src/scss/**/*.scss", - "src/font/**/*.{ttf,woff,woff2}", - "!.DS_Store" - ], - "hugo-bin": { - "buildTags": "extended" - }, - "jspm": { - "registry": "npm", - "main": "dist/js/unit.gl.js", - "directories": { - "lib": "src" - }, - "shim": {}, - "dependencies": {}, - "peerDependencies": {} - } -} diff --git a/script/ts/ModulePackager.ts b/script/ts/ModulePackager.ts deleted file mode 100644 index 79c177f3..00000000 --- a/script/ts/ModulePackager.ts +++ /dev/null @@ -1,103 +0,0 @@ -// script/ModulePackager.ts - -// Copyright 2023 Scape Agency BV - -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - - -// ============================================================================ -// Import -// ============================================================================ - - - -// ============================================================================ -// Interfaces -// ============================================================================ - -interface Svg { - metadata: { - name: string; - // ... other metadata properties - }; - source: string; - // ... other Svg properties - } - - interface File { - filepath: string; - source: string; - } - - -// ============================================================================ -// Classes -// ============================================================================ - -class ModulePackager { - - private svgs: Svg[]; - private version: string; - - constructor(svgs: Svg[], version: string) { - if (!svgs || !version) { - throw new Error("Invalid constructor arguments"); - } - - this.svgs = svgs; - this.version = version; - } - - private getSVGContent(source: string): string { - // More robust string manipulation if needed - return source.slice(source.indexOf('>') + 1).slice(0, -6); - } - - public createModulePackage(): { name: string, files: File[] } { - try { - const files: File[] = this.svgs.map(svg => { - const source = this.getSVGContent(svg.source); - const json = JSON.stringify({ ...svg, source }); - - return { - filepath: `${svg.metadata.name}.js`, - source: `export default ${json};` - }; - }); - - files.push({ - filepath: 'package.json', - source: `{ - "name": "@acme/module-icons", - "version": "${this.version}" - }` - }); - - return { - name: 'module-icons', - files - }; - } catch (error) { - console.error('Error creating module package:', error); - throw error; - } - } -} - - -// ============================================================================ -// Export -// ============================================================================ - - export default ModulePackager; - \ No newline at end of file diff --git a/script/ts/TypeScriptCompiler.ts b/script/ts/TypeScriptCompiler.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/script/ts/DirectoryCreator.ts b/script/ts/class/DirectoryCreator.ts similarity index 75% rename from script/ts/DirectoryCreator.ts rename to script/ts/class/DirectoryCreator.ts index 51c46d8b..d857087c 100644 --- a/script/ts/DirectoryCreator.ts +++ b/script/ts/class/DirectoryCreator.ts @@ -1,4 +1,4 @@ -// script/DirectoryGenerator.ts +// script/class/DirectoryGenerator.ts // Copyright 2023 Scape Agency BV @@ -27,6 +27,20 @@ import path from 'path'; // Classes // ============================================================================ +// class DirectoryCreator { +// async createDirectories(basePath: string, directories: string[]): Promise { +// for (const dir of directories) { +// const dirPath = path.join(basePath, dir); +// try { +// await fs.mkdir(dirPath, { recursive: true }); +// console.log(`Directory created: ${dirPath}`); +// } catch (error) { +// console.error(`Error creating directory ${dirPath}:`, error); +// } +// } +// } +// } + class DirectoryCreator { async createDirectories(basePath: string, directories: string[]): Promise { diff --git a/script/ts/class/FileCopier.ts b/script/ts/class/FileCopier.ts new file mode 100644 index 00000000..fa1bdf15 --- /dev/null +++ b/script/ts/class/FileCopier.ts @@ -0,0 +1,119 @@ +// script/class/class/FileCopier.ts + +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Import +// ============================================================================ + +import fs from 'fs'; +import path from 'path'; + + +// ============================================================================ +// Classes +// ============================================================================ + + +// class FileCopier { + +// async copyFiles(srcDir: string, destDir: string): Promise { +// const resolvedSrcDir = path.resolve(srcDir); +// const resolvedDestDir = path.resolve(destDir); +// this.copyDirectory(resolvedSrcDir, resolvedDestDir); +// } + +// private copyDirectory(srcDir: string, destDir: string): void { +// if (!fs.existsSync(destDir)) { +// fs.mkdirSync(destDir, { recursive: true }); +// } + +// const files = fs.readdirSync(srcDir); + +// files.forEach(file => { +// const srcFile = path.join(srcDir, file); +// const destFile = path.join(destDir, file); + +// if (fs.statSync(srcFile).isDirectory()) { +// this.copyDirectory(srcFile, destFile); +// } else { +// console.log(`Copying file: ${srcFile}`); +// fs.copyFileSync(srcFile, destFile); +// } +// }); +// } +// } + + +// class FileCopier { + +// async copyFiles(srcDir: string, destDir: string): Promise { +// try { +// const files = fs.readdirSync(srcDir); +// console.log("FILES"); +// console.log(files); + +// files.forEach(file => { + +// const srcFile = path.join(".", srcDir, file); +// const destFile = path.join(".", destDir, file); +// console.log("FILE"); +// console.log(srcFile); +// fs.copyFileSync(srcFile, destFile); +// }); + +// console.log(`Files copied from ${srcDir} to ${destDir}`); +// } catch (error) { +// console.error('Error copying files:', error); +// throw error; +// } +// } +// } + + +class FileCopier { + + async copyFiles(srcDir: string, destDir: string): Promise { + try { + const resolvedSrcDir = path.resolve(srcDir); + const resolvedDestDir = path.resolve(destDir); + + const files = fs.readdirSync(resolvedSrcDir); + console.log("FILES:", files); + + files.forEach(file => { + const srcFile = path.join(resolvedSrcDir, file); + const destFile = path.join(resolvedDestDir, file); + + if (fs.statSync(srcFile).isFile()) { + console.log("Copying file:", srcFile); + fs.copyFileSync(srcFile, destFile); + } + }); + + console.log(`Files copied from ${resolvedSrcDir} to ${resolvedDestDir}`); + } catch (error) { + console.error('Error copying files:', error); + throw error; + } + } +} + +// ============================================================================ +// Export +// ============================================================================ + +export default FileCopier; diff --git a/script/ts/FontGenerator.ts b/script/ts/class/FontGenerator.ts similarity index 99% rename from script/ts/FontGenerator.ts rename to script/ts/class/FontGenerator.ts index 9832fe5f..f43d3bea 100644 --- a/script/ts/FontGenerator.ts +++ b/script/ts/class/FontGenerator.ts @@ -1,4 +1,4 @@ -// script/FontGenerator.ts +// script/class/FontGenerator.ts // Copyright 2023 Scape Agency BV diff --git a/script/ts/PackageCreator.ts b/script/ts/class/PackageCreator.ts similarity index 78% rename from script/ts/PackageCreator.ts rename to script/ts/class/PackageCreator.ts index 018185c9..f22db26b 100644 --- a/script/ts/PackageCreator.ts +++ b/script/ts/class/PackageCreator.ts @@ -1,4 +1,4 @@ -// script/PackageCreator.ts +// script/class/PackageCreator.ts // Copyright 2023 Scape Agency BV @@ -24,22 +24,6 @@ import path from 'path'; // import * as pack from '../../package.json' assert { type: 'json' }; -// ============================================================================ -// Interfaces -// ============================================================================ - -interface PackageJson { - name: string; - version: string; - description?: string; - main?: string; - scripts?: Record; - dependencies?: Record; - devDependencies?: Record; - // ... other properties as needed -} - - // ============================================================================ // Classes // ============================================================================ diff --git a/script/ts/StyleProcessor.ts b/script/ts/class/StyleProcessor.ts similarity index 94% rename from script/ts/StyleProcessor.ts rename to script/ts/class/StyleProcessor.ts index 1d509ba3..b9f6503c 100644 --- a/script/ts/StyleProcessor.ts +++ b/script/ts/class/StyleProcessor.ts @@ -1,4 +1,4 @@ -// script/StyleProcessor.ts +// script/class/StyleProcessor.ts // Copyright 2023 Scape Agency BV @@ -22,8 +22,8 @@ import * as sass from 'sass' import postcss from 'postcss'; import fs from 'fs'; -import postcssConfigExpanded from './config/postcss.config.expanded.js'; -import postcssConfigCompressed from './config/postcss.config.compressed.js'; +import postcssConfigExpanded from '../config/postcss.config.expanded.js'; +import postcssConfigCompressed from '../config/postcss.config.compressed.js'; // ============================================================================ diff --git a/script/ts/SvgPackager.ts b/script/ts/class/SvgPackager.ts similarity index 99% rename from script/ts/SvgPackager.ts rename to script/ts/class/SvgPackager.ts index 300962f5..8802d637 100644 --- a/script/ts/SvgPackager.ts +++ b/script/ts/class/SvgPackager.ts @@ -1,4 +1,4 @@ -// script/SvgPackager.ts +// script/class/SvgPackager.ts // Copyright 2023 Scape Agency BV @@ -121,7 +121,7 @@ class SvgPackager { try { // const { data: optimizedSvg } = await optimize(originalSvg, { path: filepath, ...config }) - const config = await loadConfig(path.join(__dirname, 'config/svgo.config.js')) + const config = await loadConfig(path.join(__dirname, '../config/svgo.config.js')) // const config = await loadConfig(configFile, cwd); diff --git a/script/ts/SvgSpriteGenerator.ts b/script/ts/class/SvgSpriteGenerator.ts similarity index 98% rename from script/ts/SvgSpriteGenerator.ts rename to script/ts/class/SvgSpriteGenerator.ts index 26fe191d..85905dfb 100644 --- a/script/ts/SvgSpriteGenerator.ts +++ b/script/ts/class/SvgSpriteGenerator.ts @@ -1,4 +1,4 @@ -// script/SvgSpriteGenerator.ts +// script/class/SvgSpriteGenerator.ts // Copyright 2023 Scape Agency BV diff --git a/script/ts/class/TypeScriptCompiler.ts b/script/ts/class/TypeScriptCompiler.ts new file mode 100644 index 00000000..89ebc57d --- /dev/null +++ b/script/ts/class/TypeScriptCompiler.ts @@ -0,0 +1,45 @@ +// script/class/TypeScriptCompiler.ts + +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Import +// ============================================================================ + +// import * as ts from 'typescript'; +import ts from 'typescript'; + +import fs from 'fs'; +import path from 'path'; + +class TypeScriptCompiler { + + compile(filePaths: string[], outDir: string): void { + const options: ts.CompilerOptions = { + module: ts.ModuleKind.CommonJS, + target: ts.ScriptTarget.ES2015, + outDir, + // other necessary compiler options + }; + + const host = ts.createCompilerHost(options); + const program = ts.createProgram(filePaths, options, host); + + program.emit(); + } +} + +export default TypeScriptCompiler; diff --git a/script/ts/VersionWriter.ts b/script/ts/class/VersionWriter.ts similarity index 98% rename from script/ts/VersionWriter.ts rename to script/ts/class/VersionWriter.ts index d123bb5f..55557811 100644 --- a/script/ts/VersionWriter.ts +++ b/script/ts/class/VersionWriter.ts @@ -1,4 +1,4 @@ -// script/VersionWriter.ts +// script/class/VersionWriter.ts // Copyright 2023 Scape Agency BV diff --git a/script/ts/config/config.ts b/script/ts/config/config.ts index 973ac33c..c7fc892e 100644 --- a/script/ts/config/config.ts +++ b/script/ts/config/config.ts @@ -10,11 +10,14 @@ export const CONFIG = { sprite_output: './dist/sprite', font_input: './dist/svg', font_output: './dist/font', - style_input: './src/scss', - style_output: './dist/css', + scss_input: './src/scss', + scss_output: './dist/scss', + css_output: './dist/css', json_output: './dist', // ts_output: './dist/ts', - ts_output: './src/ts/icons', + ts_input: './src/ts', + ts_output: './dist/ts', + ts_output_icons: './src/ts/icons', }, }; \ No newline at end of file diff --git a/script/ts/config/package.config.ts b/script/ts/config/package.config.ts index 3dc3d558..c1039072 100644 --- a/script/ts/config/package.config.ts +++ b/script/ts/config/package.config.ts @@ -7,8 +7,36 @@ const packageConfig = { name: pack.name, version: pack.version, description: pack.description, + keywords: pack.keywords, + license: pack.license, + homepage: pack.homepage, main: 'index.js', - // ... other properties + // repository: { + // type: pack.repository.type, + // url: pack.repository.url, + // }, + + // author?: string | { + // name: string; + // email?: string; + // url?: string; + // }; + // bugs?: { + // url?: string; + // email?: string; + // }; + + // contributors?: Array; + // funding?: string | { + // type: string; + // url: string; + // }; + + } // ============================================================================ diff --git a/script/ts/index.ts b/script/ts/index.ts index df70a58b..91c0b5c9 100644 --- a/script/ts/index.ts +++ b/script/ts/index.ts @@ -21,15 +21,17 @@ // Import necessary modules and classes import path from 'path'; -import FontGenerator from './FontGenerator.js'; -import SvgPackager from "./SvgPackager.js"; -import StyleProcessor from "./StyleProcessor.js"; -import SvgSpriteGenerator from "./SvgSpriteGenerator.js"; -import PackageCreator from './PackageCreator.js'; -import DirectoryCreator from './DirectoryCreator.js'; // Adjust the import path as needed -import VersionWriter from './VersionWriter.js'; // Adjust the path as needed - - +import FontGenerator from './class/FontGenerator.js'; +import SvgPackager from "./class/SvgPackager.js"; +import StyleProcessor from "./class/StyleProcessor.js"; +import SvgSpriteGenerator from "./class/SvgSpriteGenerator.js"; +import PackageCreator from './class/PackageCreator.js'; +import DirectoryCreator from './class/DirectoryCreator.js'; +import VersionWriter from './class/VersionWriter.js'; +import FileCopier from './class/FileCopier.js'; +import TypeScriptCompiler from './class/TypeScriptCompiler.js'; + +// Import necessary configurations import { CONFIG } from './config/config.js'; import svgspriteConfig from "./config/svgsprite.config.js"; import packageConfig from "./config/package.config.js" @@ -40,14 +42,17 @@ import packageConfig from "./config/package.config.js" // ============================================================================ // Initialize instances of necessary classes +const directories = Object.values(CONFIG.path); +const dirCreator = new DirectoryCreator(); const svgPackager = new SvgPackager(); const fontGenerator = new FontGenerator(); const spriteGenerator = new SvgSpriteGenerator(svgspriteConfig); const styleProcessor = new StyleProcessor(); -const dirCreator = new DirectoryCreator(); -const directories = Object.values(CONFIG.path); const versionWriter = new VersionWriter(); const packageCreator = new PackageCreator(packageConfig); +const fileCopier = new FileCopier(); +// const tsCompiler = new TypeScriptCompiler(); + // ============================================================================ // Functions @@ -62,8 +67,6 @@ async function main() { try { - - // Dirs // -------------------------------------------------------------------- console.log('Starting Directory creation...'); @@ -77,7 +80,7 @@ async function main() { await svgPackager.processSvgFiles( CONFIG.path.svg_input, CONFIG.path.svg_output, - CONFIG.path.ts_output, + CONFIG.path.ts_output_icons, CONFIG.path.json_output, ); console.log('SVG processing completed.'); @@ -108,19 +111,40 @@ async function main() { console.log('Processing SASS...'); // Process with expanded style await styleProcessor.processStyles( - path.join(CONFIG.path.style_input, 'index.scss'), - path.join(CONFIG.path.style_output, 'icon.gl.css'), + path.join(CONFIG.path.scss_input, 'index.scss'), + path.join(CONFIG.path.css_output, 'icon.gl.css'), 'expanded' ); // Process with compressed style await styleProcessor.processStyles( - path.join(CONFIG.path.style_input, 'index.scss'), - path.join(CONFIG.path.style_output, 'icon.gl.min.css'), + path.join(CONFIG.path.scss_input, 'index.scss'), + path.join(CONFIG.path.css_output, 'icon.gl.min.css'), 'compressed' ); console.log('SASS Processing completed.'); + // Copy + // -------------------------------------------------------------------- + try { + await fileCopier.copyFiles( + CONFIG.path.ts_input, + CONFIG.path.ts_output, + ); + console.log('Files copied successfully.'); + } catch (error) { + console.error('Error while copying files:', error); + } + try { + await fileCopier.copyFiles( + CONFIG.path.scss_input, + CONFIG.path.scss_output, + ); + console.log('Files copied successfully.'); + } catch (error) { + console.error('Error while copying files:', error); + } + // Version // -------------------------------------------------------------------- await versionWriter.writeVersionToFile('VERSION', packageConfig.version); @@ -134,6 +158,29 @@ async function main() { // -------------------------------------------------------------------- + + try { + // Other code... + + // TypeScript compilation + const tsCompiler = new TypeScriptCompiler(); + const tsFiles = [ + './src/ts/index.ts', + // './src/ts/file1.ts', + // './src/ts/file2.ts' + ]; // Replace with actual file paths + const outputDir = './dist/js'; + + console.log('Starting TypeScript compilation...'); + tsCompiler.compile(tsFiles, outputDir); + console.log('TypeScript compilation completed.'); + + // Other code... + } catch (error) { + console.error('An error occurred:', error); + } + + } catch (error) { console.error('An error occurred:', error); } @@ -141,5 +188,9 @@ async function main() { } +// ============================================================================ +// Main +// ============================================================================ + // Execute the main function main(); diff --git a/script/ts/interfaces/File.ts b/script/ts/interfaces/File.ts new file mode 100644 index 00000000..4f47dc86 --- /dev/null +++ b/script/ts/interfaces/File.ts @@ -0,0 +1,4 @@ +interface File { + filepath: string; + source: string; +} \ No newline at end of file diff --git a/script/ts/interfaces/PackageJson.ts b/script/ts/interfaces/PackageJson.ts new file mode 100644 index 00000000..15078deb --- /dev/null +++ b/script/ts/interfaces/PackageJson.ts @@ -0,0 +1,70 @@ +// ============================================================================ +// Interfaces +// ============================================================================ + +interface PackageJson { + name: string; + version: string; + description?: string; + main?: string; + scripts?: Record; + dependencies?: Record; + devDependencies?: Record; + repository?: { + type: string; + url: string; + }; + keywords?: string[]; + author?: string | { + name: string; + email?: string; + url?: string; + }; + license?: string; + bugs?: { + url?: string; + email?: string; + }; + homepage?: string; + private?: boolean; + peerDependencies?: Record; + engines?: { + node?: string; + npm?: string; + }; + bin?: Record; + types?: string; + contributors?: Array; + funding?: string | { + type: string; + url: string; + }; + files?: string[]; + browserslist?: string[] | Record; + publishConfig?: Record; + config?: Record; + typings?: string; + exports?: Record; + module?: string; + sideEffects?: boolean | string[]; + + optionalDependencies?: Record; + bundledDependencies?: string[]; // or bundleDependencies + peerDependenciesMeta?: Record; + resolutions?: Record; + workspaces?: string[] | { + packages: string[]; + }; + eslintConfig?: Record; + babel?: Record; + prettier?: Record; + husky?: Record; + jest?: Record; + enginesStrict?: boolean; + os?: string[]; + cpu?: string[]; +} diff --git a/script/ts/interfaces/SVG.ts b/script/ts/interfaces/SVG.ts new file mode 100644 index 00000000..4a18efa8 --- /dev/null +++ b/script/ts/interfaces/SVG.ts @@ -0,0 +1,12 @@ + + + +// Assuming the structure of your SVG object, you might need to adjust these types +interface Svg { + metadata: { + name: string; + // ... other metadata properties + }; + source: string; + // ... other Svg properties + } \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 5472e2d1..fc9920b3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -129,7 +129,7 @@ "src/index.ts.xxx", "src/index.ts.xxx", // "script/release.ts", - "./script/**/*.ts", "tmp/SvgOptimizer.ts", + "./script/**/*.ts", "tmp/SvgOptimizer.ts", "tmp/ModulePackager.ts", ],