so i just found out about polymer and it looks realy cool but the thing is i couldn't figure out if its using javascript or its own unique language.
so what script language polymer using? i like angular and i saw that polymer script is like angular script so i didn't realized if im suppose to use javascript angular or polymer script...
yo-greeting file:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="yo-greeting" attributes="">
<template>
<style>
/* styles for the custom element itself - lowest specificity */
:host { display: block; }
/*
style if an ancestor has the different class
:host-context(.different) { }
*/
.imgWidth {
width: 100%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<img src="../images/lion.jpg" alt="" class="imgWidth" />
<paper-tabs selected="{{selectedPage}}">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
<core-pages selected="{{selectedPage}}">
<div class="red_tab">One</div>
<div class="blue_tab">Two</div>
<div class="black_tab">Three</div>
</core-pages>
</template>
<script>
Polymer({
selectedPage: 1
});
</script>
</polymer-element>
index file:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Polymer WebApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<script src="bower_components/platform/platform.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-media-query/core-media-query.html">
<link rel="import" href="bower_components/core-list/core-list.html">
<link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="bower_components/core-selector/core-selector.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<!-- endbuild-->
</head>
<body unresolved>
<div class="hero-unit">
<yo-greeting></yo-greeting>
<!-- <p>You now have</p>
<yo-list></yo-list> -->
</div>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
elements file:
<link rel="import" href="yo-list.html">
<link rel="import" href="yo-greeting.html">
i want that when i press on one of these tabs the core-pages will switch using polymer.
how do i do that the best way possible?
also - why my core-pages is not like that demo in the polymer site - http://www.polymer-project.org/docs/elements/core-elements.html#core-pages?
i installed it using bower and linked it just like the i linked the paper-tabs. its just showing one and does not switch when pressed.
thanks for all your help.
First of all there is no such thing as "Polymer Script". You write the code for your custom components in a language like JavaScript or Dart (or CoffeeScript or TypeScript or...)
There is a concept called "Polymer Expressions", which is the syntax inside the mustache ({{ }}) binding expressions. This is a subset of the JavaScript language with some additions like filters and they are similar to the AngularJS binding expressions.
To switch between the pages with your tabs, simply set up a binding between the selected properties of these elements. Currently you are setting the selected attribute of <core-pages> to 0, but nothing is changing it later on.
<polymer-element name="yo-greeting">
<template>
...
<paper-tabs selected="{{selectedPage}}">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
<core-pages selected="{{selectedPage}}">
<div class="red_tab">One</div>
<div class="blue_tab">Two</div>
<div class="black_tab">Three</div>
</core-pages>
</template>
<script>
Polymer('yo-greeting', {
selectedPage: 0
});
</script>
</polymer-element>
Whenever the tab selection changes this automagically updates the selected core page. This is done by binding the selected attributes to the selectedPage property of the yo-greeting element.
Related
I am trying to change the background color of a button in css. The CSS link is working fine, the button changes color when I try to apply bootstrap or use DOM to change the color, but not when I use CSS.
Here's the code:
// let sexybutton= document.querySelector('.sexy');
// sexybutton.style.backgroundColor="red";
// console.log(sexybutton.style);
//Currently commented it out because I do not want to do it this way. Put this here to inform that the button style changes using this method.
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/fdee82af88.js" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/album/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="style.css">
</head>
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
<script src="index.js"></script>
</html>
Your CSS syntax is wrong. The semi-colon ; must be placed after each CSS property, not after each CSS rule.
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
CSS isn't a C/C++ or anything else that requires semicolon. You can't type a semi-colon to end of the style.
You wrote;
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
but this is correct one;
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
You must to write semicolon to end of the line. As you can see, line ending with : red;. Not like };
it's unreadable, your semi-colon placement is not correct
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
correct
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
I got an issue when using ckeditor which is ckeditor change some css setting.
Original textarea: Original textarea
Using ckeditor: ckeditor
As you can see, the textarea field color become same as my background color.
Also, input text become text-align:center. It should be default as 'left' which same as the original one, doesn't it?
Here is my code,
html head:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Development</title>
<!--Font Awsome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Bootstrap CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href = "index.css" rel = "stylesheet">
<link href = "post_form.css" rel = "stylesheet">
<!-- Editor for Content Field -->
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
</head>
form part:
<div class="form-group col-xs-12">
<label for="post_content" class="text_side">Content:</label>
<br>
<!-- id for using Editor -->
<textarea class="form-control" name="" rows="10" cols="30" id="editor" required></textarea>
</div>
bottom part:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Javascript-->
<script src="js/bootstrap.min.js"></script>
<!-- CKEditor -->
<script type="text/javascript" src="ckedit.js"></script>
my css:
.text_side
{
float: left;
font-size: 130%;
font-family: Comic Sans MS;
font-style: italic;
}
my javascript(only the ckeditor activate code):
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
Doesn't know why those issues exist, hope can get help.
Just add one more div with id="ckeditor_bar", then put textarea with id="editor" inside div...
https://jsfiddle.net/c298oqhw/17/
Add to css:
#ckeditor_bar
{
background-color: white;
}
Hopefully somebody can help me better understanding using app-router with Polymer. I have the following files - index.html, app.html and updates.html.
Everything is working as it should with the main layout appearing when I navigate to the root of the domain but nothing appears in the content area where I am trying to render the contents of the updates.html file using the app-router element.
Any help is much appreciated
index.html
<html>
<head>
<title>Example App</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/app.html">
</head>
<body fullbleed unresolved>
<example-app></example-app>
</body>
</html>
app.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/app-router/app-router.html">
<polymer-element name="example-app">
<template>
<core-scaffold id="scaffoldPanel">
<core-header-panel navigation flex>
<core-toolbar id="navheader" class="tall">
<img class="middle profile" src="../images/main-carer.png">
</core-toolbar>
</core-header-panel>
<core-toolbar tool flex>
<div id="main-title" flex>Example App</div>
<core-icon icon="search"></core-icon>
</core-toolbar>
<div class="content">
<app-router>
<app-route path="/" import="elements/updates.html" element="app-updates"></app-route>
</app-router>
</div>
</core-scaffold>
</template>
</polymer-element>
updates.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="app-updates">
<template>
<div vertical layout style="height:50px;">
<div flex class="home-update-menu"><h4>UPDATES</h4></div>
</div>
<div>Updates appear here</div>
</template>
</polymer-element>
I'm trying to use paper-tabs inside new element (tabs-list) but after print tabs I can't use querySelector to change selected one.
Element code (without style):
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../sprint-service/sprint-service.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<polymer-element name="tab-list" attributes="show">
<template>
<sprint-service id="service" sprints="{{sprints}}"></sprint-service>
<paper-tabs selected="all" valueattr="name" self-end>
<paper-tab name="all">ALL</paper-tab>
<template repeat="{{sprint in sprints}}">
<paper-tab name="{{sprint.id}}">{{sprint.id}}</paper-tab>
</template>
</paper-tabs>
</template>
<script>
Polymer('tab-list', {
ready: function() {
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
list.show = tabs.selected;
})
}
});
</script>
</polymer-element>
Index.html code (whitout style):
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform-dev/platform.js"></script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="tab-list.html">
<link rel="import" href="post-list.html">
</head>
<body unresolved touch-action="auto">
<core-header-panel>
<core-toolbar>
<tab-list></tab-list>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all"></post-list>
</div>
</core-header-panel>
<script>
var list = document.querySelector('post-list');
</script>
</body>
</html>
But
querySelector('paper-tabs') = *null*
I've tried to put the eventListener in index.html but I have the same problem.
can anyone tell me where the problem is?
Thank you very much!
document.querySelector('paper-tabs');
doesn't find the paper-tabs element, because it is hidden inside the shadow DOM of the tab-list element.
You can simply give paper-tabs an id, say tabs, and access it like so
this.$.tabs
(See http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding.)
There is also the option to access the shadow DOM directly
this.shadowRoot.querySelector('paper-tabs');
If you only want to listen for changes on the paper-tabs selection, you can use a change watcher:
<paper-tabs selected="{{currentTab}}">
Polymer('tab-list', {
currentTab: 'all',
currentTabChanged: function() {
console.log(this.currentTab);
}
});
(See http://www.polymer-project.org/docs/polymer/polymer.html#change-watchers)
<template is="dom-repeat" items="{{dataobject}}">
<div on-tap="_showdetail">
<iron-collapse id="collapse">??</iron-collapse>
</div>
</template>
And to toggle the iron-collapse elements inside the dom-repeat I use
_showdetail: function(e){
Polymer.dom(e.currentTarget).querySelector('#collapse').toggle();
},
I am trying to get the reddit topic results from AJAX request and it seems my current approach of passing the posts results is wrong.
Currently I have created three web components, separate service for the ajax requests which passes the response via attribute.
Separate search component which has text input field changes the category for the 'service'.
The search component pass the posts to listing service.
The problem is with the passing posts data from search component to list component.
reddit-post-service.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-ajax/core-ajax.html">
<polymer-element name="reddit-post-service" attributes="posts subreddit">
<template>
<style>
:host {
display: none;
}
</style>
<core-ajax id="ajax"
url="http://www.reddit.com/r/{{subreddit}}/new.json"
on-core-response="{{postsLoaded}}"
on-core-error="{{handleError}}"
auto
handleAs="json">
</core-ajax>
</template>
<script>
Polymer('reddit-post-service', {
created: function() {
console.log('Reddit post service created');
this.posts = [];
},
postsLoaded: function() {
// Make a copy of the loaded data
this.posts = this.$.ajax.response.data.children
.map(function (post) {
return post.data;
});
},
handleError: function () {
this.posts = [];
}
});
</script>
</polymer-element>
reddit-search.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-input/paper-input.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="reddit-post-service.html">
<polymer-element name="reddit-search" attributes="posts">
<template>
<style>
paper-button.search {
background-color: #19D820;
}
</style>
<paper-input label="subreddit name" tabindex="0" value="{{subreddit}}"></paper-input>
<paper-button label="Search" tabindex="1" class="search"></paper-button>
<reddit-post-service subreddit="{{subreddit}}" posts="{{posts}}"></reddit-post-service>
</template>
<script>
Polymer('reddit-search', {
subreddit: 'programming',
// initialize the element's model
ready: function() {
}
});
</script>
</polymer-element>
post-list.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../post-service/post-service.html">
<link rel="import" href="post-card.html">
<polymer-element name="post-list" attributes="show posts">
<template>
<style>
:host {
display: block;
width: 100%;
}
</style>
<div layout vertical center>
<template repeat="{{post in posts}}">
<!-- Never reach this block -->
<span>{{post}}</span>
</template>
</div>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
index.html
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-list.html">
<link rel="import" href="reddit-search.html">
<link rel="import" href="name-tag.html">
<style>
</head>
<body unresolved>
<core-header-panel>
<core-toolbar>
<paper-tabs valueattr="name" selected="new" self-end>
<paper-tab name="new">NEW</paper-tab>
<paper-tab name="favorites">FAVORITES</paper-tab>
</paper-tabs>
<reddit-search posts="{{posts}}"></reddit-search>
</core-toolbar>
<!-- <name-tag></name-tag> -->
<!-- main page content will go here -->
<div class="container" layout vertical center>
<post-list show="all" posts="{{posts}}"></post-list>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>
Data-binding via '{{ }}' only works in the context of a template. Your index.html attempts to use binding outside of a template.
You can fix this by making your main application itself a polymer-element, by using some other system for propagating the data, or by using an auto-binding template, like this:
<template is="auto-binding">
<core-header-panel flex>
<core-toolbar>
<paper-tabs valueattr="name" selected="new" self-end>
<paper-tab name="new">NEW</paper-tab>
<paper-tab name="favorites">FAVORITES</paper-tab>
</paper-tabs>
<reddit-search posts="{{posts}}"></reddit-search>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all" posts="{{posts}}"></post-list>
</div>
</core-header-panel>
</template>
See http://jsbin.com/xahoc/2/edit