Skip to content

Commit

Permalink
Fix TypeError when filepond component is unmounted
Browse files Browse the repository at this point in the history
  • Loading branch information
@aduhaime-arm
aduhaime-arm committed Apr 20, 2022
1 parent 8ec0778 commit d3165e2
Show file tree
Hide file tree
Showing 8 changed files with 6,602 additions and 115 deletions.
22 changes: 12 additions & 10 deletions dist/filepond-plugin-pdf-preview.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
/*!
* FilePondPluginPdfPreview 1.0.2
* FilePondPluginPdfPreview 1.0.4
* Licensed under MIT, https://opensource.org/licenses/MIT/
* Please visit undefined for details.
* Please visit https://github.com/Adri-Glez/filepond-plugin-pdf-preview#readme for details.
*/



/* eslint-disable */
.filepond--pdf-preview-wrapper {
position: absolute;
left: 0;
Expand All @@ -18,15 +17,12 @@
background: rgba(0, 0, 0, 0.01);
pointer-events: auto;
}

.filepond--pdf-preview-wrapper:before {
content: ' ';
position: absolute;
width: 100%;
height: 2em;
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
Expand All @@ -45,12 +41,18 @@
transform-origin: center center;
will-change: transform, opacity;
}
.filepond--pdf-preview video,
.filepond--pdf-preview audio {
width: 100%;
will-change: transform;
}

.filepond--pdf-preview #outerContainer #mainContainer div.toolbar {
display: none !important; /* hide PDF viewer toolbar */
display: none !important;
/* hide PDF viewer toolbar */
}

.filepond--pdf-preview #outerContainer #mainContainer #viewerContainer {
top: 0 !important; /* move doc up into empty bar space */
top: 0 !important;
/* move doc up into empty bar space */
}

69 changes: 35 additions & 34 deletions dist/filepond-plugin-pdf-preview.esm.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
/*!
* FilePondPluginPdfPreview 1.0.2
* FilePondPluginPdfPreview 1.0.4
* Licensed under MIT, https://opensource.org/licenses/MIT/
* Please visit undefined for details.
* Please visit https://github.com/Adri-Glez/filepond-plugin-pdf-preview#readme for details.
*/

/* eslint-disable */

const isPreviewablePdf = (file) => /pdf$/.test(file.type);


