Exporting file from gdrive as html and convert into wordpress post - wordpress

I am working on WordPress plugin, which basically converts text files/MS Word Documents into WordPress Posts.
Flow is really simple, you just open dialog box and select files from PC and import.
Now I am trying to integrate Google Drive Picker so users can also create posts from there documents stored in their G-Drive.
I have done some pretty work by reading and understanding google drive picker documentation,
I found a really good working example of it too.
so I customized by callback function for picker which is:
function pickerCallback(data) {
if (data.action === google.picker.Action.PICKED) {
// document.getElementById('content').innerText = JSON.stringify(data, null, 2);
var docs = data[google.picker.Response.DOCUMENTS];
// var googleSelectedFiles = [];
var allFiles = [];
var singleFile = {};
docs.forEach(function (file) {
gapi.load('client', function () {
gapi.client.load('drive', 'v2', function () {
gapi.client.request({
'path': '/drive/v3/files/' + file.id + '/export?mimeType=text%2Fhtml&key=' + myAjax.google.apikey,
'method': 'GET',
callback: function (responsejs, responsetxt) {
singleFile.id = file.id;
singleFile.name = file.name + ".html";
singleFile.content = JSON.parse(responsetxt).gapiRequest.data.body;
allFiles.push(singleFile);
singleFile = {};
}
});
});
});
});
setTimeout(function () {
gDriveHandleFileProcess(allFiles);
}, 4000);
}
}
Now the problem is, I am getting all the document converted as HTML, from <html> to end </html> which includes head tag and style tags and of course there are images too.
I can set all the content into post_content of post while saving it into db, but it's really bad way, I know that.. so looked out for this problem, but nothing found helpful.
If it is possible in a good manners or there might be other solutions I can go through like exporting in other format then save it.. but I also tried simple text format which is not required as the formatting is must.
If anyone can guide me through or share any idea I can go through, that'll be really great.
Thanks in advance.

Related

Mailchimp/Mandrill and Handlebars changing preview text

I'm working with MailChimps Mandrill to send transnational emails with handlebars. The whole setup is done and the emails send absolutely fine - but when they arrive they still have the default Mailchimp template string for the preview text that look like:
|*MC_PREVIEW*|
Is anyone aware of a way to remove this from showing or change it? Currently I have to go into the code of the email in Mandrill and remove the block of code myself - wondering if there is a way to do that from Mailchimps end at all as it's a bit tedious every time an email template is updated and exported back to Mandrill to go in and remove it again.
Thanks in advance!
I've had this issue, and what helped me was first changing the Mandrill default merge tags to Handlebars, then re-exporting the templates from Mailchimp back to Mandrill.
This converts all *|Mailchimp|* style merge tags in the code of the email into {{handlebars}}-style.
Important Edit:
If your Mailchimp templates are using handlebars to define the merge tags, these will get escaped like so:
\{{mergeTag}}
You will either have to manually delete these backslashes to get the tags to work again, OR reformat the merge tags in Mailchimp to be in the *|MAILCHIMP|* style before exporting.
If you choose the latter, when converting a camelCase merge tag to Mailchimp style, just put it in all caps.
E.g. {{mergeTag}} becomes *|MERGETAG|*
We encountered the same issue and wrote a little lambda http endoint that we can trigger via slack integration to fix all our mandrill templates:
const mailchimpFactory = require('#mailchimp/mailchimp_transactional');
const mailchimp = mailchimpFactory(process.env.MAILCHIMP_API_KEY);
function fixTemplate({ name, code }) {
const regex = /\*\|MC_PREVIEW_TEXT\|\*/ig; // regexr.com/69390
const fixedBody = code.replace(regex, '');
console.log(`Updating ${name}`);
return mailchimp.templates.update({
name,
code: fixedBody,
});
}
// removes all mailchimp preview merge variables from all
// templates in mandrill (since we're using handlebars)
async function fixAllTemplates(event) {
const templates = await mailchimp.templates.list();
await Promise.all(templates.map(fixTemplate));
const templateList = templates.map(({ name }) => `\n> ${name}`).join('');
const msg = `*Mandrill Template Fixer:* Updated ${templates.length} templates. ${templateList}`;
console.log(msg);
return { statusCode: 200, body: msg };
}
module.exports = { fixAllTemplates };

Add video in aframe dynamically

