Skip to content

Commit

Permalink
update example
Browse files Browse the repository at this point in the history
  • Loading branch information
@dorin-musteata
dorin-musteata committed Dec 15, 2021
1 parent 4a7e82f commit 57cc2b5
Show file tree
Hide file tree
Showing 10 changed files with 258 additions and 295 deletions.
183 changes: 78 additions & 105 deletions src/App.svelte → src/AppMovieDB.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<script>
import API from './core/utils/api.request';
import { Typhon, SIZE } from '@qtagon/typhon-ui';
const MovieAPI = new API(
`https://api.themoviedb.org/3/`,
`5ddafb95e989ca8aa719ebfd59996a89`
);
/**
* Instance of MovieDatabaseAPI requester
*/
const MovieAPI = new API(`https://api.themoviedb.org/3/`, `API-KEY`);
/**
* Components
Expand All @@ -23,6 +22,10 @@
import Message from './core/components/Message.svelte';
import Modal from './core/components/Modal.svelte';
import Scroller from './core/components/Scroller.svelte';
/**
* Local components references Typhon UI Component -> Local Component
*/
const components = {
media: Media,
card: Card,
Expand All @@ -38,144 +41,108 @@
button: Button,
};
/**
* Declare TyphonUI
*/
let dynamic = new Typhon('movies-ui').setColumn('cmenu').setColumn('content');
const resources = {
elements: [],
element: {},
};
import { Typhon } from '@qtagon/typhon-ui';
/**
* Menu
*/
/** Declare TyphonUI */
let dynamic = new Typhon('movies-ui')
.setColumn('content-menu') /** Attach column for menu */
.setColumn('content'); /** Attach column for page content */
/** Menu */
const cmenu = dynamic
.onColumn('cmenu')
.setClassified('flex-auto')
.setRow('crow')
.setContainer('cmenu');
.onColumn('content-menu')
.setClassified('flex-auto') /** CSS classes */
.setRow('content-menu-row') /** Attach row */
.setContainer('content-menu-container'); /** Attach container to row */
dynamic.ixColumn('cmenu').ixRow('crow');
/** Indexing content-menu column and content-menu-row row*/
dynamic.ixColumn('content-menu').ixRow('content-menu-row');
/** Attach menu component to menu contianer */
const menu = cmenu.setMenu();
/** Attach option to menu component, then icon to option, then width and height of icon */
menu.setOption().setIcon('home').setWidth(18).setHeight(18);
menu.setOption().setIcon('calendar').setWidth(18).setHeight(18);
menu.setOption().setIcon('message').setWidth(18).setHeight(18);
menu.setOption().setIcon('user').setWidth(18).setHeight(18);
menu.setOption().setIcon('logout').setWidth(18).setHeight(18);
/**
* Content
*/
/** Page Content */
const content = dynamic
.onColumn('content')
.setScroll(true)
.setStyle('padding: 0.938rem 0.938rem 0.938rem 1.938rem;')
.setRow('search')
.setContainer('search');
.setScroll(true) /** Make column scrollable */
.setStyle(
'padding: 0.938rem 0.938rem 0.938rem 1.938rem;'
) /** Raw CSS style */
.setRow('search') /** Attach row for search bar */
.setContainer('search'); /** Attach container to row */
dynamic
.onColumn('content')
.setRow('data')
.setContainer('data')
.setClassified('display-grid')
.setRow('data') /** Attach row for cards */
.setContainer('data') /** Attach container to row */
.setClassified('display-grid') /** CSS classes */
.setStyle(
`grid-template-columns: repeat(auto-fill, minmax(15.750rem, 1fr)); grid-gap: 1.875rem;`
);
); /** Raw CSS style */
/** Indexing content column and content-menu-row row*/
dynamic.ixColumn('content').ixRow('search').ixRow('data');
content.setSubject('Search').setClassified('h1');
content.setSearch('Search movies ...').setEvent('search', { type: 'query' });
content.setSubject('Search').setClassified('h1'); /** Set container (title) */
content.setSearch('Search movies ...').setEvent('search', {
type: 'query',
}); /** Attach search component with search event */
/** Attach tabs component with options and events */
const tabs = content.setTabs('Movies');
tabs.setOption('Popular').setEvent('search', { type: 'popular' });
tabs.setOption('Now Playing').setEvent('search', { type: 'now_playing' });
tabs.setOption('Upcoming').setEvent('search', { type: 'upcoming' });
tabs.setOption('Top Rated').setEvent('search', { type: 'top_rated' });
/**
* Resource
*/
const containerx = dynamic.onContainer('data');
const setMovieCard = (data, poster = 'https://image.tmdb.org/t/p/w500') => {
const card = containerx
.setCard(data.title, data.overview)
.setClassified('background-white round padding-default single-line');
/** Reference to data container which contains cards */
const container_data = dynamic.onContainer('data');
/** Attach cards by external logic , currently fetching movies from themoviedb API */
const setMovieCard = (data, poster = 'https://image.tmdb.org/t/p/w500') => {
/** Attach card component */
const card = container_data
.setCard(
data.title,
data.overview
) /** Set title and description of card */
.setClassified(
'background-white round padding-default single-line'
); /** CSS classes */
/** Attach image component to card with title */
card
.setImage(`${poster}${data.poster_path}`)
.setTitle(`${data.title} Poster`);
/** Attach button component to card with title, event and icon */
card
.setButton('Read More')
.setEvent('element', data)
.setClassified('transparent bordered')
.setIcon('check');
/**
* Update
*/
.setEvent('element', data) /** Attach event */
.setClassified('transparent bordered') /** CSS classes */
.setIcon('check'); /** Attach icon component */
dynamic = dynamic;
};
const setMovieView = (
data,
poster = 'https://image.tmdb.org/t/p/original'
) => {
const column = dynamic.onColumn('content').clear();
const container = column.setRow('content').setContainer('content');
const card = container
.setCard(data.title, data.overview)
.setClassified('background-white round padding-default');
const media = card.setMedia(
data.tagline,
`${data.status} - ${data.release_date}`
);
media
.setAction('IMDB')
.setUrl(`https://www.imdb.com/title/${data.imdb_id}`);
media.setImage(`${poster}${data.poster_path}`, SIZE.SMALL);
card
.setImage(`${poster}${data.backdrop_path}`, SIZE.EXTRA_LARGE)
.setClassified('wide')
.setTitle(`${data.title} Hero`);
if (data?.genres?.length) {
data.genres.forEach((genre) => {
card.setButton(genre.name).setClassified('transparent bordered');
});
}
/**
* Update
*/
dynamic = dynamic;
};
const item = (id = 718444) => {
MovieAPI.get(`movie/${id}`, { append_to_response: 'credits' }).then(
(data) => {
resources.element = data;
setMovieView(resources.element);
}
);
dynamic = dynamic; /** Rerender UI, just svelte's way ... */
};
/** Fetch Movies from themoviedb API */
const data = (query = '', type = 'popular') => {
const uri = query ? `search/movie` : `movie/${type}`;
MovieAPI.get(`${uri}`, { query }).then(({ results }) => {
containerx.clear('card');
dynamic = dynamic;
container_data.clear('card');
dynamic = dynamic; /** Rerender UI, just svelte's way ... */
results.forEach((movie) => setMovieCard(movie));
});
};
/** Call function on load */
data();
/**
Expand All @@ -187,12 +154,9 @@
if (detail?.parameters?.type && detail?.value) data(detail.value);
};
const onElementEvent = ({ detail }) => {
if (detail?.parameters?.id) item(detail.parameters.id);
};
</script>
<!-- Modals are top priority -->
{#each dynamic.getComponents('modal') as component (component.identifier)}
<svelte:component
this={components[component.type]}
Expand All @@ -201,24 +165,32 @@
/>
{/each}
<!-- Typhon UI Rendering Method -->
<main>
<!-- Loop through each columns -->
{#each dynamic.getColumns() as column (column.identifier)}
<div class={`column ${column.classified}`} style={column.style}>
<!-- Set local scroller -->
<Scroller wrap={column.scroll}>
<!-- Loop through each rows -->
{#each column.getRows() as row (row.identifier)}
<div class={`row ${row.classified}`}>
<!-- Set local scroller -->
<Scroller wrap={row.scroll}>
<!-- Loop through each container -->
{#each row.getContainers() as container (container.identifier)}
<div
class={`container ${container.classified}`}
style={container.style}
>
<!-- Set local scroller -->
<Scroller wrap={container.scroll}>
<!-- Loop through each component, finally -->
{#each container.getComponents() as component (component.identifier)}
<!-- Render component -->
<svelte:component
this={components[component.type]}
on:search={onSearchEvent}
on:element={onElementEvent}
{...component}
/>
{/each}
Expand All @@ -233,6 +205,7 @@
{/each}
</main>
<!-- Just styles -->
<style type="text/scss">
@import './core/components/scss/global.scss';
@import './core/components/scss/fonts.scss';
Expand Down
0 src/AppX.svelte → src/AppRenderComponents.svelte
View file
File renamed without changes.
99 changes: 49 additions & 50 deletions src/examples/button.ts
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,54 @@
import { Typhon, SIZE } from '@qtagon/typhon-ui';

const setup = (container: any) => {

container.setSubject('Button').setClassified('h1');

/**
* Example 1
*/
container
.setSubject('Simple')
.setClassified('h3')
.setStyle('padding: 2rem 0;');

const button_e1 = container.setButton('Title');

/**
* Example 2
*/
container
.setSubject('With icon')
.setClassified('h3')
.setStyle('padding: 2rem 0;');

const button_e2 = container.setButton('Title').setIcon('git');

/**
* Example 3
*/
container
.setSubject('With different styles')
.setClassified('h3')
.setStyle('padding: 2rem 0;');

container.setButton('Title').setClassified('success').setIcon('git');
container.setButton('Title').setClassified('dark').setIcon('git');
container
.setButton('Title')
.setClassified('transparent bordered')
.setIcon('git');

/**
* Example 4
*/
container
.setSubject('With icon only')
.setClassified('h3')
.setStyle('padding: 2rem 0;');

container.setButton().setIcon('search');
container.setButton().setIcon('git');
container.setButton().setIcon('check');
container.setSubject('Button').setClassified('h1');

/**
* Example 1
*/
container
.setSubject('Simple')
.setClassified('h3')
.setStyle('padding: 2rem 0;');

const button_e1 = container.setButton('Title');

/**
* Example 2
*/
container
.setSubject('With icon')
.setClassified('h3')
.setStyle('padding: 2rem 0;');

const button_e2 = container.setButton('Title').setIcon('git');

/**
* Example 3
*/
container
.setSubject('With different styles')
.setClassified('h3')
.setStyle('padding: 2rem 0;');

container.setButton('Title').setClassified('success').setIcon('git');
container.setButton('Title').setClassified('dark').setIcon('git');
container
.setButton('Title')
.setClassified('transparent bordered')
.setIcon('git');

/**
* Example 4
*/
container
.setSubject('With icon only')
.setClassified('h3')
.setStyle('padding: 2rem 0;');

container.setButton().setIcon('search');
container.setButton().setIcon('git');
container.setButton().setIcon('check');
};

export default setup;
export default setup;
Loading

0 comments on commit 57cc2b5

Please sign in to comment.