From 5bc2ea740d2dfbe0c96d5c34966ad8e705fa1838 Mon Sep 17 00:00:00 2001
From: WESTBROOK JOHNSON <westbrook@WESTBROOKs-iMac.local>
Date: Fri, 10 Jun 2016 11:02:11 -0400
Subject: [PATCH 1/5] Add draggableImage property for right clicking and
 draggin while image is sized

---
 demo/index.html | 18 ++++++++++++++++++
 iron-image.html | 29 +++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 06c533c..9c80128 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -89,6 +89,24 @@ <h3>
         </template>
       </demo-snippet>
 
+      <h3>
+        <code>sizing="contain|cover"</code> with <code>draggable-image</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" draggable-image 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>.
diff --git a/iron-image.html b/iron-image.html
index bf774d6..5688c31 100644
--- a/iron-image.html
+++ b/iron-image.html
@@ -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"
+      draggable-image 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;"
@@ -98,6 +103,16 @@
         display: none;
       }
 
+      :host([draggable-image][sizing]) #img {
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: relative;
+        top: 0;
+        width: 100%;
+      }
+
       #placeholder {
         @apply(--layout-fit);
 
@@ -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, draggableImage)]]">
     <div id="placeholder"
       hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]"
       class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div>
@@ -260,6 +275,16 @@
           type: Number,
           value: null
         },
+
+        /**
+         * Can the <img/> be right clicked or dragged when sizing is set.
+         */
+
+        draggableImage: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
       },
 
       observers: [
@@ -344,7 +369,7 @@
       },
 
       _computeImgHidden: function() {
-        return !!this.sizing;
+        return !!this.sizing && !this.draggableImage;
       },
 
       _widthChanged: function() {

From ced4349bf49296af55bf65db089e4dee6377f69b Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Fri, 10 Jun 2016 11:05:53 -0400
Subject: [PATCH 2/5] Add draggableImage property for right clicking and
 draggin while image is sized

---
 demo/index.html | 18 ++++++++++++++++++
 iron-image.html | 29 +++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 06c533c..9c80128 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -89,6 +89,24 @@ <h3>
         </template>
       </demo-snippet>
 
+      <h3>
+        <code>sizing="contain|cover"</code> with <code>draggable-image</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" draggable-image 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>.
diff --git a/iron-image.html b/iron-image.html
index bf774d6..5688c31 100644
--- a/iron-image.html
+++ b/iron-image.html
@@ -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"
+      draggable-image 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;"
@@ -98,6 +103,16 @@
         display: none;
       }
 
+      :host([draggable-image][sizing]) #img {
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: relative;
+        top: 0;
+        width: 100%;
+      }
+
       #placeholder {
         @apply(--layout-fit);
 
@@ -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, draggableImage)]]">
     <div id="placeholder"
       hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]"
       class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div>
@@ -260,6 +275,16 @@
           type: Number,
           value: null
         },
+
+        /**
+         * Can the <img/> be right clicked or dragged when sizing is set.
+         */
+
+        draggableImage: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
       },
 
       observers: [
@@ -344,7 +369,7 @@
       },
 
       _computeImgHidden: function() {
-        return !!this.sizing;
+        return !!this.sizing && !this.draggableImage;
       },
 
       _widthChanged: function() {

From 1b4424ef6431a5ab94f48a17dd8160987f4e80b4 Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Fri, 10 Jun 2016 11:14:55 -0400
Subject: [PATCH 3/5] Add `draggableImage` property

Allows user to right click and drag image when `sizing` is applied.
---
 iron-image.html | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/iron-image.html b/iron-image.html
index bf774d6..5688c31 100644
--- a/iron-image.html
+++ b/iron-image.html
@@ -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"
+      draggable-image 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;"
@@ -98,6 +103,16 @@
         display: none;
       }
 
+      :host([draggable-image][sizing]) #img {
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: relative;
+        top: 0;
+        width: 100%;
+      }
+
       #placeholder {
         @apply(--layout-fit);
 
@@ -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, draggableImage)]]">
     <div id="placeholder"
       hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]"
       class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div>
@@ -260,6 +275,16 @@
           type: Number,
           value: null
         },
+
+        /**
+         * Can the <img/> be right clicked or dragged when sizing is set.
+         */
+
+        draggableImage: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
       },
 
       observers: [
@@ -344,7 +369,7 @@
       },
 
       _computeImgHidden: function() {
-        return !!this.sizing;
+        return !!this.sizing && !this.draggableImage;
       },
 
       _widthChanged: function() {

From cb4e74ac548606e20eed1f46758635e62d2eda1a Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Fri, 10 Jun 2016 11:15:26 -0400
Subject: [PATCH 4/5] Adds `draggableImage` demo

---
 demo/index.html | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/demo/index.html b/demo/index.html
index 06c533c..9c80128 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -89,6 +89,24 @@ <h3>
         </template>
       </demo-snippet>
 
+      <h3>
+        <code>sizing="contain|cover"</code> with <code>draggable-image</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" draggable-image 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>.

From 227bb9295d11bcb52d345ef6b56235592cba6c06 Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Mon, 22 Aug 2016 16:25:54 -0400
Subject: [PATCH 5/5] Update draggable-image to context-menu

---
 demo/index.html |  6 +++---
 iron-image.html | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 9c80128..c00493a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -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">
@@ -90,7 +90,7 @@ <h3>
       </demo-snippet>
 
       <h3>
-        <code>sizing="contain|cover"</code> with <code>draggable-image</code> allows 
+        <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">
@@ -103,7 +103,7 @@ <h3>
             }
           </style>
 
-          <iron-image sizing="contain" draggable-image id="example-sizing-contain" alt="The Polymer logo." src="./polymer.svg"></iron-image>
+          <iron-image sizing="contain" context-menu id="example-sizing-contain" alt="The Polymer logo." src="./polymer.svg"></iron-image>
         </template>
       </demo-snippet>
 
diff --git a/iron-image.html b/iron-image.html
index 5688c31..1fb5a06 100644
--- a/iron-image.html
+++ b/iron-image.html
@@ -46,7 +46,7 @@
   Will allow sized image be be right clicked and dragged:
 
     <iron-image style="width:400px; height:400px;" sizing="cover"
-      draggable-image src="http://lorempixel.com/600/400"></iron-image>
+      context-menu src="http://lorempixel.com/600/400"></iron-image>
 
   Will show light-gray background until the image loads:
 
@@ -103,7 +103,7 @@
         display: none;
       }
 
-      :host([draggable-image][sizing]) #img {
+      :host([context-menu][sizing]) #img {
         display: block;
         height: 100%;
         left: 0;
@@ -133,7 +133,7 @@
       hidden$="[[_computeImgDivHidden(sizing)]]"
       aria-hidden$="[[_computeImgDivARIAHidden(alt)]]"
       aria-label$="[[_computeImgDivARIALabel(alt, src)]]"></div>
-    <img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing, draggableImage)]]">
+    <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>
@@ -280,7 +280,7 @@
          * Can the <img/> be right clicked or dragged when sizing is set.
          */
 
-        draggableImage: {
+        contextMenu: {
           type: Boolean,
           value: false,
           reflectToAttribute: true
@@ -369,7 +369,7 @@
       },
 
       _computeImgHidden: function() {
-        return !!this.sizing && !this.draggableImage;
+        return !!this.sizing && !this.contextMenu;
       },
 
       _widthChanged: function() {