Skip to content
This repository has been archived by the owner on Dec 28, 2024. It is now read-only.

Add draggableImage property #82

Closed
wants to merge 7 commits into from
Closed

Add draggableImage property #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5bc2ea7
Add draggableImage property for right clicking and draggin while imag…
Jun 10, 2016
ced4349
Add draggableImage property for right clicking and draggin while imag…
Westbrook Jun 10, 2016
8857ad4
Merge branch 'master' of https://github.com/Westbrook/iron-image
Westbrook Jun 10, 2016
1b4424e
Add `draggableImage` property
Westbrook Jun 10, 2016
cb4e74a
Adds `draggableImage` demo
Westbrook Jun 10, 2016
23bbb9a
Merge branch 'master' of https://github.com/Westbrook/iron-image
Westbrook Aug 22, 2016
227bb92
Update draggable-image to context-menu
Westbrook Aug 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<head>

<title>iron-image demo</title>

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
Expand Down Expand Up @@ -89,6 +89,24 @@ <h3>
</template>
</demo-snippet>

<h3>
<code>sizing="contain|cover"</code> with <code>context-menu</code> allows
the image to still be right clicked as well as dragged.
</h3>
<demo-snippet class="centered-demo">
<template>
<style is="custom-style">
#example-sizing-contain {
width: 150px;
height: 150px;
background: #ddd;
}
</style>

<iron-image sizing="contain" context-menu id="example-sizing-contain" alt="The Polymer logo." src="./polymer.svg"></iron-image>
</template>
</demo-snippet>

<h3>
Use the <code>--iron-image-width</code> property to set the width of
the image wrapped by the <code>iron-image</code>.
Expand Down
29 changes: 27 additions & 2 deletions iron-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@
<iron-image style="width:400px; height:400px;" sizing="cover"
src="http://lorempixel.com/600/400"></iron-image>

Will allow sized image be be right clicked and dragged:

<iron-image style="width:400px; height:400px;" sizing="cover"
context-menu src="http://lorempixel.com/600/400"></iron-image>

Will show light-gray background until the image loads:

<iron-image style="width:400px; height:400px; background-color: lightgray;"
Expand Down Expand Up @@ -98,6 +103,16 @@
display: none;
}

:host([context-menu][sizing]) #img {
display: block;
height: 100%;
left: 0;
opacity: 0;
position: relative;
top: 0;
width: 100%;
}

#placeholder {
@apply(--layout-fit);

Expand All @@ -118,7 +133,7 @@
hidden$="[[_computeImgDivHidden(sizing)]]"
aria-hidden$="[[_computeImgDivARIAHidden(alt)]]"
aria-label$="[[_computeImgDivARIALabel(alt, src)]]"></div>
<img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing)]]">
<img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing, contextMenu)]]">
<div id="placeholder"
hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]"
class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div>
Expand Down Expand Up @@ -260,6 +275,16 @@
type: Number,
value: null
},

/**
* Can the <img/> be right clicked or dragged when sizing is set.
*/

contextMenu: {
type: Boolean,
value: false,
reflectToAttribute: true
},
},

observers: [
Expand Down Expand Up @@ -344,7 +369,7 @@
},

_computeImgHidden: function() {
return !!this.sizing;
return !!this.sizing && !this.contextMenu;
},

_widthChanged: function() {
Expand Down