web screenshot plugin

jamesjara · Jan 31, 2017 · 3a38506 · 3a38506
1 parent 1af6ea7
commit 3a38506
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 0 deletions.
diff --git a/web-screenshots/app.js b/web-screenshots/app.js
@@ -0,0 +1,78 @@
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux.DataView', 'http://examples.sencha.com/extjs/5.1.0/examples/ux/DataView/');
+
+Ext.require([
+    'Ext.data.*',
+    'Ext.util.*',
+    'Ext.view.View',
+    'Ext.ux.DataView.DragSelector',
+    'Ext.ux.DataView.LabelEditor'
+]);
+
+Ext.onReady(function(){
+    ImageModel = Ext.define('ImageModel', {
+        extend: 'Ext.data.Model',
+        fields: [
+           {name: 'name'},
+           {name: 'url'},
+           {name: 'size', type: 'float'},
+           {name:'lastmod', type:'date', dateFormat:'timestamp'}
+        ]
+    });
+
+    var store = Ext.create('Ext.data.Store', {
+        id: 'viewStore',
+        model: 'ImageModel', 
+        proxy: {
+            type: 'memory', 
+            reader: {
+                type: 'json',
+                rootProperty: 'images'
+            }
+        }
+    });
+
+    Ext.create('Ext.Panel', {
+        id: 'images-view',
+        frame: true, 
+        renderTo: 'dataview',
+        title: 'Web screenshot netdb.io (0 items selected)',
+        items: Ext.create('Ext.view.View', {
+            store: store,
+            tpl: [
+                '<tpl for=".">',
+                    '<div class="thumb-wrap" id="{product:stripTags}">',
+                        '<div class="thumb"><img src="http://api.screenshotmachine.com/?key='+window.key+'&size=t&url=http://{ip}" title="{product:htmlEncode}"></div>',
+                        '<span class="x-editable">{ip:htmlEncode} - {product:htmlEncode}</span>',
+                    '</div>',
+                '</tpl>',
+                '<div class="x-clear"></div>'
+            ],
+            multiSelect: true, 
+            trackOver: true,
+            overItemCls: 'x-item-over',
+            itemSelector: 'div.thumb-wrap',
+            emptyText: 'No images to display',
+            plugins: [
+                Ext.create('Ext.ux.DataView.DragSelector', {}),
+                Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
+            ],
+            prepareData: function(data) {
+                Ext.apply(data, {
+                    shortName: Ext.util.Format.ellipsis(data.name, 15),
+                    sizeString: Ext.util.Format.fileSize(data.size),
+                    dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
+                });
+                return data;
+            },
+            listeners: {
+                selectionchange: function(dv, nodes ){
+                    var l = nodes.length,
+                        s = l !== 1 ? 's' : '';
+                    this.up('panel').setTitle('Web screenshot netdb.io (' + l + ' item' + s + ' selected)');
+                }
+            }
+        })
+    });
+});
diff --git a/web-screenshots/index.html b/web-screenshots/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
+
+    <link rel="stylesheet" type="text/css" href="http://examples.sencha.com/extjs/5.1.0/examples/shared/example.css" />
+    <link rel="stylesheet" type="text/css" href="http://examples.sencha.com/extjs/5.1.0/examples/view/data-view.css" />
+    <script type="text/javascript" src="http://examples.sencha.com/extjs/5.1.0/examples/shared/include-ext.js"></script>
+    <script type="text/javascript" src="app.js"></script>
+</head>
+<body>
+    <div id="dataview"></div>
+    <script>
+	window.addEventListener('message', function(event){
+	    // if (~event.origin.indexOf('http://netdb.io')) 
+	    initPlugin(event.data);
+	});
+	function initPlugin(response){
+		Ext.onReady(function(){
+			window.key = response['config']['key']; 
+			var store = Ext.getStore('viewStore');
+			store.setProxy({type: "memory", enablePaging: true, data: response['data']});
+			store.load();
+		});
+	}
+    </script>
+</body>
+</html>
+