I've done some serious internet searching to find a popup gallery plugin for Vue 3 which supports both images and video files. Most of the plugins are written for Vue 2.
Anybody can recommend a good plugin? (something like fancybox/lightbox)
I've managed to solve this with fancyapps. Since it is written in vanilla JS, I could include it in my Vue file easily. The only difference is you don't need to register it as a component.
P.S. In order to use fancyapps on page load, you will need to add the code for initialization in the activated() lifecycle hook.
FancyboxItem.vue
First import the fancybox:
import {Fancybox} from "/#fancyapps/ui/src/Fancybox/Fancybox";
Also, css is required:
<style lang="scss" scoped>
#import "#fancyapps/ui/dist/fancybox.css";
</style>
Then in my template I've added a button with a click event.
<template>
<button id="play-button" #click="startFancy()"></button>
</template>
And in the methods, I've created a function that starts the fancybox:
methods: {
startFancy: {
var gallery = this.imgs; //your object with images
Fancybox.show(gallery, {}); //starts fancybox with the gallery object
}
}
In composition API steps are really simple.
1.
<script setup>
import { Fancybox } from "#fancyapps/ui/src/Fancybox/Fancybox.js"
// Don't forget to include keys as src in you gallery since Fancybox only accepts that.
const gallery = [
{
src: "https://picsum.photos/785/501"
},
{
src: "https://picsum.photos/785/502"
},
{
src: "https://picsum.photos/785/503"
},
{
src: "https://picsum.photos/785/504"
},
{
src: "https://picsum.photos/785/505"
},
{
src: "https://picsum.photos/785/506"
},
];
const startFancy = () => Fancybox.show(gallery, {});
</script>
2.
<style lang="scss">
#import "#fancyapps/ui/dist/fancybox.css";
</style>
3.
<div v-for="item in gallery" :key="item">
<img :src="item.src" #click="startFancy" />
</div>
Related
My simple NextJS page looks like this (results can be viewed at https://www.schandillia.com/):
/* eslint-disable no-unused-vars */
import React, { PureComponent, Fragment } from 'react';
import Head from 'next/head';
import compose from 'recompose/compose';
import Layout from '../components/Layout';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const styles = {
root: {
textAlign: 'center',
paddingTop: 200,
},
p: {
textTransform: 'uppercase',
color: 'red',
},
};
class Index extends PureComponent {
render() {
const { classes } = this.props;
const title = 'Project Proost';
const description = 'This is the description for the homepage';
return (
<Fragment>
<Head>
<title>{ title }</title>
<meta name="description" content={description} key="description" />
</Head>
<Layout>
<p className={classes.p}>amit</p>
<Button variant="contained" color="secondary">
Secondary
</Button>
</Layout>
</Fragment>
);
}
}
export default withStyles(styles)(Index);
I am importing a bunch of components off the #material-ui/core library to style my items. I also have a local style definition assigned to a style constant.
What seems to be happening here is that my style isn't getting rendered on the server which is why the files being served upon load are sans-style. And then the CSS gets rendered by the client-side code. As a result, there's a flash of unstyled content that lasts almost a second, long enough to be noticable.
Any way to fix this? The entire codebase is up for reference at https://github.com/amitschandillia/proost/tree/master/web.
I ran a similar problem when tried to make a production build of my app, that uses material-ui. I manage to solve by adding a JSS Provider like this:
import JssProvider from "react-jss/lib/JssProvider";
class App extends Component {
render() {
<JssProvider>
*the rest of your material-ui components*
</JssProvider>
}
}
Here's the solution - https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js .
Basically, all you need to do is to sync server-side class names with client-side. The link above shows what you need to do to fix that issue.
I'm writing an application which should embed specific website into a <webview> and inject some CSS and JS code to adapt this website for viewing on certain touch-sensitive device.
The problem is that I can't find a way to inject my code when page is loaded, instead the code is injected AFTER the page is rendered and, as result, all modifications become visible.
While code injection perfectly works with chrome extensions and content script (by setting run_at attribute to document_end on manifest.json, this is not the case for webviews.
This is my code:
manifest.json
{
"name": "App",
"version": "0.0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": [ "main.js" ]
}
},
"permissions": [
"webview"
]
}
main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', { state: "normal" },
function(win) {
win.contentWindow.onload = function() {
var wv = this.document.querySelector('webview');
wv.addEventListener('contentload', function(e) {
this.insertCSS({ code: "body { background: red !important; }" });
});
}
}
);
});
index.html
<webview src="https://developer.chrome.com/apps/tags/webview" style="width: 100%; height: 100%;"></webview>
The same on the Gist: https://gist.github.com/OnkelTem/ae6877d2d7b2bdfea5ae
If you try this app, you will see that only after the webview is loaded and fully rendered my CSS rule is applied and the page background becomes red. In this example I use contentload webview event, but I also tried all other webview events: loadstart, loadstop, loadcommit - with no any difference.
I tried also using webview.contentWindow, but this is object is EMPTY all the time, despite documentation states it should be used.
Any ideas? Is it possible at all?
First of all, use the loadcommit event instead of the contentload event.
Second, add runAt: 'document_start' to the webview.insertCSS call (this also applies to webview.executeScript, if you ever want to use it). The implementation of executeScript is shared with the extension's executeScript implementation, but unfortunately the app documentation is incomplete. Take a look at chrome.tabs.insertCSS until the app documentation is fixed.
Here is an example that works as desired:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', { state: 'normal' },
function(win) {
win.contentWindow.onload = function() {
var wv = this.document.querySelector('webview');
// loadcommit instead of contentload:
wv.addEventListener('loadcommit', function(e) {
this.insertCSS({
code: 'body { background: red !important; }',
runAt: 'document_start' // and added this
});
});
}
}
);
});
Note: Although the previous works, I recommend to put the script that manipulates the webview in index.html, because the resulting code is much neater.
// main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', { state: 'normal' });
});
<!-- index.html -->
<webview src="https://developer.chrome.com/apps/tags/webview" style="width: 100%; height: 100%;"></webview>
<script src="index.js"></script>
// index.js
var wv = document.querySelector('webview');
wv.addEventListener('loadcommit', function() {
wv.insertCSS({
code: 'body { background: red !important; }',
runAt: 'document_start'
});
});
I've followed this tutorial:
http://popcornjs.org/popcorn-101
Tutorial Code
<!doctype html>
<html>
<head>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#ourvideo");
// add a footnote at 2 seconds, and remove it at 6 seconds
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
// play the video right away
pop.play();
}, false);
</script>
</head>
<body>
<video height="180" width="300" id="ourvideo" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>
<div id="footnotediv"></div>
</body>
</html>
And can run this locally.
In Firebug, I see the footnote div update from:
<div style="display: none;">Pop!</div>
to:
<div style="display: inline;">Pop!</div>
On a live site however, I am loading my page html from a MongoDB database via Ajax and the footnote display functionality doesn't seem to be working.
Thinking this might have something to do with needing to 're-initialise' after the content has loaded, I've added the popcorn.js functionality to a function called on click:
Function
<script>
function myPopcornFunction() {
var pop = Popcorn("#ourvideo");
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
pop.play();
}
</script>
Call
$(document).on("click","a.video", function (e) {
// passing values to python script and returning results from database via getJSON()
myPopcornFunction();
});
This doesn't seem to have an effect.
No footnotediv content is loaded when the video plays.
The video is also not playing automatically.
It's hard to reproduce in jsFiddle with dynamic content, so is there a generic approach to ensuring popcorn works with dynamically loaded content?
Firebug Error on click
TypeError: k.media.addEventListener is not a function
It seems to have been a timing issue in that originally I had made a call to the myPopcornFunction() outside of the function which loaded the content (a getJSON() function). When I placed the call within the same block as the getJSON() function, things seemed to maintain their 'order' and popcorn could work correctly.
Before
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
});
e.preventDefault();
myPopcornFunction(); // the call WAS here
});
After
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
myPopcornFunction(); // the call is now HERE
});
e.preventDefault();
});
The myPopcornFunction() was the same as in the original post.
From http://codemirror.net/doc/manual.html, I only find getRange(),
undo(), redo() etc, and I can't find cut(), copy() and paste API,
and more when I try to run editor.execCommand("cut"), I get the error.
Could you help me? Thanks!
Using clipboard.js, you can define the text() function to grab the value of the CodeMirror's inner document.
Store a reference to the (<textarea>) editor's selector for convenience.
var editorSelector = '#editor' // or '#editor + .CodeMirror';
Instantiate a new ClipBoard object with reference to your button.
new Clipboard('.clip-btn-native', {
text: function(trigger) {
return getCodeMirrorNative(editorSelector).getDoc().getValue();
}
});
Retrieve a CodeMirror Instance via native JavaScript.
function getCodeMirrorNative(target) {
var _target = target;
if (typeof _target === 'string') {
_target = document.querySelector(_target);
}
if (_target === null || !_target.tagName === undefined) {
throw new Error('Element does not reference a CodeMirror instance.');
}
if (_target.className.indexOf('CodeMirror') > -1) {
return _target.CodeMirror;
}
if (_target.tagName === 'TEXTAREA') {
return _target.nextSibling.CodeMirror;
}
return null;
};
Demo
Please see complete; in-depth demo over at JSFiddle.
There are no CodeMirror APIs for cut/copy/paste because browser security restrictions forbid JavaScript from accessing the clipboard programmatically. Paste could be used to steal private data and Cut/Copy can be used as a more elaborate attack vector.
The browser's own native code handles user gestures that access the clipboard (keyboard shortcuts and context menu items), based solely on the currently selected text or focused text field.
This SO thread has a good summary of attempts to work around these restrictions. CodeMirror's approach is the first bullet: it uses a hidden textarea to ensure that user clipboard gestures work, but that still doesn't support programmatic APIs.
But there is a partial workaround: use a small Flash widget (this is the 2nd bullet in the thread above). Flash relaxes the restrictions on Copy/Cut (but not Paste) a bit. It still has to be triggered by some user event, but it could be something like clicking a button in your HTML UI. Wrappers like ZeroClipboard and Clippy make it simple to access to these capabilities without needing to know Flash. You'd need to write a little glue code to pull the appropriate string from CodeMirror when copying, but it shouldn't be too bad.
Add a hidden contenteditable div to your textarea editor wrapper. Contenteditable divs respect new lines and tabs, which we need when copying code.
Here is my CodePen demo
var content = $('.content');
var toCopy = content.find('.copy-this');
// initialize the editor
var editorOptions = {
autoRefresh: true,
firstLineNumber: 1,
lineNumbers: true,
smartIndent: true,
lineWrapping: true,
indentWithTabs: true,
refresh: true,
mode: 'javascript'
};
var editor = CodeMirror.fromTextArea(content.find(".editor")[0], editorOptions);
content[0].editor = editor;
editor.save();
// set editors value from the textarea
var text = content.find('.editor').text();
editor.setValue(text);
// setting with editor.getValue() so that it respects \n and \t
toCopy.text(editor.getValue());
$(document).on('click', '.copy-code', function() {
var content = $(this).closest('.content');
var editor = content[0].editor;
var toCopy = content.find('.copy-this')[0];
var innerText = toCopy.innerText // using innerText here because it preserves newlines
// write the text to the clipboard
navigator.clipboard.writeText(innerText);
});
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.CodeMirror {
height: fit-content !important;
}
.copy-code {
background: #339af0;
width: fit-content;
cursor: pointer;
}
<!-- resources -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css" />
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<!-- button to copy the editor -->
<div class="copy-code" title="copy code">copy</div>
<!-- add contenteditable div as it respects new lines when copying unlike textarea -->
<div class="copy-this" contenteditable style="display: none"></div>
<textarea class="editor" style="display: none;">// here is a comment
// here is another comment
</textarea>
</div>
Looking for some insight into this problem.
I have dynamically generated links on a page that launch a lightbox ie they use a rel="lightbox[...]" I'm also putting a class on the hyperlink to make a tooltip work.
<a id="a_-1_6" class="Tips2" href="/media/63/forest_150.jpg" rel="lightbox[examples]" data-title="Tractor" data-desc="description..." data-rel="std" title="" style="opacity: 1; visibility: visible;">
And in the dom ready event
var Tips2 = new Tips($$('.Tips2'), {
initialize: function() { this.tip.fade('hide'); },
onShow: function(tip) { tip.fade('in'); },
onHide: function(tip) { tip.fade('out'); }
});
This all works fine except the tip uses the rel attribute to store data, i'm presuming as its a pre-html5 - so my question is would this mean I need to make my own version of the Tips class in mootools to work off the data.* attributes? I'd like to see I'm not barking up the wrong tree before I try that.
Thanks
Could you make another element inside the Ahref, like:
<a id="a_-1_6" href="/media/63/forest_150.jpg" rel="lightbox[examples]" data-title="Tractor" data-desc="description..." data-rel="std" title="" style="opacity: 1; visibility: visible;">
<span class="Tips2">blah</span>
</a>
This way, you can avoid the conflict.
Tips' documentation states that you can change which property is checked for the tip text. By default, it is rel or href, but you can change it when initializing the new Tip:
var Tips2 = new Tips($$('.Tips2'), {
initialize: function() { this.tip.fade('hide'); },
onShow: function(tip) { tip.fade('in'); },
onHide: function(tip) { tip.fade('out'); },
text: 'data-text' // Will now check the data-text property for tooltip text
});