const createPdfView = (_) =>
_.utils.createView({
name: 'pdf-preview',
Expand All @@ -18,18 +17,17 @@ const createPdfView = (_) =>
// get item
const item = root.query('GET_ITEM', { id: props.id });
if (isPreviewablePdf(item.file)) {
const numPdfPreviewHeight = root.query('GET_PDF_PREVIEW_HEIGHT');
root.ref.pdf = document.createElement('object');
root.ref.pdf.setAttribute('height', numPdfPreviewHeight);
root.ref.pdf.setAttribute('width', "100%");//320
root.ref.pdf.setAttribute(
'style',
'position:absolute;left:0;right:0;margin:auto;padding-top:unset;' +
((numPdfPreviewHeight) ? ('height:' + numPdfPreviewHeight + 'px;') : '')

);
root.element.appendChild(root.ref.pdf);
}
const numPdfPreviewHeight = root.query('GET_PDF_PREVIEW_HEIGHT');
root.ref.pdf = document.createElement('object');
root.ref.pdf.setAttribute('height', numPdfPreviewHeight);
root.ref.pdf.setAttribute('width', '100%'); //320
root.ref.pdf.setAttribute(
'style',
'position:absolute;left:0;right:0;margin:auto;padding-top:unset;' +
(numPdfPreviewHeight ? 'height:' + numPdfPreviewHeight + 'px;' : '')
);
root.element.appendChild(root.ref.pdf);
}
},
write: _.utils.createRoute({
DID_PDF_PREVIEW_LOAD: ({ root, props }) => {
Expand All @@ -44,11 +42,15 @@ const createPdfView = (_) =>

root.ref.pdf.type = item.file.type;
if (isPreviewablePdf(item.file)) {
const sPdfComponentExtraParams = root.query('GET_PDF_COMPONENT_EXTRA_PARAMS');
root.ref.pdf.data = URL.createObjectURL(blob) + ((!sPdfComponentExtraParams)?"":("#?"+sPdfComponentExtraParams));
const sPdfComponentExtraParams = root.query(
'GET_PDF_COMPONENT_EXTRA_PARAMS'
);
root.ref.pdf.data =
URL.createObjectURL(blob) +
(!sPdfComponentExtraParams ? '' : '#?' + sPdfComponentExtraParams);
}
//else root.ref.pdf.src = URL.createObjectURL(blob);

root.ref.pdf.addEventListener(
'load',
() => {
Expand Down Expand Up @@ -122,18 +124,14 @@ const plugin = (fpAPI) => {
return;
}

// create the pdf preview plugin
// create the pdf preview plugin, but only do so if is a PDF
const didLoadItem = ({ root, props }) => {
const { id } = props;
const item = query('GET_ITEM', id);

if (
!item ||
item.archived ||
( !isPreviewablePdf(item.file))
) {
return;
} // set preview view
if (!item || item.archived || !isPreviewablePdf(item.file)) {
return;
}

// set preview view
root.ref.pdfPreview = view.appendChildView(
Expand All @@ -154,9 +152,10 @@ const plugin = (fpAPI) => {
const { id } = props;
const item = query('GET_ITEM', id);

// don't do anything while not an pdf or hidden
// don't do anything while not an PDF
if (
( !isPreviewablePdf(item.file) ) ||
item === null ||
!isPreviewablePdf(item.file) ||
root.rect.element.hidden
)
return;
Expand All @@ -168,14 +167,16 @@ const plugin = (fpAPI) => {
// expose plugin
return {
options: {

allowPdfPreview: [true, Type.BOOLEAN],
allowPdfPreview: [true, Type.BOOLEAN],

// Fixed PDF preview height
pdfPreviewHeight: [320, Type.INT],
// Fixed PDF preview height
pdfPreviewHeight: [320, Type.INT],

// Extra params to pass to the pdf visulizer
pdfComponentExtraParams: ['toolbar=0&navpanes=0&scrollbar=0&statusbar=0&zoom=0&messages=0&view=fitH&page=1', Type.STRING],
// Extra params to pass to the pdf visulizer
pdfComponentExtraParams: [
'toolbar=0&navpanes=0&scrollbar=0&statusbar=0&zoom=0&messages=0&view=fitH&page=1',
Type.STRING,
],
},
};
};
Expand Down
7 changes: 4 additions & 3 deletions dist/filepond-plugin-pdf-preview.esm.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

94 changes: 43 additions & 51 deletions dist/filepond-plugin-pdf-preview.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*!
* FilePondPluginPdfPreview 1.0.2
* FilePondPluginPdfPreview 1.0.4
* Licensed under MIT, https://opensource.org/licenses/MIT/
* Please visit undefined for details.
* Please visit https://github.com/Adri-Glez/filepond-plugin-pdf-preview#readme for details.
*/

/* eslint-disable */
Expand All @@ -19,7 +19,6 @@

const isPreviewablePdf = (file) => /pdf$/.test(file.type);


const createPdfView = (_) =>
_.utils.createView({
name: 'pdf-preview',
Expand All @@ -32,23 +31,25 @@
});

if (isPreviewablePdf(item.file)) {
const numPdfPreviewHeight = root.query('GET_PDF_PREVIEW_HEIGHT');
const numPdfPreviewHeight = root.query('GET_PDF_PREVIEW_HEIGHT');
root.ref.pdf = document.createElement('object');
root.ref.pdf.setAttribute('height', numPdfPreviewHeight);
root.ref.pdf.setAttribute('width', "100%");//320
root.ref.pdf.setAttribute('width', '100%'); //320

root.ref.pdf.setAttribute(
'style',
'position:absolute;left:0;right:0;margin:auto;padding-top:unset;' +
((numPdfPreviewHeight) ? ('height:' + numPdfPreviewHeight + 'px;') : '')

(numPdfPreviewHeight
? 'height:' + numPdfPreviewHeight + 'px;'
: '')
);
root.element.appendChild(root.ref.pdf);
}
}
},
write: _.utils.createRoute({
DID_PDF_PREVIEW_LOAD: ({ root, props }) => {
const { id } = props;
// get item
const { id } = props; // get item

const item = root.query('GET_ITEM', {
id: id,
});
Expand All @@ -58,11 +59,17 @@
type: item.file.type,
});
root.ref.pdf.type = item.file.type;

if (isPreviewablePdf(item.file)) {
const sPdfComponentExtraParams = root.query('GET_PDF_COMPONENT_EXTRA_PARAMS');
root.ref.pdf.data = URL.createObjectURL(blob) + ((!sPdfComponentExtraParams)?"":("#?"+sPdfComponentExtraParams));
}
//else root.ref.pdf.src = URL.createObjectURL(blob);
const sPdfComponentExtraParams = root.query(
'GET_PDF_COMPONENT_EXTRA_PARAMS'
);
root.ref.pdf.data =
URL.createObjectURL(blob) +
(!sPdfComponentExtraParams
? ''
: '#?' + sPdfComponentExtraParams);
} //else root.ref.pdf.src = URL.createObjectURL(blob);

root.ref.pdf.addEventListener(
'load',
Expand All @@ -87,9 +94,7 @@
const didCreatePreviewContainer = ({ root, props }) => {
const { id } = props;
const item = root.query('GET_ITEM', id);
if (!item) return;

// the preview is now ready to be drawn
if (!item) return; // the preview is now ready to be drawn

root.dispatch('DID_PDF_PREVIEW_LOAD', {
id,
Expand All @@ -100,9 +105,7 @@
*/

const create = ({ root, props }) => {
const pdf = createPdfView(_);

// append pdf presenter
const pdf = createPdfView(_); // append pdf presenter

root.ref.pdf = root.appendChildView(
root.createChildView(pdf, {
Expand All @@ -122,7 +125,7 @@
};

/**
* PDF Preview Plugin
* Pdf Preview Plugin
*/

const plugin = (fpAPI) => {
Expand All @@ -132,76 +135,65 @@

addFilter('CREATE_VIEW', (viewAPI) => {
// get reference to created view
const { is, view, query } = viewAPI;

// only hook up to item view
const { is, view, query } = viewAPI; // only hook up to item view

if (!is('file')) {
return;
}

// create the pdf preview plugin if is pdf
} // create the pdf preview plugin, but only do so if is a PDF

const didLoadItem = ({ root, props }) => {
const { id } = props;
const item = query('GET_ITEM', id);

if (
!item ||
item.archived ||
( !isPreviewablePdf(item.file))
) {
if (!item || item.archived || !isPreviewablePdf(item.file)) {
return;
}
// set preview view
root.ref.PdfPreview = view.appendChildView(
} // set preview view

root.ref.pdfPreview = view.appendChildView(
view.createChildView(pdfWrapperView, {
id,
})
);
// now ready
); // now ready

root.dispatch('DID_PDF_PREVIEW_CONTAINER_CREATE', {
id,
});
};
}; // start writing

// start writing
view.registerWriter(
createRoute(
{
DID_LOAD_ITEM: didLoadItem,
},
({ root, props }) => {
const { id } = props;
const item = query('GET_ITEM', id);

// don't do anything while not an pdf or hidden
const item = query('GET_ITEM', id); // don't do anything while not an PDF

if (
(!isPreviewablePdf(item.file) ) ||
item === null ||
!isPreviewablePdf(item.file) ||
root.rect.element.hidden
)
return;
}
)
);
});
}); // expose plugin

// expose plugin
return {
options: {

allowPdfPreview: [true, Type.BOOLEAN],

// Fixed PDF preview height
pdfPreviewHeight: [320, Type.INT],

// Extra params to pass to the pdf visulizer
pdfComponentExtraParams: ['toolbar=0&navpanes=0&scrollbar=0&statusbar=0&zoom=0&messages=0&view=fitH&page=1', Type.STRING],
pdfComponentExtraParams: [
'toolbar=0&navpanes=0&scrollbar=0&statusbar=0&zoom=0&messages=0&view=fitH&page=1',
Type.STRING,
],
},
};
};
// fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags
}; // fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags

const isBrowser =
typeof window !== 'undefined' && typeof window.document !== 'undefined';

Expand Down
Loading

0 comments on commit d3165e2

Please sign in to comment.