Issues including Remodal javascript library to a spec

[custa1200]

I am trying to create a spec that describes modal window behavior. I use the remodal library for this purpose. When I include it on my spec page like:

<link rel="stylesheet" href="css/component.css">

<link rel="stylesheet" href="/bower_components/remodal/dist/remodal.css">
<link rel="stylesheet" href="/bower_components/remodal/dist/remodal-default-theme.css">

<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/remodal/dist/remodal.min.js"></script>

# Modals

Modal description

## Example

```example

<div class="remodal-bg">
    <a href="#modal">Call the modal with data-remodal-id="modal"</a>
    <a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>
</div>

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

When I try to run the spec in SourceJS and it fails load the remodal compenent and and gives me the folllowing error in the web inspector:

Error: Mismatched anonymous define() module: function (c){return b(a,c)}
http://requirejs.org/docs/errors.html#mismatch

[robhrt7]

I've checked the issue, confirm that it's reproducible. Started to work on proper js encapsulation with webpack/commonJS.

[custa1200]

I see this everytime I load a page with remodal on it.

[custa1200]

Safari is giving me a different looking error.

        if (typeof optionsBase[typeEnabled] !== 'undefined'){
            for(var item in optionsBase[typeEnabled]) {
                if (optionsBase[typeEnabled].hasOwnProperty(item)) {
                    var targetObj = optionsBase[typeEnabled][item];

                    if (targetObj){
                        require([path + item]);
                    }
                }
            }
        }

Where it says "undefined is not an object (evaluating 'typeEnabled')" in the ModuleLoader.js file.

[robhrt7]

We're aware of the problem and it's reasons, this week I plan to finish the encapsulation and release 0.6.0 with it. This change will ensure that there won't be any JS conflicts between SourceJS UI code and example component code.

[custa1200]

Is there anything I can do to help test it?

On 26 Apr 2016, at 6:33 PM, Robert Haritonov notifications@github.com wrote:

We're aware of the problem and it's reasons, this week I plan to finish the encapsulation and release 0.6.0 with it. This change will ensure that there won't be any JS conflicts between SourceJS UI code and example component code.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub

[robhrt7]

@custa1200, I have access to your project, so it's quite enough for now. As soon as I'll implement the encapsulation, it will start working, I have this already done in my POC branch.

[robhrt7]

First test build is available for testing #220.

@custa1200 I've tested with your version either, seems to work fine

[custa1200]

This has been sitting here for a while, Seems to work well, I'm closing it off.