I'm new on WinJS development and I started with the WinJS tutorial. After updating my HTML and adding a WinJS.UI.SplitView I can't see the WinJS.UI.SplitViewCommands.
BTW when I toggle the pane I can't see the icons neither
Result
This is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WePin</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- WePin references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body class="win-type-body">
<div id="app" class="show-home">
<div class="splitView" data-win-control="WinJS.UI.SplitView">
<!-- Pane area -->
<div>
<div class="header">
<!--this is a button that allows you to "toggle" the menu in and out of view -->
<button class="win-splitviewpanetoggle" data-win-control="WinJS.UI.SplitViewPaneToggle"
data-win-options="{ splitView: select('.splitView') }"></button>
<div class="title">SplitView Pane area</div>
</div>
<!--this is where the navigation icons go -->
<div class="nav-commands">
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{
label: 'Alki Trail',
icon: 'mappin',
onclick: mySplitView.trailClicked
}"></div>
</div>
</div>
<!--/ Pane area-->
<!-- Content area -->
<div class="contenttext"><h2 class="win-h2">SplitView Content area</h2></div>
<!--/ Content area -->
</div>
</div>
</body>
</html>
CSS
.content,
#app {
height: 100%;
}
#app .win-splitviewpanetoggle {
float: left;
}
/* SplitView pane content style*/
#app .header {
white-space: nowrap;
}
#app .title {
font-size: 25px;
left: 50px;
margin-top: 6px;
vertical-align: middle;
display: inline-block;
}
#app .nav-commands {
margin-top: 20px;
}
#app .win-splitview-pane-closed .win-splitviewcommand-label {
/* Make sure pane content doesn't scroll if
SplitViewCommand label receives focus while pane is closed.
*/
visibility: hidden;
}
/*SplitView content style*/
#app .win-splitview-content {
background-color: rgb(112,112,112);
}
#app .contenttext {
margin-left: 20px;
margin-top: 6px;
}
Javascript
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize your application here.
} else {
// TODO: This application was suspended and then terminated.
// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
};
app.start();
})();
I had the same problem. Fixed by updating WinJS to latest version. Based on the changelog, SplitViewCommand is a new feature on WinJS v4.2
Related
I'm trying to print multiple custom HTML invoices in one click, like this:
I tried to implement it by this way, but it's not correct cause it will show the dialog print several times:
printInvoices() {
this.orders.forEach(order => {
let content = `
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<style>
#media print {
.invoice {
font-size: 11px !important;
overflow: hidden !important
}
}
</style>
</head>
<body>
—
</body>
`;
let newWindow = window.open("", "", "width=300,height=300");
newWindow?.document.write(content);
newWindow?.focus();
newWindow?.print();
newWindow?.close();
});
}
So, any advice please?
You can do that by rendering all your invoices in one page in blocks, then you use page-break-after: always; to force breaking these blocks to multiple pages
Example:
document.getElementById('printBtn').addEventListener('click', () => {
window.print();
});
.pages {
display: none;
}
#media print {
#printBtn {
display: none;
}
#page {
margin: 0;
}
.pages {
page-break-after: always;
display: block;
}
}
<div class="container">
<div class="pages">
<h1>One</h1>
</div>
<div class="pages">
<h1>Two</h1>
</div>
<div class="pages">
<h1>Three</h1>
</div>
</div>
<button id="printBtn">Print me</button>
Having multiple window.print() means that it will open the print pop-up multiple times
Probably, the solution will be to merge multiple PDFs on the server side and then print the merged file all at once.
I have an vue app that user vuetify. The app is used inside existing cms.
When a dropdown select is opened a click outside the app does not close the dropdown. If the click is inside the app region, the dropdown closes.
Any idea how can I trigger close for the opened dropdown on click outside the app ?
new Vue({
el: '#cartbutton',
data() {
return {
items: [{text:'a'}, {text:'b'}]
}
}
})
.existing-cms {
padding: 40px 50px;
}
#app {
background-color: rgba(0,0,0,0.2);
padding: 10px;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel=stylesheet>
<div class="existing-cms">
<p>Click on the select dropdown and leave it open.</p>
<p>
Click on this white region outside the app should somehow close
opened select in the app.
</p>
<div id="cartbutton">
<v-app>
<span>Clicking here insde the app closed the opened select</span>
<br><br>
<v-select label="Click me and leave it opened. Then click in the white region." :items="items"></v-select>
</v-app>
</div>
</div>
Here is a codepen link https://codepen.io/darkopetreski/pen/OGMvop
EDIT:
It seems that this is reported as a bug here https://github.com/vuetifyjs/vuetify/issues/3144 and the suggestion is to use data-app="true" at the root element, but this approach is not good, since it will mess up stuff (at least was not working well for me).
This is a rather hacky solution but it seems to work. There are two changes:
1) Add a window click listener that calls the blur method on the v-select. This hides the control. To facilitate this I added a ref to the v-select component.
2) To prevent this firing when they click inside the app or on the v-select, I added a stop propagation #click.stop onto the container.
https://codepen.io/anon/pen/BeoOMz
new Vue({
el: '#cartbutton',
data() {
return {
items: [{text:'a'}, {text:'b'}]
}
},
mounted() {
window.addEventListener("click",() => {
this.$refs.select.blur();
});
}
})
.existing-cms {
padding: 40px 50px;
}
#app {
background-color: rgba(0,0,0,0.2);
padding: 10px;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel=stylesheet>
<div class="existing-cms">
<p>Click on the select dropdown and leave it open.</p>
<p>
Click on this white region outside the app should somehow close
opened select in the app.
</p>
<div id="cartbutton" #click.stop>
<v-app>
<span>Clicking here insde the app closed the opened select</span>
<br><br>
<v-select ref="select" label="Click me and leave it opened. Then click in the white region." :items="items"></v-select>
</v-app>
</div>
</div>
I'm having a strange issue with my project where my anchor tags work going down the page, but doesn't seem to work going back up the page. I have managed to re-create this issue with as little code possible.
I've added a debug to the code example to give as much information as possible. The plug we use is the ScrollMagic feature & I have attempted to try and fix this in the JS, but to no avail. Any ideas on why the anchors do not scroll upward?
/*============================================================
-----SCROLLMAGIC SETUP-----
============================================================*/
var ctrl = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
$("section").each(function() {
var name = $(this).attr('id');
new ScrollMagic.Scene({
triggerElement: this
})
.setPin(this)
.addIndicators({
colorStart: "rgba(255,255,255,0.5)",
colorEnd: "rgba(255,255,255,0.5)",
colorTrigger : "rgba(255,255,255,1)",
name:name
})
.loglevel(3)
.addTo(ctrl);
});
var wh = window.innerHeight;
new ScrollMagic.Scene({
offset: wh*3
});
/*============================================================
-----SCROLLMAGIC ANCHORS/SCROLLTO-----
============================================================*/
$('header a').on('click',function() {
var targetSection = $(this).attr('href').substring(1);
var targetPerc = (targetSection-1) / ($('nav a').length-1);
var targetPos = scene.scrollOffset() + (scene.duration()*targetPerc);
controller.scrollTo(targetPos);
});
/*============================================================
-----BOUNCEIN ANIMATIONS ON VIEW-----
============================================================*/
$(function() {
AOS.init();
});
/* Make the body 100% of the browser viewport height */
html, body, .hero { height: 110%; margin: 0; }
/* Make each section 100% of the browser viewport height */
section { height: 100%; position: relative; }
/* Header to follow through the page */
header { position: fixed; left: 5%; top: 40%; z-index: 99; font-size: 18px; }
/* Background colors for each section */
section#one { background: url('https://via.placeholder.com/1920x1080') center / cover; }
section#two { background: linear-gradient(90deg, #F4F6F5 50%, #FFFFFF 50%); }
section#three { background: url('https://via.placeholder.com/1920x1080') center / cover; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos#3.0.0-beta.5/dist/aos.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/aos#2.3.0/dist/aos.css" rel="stylesheet"/>
<!-- Header -->
<header id="navigation">
<p>who we are</p>
<p>what we do</p>
<p>get in touch</p>
</header>
<!-- Section One -->
<section id="one">
<div class="container text-center" data-aos="fade-up">
<h1>One</h1>
</div>
</section>
<!-- Section Two -->
<section id="two">
<div class="container text-center" data-aos="fade-up" data-aos-offset="0">
<h2>Two</h2>
</div>
</section>
<!-- Section Three -->
<section id="three">
<div class="container text-center" data-aos="fade-up" data-aos-offset="0">
<h1>Three</h1>
</div>
</section>
The code seems to work well , if the script is added as the last piece of the head element.
http://jsfiddle.net/1f7e3akn/10/
Also works if you add it as an external script, same place
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos#3.0.0-beta.5/dist/aos.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/aos#2.3.0/dist/aos.css" rel="stylesheet"/>
<script src="<your_script>"></script>
I'm not sure ScrollMagic is working at all for you actually - going up or down. Looking at their example code here http://scrollmagic.io/examples/advanced/anchor_link_scrolling.html, your code has a few differences to theirs. Maybe try copying the docs more closely? For instance...
You save new ScrollMagic.Controller to the variable ctrl, but you later refer to it as controller instead - I'm getting undefined on the variable controller when I debug your page.
Also in their example they save new ScrollMagic.Scene to a variable called scene, but you aren't saving yours - yet later refer to the variable scene which again I'm getting as undefined.
I think your code is only working going down because it's running as a normal anchor tag.
I'm trying to use app-location in order to dynamically load articles with links to other articles and be able to use browser navigation to go back and forth between them, like you would on a normal website. My understanding of app-location is that it grabs the URL send to the browser from a link and updates its route value, allowing you to perform routing client-side. This is my first test "article", which loads fine:
<h1>Title header</h1>
<p>Here's a bunch of words and this one's <b>special</b></p>
<a id="content-link" href="/articles/test2.txt" on-tap="handleTap">link to another article</a>
test2.txt just has a p tag with some text in it.
That's what it looks like on initial load. That link on the bottom of the main section is the link I am talking about. My intent is that if I click that link, it will change the url, then app-location will grab that and change its route property, then my observer can clear the old "article", load the new one and insert it into the content area. So, because the a "new page" was loaded, I should be able to hit the browser back button to return to the above page.
However, when I click the link, it just loads the file as a raw text file and displays that: <p>A NEW PAGE GOT LOADED WOOOOOO</p>, p tags included. Obviously, I've misunderstood something, which is likely since I'm still very new to Polymer and this was meant to be a learning project. Can anyone find what I've done wrong here, or give me pointers on what I should do differently to get my idea working?
Here's my full element code:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/app-route/app-*">
<dom-module id="AR_Website-app">
<template>
<style>
/*header*/
header {
display: block;
padding: 20px 0;
padding-left: 30px;
background-color: rgb(220, 60, 50);
}
p {
margin: 0;
font-family: Verdana, Geneva, sans-serif;
font-size: 30px;
animation: title-fadein 1s;
animation-fill-mode: forwards;
}
#keyframes title-fadein {
from {
text-shadow: none;
opacity:0;
}
to{
text-shadow: 0 0 2px black;
opacity:1;
}
}
/*content*/
table {
border-collapse: collapse;
width: 100%;
min-height: calc(100vw - 110px);
}
table td {
vertical-align: top;
padding: 0;
}
table td:nth-child(1) {
background-color: blue;
}
table td:nth-child(2) {
background-color: green;
padding: 10px;
}
table td:nth-child(3) {
background-color: red;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:articles"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-ajax url="{{route}}" handle-as="text" on-response="handleRequest"></iron-ajax>
<header><p>The Title</p></header>
<table>
<tr>
<td width="10%"><div id="left-banner">
</div></td>
<td width="80%">
<div id="content">
</div>
</td>
<td width="10%"><div id="right-banner">
</div></td>
</tr>
</table>
</template>
<script>
Polymer({
is: 'AR_Website-app',
observers: [
'_routeChanged(route)'
],
attached: function (){
this.route = "/articles/test.txt"
//console.log("Page loaded, sending request for route "+this.route)
this.$$('iron-ajax').generateRequest();
},
_routeChanged: function(route) {
console.log("new route "+route+", sending request")
this.$$('iron-ajax').generateRequest();
},
handleRequest: function(event) {
//Remove existing html snippet
console.log("handling request")
while (this.$$('#content *') != null){
this.$$('#content').removeChild(this.$$('#content *'))
}
//Create new html code from received text
console.log(event.detail.response)
var div = document.createElement('div')
div.innerHTML = event.detail.response
for (x = 0; x < div.childNodes.length; x++){
var content = div.childNodes[x]
this.$$('#content').appendChild(content)
}
//Add event handlers for links
//this.listen(this.$$('#content-link'), 'tap', 'handleTap')
},
handleTap: function(event) {
//Cancel page load from link
//event.preventDefault();
//Request new html snippet
console.log("Loading "+this.$$('#content-link').href)
//this.set('route', this.$$('#content-link').href)
this.route = this.$$('#content-link').href
//this.$$('iron-ajax').generateRequest();
}
});
</script>
</dom-module>
Based on your code
App directory
app
- bower_components
- articles
-- a.txt
-- b.txt
- index.html
- my-app.html
index.html
<!doctype html>
<html>
<head>
<link rel='import' href='my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>
my-app.html
<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/app-route/app-location.html'>
<link rel='import' href='bower_components/app-route/app-route.html'>
<link rel='import' href='bower_components/iron-ajax/iron-ajax.html'>
<dom-module id='my-app'>
<template>
<style>
header{display:block;padding:20px 0 20px 30px;background-color:#dc3c32}p{margin:0;font-family:Verdana,Geneva,sans-serif;font-size:30px;animation:title-fadein 1s;animation-fill-mode:forwards}#keyframes title-fadein{from{text-shadow:none;opacity:0}to{text-shadow:0 0 2px #000;opacity:1}}table{border-collapse:collapse;width:100%;min-height:calc(100vw - 110px)}table td{vertical-align:top;padding:0}table td:nth-child(1){background-color:#00f}table td:nth-child(2){background-color:green;padding:10px}table td:nth-child(3){background-color:red}
</style>
<app-location route='{{route}}'></app-location>
<app-route
route='{{route}}'
pattern='/articles/:article'
data='{{routeData}}'>
</app-route>
<iron-ajax url='/articles/[[routeData.article]]' handle-as='text' on-response='handleRequest'></iron-ajax>
<header>
<p>The Title</p>
</header>
<table>
<tr>
<td width='10%'><div id='left-banner'></div></td>
<td width='80%'>
<div id='content'>
<div>[[article]]</div>
<a href='/articles/a.txt'>a article</a>
<a href='/articles/b.txt'>b article</a>
</div>
</td>
<td width='10%'><div id='right-banner'></div></td>
</tr>
</table>
</template>
<script>
Polymer({
is: 'my-app',
observers: [
'routeChanged(route)'
],
routeChanged: function (route) {
if (this.$$('app-route').active)
this.$$('iron-ajax').generateRequest();
},
handleRequest: function (event) {
this.article = event.detail.response;
}
});
</script>
</dom-module>
It start from app-location grab the url, update route, and that will trigger app-route, app-route try to match that url with pattern and set result to routeData, url on iron-ajax will change accordingly.
When you click on a href, url will change without reload because when iron-location active it will intercept clicks on links within your site ( see in links section and app-location use iron-location) so you don't need to anything with a href. After that routeChanged will be triggered and generate the request.
Beside, I saw you use
this.route = 'some path';
I think it should be
this.set('route.path', 'some path');
I hope this will help.
I have a question about your spoiler in this page:
http://jdownloader.org/download/index
When i click on Windows it appears a table but when i click on Linux the content of Windows disappears. I want create a spoiler like this but that the content of one spoiler doesn't disappear when i press another spoiler.
What exactly should I change in this code (html source)?
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./JDownloader.org - Official Homepage_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
That part finds all the ones that are NOT the current (clicked) one and hides them.