[feat] create base focus plugin

.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# IDE
+.idea

.npmignore

@@ -0,0 +1,2 @@
+test/
+.idea

README.md

@@ -0,0 +1,124 @@
+<p align="center">
+    <h1 align="center">
+        <img width="40" src="https://raw.githubusercontent.com/movigo/core/master/resources/icon.png">
+        Movigo Focus Plugin
+    </h1>
+    <p align="center">Movigo plugin to create focus animations.</p>
+</p>
+
+<p align="center">
+    <a href="https://github.com/movigo/focus/blob/master/LICENSE" target="_blank">
+        <img src="https://img.shields.io/github/license/movigo/focus.svg?style=flat-square">
+    </a>
+    <a href="https://david-dm.org/movigo/focus" target="_blank">
+        <img src="https://img.shields.io/david/movigo/focus.svg?style=flat-square">
+    </a>
+    <a href="https://david-dm.org/movigo/focus?type=dev" target="_blank">
+        <img src="https://img.shields.io/david/dev/movigo/focus.svg?style=flat-square">
+    </a>
+</p>
+
+________________________________
+
+## :paperclip: Table of Contents
+- :hammer: [Install](#hammer-install)
+- :video_game: [Usage](#video_game-usage)
+- :chart_with_upwards_trend: [Development](#chart_with_upwards_trend-development)
+  - :scroll: [Rules](#scroll-rules)
+    - [Commits](#commits)
+    - [Branches](#branches)
+- :page_facing_up: [License](#page_facing_up-license)
+- :telephone_receiver: [Contacts](#telephone_receiver-contacts)
+  - :boy: [Developers](#boy-developers)
+
+## :hammer: Install
+
+### npm
+
+You can install movigo focus plugin with npm:
+
+```bash
+npm install @movigo/focus --save
+```
+
+### CDN
+
+You can also load it using a \<script> using the unpkg CDN:
+
+```html
+<script src="https://unpkg.com/@movigo/core"></script> <!-- Required dependency -->
+<script src="https://unpkg.com/@movigo/focus"></script>
+```
+
+## :video_game: Usage
+
+Focus plugin create a `focus` function in the Movigo function chaining.
+You must select the elements with `target` function and call `focus` function with the optional `options` parameter.
+
+```js
+const target = movigo.target('img')
+
+target.focus({
+    element: 1, // Index of element to focus (default: -1 -> no focused elements)
+    scale: [1.5, 1.5], // Dimensions to scale focused element (default: [2, 2]) 
+    backdropBrightness: 80 // Backdrop element brightness in % (default: 60)
+}).animate()
+```
+
+## :chart_with_upwards_trend: Development
+
+### :scroll: Rules
+
+#### Commits
+
+* Use this commit message format (angular style):  
+
+    `[<type>] <subject>`
+    `<BLANK LINE>`
+    `<body>`
+
+    where `type` must be one of the following:
+
+    - feat: A new feature
+    - fix: A bug fix
+    - docs: Documentation only changes
+    - style: Changes that do not affect the meaning of the code
+    - refactor: A code change that neither fixes a bug nor adds a feature
+    - test: Adding missing or correcting existing tests
+    - chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
+    - update: Update of the library version or of the dependencies
+
+and `body` must be should include the motivation for the change and contrast this with previous behavior (do not add body if the commit is trivial). 
+
+* Use the imperative, present tense: "change" not "changed" nor "changes".
+* Don't capitalize first letter.
+* No dot (.) at the end.
+
+#### Branches
+
+* There is a master branch, used only for release.
+* There is a dev branch, used to merge all sub dev branch.
+* Avoid long descriptive names for long-lived branches.
+* No CamelCase.
+* Use grouping tokens (words) at the beginning of your branch names (in a similar way to the `type` of commit).
+* Define and use short lead tokens to differentiate branches in a way that is meaningful to your workflow.
+* Use slashes to separate parts of your branch names.
+* Remove branch after merge if it is not important.
+
+Examples:
+
+    git branch -b docs/README
+    git branch -b test/one-function
+    git branch -b feat/side-bar
+    git branch -b style/header
+
+## :page_facing_up: License
+* See [LICENSE](https://github.com/movigo/focus/blob/master/LICENSE) file.
+
+## :telephone_receiver: Contacts
+### :boy: Developers
+
+#### Cedoor
+* E-mail : [email protected]
+* Github : [@cedoor](https://github.com/cedoor)
+* Website : https://cedoor.dev

index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Movigo Focus Plugin</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="Movigo plugin to create focus animations.">
+    <meta name="author" content="Omar Desogus">
+    <meta name="language" content="en"/>
+    <meta name="rating" content="general"/>
+    <link rel="icon" type="image/png" href="https://raw.githubusercontent.com/movigo/core/master/resources/icon.png">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+    <link rel="stylesheet" href="./layout.css">
+    <script src="https://unpkg.com/@movigo/core"></script>
+    <script src="https://unpkg.com/@movigo/focus"></script>
+    <script src="/dist/movigo-focus.js"></script>
+</head>
+
+<body onclick="play()">
+<!-- GitHub corner icon -->
+<a class="github-corner" href="https://github.com/movigo/focus" target="_blank">
+    <svg width="80" height="80" viewBox="0 0 250 250">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path class="octo-arm" style="transform-origin: 130px 106px;" fill="currentColor"
+              d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2">
+        </path>
+        <path class="octo-body" fill="currentColor"
+              d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z">
+        </path>
+    </svg>
+</a>
+
+<!-- Boxes where the various features can be shown with examples -->
+<div id="animation">
+    <h2>
+        <script>document.write(document.title)</script>
+    </h2>
+
+    <div>
+        <img onclick="play(0)" src="https://cdn.audleytravel.com/-/-/79/1338050-colosseum-rome.jpg">
+        <img onclick="play(1)"
+             src="https://4.bp.blogspot.com/-V9lFhJJZPwI/UQgN0JXUDDI/AAAAAAAAjwQ/ZgSE0j8w-ZQ/s1600/indie-paris-eiffel-tower-jpg-1189976.jpg">
+        <img onclick="play(2)"
+             src="http://athenaposters.ca/wp-content/uploads/2017/05/2400-0764-London-Big-Ben-36x24.jpg">
+        <img onclick="play(3)"
+             src="https://footage.framepool.com/shotimg/qf/874025235-atom-model-atomium-brussels-sfere-form.jpg">
+    </div>
+</div>
+
+<footer>
+    <div>
+        <a href="https://cedoor.dev" target="_blank">
+            &#9775; cedoor.dev
+        </a>
+    </div>
+    <div>
+        Copyright (c)
+        <script>document.write((new Date()).getFullYear())</script>
+        Omar Desogus
+    </div>
+</footer>
+</body>
+
+<script>
+  const images = document.querySelectorAll('img')
+
+  function play (imageIndex) {
+    movigo.target(images).focus({
+      element: imageIndex,
+      scale: [1.5, 1.5]
+    }).animate()
+  }
+</script>
+</html>