My requirement is to simply play a video (url in json file) on a plane in aframe. I have created video entity in my html as follows
<a-video id="video_1" position="0 0 2" geometry="width:2.4;height:1.4"></a-video>
Inside my register component i have added the src file to video as below
AFRAME.registerComponent('myComp', {
schema: {
file: {type: 'asset', default: 'assets/data/file1.json'},
var: {type: 'number', default: 0}
},
init: function () {
},
update: function () {
var data = this.data;
var scene = this.el.sceneEl;
var screen = scene.querySelector('#video_' + data.var);
load(data.file, function (response) {
var products = response.mydata;
screen.setAttribute('src',products[data.var].videoUrl);
});
this.el.addEventListener('mouseenter', function () {
console.log("mouseenter",screen.getAttribute('src'));
});
}
});
My console log is displayed with path mentioned in the json file
"mouseenter assets/img/movies/videos/video1.mp4"
In network tab, i could see my file got fetched with type media and status 200. But still i am getting error
components:texture:warn `$s` is not a valid video +41ms assets/img/movies/videos/video1.mp4
index.html:1 [.Offscreen-For-WebGL-000000BA313F15D0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
What is the correct way to add the video. Where am i going wrong. Please help
I was having the same problem and just managed to get it work in Chrome with something like this:
// Create a new asset
var new_asset = document.createElement('video');
new_asset.setAttribute('id', 'dynVid'); // Create a unique id for asset
new_asset.setAttribute('src', videoUrl);
// Append the new video to the a-assets, where a-assets id="assets-id"
document.getElementById('assets-id').appendChild(new_asset);
// Add the asset to the a-video
screen.setAttribute('src', '#dynVid');
// Start playback
new_asset.play();
This has the added benefit that you can control playback if necessary (new_asset.pause(), new_asset.currentTime = X, muted = true, etc).
For larger videos, you may need to add some callbacks, like oncanplaythrough, to wait until the video has loaded enough.
https://aframe.io/docs/0.5.0/guides/using-javascript-and-dom-apis.html#creating-an-entity-with-createelement
var videoEl = document.createElement('a-video');
videoEl.setAttribute('src', videoUrl);
this.el.appendChild(videoEl);

Meteor: Collection loads when I navigate to a page, but not when URL is directly inputted

I'm a Meteor newb and would appreciate any help here.
I'm creating a flashcard app where you can create decks of cards. It saves the progress that one has made through a deck of cards.
It appears that when I navigate into a deck of cards by clicking on the name of a deck (a link), everything works fine. But when I directly paste the URI in, the Deck collection fails to load.
I believe that this is because of routes.js, in the lib folder, is the first to load so there is no data. I tried using the waitOn function in Router.configure, but it's still not working.
Thanks in advance for your help!
Router.route ('/:_id/:wordIndex', {
template: 'wordPage',
data: function () {
var index = this.params.wordIndex;
var id = this.params._id;
console.log(Decks);
var word = Decks.findOne ( id,
{ fields: { 'wordIds': 1 } }
);
}
}
);
I tried using the waitOn function within the router already as well:
Router.configure ( {
layoutTemplate: 'layout',
waitOn: function () { return [
Meteor.subscribe ('words'),
Meteor.subscribe ('decks')
]}
})
EDIT
Ok, it seems like I found a solution by getting the data client side instead of at the route. But I dunno. There's gotta be a better way? This seems excessive to me.
Template.wordItem.helpers({
wordObj: function () {
var controller = Iron.controller();
var index = controller.params.wordIndex;
var id = controller.params._id;
var wordsObject = Decks.findOne ( id,
{ fields: { 'wordIds': 1 } }
);
var wordId = wordsObject.wordIds[index];
return Words.findOne ( wordId );
},
Here is a sample repository I've created which is very similar to what you are trying to do.
http://meteorpad.com/pad/xKS38qEZAieEPDyLs/Leaderboard
It seems to work. I suspect your problem is elsewhere.

Adding Firebase VAR to website

I setup and account at http://feedthefire.in and on Firebase dot com - to manage feeds I would liek to display on my site. I set everything up and the feeds get pulled into Firebase just like it should, now its time to add it to a web page...nothing, can't get the feeds to pull in from Firebase. I added the firebase.js reference in the header and in the body I placed
<script type="text/javascript">
var ref = new Firebase"'https://aodf.firebaseio.com");
ref.child("meta").once("value", function(snapshot) {
$("#e-title").html(snapshot.val().description);
});
ref.child("articles").limit(3).on("child_added", function(snapshot) {
var article = snapshot.val();
var link = $("<a>", {
"href": article.link,
"target": "_blank"
});
$("#e-list").append($("<li>").append(link.html(article.title)));
});
when you go to http://sandbox.studiorooster.com/ao I should see a list of feeds, but I don't, so I know I am supposed to place something else in the code; I think :)
There are a number of problems in what you posted above, each of which is explained below:
Syntax error on line #2: var ref = new Firebase("https://aodf.firebaseio.com");
You're loading a description on lines #3-5, but never rendering it, because there is no element with id e-title in the page you linked to. Trying adding <h2 id="e-title"></h2> to your template.
Similarly, you are loading a number of articles on lines #6-13, and trying to append each of these items to a list with id e-list, which also does not exist in your template. Try adding <ul id="e-list"></ul> to your template.
Hope that helps!

meteor and textareas

Ok so I'm not sure why I can't render the code. First if I console.log users.content I get the content I want but I'm some how not able to pass it to a textarea so that it show's it...
Users = new Meteor.Collection("users");
if(Meteor.is_client){
Template.inputUser.code = function(){
var el = Users.find({name:"oscar"});
el.forEach(function(users){
console.log(users.content);
})
}
}
And then on my html template I have
<body>{{> inputUser}}</body>
<template name="inputUser">
<textarea>{{content}}</textarea>
</template>
And I would have a record on the db suck as so
if(Meteor.is_server)
Users.insert({name:"oscar",content:"hello world"})
Thanks for your help guys.
Firstly your method Template.inputUser.code should return something, you should also note that it wouldn't be called with that template either as it needs a {{code}} call in it rather than {{content}}
The second point is database contents are not always available if you have disabled the autopublish package, if so check out using publish(in the server code) and subscribe(in the client code): http://docs.meteor.com/#meteor_subscribe you can use this to check when the client has all the data to display. Something like:
Meteor.subscribe('allusers', function() {
Template.inputUser.code = function(){
var user = Users.findOne({name:"oscar"});
return user.content;
}
});
...
Meteor.publish('allusers', function() {
return Users.find();
});

Resources