I'm trying to port some animation implemented mostly through css and little javascript to a Vue component. The animation is simple - user clicks a button and a little panel opens from the bottom of his browser and slides upwards.
I have a working Vue component implemented using the same css and no javascript.
Now, I'm aware of the transition wrapper that Vue provides. But I'm unable to figure out how to get similar functionality using the transition wrapper (if at all).
Can someone help me out here?
// register modal component
Vue.component('modal', {
template: '#modal-template',
props: ['show']
})
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
.drawer-wrapper {
position: fixed;
top: 100%;
left: 0;
right: 0;
height: 50%;
z-index: 9998;
transition: transform .3s ease-out;
}
.drawer-wrapper.open {
transform: translateY(-100%);
}
.drawer-container {
height: 100%;
width: 100%;
background-color: white;
}
.drawer-header h3 {
margin-top: 0;
color: #42b983;
}
.drawer-body {
margin: 20px 0;
}
.drawer-default-button {
float: right;
}
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<div class="drawer-wrapper" :class="{ open: show }">
<div class="drawer-container">
<div class="drawer-header">
<slot name="header">
default header
</slot>
</div>
<div class="drawer-body">
<slot name="body">
default body
</slot>
</div>
<div class="drawer-footer">
<slot name="footer">
default footer
<button class="drawer-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</script>
<!-- app -->
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal #close="showModal = false" :show="showModal">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
I got this to work using a transition wrapper, but the code isn't as elegant as I'd expected. Particularly the use of the following attributes in the drawer-wrapper class:
top: 100%;
transform: translateY(-100%);
Fiddle is here
If anyone can simplify the code further, I'd really appreciate it.
Iam trying to download the custom element after it is being updated with edit option
https://codepen.io/nagasai/pen/PKNeMw
In the above example, I am able download file with x-foo custom element but when I edit the value of it and try to download , I can see only DOM content and without shadow DOM
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
</head>
<body>
<div id="Preview">
<x-foo></x-foo>
</div>
<dom-module id="x-foo">
<template>
<style>
.actionIcons {
position: absolute;
top: 0;
right: 0;
opacity: 0;
background: grey;
}
div.actionIcons iron-icon {
padding: 7px;
}
div.actionIcons iron-icon:hover {
background: lightblue;
}
.actionIcons:hover {
opacity: 1;
}
</style>
Hover Top Right hand hover to edit
<div class="actionIcons">
<iron-icon icon="icons:create" on-click="toggle"></iron-
icon>
<iron-icon icon="icons:content-copy"></iron-icon>
<iron-icon icon="icons:close" onclick="deleteElem(event)">
</iron-icon>
</div>
[[text]]
<paper-input value="{{text::input}}"></paper-input>
<iron-collapse id="collapse">
Enter field name: <paper-input type="text" value="
{{text::input}}" autofocus></paper-input>
</iron-collapse>
</template>
</dom-module>
<button onclick="downloadHtml()"><a id="downloadHtmlElem"
download>Download HTML</a></button>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
this.$.collapse.toggle();
}
}
customElements.define(XFoo.is, XFoo);
let downloadHtml = () =>{
let a = document.getElementById('downloadHtmlElem')
a.download = "index.html";
a.href = "data:text/text," + document.getElementById("Preview").innerHTML;
}
DOM under the shadow Root, or the shadow DOM, can not be accessed via innerHTML. It is not supposed to be. Just the way it is designed to work.
Unless you are designing your custom element and expose the DOM via Slots.
Or, the published element exposes its DOM somehow.
You could possibly try hacky ways like the one mentioned here
But a direct innerHTML on the parent DIV wouldn't get you what you want.
Also, Leaving the same answer at Your exact same query with references to earlier Stack Overflow discussions on piercing the Shadow DOM
I am creating a Pinterest like layout in ASP.NET webform and I followed following two tutorials
Creating Pinetrest like Layout in ASP.NET
How to use Masonry
However, I made changes in the first tutorial based on second and I am getting below output
Clearly, this isn't what I was looking. The gap between two rows and columns is high.
Below is my code:
<
style type="text/css">
body
{
background-color:#EEEEEE;
}
#imgLoad
{
position:fixed;
bottom:0;
left:40%;
display:none;
}
.item {
width: 220px;
margin: 10px;
float: left;
background-color:honeydew;
}
</style>
<div id="container" class="transitions-enabled infinite-scroll clearfix">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%# Eval("Url") %>" />
<p><%# Eval("Description") %></p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
How do I fix it?
I believe this is related to the height, may be the row height of repeater control takes the highest among the column.
I did tried to do it with ASp.NET MVC
Controller
IEnumerable<Product> model = ProductRepository.GetData(1, 25);
return View(model);
View
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
.item {
width: 220px;
margin: 5px;
float: left;
background-color:honeydew;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/Mansory.js" type="text/javascript"></script>
<script type="text/javascript">
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: 100,
isAnimated: false
});
});
</script>
#foreach (var item in Model) {
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
}
but same result
EDIT 1
I have changed my script to
<script type="text/javascript">
$(function () {
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
</script>
and code to
#foreach (var item in Model) {
<div id="container">
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
</div>
}
but same result
Ok, a few things:
You have spelled "Masonry" wrong when initializing the script
Put a div with Id "container" around your items list
In stead of using $container.imagesLoaded make the whole javascript section run when page is loaded
Like this:
$(function(){
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
Then it should work.
This is small library which implements Pinterest layout. Filling the grid goes from left to right. Count of columns can be customized in config for each resolution. Columns adaptive changes on resize. Image can be at up or down of pin.
https://github.com/yury-egorenkov/pins-grid
I have a question about a sticky header. On my website I have a "top" div that contains a 100% width/height image. If the user scrolls down, the top div scrolls away and then they can see the main div/content. But I want to have a "sticky" header just under the top div, so that the user dont see the "menu"-header when they are at the top of the page, it should be sticked just under the top image and hook on when the scrolling is "passing by". is this possible to do?
Thank you in advanced!
Here's a piece of my code. I have fixed so that the meny is right under the top picture, but it doesn't follow the scroll. What's the problem?
Thanks!
HTML:
<header id="top">
(The big picture)
</header>
<div id="logo">
<img src="logo" alt="Logo">
</div>
<div class="container">
<div id="sub_header">
<div id="menu1">
Content
</div>
</div>
CSS:
#sub_header { height:53px; width: 100%; padding:5px 0; }
#sub_header.sticky { position:fixed; top:100px; left:0px; right:0px; z-index:99999; }
jQuery:
$(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > body) {
$("#sub_header").addClass("sticky");
} else {
$("#sub_header").removeClass("sticky");
}
});
});
I've created a number of widgets that are loaded as tab panes in a tabcontainer. Everything seems to work well, except I'm getting different results when using my custom widgets vs. creating everything in markup (tab content isn't taking up the whole page, 3rd party widgets aren't behaving properly, etc). This all leads me to think that I might not be creating my widgets correctly. The trick seems to be that they are not interpreted as contentpanes.
I am using dojo 1.3.2.
The following markup, for example, works great:
<body class="soria" style="overflow-y: hidden;">
<!-- Container for whole page -->
<div dojoType="dijit.layout.BorderContainer" design="headline" id="borderContainer" style="height:100%;width:100%;">
<!-- Header container -->
<div dojoType="dijit.layout.ContentPane" region="top">
Title
</div>
<!-- Left side -->
<!--<div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true" style="width:100%; background-color: #F0F8FF;">-->
<div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true">
<div style="text-align: center;">
<!-- address -->
<span id="addressInstructions">Address Contents</span>
</div>
</div>
<!-- Tabs -->
<div dojoType="dijit.layout.TabContainer" id="tabs" region="center" tabPosition="top">
<div dojoType="dijit.layout.ContentPane" id="tab1" title="map">
<p>Change map to:</p>
<div id="divMapList"></div>
<div style="padding: 10px 10px 10px 10px;">
<div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" id="tab2" title="other">
Some text in here.
</div>
</div>
</div>
</body>
Looking at the resulting HTML code, I can see that the tab itself has the following class: "dijitContentPane dijitTabPane dijitTabContainerTop-child dijitTabContainerTop-dijitContentPane dijitVisible".
Below is the HTML of one of my custom widgets:
<div>
<div style="text-align: center; padding: 5px 5px 5px 5px;">
<div>${i18nStrings.mapChangeMap}:</div>
<div dojoAttachPoint="divMapSelection"></div>
<div style="padding: 10px 10px 10px 10px;">
<div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
</div>
</div>
And here is part of the custom widget JS (I can provide more code if necessary):
dojo.declare("xxxx.Widget.Map", [dijit._Widget, dijit._Templated],
{
//Specify the path of the HTML file that sets the look of the widget
templatePath: dojo.moduleUrl("xxxx", "widget/templates/Map.html"),
//The strings used to populate standard text. Populated in postMixInProperties
i18nStrings: null,
//The widget's root div identifier. Value overwritten in postMixInProperties
id:"tabMap",
//The tab's title. Value overwritten in postMixInProperties
title: "",
//True to activate the tab. False otherwise.
activate: false,
//The map & current layer
map: null,
currentLayer: null,
//Sets up some basic properties
postMixInProperties: function() {
this.inherited(arguments);
var _1 = dojo.i18n.getLocalization("dijit", "loading", this.lang);
this.loadingMessage = dojo.string.substitute(this.loadingMessage, _1);
this.errorMessage = dojo.string.substitute(this.errorMessage, _1);
if (!this.href && this.srcNodeRef && this.srcNodeRef.innerHTML) {
this.isLoaded = true;
}
this.i18nStrings = dojo.i18n.getLocalization("IndyVIP","applicationStrings");
this.title = this.i18nStrings.mapTabTitle;
},
</div>
I am adding the widget to the container by creating the widget, then adding it as a child to the tabcontainer.
This results in the following class assigned to my tab: "dijitTabPane dijitTabContainerTop-child dijitVisible".
Does anyone know what I am doing wrong?
Thank you!
Emmster
UPDATE:
I have decided to try inheriting from dijit.layout.ContentPane & dijit._Templated. I am still having problems with that though, the main one being that if I add my widget to a TabContainer, I get the error "node is null" on line 4467 of dojo.js.uncompressed.js, but the tab seems to work just fine IF it's the active tab starting out. If I add the widget to a page that only contains the widget, it works fine without errors.
See the code below that gives me the expected results, but causes that one "node is null" error.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true,
useXDomain: true,
debugAtAllCosts: true,
baseUrl: './',
modulePaths: {IndyVIP: 'js'}
};
</script>
<link rel="Stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/soria/soria.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("IndyVIP.Widget.Map");
dojo.addOnLoad(init);
function init() {
var tab = new IndyVIP.Widget.Map({title: 'Map'});
var tabContainer = dijit.byId('tabs');
tabContainer.addChild(tab);
}
</script>
</head>
<body class="soria" style="overflow-y: hidden;">
<!-- Container for whole page -->
<div dojoType="dijit.layout.BorderContainer" design="headline" id="borderContainer" style="height:100%;width:100%;">
<!-- Header container -->
<div dojoType="dijit.layout.ContentPane" region="top">
Title
</div>
<!-- Left side -->
<div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true">
<div style="text-align: center;">
<!-- address -->
<span id="addressInstructions">Address Contents</span>
</div>
</div>
<!-- Tabs-->
<div dojoType="dijit.layout.TabContainer" id="tabs" region="center" tabPosition="top">
<!-- uncommenting the following results in map not acting the way it should -->
<!--
<div dojoType="dijit.layout.ContentPane" id="tab2" title="other">
Some text in here.
</div>-->
</div>
</div>
</body>
</html>
Map.js:
dojo.provide("IndyVIP.Widget.Map");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit._Templated");
dojo.require("dijit._Widget");
dojo.declare("IndyVIP.Widget.Map", [dijit.layout.ContentPane, dijit._Templated],
{
map: null,
//Specify the path of the HTML file that sets the look of the widget
templatePath: dojo.moduleUrl("IndyVIP", "widget/templates/Map.html"),
//The tab's title. Value overwritten in postMixInProperties
title: "",
widgetsInTemplate: true,
startup: function() {
this.map = new esri.Map('divMap');
dojo.connect(this.map, 'onLayerAdd', this, this.onLayerAdd);
var layer = new esri.layers.ArcGISTiledMapServiceLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer');
this.map.addLayer(layer);
},
onLayerAdd: function() {
//Create symbol
var lineColor = new dojo.Color('black');
var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,lineColor,1);
var pointColor = new dojo.Color('red');
var pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,12,lineSymbol,pointColor);
//Create point
var x = 4.92;
var y = 50.625;
var point = new esri.geometry.Point(x,y,this.map.spatialReference);
//Create template
var template = new esri.InfoTemplate('A title','Some content');
//Create graphic
var graphic = new esri.Graphic(point,pointSymbol,null,template);
//Add graphic to map
this.map.graphics.clear();
this.map.graphics.add(graphic);
}
});
And finally, here's the widget's HTML template:
<div>
<div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
</div>
I very much appreciate all of your suggestions so far. I feel like I am missing something elementary, but I can't quite figure it out.
Emmster
The issue I was having when inheriting from dijit.layout.ContentPane was that my top div in my widget template did not specify dojoAttachPoint="containerNode". Doing this took care of the "node is null" error I was getting.
I am still having issues with the map not behaving properly, but this seems related to the tab not being visible initially as dante hinted.
UPDATE:
The other error I was having (the map not acting as it should) was due to the widget's template HTML having items above the map in the widget HTML as in my first example above (map.html). In the second example I provided, I took that extra stuff out, and that fixes the problem.
Inheriting from the ContentPane and having dojoAttachPoint="containerNode" on the root node seems to be mandatory for the tabs. This helped me to resolve a similar issue.