Emaze Plugin Help

JonDoe12

Hello,

I'm developing a plugin for embedding emaze into Nodebb, based on the codepen plugin by @a_5mith . It embeds a slideshow into your post when you paste a URL, just like it does for codepen frames.

I have it halfway working, however, when regex tries to grab the parameters and place them into the URL, the end result of the URL is this:

http://app.emaze.com/app/test

However, it needs to be this:

http://app.emaze.com/@AOZTORFL/test

For some reason, regex is grabbing the "app" portion of the URL and placing it where "@AOZTORFL" should be.

This results in an error. This is my javascript library:

(function(module) {
"use strict";
var one1 = "$3";
var two2 = "$2";
var cleanedString = one1.replace(/["']/g,"")
var cleanedString2 = two2.replace(/["']/g,"")
var emaze = {},
    embed = '<iframe src="http://app.emaze.com/$1/$2" width="960px" height="540px" seamless webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><a href="http://www.emaze.com" target="_blank"><img src="http://resources.emaze.com/mypres/css/images/embed.png" alt="Powered by emaze" style="margin: 5px; border: none;"></a>';
var pen = /<a href="(?:http?:\/\/)?(app)\.emaze\.com\/.+\/([\w\-_]+)">.+<\/a>/g;

emaze.parse = function(data, callback) {
    if (!data || !data.postData || !data.postData.content) {
        return callback(null, data);
    }
    if (data.postData.content.match(pen)) {
        data.postData.content = data.postData.content.replace(pen, embed);
    }

    callback(null, data);
};

module.exports = emaze;
}(module));

I'm positive the problem is the way I'm writing the regex, however, I'm unsure of how to make it grab the "@AOZTORFL" portion of the URL correctly. May I please get some assistance with this?

Thank you.

Original Codepen plugin source code: https://github.com/a5mith/nodebb-plugin-codepen/blob/master/library.js

a_5mith

@JonDoe12 Seems you've overcomplicated things slightly with that.

Try this one instead:

    "use strict";
    var Emaze = {},
        Embed = '<iframe src="http://app.emaze.com/@$1/$2" width="960px" height="540px" seamless webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
    var	Emaze = /<a href="(?:https?:\/\/)?\/app.emaze.com\/@([\w\-_]+)\/([\w\-_]+)">.+<\/a>/g;


    Emaze.parse = function(data, callback) {

        if (!data || !data.postData || !data.postData.content) {
            return callback(null, data);
        }
        if (data.postData.content.match(Emaze)) {
            data.postData.content = data.postData.content.replace(Emaze, Embed);
        }

        callback(null, data);
    };

    module.exports = Emaze;
}(module));

JonDoe12

@a_5mith

Thanks again. I'm not too skilled with regex just yet. Would you be willing to help me out with regexing Prezi URLs as well?

http://prezi.com/4wygzvcrfr0t/?utm_campaign=share&utm_medium=copy&rc=ex0share

I meant to mention it in my original post. You don't have to, of course. But any help is very much appreciated.

a_5mith

@JonDoe12

    "use strict";
    var Prezi = {},
        Embed = '<iframe src="http://prezi.com/embed/$1/?bgcolor=ffffff&amp;lock_to_path=0&amp;autoplay=0&amp;autohide_ctrls=0#" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" frameborder="0" height="400" width="550"></iframe>';
    var	Prezi = /<a href="(?:https?:\/\/)?\/prezi.com\/([\w\-_]+)\/.+">.+<\/a>/g;


    Prezi.parse = function(data, callback) {

        if (!data || !data.postData || !data.postData.content) {
            return callback(null, data);
        }
        if (data.postData.content.match(Prezi)) {
            data.postData.content = data.postData.content.replace(Prezi, Embed);
        }

        callback(null, data);
    };

    module.exports = Prezi;
}(module));

Should do it.

JonDoe12

Okay, thanks for your help so far. When I try the Emaze plugin, I receive this error: ^
18/2 15:33 [7624] - error: SyntaxError: Unexpected token }
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)

