I'm creating a custom element with Polymer to embed a Medium profile card. The embed code provided by Medium is,
<script async src="https://static.medium.com/embed.js"></script>
<a class="m-profile" href="https://medium.com/#pankajparashar">Pankaj Parashar</a>
The code for my custom element looks like this,
<link rel="import" href="bower_components/polymer/polymer.html">
<script async src="https://static.medium.com/embed.js"></script>
<polymer-element name="medium-card">
<template>
<a class="m-profile" href="https://medium.com/#pankajparashar">Pankaj Parashar</a>
</template>
<script>
Polymer('medium-card', {});
</script>
</polymer-element>
I've noticed that the script doesn't load when it is included inside the custom element. Hence, I've added the external script embed.js outside the polymer-element tag. Although, the external script now loads, it doesn't embed the profile card at all.
Is something wrong the way the external script is used? I do not really want to use the iframe technique either.
Related
Currently, I face some serious problem about duplicate referencing 3rd-parties library that causes some libraries to malfunction.
This is the first custom element.
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/jquery-ui/jquery-ui.js"></script>
<dom-module id="jquery-ui-menu">
<script>
Polymer({
is: "jquery-ui-menu"
});
</script>
</dom-module>
This is the another element.
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/jquery-ui/jquery-ui.js"></script>
<dom-module id="jquery-ui-popup">
<script>
Polymer({
is: "jquery-ui-popup"
});
</script>
</dom-module>
As you can see, both of this script tag refer to jQuery that locate in the same path. Normally, browser should load jQuery 2 times that cause some serious problem like the following code.
All registered event will be wiped out when jQuery is loaded second time.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
$(window).on('test', function (){alert('test!');});
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
$(window).trigger('test');
</script>
http://jsfiddle.net/sry1shpt/
I think this is not the bug of jQuery or any other 3rd-parties libraries. But it's a serious problem of Polymer. It's totally nonsense to allow element load duplicated script.
Do you have any practical way to solve this problem?
Please remember the source code of both elements may locate in difference repository and it should not know about each other.
Thanks,
You can put your <script> tags into a seperate HTML file (i.e. jquery-scripts.html) and use HTML imports in both custom elements:
<link rel="import" href="jquery-scripts.html">
HTML imports are de-duplicated and thus jquery-scripts.html and as a consequence the jquery library will only be imported once.
I am trying to figure out if it is possible to inline external javascripts in my Polymer elements. I know if I have a link to a stylesheet then it gets merged (from http://www.polymer-project.org/docs/polymer/styling.html):
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script>
Polymer('my-element',...);
</script>
</polymer>
Polymer will automatically inline the my-element.css stylesheet using a :
<polymer-element ...>
<template>
<style>.../* Styles from my-element.css */...</style>
...
</template>
<script>
Polymer('my-element',...);
</script>
</polymer>
I am looking for a way to do the same with external javascript files:
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script src="my-element.js">
</polymer>
and get something like this:
<polymer-element ...>
<template>
<style>.../* Styles from my-element.css */...</style>
...
</template>
<script>.../* code from my-element.js */...</script>
</polymer>
I looked at vulcanize (https://github.com/Polymer/vulcanize) but it does not seem to be able to do it.
EDIT:
let me rephrase what I want to achieve:
I know that when vulcan processes a HTML page that contains elements, it merges the templates of these elements into the resulting output, and (given the --csp option) it also creates a javascript file where it puts all embedded scripts of the elements. I want to be able to merge into the resulting .js file not only embedded scripts but also scripts that are linked to from my elements.
It should work as you wrote it, except that <script> requires a closing tag. I.e.
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script src="my-element.js"></script>
</polymer>
Fwiw, the script in either case is loaded and executed normally by the browser. In that sense, it's different from the stylesheet link which is a feature being simulated by Polymer.
For the same reason, you can load/run that script anywhere. The tag doesn't have to be inside the <polymer-element>.
Hi all I am trying to create a custom Polymer Element that uses the < x-flipbox > element inside its template tag.
However it seems that the < x-flipbox > tag it is only working on the index page and not inside my custom elements.
This is my custom element, what am I doing wrong?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/x-tag-imports/x-tag-flipbox.html">
<polymer-element name="nautes-flipbox" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
The element above is just showing the two divs.
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
This one pasted in the index.html shows only one div (as it should).
In addition, how can I debug this kind of issues? (I am new to polymer and the console is not giving me any error/warning)
You don't need to include it as a import, that's an old wrapper thing the Polymer folks wrote for including X-Tag elements (it's probably what's complicating this). You can simply include the JS (as a <script>) and CSS (as a <link rel="stylesheet">) inside of the x-flipbox repo's src directory where you have your <link rel="import"> for the flipbox
Repo: https://github.com/x-tag/flipbox/tree/master/src
How to use this ( https://github.com/silviomoreto/bootstrap-select ) twitter bootstrap plugin only for one element on the page? If I use it all my site use twitter bootstrap element (url are blue etc.)
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-select.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="bootstrap-select.css">
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});
});
</script>
From your comment you are including:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
On your site. This means you're including the whole of twitter bootstrap which adds some styles to normal html elements.
Instead of this, why not download just the files you linked to on github and use those instead, i.e. (if you host them yourself):
<link href="path/to/bootstrap-select.min.css" rel="stylesheet">
<script src="path/to/js/bootstrap-select.min.js">
If you needed other features from bootstrap you could also create a custom build using this resource.
In that case, you have two solutions.
Take the .less sources from github and rebuild bootstrap with only the things you need. In other words you'll have to remove most .less files from the build process and take only the things you need.
Since you only have one element, add the selector to a page with bootstrap and extract all the css related to this element. Put this css in a different file and link it in your html. Once you copied all the required css declarations everything should look as expected.
You can then rename classes if needed.
To copy css declaration used in the browser you can use dev toolbars from firefox/chrome and so on. There might be good plugins that makes the job easier.
i need to display the section as PopUp while onload(). but i don't know how to call this javascript function(function($)). name has confused me. also if any other way to call this div section as popup .please sugesst. Thanks
<html>
<head>
<script>
// function name is function($)
function($){
}
</script>
</head>
<body>
<div>
<!-- body of the popUp -->
</div>
</body>
</html>
The $ function is probably the one defined in jQuery, so you will need to include the jQuery JavaScript library if you want to use it for showing a pop up.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Including just this library will define the $ function and you can then use jQuery functions in your JavaScript code. However this will not create a pop-up. There are many jQuery plugins that can be used to create a pop-up.
jQuery dialog?
http://jqueryui.com/demos/dialog/
Loads of examples on there