16 |
17 | {
18 | medium.map((item: any, index: number) => (
19 |
20 |
26 | )
27 | }
28 |
29 | export default List
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 David Fernando
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/src/hooks/useIsVisible.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 |
3 | function useIsVisible(container: any, element: any){
4 | const [ isVisible, setIsVisible ] = useState(false)
5 | const [ elementPosition, setElementPosition ] = useState(0)
6 | const [ containerWidth, setContainerWidth ] = useState(0)
7 |
8 | const elementDefaultValue = { x: 0 }
9 | const containerDefaultValue = { width: 0 }
10 | const timeInMiliseconds = 20
11 | const excess = 110
12 |
13 | setTimeout(()=>{
14 | const { x } = element.current?.getBoundingClientRect?.() || elementDefaultValue
15 | setElementPosition(x)
16 | const { width } = container.current?.getBoundingClientRect?.() || containerDefaultValue
17 | setContainerWidth(width)
18 | }, timeInMiliseconds)
19 |
20 | useEffect(()=>{
21 | determineIfElementIsVisible()
22 | // eslint-disable-next-line
23 | }, [elementPosition])
24 |
25 | function determineIfElementIsVisible(){
26 | const isElementVisible = (elementPosition + excess < containerWidth)? true : false
27 |
28 | setIsVisible(isElementVisible)
29 | }
30 |
31 | return isVisible
32 | }
33 |
34 | export default useIsVisible
--------------------------------------------------------------------------------
/src/stories/List.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import List from "../components/List";
3 |
4 | // eslint-disable-next-line import/no-anonymous-default-export
5 | export default {
6 | component: List
7 | }
8 |
9 | const options = {
10 | borderRadius: false,
11 | showTags: true,
12 | showDate: true,
13 | openInNewTab: true,
14 | }
15 |
16 | function Container({ children }){
17 | const container = {
18 | width: '100%',
19 | display: 'flex',
20 | justifyContent: 'center'
21 | }
22 |
23 | const content = {
24 | width: '80%',
25 | height: 'max-content',
26 | }
27 |
28 | return (
29 |
30 |
36 | )
37 | }
38 |
39 | export const Basic = (args) =>
31 | {
32 | children
33 | }
34 |
35 |
25 |
31 | )
32 | }
33 |
34 | const options = {
35 | borderRadius: true,
36 | showTags: false,
37 | showDate: false,
38 | openInNewTab: true,
39 | }
40 |
41 | export const Basic = (args) =>
26 | {
27 | children
28 | }
29 |
30 |
19 |
20 | 
25 |
26 |
27 | { userdata.title }
28 |
47 | )
48 | }
49 |
50 | export default Card
--------------------------------------------------------------------------------
/src/mocks/server.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { renderToString } from 'react-dom/server'
3 | import { rest } from 'msw'
4 | import { setupServer } from 'msw/node'
5 | import html from '../utils/htmlStructure'
6 |
7 | import { Carousel, List, Label, fetchMedium } from '../../dist/index.esm.js'
8 |
9 | const handlers = [
10 | rest.get('http://localhost:3333/carousel', async(request, response, context)=>{
11 |
12 | const data = await fetchMedium('davidfernandodamata21')
13 |
14 | const component = renderToString(
15 | 29 | { userdata.description } 30 |
31 | { 32 | (options.showDate) && ( 33 |34 | { userdata.date } 35 |
36 | ) 37 | } 38 | { 39 | (options.showTags) && ( 40 |41 | { tags } 42 |
43 | ) 44 | } 45 | 46 |
21 |
22 |
27 |
28 |
29 | { userdata.title }
30 |
51 | )
52 | }
53 |
54 | export default RectangularCard
--------------------------------------------------------------------------------
/src/components/Carousel.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 | import classnames from 'classnames';
3 | import { GrFormPrevious, GrFormNext } from 'react-icons/gr'
4 | import { Props } from '../interface/interface'
5 | import Card from './Card'
6 | import useGetMedium from '../hooks/useGetMedium';
7 | import useCarousel from '../hooks/useCarousel';
8 | import useIsVisible from '../hooks/useIsVisible';
9 | import useLastCard from '../hooks/useLastCard';
10 |
11 | import styles from '../style/Carousel.module.css'
12 |
13 | function Carousel({ username = '', dataMedium, options = {} }: Props){
14 | const ssr = options?.ssr || false
15 | const data = useGetMedium(username, ssr)
16 | const medium = (ssr)? dataMedium?.dataMedium : data
17 | const { moveForward, moveBack, position } = useCarousel()
18 | const openInNewTab = (options.hasOwnProperty('openInNewTab'))? options.openInNewTab : true
19 | const nameTarget = (openInNewTab)? '_blank' : '_self'
20 | const cardContainer:any = useRef()
21 | const carouselContainer:any = useRef()
22 | const cardIsVisible:boolean = useIsVisible(carouselContainer, cardContainer)
23 | const { returnLastCard } = useLastCard()
24 |
25 |
26 | return (
27 | 31 | { userdata.description } 32 |
33 | 34 | { 35 | (showDate) && ( 36 |37 | { userdata.date } 38 |
39 | ) 40 | } 41 | { 42 | (showTags) && ( 43 |44 | { tags } 45 |
46 | ) 47 | } 48 | 49 | 50 |
28 | {
29 | (position > 0) && (
30 |
33 | )
34 | }
35 |
36 | {
37 | medium.map((item: any, index: number) => (
38 |
39 |
52 | )
53 | }
54 |
55 | export default Carousel
--------------------------------------------------------------------------------
/src/style/RectangularCard.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | height: max-content;
4 | min-height: 19rem;
5 | display: flex;
6 | background: #fff;
7 | border: 1px solid rgba(0,0,0,.2);
8 | font-size: 10px;
9 | font-family: 'Roboto', sans-serif;
10 | margin: 0;
11 | gap: 1rem;
12 | }
13 |
14 | .borderRadiusContainer {
15 | border-radius: 10px;
16 | }
17 |
18 | .thumbnail {
19 | width: 19rem;
20 | height: 100%;
21 | min-height: 5rem;
22 | min-width: 5rem;
23 | aspect-ratio: 1/1;
24 | }
25 |
26 | .borderRadiusThumbnail {
27 | border-top-left-radius: 10px;
28 | border-bottom-left-radius: 10px
29 | }
30 |
31 | .content {
32 | padding: 10px;
33 | display: flex;
34 | flex-direction: column;
35 | flex-wrap: nowrap;
36 | gap: 0.8rem;
37 | height: max-content;
38 | max-height: 40rem;
39 | }
40 |
41 | .details {
42 | display: flex;
43 | flex-direction: column;
44 | flex-wrap: wrap;
45 | gap: 0rem;
46 | }
47 |
48 | .title, .description, .date, .tags {
49 | font-size: 1.6rem;
50 | color: #53565b
51 | }
52 |
53 | .title {
54 | font-size: 2.6rem;
55 | font-weight: 700;
56 | text-overflow: ellipsis;
57 | -webkit-box-orient: vertical;
58 | -webkit-line-clamp: 2;
59 | display: -webkit-box;
60 | }
61 |
62 | .description {
63 | font-size: 1.6rem;
64 | text-align: initial;
65 | max-height: 44%;
66 | text-overflow: ellipsis;
67 | -webkit-box-orient: vertical;
68 | -webkit-line-clamp: 2;
69 | display: -webkit-box;
70 | overflow: hidden;
71 | }
72 |
73 | .date, .tags {
74 | font-size: 1.2rem;
75 | }
76 |
77 | .tags {
78 | word-spacing: 0.5rem;
79 | line-height: 1.3rem;
80 | }
81 |
82 | @media (max-width: 890px) {
83 | .title {
84 | font-size: 1.6rem;
85 | }
86 | .description {
87 | font-size: 1.5rem;
88 | }
89 | .thumbnail {
90 | width: 18rem;
91 | height: 100%;
92 | }
93 | .content {
94 | gap: 0.5rem;
95 | height: 14rem;
96 | }
97 | }
98 |
99 | @media (max-width: 526px) {
100 | .description {
101 | overflow: visible;
102 | }
103 | .thumbnail {
104 | width: 100%;
105 | height: 24rem;
106 | }
107 | .container {
108 | flex-direction: column;
109 | height: 100%;
110 | min-height: 43rem;
111 | }
112 | .content {
113 | gap: 0rem;
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | #
7 | # ******** NOTE ********
8 | # We have attempted to detect the languages in your repository. Please check
9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 |
14 | on:
15 | push:
16 | branches: [ "main" ]
17 | pull_request:
18 | # The branches below must be a subset of the branches above
19 | branches: [ "main" ]
20 | schedule:
21 | - cron: '43 16 * * 4'
22 |
23 | jobs:
24 | analyze:
25 | name: Analyze
26 | runs-on: ubuntu-latest
27 | permissions:
28 | actions: read
29 | contents: read
30 | security-events: write
31 |
32 | strategy:
33 | fail-fast: false
34 | matrix:
35 | language: [ 'javascript' ]
36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
37 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
38 |
39 | steps:
40 | - name: Checkout repository
41 | uses: actions/checkout@v3
42 |
43 | # Initializes the CodeQL tools for scanning.
44 | - name: Initialize CodeQL
45 | uses: github/codeql-action/init@v2
46 | with:
47 | languages: ${{ matrix.language }}
48 | # If you wish to specify custom queries, you can do so here or in a config file.
49 | # By default, queries listed here will override any specified in a config file.
50 | # Prefix the list here with "+" to use these queries and those in the config file.
51 |
52 | # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
53 | # queries: security-extended,security-and-quality
54 |
55 |
56 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
57 | # If this step fails, then you should remove it and run the build manually (see below)
58 | - name: Autobuild
59 | uses: github/codeql-action/autobuild@v2
60 |
61 | # ℹ️ Command-line programs to run using the OS shell.
62 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
63 |
64 | # If the Autobuild fails above, remove it and uncomment the following three lines.
65 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
66 |
67 | # - run: |
68 | # echo "Run, Build Application using script"
69 | # ./location_of_script_within_repo/buildscript.sh
70 |
71 | - name: Perform CodeQL Analysis
72 | uses: github/codeql-action/analyze@v2
73 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mediumpostscard",
3 | "version": "2.0.5",
4 | "description": "React Isomorphic library that show your Medium articles.",
5 | "main": "dist/index.cjs.js",
6 | "module": "dist/index.esm.js",
7 | "source": "src/index.tsx",
8 | "dependencies": {
9 | "@testing-library/jest-dom": "^5.16.4",
10 | "@testing-library/react": "^13.0.0",
11 | "@testing-library/user-event": "^13.2.1",
12 | "@types/jest": "^28.1.2",
13 | "@types/node": "^18.0.0",
14 | "@types/react": "^18.0.14",
15 | "@types/react-dom": "^18.0.5",
16 | "@xmldom/xmldom": "0.8.6",
17 | "axios": "^0.27.2",
18 | "classnames": "^2.3.1",
19 | "glob-parent": "5.1.2",
20 | "json5": "2.2.3",
21 | "loader-utils": "3.2.1",
22 | "nth-check": "2.0.1",
23 | "react": "18.1.0",
24 | "react-dom": "18.1.0",
25 | "react-icons": "^4.4.0",
26 | "react-scripts": "^5.0.1",
27 | "rollup-plugin-json": "^4.0.0",
28 | "rollup-plugin-node-resolve": "^5.2.0",
29 | "semver": "7.5.2",
30 | "trim": "0.0.3",
31 | "trim-newlines": "3.0.1",
32 | "typescript": "^4.7.4",
33 | "web-vitals": "^2.1.0"
34 | },
35 | "scripts": {
36 | "start": "react-scripts start",
37 | "build": "rollup -c",
38 | "build-watch": "rollup -c -w",
39 | "storybook": "storybook dev -p 6006",
40 | "build-storybook": "storybook build",
41 | "test": "jest ./src/tests --detectOpenHandles",
42 | "build-and-test": "yarn build && yarn test"
43 | },
44 | "eslintConfig": {
45 | "extends": [
46 | "react-app",
47 | "react-app/jest"
48 | ]
49 | },
50 | "browserslist": {
51 | "production": [
52 | ">0.2%",
53 | "not dead",
54 | "not op_mini all"
55 | ],
56 | "development": [
57 | "last 1 chrome version",
58 | "last 1 firefox version",
59 | "last 1 safari version"
60 | ]
61 | },
62 | "devDependencies": {
63 | "@babel/cli": "^7.17.10",
64 | "@babel/core": "^7.18.2",
65 | "@babel/preset-env": "^7.18.2",
66 | "@babel/preset-react": "^7.17.12",
67 | "@babel/preset-typescript": "^7.18.6",
68 | "@rollup/plugin-babel": "^5.3.1",
69 | "@storybook/addon-actions": "^7.0.26",
70 | "@storybook/addon-controls": "^7.0.26",
71 | "@storybook/addon-essentials": "^7.0.26",
72 | "@storybook/addon-interactions": "^7.0.26",
73 | "@storybook/addon-links": "^7.0.26",
74 | "@storybook/preset-create-react-app": "^7.0.26",
75 | "@storybook/react": "^7.0.26",
76 | "@storybook/react-webpack5": "^7.0.26",
77 | "@storybook/testing-library": "^0.2.0",
78 | "@types/webgl2": "^0.0.6",
79 | "babel-jest": "^28.1.2",
80 | "babel-loader": "^8.2.5",
81 | "identity-obj-proxy": "^3.0.0",
82 | "jest": "^28.1.2",
83 | "msw": "^0.43.1",
84 | "rollup": "^2.75.6",
85 | "rollup-plugin-delete": "^2.0.0",
86 | "rollup-plugin-peer-deps-external": "^2.2.4",
87 | "rollup-plugin-styles": "^4.0.0",
88 | "rollup-plugin-typescript2": "^0.32.1",
89 | "storybook": "^7.0.26"
90 | },
91 | "peerDependencies": {
92 | "react": "^18.1.0",
93 | "react-dom": "^18.1.0"
94 | },
95 | "repository": {
96 | "type": "git",
97 | "url": "https://github.com/david-fernando/medium-posts-card.git",
98 | "directory": "packages/name"
99 | },
100 | "bugs": {
101 | "url": "https://github.com/david-fernando/medium-posts-card/issues"
102 | },
103 | "homepage": "https://github.com/david-fernando/medium-posts-card",
104 | "keywords": [
105 | "Medium Posts Card",
106 | "MediumPostsCard",
107 | "Medium Post Card",
108 | "Medium React Card",
109 | "React",
110 | "React JS",
111 | "React library",
112 | "ReactLibrary",
113 | "BibliotecaReact",
114 | "JavaScript",
115 | "JavaScript library",
116 | "Biblioteca JavaScript"
117 | ],
118 | "author": "davidfernando",
119 | "license": "MIT"
120 | }
121 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
Medium Posts Card
7 | 8 |
9 |
15 |
16 | ---
17 |
18 | ## 📝 Table of Contents
19 |
20 | - [About](#about)
21 | - [Install](#install)
22 | - [Components](#components)
23 | - [Server Side Rendering](#server_side_rendering)
24 | - [How to contribute](#how_to_contribute)
25 | - [More](#more)
26 | - [Author](#authors)
27 |
28 | ## About
29 |
30 | Are you looking for a React library to display your medium posts that render both the client side and on the server side? So you are in the right place! **Medium Posts Card** get your medium articles, and displays them on your website through an easy to use component.
31 | Just download and use, as simple as that.
32 |
33 | ## Install
34 |
35 | Install this library with one of the commands below
36 |
37 | ```bash
38 | yarn add mediumpostscard
39 |
40 | //or
41 |
42 | npm install mediumpostscard
43 | ```
44 |
45 | ## Components
46 |
47 | ### Carousel
48 |
49 | - React Isomorphic library that show your Medium articles.
10 |
11 |
Describe
50 | Shows a Carousel with your Medium articles 51 | 52 | -Screenshot
53 |
54 |
55 | - Basic usage (with example)
56 | 57 | ```javascript 58 | import { Carousel } from 'mediumpostscard' 59 | 60 | function Example(){ 61 | return ( 62 |Valid Props
70 | 71 | | Prop name | Description | Type | Default | 72 | | ---------- | :-----------------------------------------------: | -----------: | ------------:| 73 | | usernane | Sets your Medium username | _String_ | _underfined_ 74 | | dataMedium | Set data Medium (_only_ to Server Side Rendering) | _Object_ | _underfined_ 75 | | options | Object with options | _Object_ | _Object_| 76 | 77 | -Valid Options
78 | 79 | | Option | Description | Type | Default | 80 | | -------------| :------------------------------------------------: | -----------: | ------------:| 81 | | borderRadius | Set if the card will have rounded edges | _Boolean_ | true 82 | | openInNewTab | Set if the link of article will openned in new tab | _Boolean_ | true 83 | | showTags | Define if the card will show article tags | _Boolean_ | false 84 | | showDate | Set if the card will show the date of the article | _Boolean_ | false 85 | | ssr | Set if the component should rendered on server | _Boolean_ | false| 86 | 87 | ### List 88 | 89 | -Describe
90 | Shows a list with your Medium articles 91 | 92 | -Screenshot
93 |
94 |
95 | - Basic usage (with example)
96 | 97 | ```javascript 98 | import { List } from 'mediumpostscard' 99 | 100 | function Example(){ 101 | return ( 102 |Valid Props
110 | 111 | | Prop name | Description | Type | Default | 112 | | ---------- | :-----------------------------------------------: | -----------: | ------------:| 113 | | usernane | Sets your Medium username | _String_ | _underfined_ 114 | | dataMedium | Set data Medium (_only_ to Server Side Rendering) | _Object_ | _underfined_ 115 | | options | Object with options | _Object_ | _Object_| 116 | 117 | -Valid Options
118 | 119 | | Option | Description | Type | Default | 120 | | -------------| :------------------------------------------------: | -----------: | ------------:| 121 | | openInNewTab | Set if the link of article will openned in new tab | _Boolean_ | true 122 | | showTags | Define if the card will show article tags | _Boolean_ | true 123 | | showDate | Set if the card will show the date of the article | _Boolean_ | true 124 | | borderRadius | Set if the card will have rounded edges | _Boolean_ | false 125 | | ssr | Set if the component should rendered on server | _Boolean_ | false| 126 | 127 | 128 | ### Label 129 | 130 | -Describe
131 | Wrapper component that add label on other components 132 | 133 | -Screenshot
134 |
135 |
136 | - Example with carousel
137 | 138 | ```javascript 139 | import { Carousel, Label } from 'mediumpostscard' 140 | 141 | function Example(){ 142 | return ( 143 | 146 | ) 147 | } 148 | 149 | export default Example 150 | ``` 151 | 152 | -Example with List
153 | 154 | ```javascript 155 | import { List, Label } from 'mediumpostscard' 156 | 157 | function Example(){ 158 | return ( 159 | 162 | ) 163 | } 164 | 165 | export default Example 166 | ``` 167 | -Valid Props
168 | 169 | | Prop name | Description | Type | Default | 170 | | ---------- |:----------------------------------:| ----------: | ----------------:| 171 | | text | Set text on label | _String_ | 'Medium Articles' 172 | | children | Set component to be labeled | JSX.Element | No default 173 | 174 | ## Server Side Rendering 175 | 176 | -Usage
177 | To make the component render the server do the prefetching: 178 | ```javascript 179 | const dataMedium = fetchMedium('yourmediumusername') 180 | ``` 181 | Next define _ssr_ as true, according to the example 182 | ```javascript 183 |
196 |
197 | Create Next App
198 |
199 |
200 |
201 |
202 |
205 | )
206 | }
207 |
208 | export async function getStaticProps() {
209 | const dataMedium = await fetchMedium('alex.streza')
210 | return {
211 | props: {
212 | dataMedium
213 | }
214 | }
215 | }
216 |
217 | ```
218 |
219 |
220 | ## How to contribute
221 |
222 | Fork this repository, make clone for your machine.
223 |
224 | Install the dependencies with the command below:
225 |
226 | ```bash
227 | yarn install
228 | ```
229 |
230 | To view on storybook
231 |
232 | ```bash
233 | yarn storybook
234 | ```
235 |
236 | To build
237 |
238 | ```bash
239 | yarn build
240 | ```
241 | To run the tests.
242 |
243 | ```bash
244 | yarn test
245 | ```
246 |
247 | ## More
248 |
249 | Didn't you like any of the components? No problem! You can use Medium Posts API to build your own react component.
250 | Moreover you too can contribute with code. Feel free to add new features to our library. We are open-source.
251 |
252 | ## ✍️
253 |
254 | - [@david-fernando](https://github.com/david-fernando) - Idea & Initial work
--------------------------------------------------------------------------------
/dist/index.esm.js:
--------------------------------------------------------------------------------
1 | import { jsxs, jsx } from 'react/jsx-runtime';
2 | import { useState, useEffect, useRef } from 'react';
3 | import classnames from 'classnames';
4 | import { GrFormPrevious, GrFormNext } from 'react-icons/gr';
5 |
6 | /******************************************************************************
7 | Copyright (c) Microsoft Corporation.
8 |
9 | Permission to use, copy, modify, and/or distribute this software for any
10 | purpose with or without fee is hereby granted.
11 |
12 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
13 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
14 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
15 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
16 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
17 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
18 | PERFORMANCE OF THIS SOFTWARE.
19 | ***************************************************************************** */
20 |
21 | var __assign = function() {
22 | __assign = Object.assign || function __assign(t) {
23 | for (var s, i = 1, n = arguments.length; i < n; i++) {
24 | s = arguments[i];
25 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
26 | }
27 | return t;
28 | };
29 | return __assign.apply(this, arguments);
30 | };
31 |
32 | function __awaiter(thisArg, _arguments, P, generator) {
33 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
34 | return new (P || (P = Promise))(function (resolve, reject) {
35 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
36 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
37 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
38 | step((generator = generator.apply(thisArg, _arguments || [])).next());
39 | });
40 | }
41 |
42 | function __generator(thisArg, body) {
43 | var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
44 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
45 | function verb(n) { return function (v) { return step([n, v]); }; }
46 | function step(op) {
47 | if (f) throw new TypeError("Generator is already executing.");
48 | while (_) try {
49 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
50 | if (y = 0, t) op = [op[0] & 2, t.value];
51 | switch (op[0]) {
52 | case 0: case 1: t = op; break;
53 | case 4: _.label++; return { value: op[1], done: false };
54 | case 5: _.label++; y = op[1]; op = [0]; continue;
55 | case 7: op = _.ops.pop(); _.trys.pop(); continue;
56 | default:
57 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
58 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
59 | if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
60 | if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
61 | if (t[2]) _.ops.pop();
62 | _.trys.pop(); continue;
63 | }
64 | op = body.call(thisArg, _);
65 | } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
66 | if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
67 | }
68 | }
69 |
70 | function useArray() {
71 | function array(array) {
72 | if (array === void 0) { array = []; }
73 | var isEmpty = (array.length === 0) ? true : false;
74 | return {
75 | isEmpty: isEmpty
76 | };
77 | }
78 | return {
79 | array: array
80 | };
81 | }
82 |
83 | function useBlankSpace(tagArray) {
84 | var tags = tagArray.map(function (item, index) { return item.concat(' '); });
85 | return {
86 | tags: tags
87 | };
88 | }
89 |
90 | var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n