evodiaaut / vue-focuspoint-component Goto Github PK

View Code? Open in Web Editor NEW

33.0 1.0 3.0 1.07 MB

Set focus point on elements

Home Page: https://evodiaaut.github.io/vue-focuspoint-component

License: MIT License

JavaScript 68.54% HTML 0.92% Vue 28.03% CSS 2.50%

vue vuejs vue2 vuejs2 vue-component component javascript focuspoint

vue-focuspoint-component's Introduction

vue-focuspoint-component

Set focus point on elements

Demo

Demo here

Install

npm install vue-focuspoint-component or yarn add vue-focuspoint-component

Usage

The most common use case is to register the component globally.

// in your main.js or similar file
import Vue from 'vue'
import FocusPoint from 'vue-focuspoint-component'

Vue.component('focus-point', FocusPoint)

Alternatively you can do this to register the components:

// HelloWorld.vue
import FocusPoint from 'vue-focuspoint-component'

export default {
  name: 'HelloWorld',
  components: {
    FocusPoint
  }
}

On your page you can now use html like this:

Image element

<!-- set focus point in `focus` -->
<focus-point
  v-model="focus"
>
  <img src="https://is.example.com/image.jpg">
</focus-point>

<!-- after click `focus` shows like this -->
focus: {
  "x": 35,
  "y": 62
}

<!-- example to get image from image server -->
<img src="https://is.example.com/{focus.x}/{focus.y}/1024/768/image.jpg">
<!-- output: we get from a 1920x1080 image the focus [35%:62% into 1024x768] -->
<img src="https://is.example.com/35/62/1024/768/image.jpg">

Other elements (use careful element with text has not the same ratio by a resize)

<focus-point
  v-model="element"
>
  <div
    class="jumbotron"
  >
    <h1>Hello, world!</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</p>
  </div>
</focus-point>

CSS

// required and to get updates
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point";
// simple theme
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point-theme";

Do you like my theme but not the colors or paddings, ...?

@import "./node_modules/vue-focuspoint-component/src/scss/focus-point";

// overwrite variables from the simple theme
$focuspoint-background: blue;
$focuspoint-border: 3px solid white;
$focuspoint-radius: 2px;
// find more variables in /src/scss/_focus-point-variables.scss

@import "./node_modules/vue-focuspoint-component/src/scss/focus-point-theme";

V-Model

Type	Required	Default	Description
Object	false	`{ x: 50, y: 50 }`	Focus

Slots

Name	Description
pin	Inner html from pin

Slots example

Create your own pin

<focus-point
  v-model="image"
>
  <template
    slot="pin"
  >
    <i class="cool-focus-icon"/>
  </template>
  <img src="https://is.example.com/image.jpg">
</focus-point>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

vue-focuspoint-component's People

Contributors

Stargazers

Watchers

Forkers

boing6000 wuwx ember-technology-ltd

vue-focuspoint-component's Issues

incorrect focal center when used under a nested component

when testing the component directly the focal is placed correctly & the css calc is right,
however when using the focus-point component under another component the focal is no longer in check as below

ps: i've changed the css to make it more visible but it shouldn't affect the end result, or maybe am missing something 🤔

SyntaxError: Unexpected token import

Hi!
I think I have run into an incompatibility with the Nuxt framework, though I'm not sure. When I use the component on a page component in Nuxt I get the error below. Has anyone else seen this issue?

The component seems to itself be doing an import which fails with SyntaxError: Unexpected token import

{ interact/node_modules/vue-focuspoint-component/src/index.js:1
(function (exports, require, module, __filename, __dirname) { import FocusPoint from './components/FocusPoint'
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:605:28)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at r (/home/em/Code/interact/node_modules/vue-server-renderer/build.js:8147:16)
    at Object.<anonymous> (server-bundle.js:3988:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 2e1f12652a9850c8e136:25:0)
    at Object.180 (pages/implement/hero-form-connected.vue?7c3f:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 2e1f12652a9850c8e136:25:0)
    at Object.105 (pages/implement/hero-form-connected.vue:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 2e1f12652a9850c8e136:25:0)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) statusCode: 500, name: 'SyntaxError' }

Could not resolve "./components/FocusPoint"

Using this package in a Laravel Vue app. Updating from Laravel Mix now to Viet with our Vue 2. Now stuck at Could not resolve "./components/FocusPoint":

npm run dev

> dev
> vite


  VITE v3.2.6  ready in 716 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

  LARAVEL v9.52.7  plugin v0.6.1

  ➜  APP_URL: https://site.test
✘ [ERROR] Could not resolve "./components/FocusPoint"

    node_modules/vue-focuspoint-component/src/index.js:1:23:
      1 │ import FocusPoint from './components/FocusPoint'
        ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~

/Users/user/code/site.com/node_modules/esbuild/lib/main.js:1575
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
node_modules/vue-focuspoint-component/src/index.js:1:23: ERROR: Could not resolve "./components/FocusPoint"
    at failureErrorWithLog (/Users/user/code/site.com/node_modules/esbuild/lib/main.js:1575:15)
    at /Users/user/code/site.com/node_modules/esbuild/lib/main.js:1033:28
    at runOnEndCallbacks (/Users/user/code/site.com/node_modules/esbuild/lib/main.js:1447:61)
    at buildResponseToResult (/Users/user/code/site.com/node_modules/esbuild/lib/main.js:1031:7)
    at /Users/user/code/site.com/node_modules/esbuild/lib/main.js:1143:14
    at responseCallbacks.<computed> (/Users/user/code/site.com/node_modules/esbuild/lib/main.js:680:9)
    at handleIncomingPacket (/Users/user/code/site.com/node_modules/esbuild/lib/main.js:735:9)
    at Socket.readFromStdout (/Users/user/code/site.com/node_modules/esbuild/lib/main.js:656:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 23,
        file: 'node_modules/vue-focuspoint-component/src/index.js',
        length: 25,
        line: 1,
        lineText: "import FocusPoint from './components/FocusPoint'",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Could not resolve "./components/FocusPoint"'
    }
  ],
  warnings: []
}

We use it in the Laravel Mediamanager loading it using

// resources/assets/vendor/MediaManager/js/components/utils/upload-preview.vue
...
<script>
import cloneDeep from 'lodash/cloneDeep'
import FocusPoint from 'vue-focuspoint-component'

export default {
    components: {
        FocusPoint
    },
    props: [
        'file',
        'fileTypeIs',
        'trans'
    ],
...

so we do use import ES2015 already. We also installed it of course:

npm list vue-focuspoint-component
site.com@ /Users/user/code/site.com
└── [email protected]
```Any ideas what we might be missing here?