Releases: gorlandor/omdb-search
omdb-search v0.4.0
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.4.0
- Remove year's reflectToAttribute prop
year: { type: Number, value: '', - notify: true, - reflectToAttribute: true + notify: true } - Add results amount to omdb-search.html
<style> p.result__amount { @apply --omdb-search-result__amount-theme; } </style> <section class="section--result__amount"> <template is="dom-if" if="{{response.totalResults}}"> <p class="result__amount">Results found: {{response.totalResults}}</p> </template> <template is="dom-if" if="{{!response.totalResults}}"> <p class="result__amount">Results found: 0</p> </template> </section>
- Update results amount selector to theme.html
<style is="custom-style"> omdb-search{ --omdb-search-result__amount-theme:{}; } </style>
Demo it
https://giovanni-orlando.com/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower.
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on webcomponents.org
License
Copyright 2017: Giovanni Orlado Rivera
Website: https://giovanni-orlando.com/
omdb-search v0.3.1
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.3.1
- Remove unnecessary EOL on _computeUrl return statement
- Add github version badge
- Update bower version badge
- Add Published on webcomponents.org badge
Demo it
https://giovanni-orlando.com/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower.
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on webcomponents.org
License
Copyright 2017: Giovanni Orlado Rivera
Website: https://giovanni-orlando.com/
omdb-search v0.3.0
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.3.0
- Update bower dependencies
- Update box-sizing to border-box
- Update element styles to use flex-box
- Move url and computeUrl to the Private API
- Add baseUrl property
- Add reflectToAttribute prop to q, year, type, page, and apiVersion
- Add on-error event listener; should an error occurs when loading an image, it will set the default img instead
- Set the li tag id property to the imdbID value
- Set the anchor tag href property to the hash imdbID value
- Remove bootstrap dependency from demo
- Update demo styles
- Add github license badge
- Add bower version badge
Demo it
https://giovanni-orlando.com/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower.
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on customelements.io
License
Copyright 2017: Giovanni Orlado Rivera
Website: https://giovanni-orlando.com/
omdb-search v0.2.4
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.2.4
- Removed 'Lato' font from element definition, changed it Arial, Helvetica
- Changed the li element display property to inline-block, to safely remove overflow-y prop
Demo it
https://giovanni0918.github.io/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents-lite.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on customelements.io
License
Copyright 2016: Giovanni Orlado Rivera
Website: http://giovanni-orlando.com
omdb-search v0.2.3
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.2.3
- Add regex to trim the title's leading and trailing whitespaces, in computeUrl
Demo it
https://giovanni0918.github.io/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/CustomElements.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on customelements.io
License
Copyright 2016: Giovanni Orlado Rivera
Website: http://giovanni-orlando.com
omdb-search v0.2.2
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.2.2
- Remove redundant css properties
Demo it
https://giovanni0918.github.io/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/CustomElements.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on customelements.io
License
Copyright 2016: Giovanni Orlado Rivera
Website: http://giovanni-orlando.com
omdb-search v0.2.1
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.2.1
- Add margin to result__list-items
- Add media query for only screen and min-width: 1200px
Demo it
https://giovanni0918.github.io/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/CustomElements.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on customelements.io
License
Copyright 2016: Giovanni Orlado Rivera
Website: http://giovanni-orlando.com
omdb-search v0.2.0
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.2.0
- Rewrite element structure to make it more accessible
- Implement BEM
- Update theme file
- Update dependencies version in bower.json
Demo it
https://giovanni0918.github.io/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/CustomElements.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on customelements.io
License
Copyright 2016: Giovanni Orlado Rivera
Website: http://giovanni-orlando.com
omdb-search v0.1.2
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.1.2
- Add images folder to root dir
- Update omdb-search element default theme
- Remove bower_components dir for version control
Demo it
https://giovanni0918.github.io/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/CustomElements.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on customelements.io
License
Copyright 2016: Giovanni Orlado Rivera
Website: http://giovanni-orlando.com
omdb-search v0.1.1
omdb-search
A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.
Change Log
Version: 0.1.1
- Generate placeholder img
- Update _computeImgSrc to use omdb-search.png as fallback
Demo it
https://giovanni0918.github.io/omdb-search/
Getting Started
Make a project directory for your demo and change directories into it:
$ mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
$ touch index.html
Install or Download
Install the component using bower
$ bower install omdb-search --save
Or download the .zip file
Usage
In that index.html add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMDb Search demo</title>
<!-- Load the WebComponents polyfill: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/CustomElements.js"></script>
<!-- Import the omdb-search web component: -->
<link rel="import" href="bower_components/omdb-search/omdb-search.html">
<!-- Optionally, import the included omdb-search-theme stylesheet: -->
<link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>
<omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>Available on customelements.io
License
Copyright 2016: Giovanni Orlado Rivera
Website: http://giovanni-orlando.com