JonDoe12

I resolved the issue by putting (function(module) { at the top. However, it's not turning my link into an iframe. The http link just remains a link when posted.

a_5mith

@JonDoe12 Got a link to the page you're testing?
Not sure why my paste didn't work, but yes, the full code should be

(function(module) {
    "use strict";
    var Prezi = {},
        Embed = '<iframe src="http://prezi.com/embed/$1/?bgcolor=ffffff&amp;lock_to_path=0&amp;autoplay=0&amp;autohide_ctrls=0#" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" frameborder="0" height="400" width="550"></iframe>';
    var	Prezi = /<a href="(?:https?:\/\/)?\/prezi.com\/([\w\-_]+)\/.+">.+<\/a>/g;


    Prezi.parse = function(data, callback) {

        if (!data || !data.postData || !data.postData.content) {
            return callback(null, data);
        }
        if (data.postData.content.match(Prezi)) {
            data.postData.content = data.postData.content.replace(Prezi, Embed);
        }

        callback(null, data);
    };

    module.exports = Prezi;
}(module));

Just replace the bit between }(module)); and the start for the emaze plugin.

JonDoe12

The site is in development on my local host, I wish I could link it here. This is my full code for the emaze plugin, but the link just remains a link without becoming an iframe. Update: The prezi plugin doesn't seem to be working either.

Emaze Plugin:

(function(module) {    
    "use strict";
    var Emaze = {},
        Embed = '<iframe src="http://app.emaze.com/@$1/$2" width="960px" height="540px" seamless webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
    var Emaze = /<a href="(?:https?:\/\/)?\/app.emaze.com\/@([\w\-_]+)\/([\w\-_]+)">.+<\/a>/g;


    Emaze.parse = function(data, callback) {

    if (!data || !data.postData || !data.postData.content) {
        return callback(null, data);
    }
    if (data.postData.content.match(Emaze)) {
        data.postData.content = data.postData.content.replace(Emaze, Embed);
    }

    callback(null, data);
};

module.exports = Emaze;
}(module));

a_5mith

@JonDoe12 Give me 20 minutes or so and I'll spool up a test version of NodeBB and test them out.

JonDoe12

Thank you. In the mean time, I'll keep cranking away and try to find the issue. I appreciate your help.

My current theory is that:

"(?:https?:\/\/)?\/app.emaze.com"

-may have one too many "/". We're escaping in between the "?" and app.emaze.com. However, I think that would make the URL have three "/" as in:

https?:///app.emaze.com

Update on Emaze: Yes, that was it. There were one too many "/". This is the regex that worked for me:

var Emaze = /<a href="(?:https?:\/\/)?app.emaze.com\/@([\w\-_]+)\/([\w\-_]+)">.+<\/a>/g;

I'm starting on prezi now.

a_5mith

@JonDoe12 Prezi will be the same issue in that case. Technically I'd escape the .'s in app.emaze.com too while you're there.

(Just add a backslash before it.)

julian

You two should totally just be collaborators on the plugin :shipit:

a_5mith

@julian I'm sure he'll give credit in his files somewhere. That's good enough for me. Wouldn't want too much more rep than you Julian.

JonDoe12

I was just going to let you take most of the credit. It's still your plugin, and you helped me make the modifications. I'm working on a new modification now, though. I'm trying to get the presentations to embed into an area of the user's profile.

Right now, I'm testing it with the Fullname field on the profile, by entering the URL of the presentations (instead of a human name) and seeing if it parses into an embedded slide show.

Would this be easy to accomplish? If not, are there any hints you could give me @a_5mith ?

So far, I've edited the library.js file and replaced data.post and data.post.conent with data.fullname and data.fullname.content. I've also tried changing the hook in plugin.js from:

 { "hook": "filter:parse.post", "method": "parse", "callbacked": true }
]

to

 { "hook": "action:user.set", "method": "parse", "callbacked": true }
]

I feel like I'm missing something, though. If you're up to it, I'd like to collaborate with you further.