Skip to content

Instantly share code, notes, and snippets.

@crysfel
crysfel / gist:1373631
Created November 17, 2011 16:31
ExtJS workaround for scroller issue
Ext.grid.Panel.override({
initComponent : function(){
var me = this;
me.callParent();
me.on('scrollershow', function(scroller) {
if (scroller && scroller.scrollEl) {
scroller.clearManagedListeners();
scroller.mon(scroller.scrollEl, 'scroll', scroller.onElScroll, scroller);
@crysfel
crysfel / capybara cheat sheet
Created October 5, 2012 05:15 — forked from zhengjia/capybara cheat sheet
capybara cheat sheet
=Navigating=
visit('/projects')
visit(post_comments_path(post))
=Clicking links and buttons=
click_link('id-of-link')
click_link('Link Text')
click_button('Save')
click('Link Text') # Click either a link or a button
click('Button Value')
@crysfel
crysfel / my-panel.html
Last active August 29, 2015 14:20
Defining a web component
<my-panel>
<h2>Introduction</h2>
<h1>My custom panel</h1>
<p>This is the content of the panel, we can add anything we need!</p>
</my-panel>
@crysfel
crysfel / my-panel.js
Created May 11, 2015 18:34
Web Component
var Panel = Object.create(HTMLElement.prototype); //Step 1
var MyPanel = document.registerElement('my-panel', { //Step 2
prototype: Panel
});
@crysfel
crysfel / webcomponent-tempalte.html
Created May 11, 2015 18:35
Web Component Template
<template>
<div id="panel">
<div class="panel-header">
<div class="panel-buttons">
<span class="toggle">^</span>
</div>
<h1><content select="h1"></content></h1>
</div>
<div class="panel-body">
<content></content>
@crysfel
crysfel / webcomponent-style.css
Created May 11, 2015 18:36
Web Component Style
<template>
<style>
#panel{
border-radius: 3px;
overflow: hidden;
font-family: 'Arial';
}
.panel-header{
padding: 10px 20px;
background-color: #1d2939;
@crysfel
crysfel / shadow-dom.js
Created May 11, 2015 18:36
Web Component Shadow DOM
var host = document.body.createShadowRoot();
host.innerHTML = "<p>I'm a <em>shadow</em> dom!</p>";
@crysfel
crysfel / audio-template.html
Created May 11, 2015 18:37
Audio template
<audio>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
@crysfel
crysfel / webcomponent-apply.js
Created May 11, 2015 18:38
Web Component Template
// Grab our template full of slider markup and styles
var tmpl = document.querySelector('template'); //Step 1
// Setup our Shadow DOM and clone the template
Panel.createdCallback = function() { //Step 2
var root = this.createShadowRoot(), //Step 3
close;
root.appendChild(document.importNode(tmpl.content, true)); //Step 4
};
@crysfel
crysfel / webcomponent-logic.js
Created May 11, 2015 18:38
Web Component Custom Logic
close = root.querySelector('.panel-buttons span.collapse'); //step 1
close.addEventListener('click',function(){ //Step 2
var body = root.querySelector('.panel-body');
if(body.style.display === 'none'){
body.style.display = 'block'
}else{
body.style.display = 'none';
}