<commit_before>html
	head
		title Flownote
		script(type='text/javascript', src='/frex')
		script(type='text/javascript', src='/js/index.js')
		script(type='text/javascript', src='/js/polymer.min.js')
		script(type='text/javascript', src='/js/jquery-1.10.2.min.js')
		link(href='/css/default.css', media='all', rel='stylesheet', type='text/css')
		link(rel='import', href='/polymer/polymer-elements/polymer-collapse/polymer-collapse.html')
		link(rel='import', href='/polymer/polymer-ui-elements/polymer-ui-menu/polymer-ui-menu.html')
		link(rel='import', href='/polymer/polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html')
		link(rel='import', href='/polymer/polymer-ui-elements/polymer-ui-submenu-item/polymer-ui-submenu-item.html')
		link(rel='import', href='/polymer/polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html')

	body

		polymer-element(name='flownote-flow-submenu', extends='polymer-ui-submenu-item')

			template
				style
					.hide {
						display: none;
					}

					input {
						height: 40px;
						padding: 0px 10px;
						border: 1px solid transparent;
						border-radius: 3px;
						width: 100%;
					}


				link(rel='stylesheet', href='/polymer/polymer-ui-elements/polymer-ui-submenu-item/polymer-ui-submenu-item.css')

				div#labelItem
					polymer-ui-menu-item#item(icon='{{icon}}', label='{{label}}', active?='{{active}}', on-tap='activate')
						content(select='.item-content')

				input#labelInput.hide(value='{{label}}', on-keyup='keyup')

				polymer-ui-menu#menu(selected='{{selected}}', selectedItem='{{selectedItem}}')
					content

				polymer-collapse(targetId='menu', closed='{{collapsed}}', defaultClosed)

			script

				Polymer('flownote-flow-submenu', {
					active: false,
					collapsed: true,
					selected: null,
					selectedItem: null,
					ready: function() {
						var self = this;
						self.$.labelInput.addEventListener('blur', function(e) {
							self.$.labelItem.className = '';
							self.$.labelInput.className = 'hide';
						});
					},
					labelChanged: function() {
						
					},
					activate: function() {

						// Switch to editmode
						if ($(this).hasClass('polymer-selected')) {
							this.originalLabel = this.label;
							this.$.labelItem.className = 'hide';
							this.$.labelInput.className = '';
							this.$.labelInput.select();
							this.$.labelInput.focus();
						}
					},
					keyup: function(e) {
						switch(e.keyCode) {
						case 13:
							// Enter
							this.$.labelInput.blur();
							break;

						case 27:
							// ESCAPE
							this.label = this.originalLabel;
							this.$.labelInput.blur();
							break;
						}
					}
				});

		polymer-element(name='flownote-flow-item', extends='polymer-ui-menu-item')
			template
				style
					.hide {
						display: none;
					}

					input {
						width: 100%;
						height: 40px;
						padding: 0px 10px;
						border: 1px solid transparent;
						border-radius: 3px;
					}

				div#labelItem
					polymer-ui-menu-item(icon='{{icon}}', label='{{label}}', active?='{{active}}', on-click='setFocus')
						content

				input#labelInput.hide(value='{{label}}', on-keyup='keyup')

			script
				Polymer('flownote-flow-item', {
					icon: null,
					label: null,
					active: null,
					ready: function() {
						var self = this;
						self.$.labelInput.addEventListener('blur', function(e) {
							self.$.labelItem.className = '';
							self.$.labelInput.className = 'hide';
						});
					},
					labelChanged: function() {
						
					},
					setFocus: function() {

						// Switch to editmode
						if ($(this).hasClass('polymer-selected')) {
							this.originalLabel = this.label;
							this.$.labelItem.className = 'hide';
							this.$.labelInput.className = '';
							this.$.labelInput.select();
							this.$.labelInput.focus();
						}
					},
					keyup: function(e) {
						switch(e.keyCode) {
						case 13:
							// Enter
							this.$.labelInput.blur();
							break;

						case 27:
							// ESCAPE
							this.label = this.originalLabel;
							this.$.labelInput.blur();
							break;
						}
					}
				});


		//
			polymer-ui-submenu-item(icon='tag', label='Subject', active)

		polymer-ui-menu(theme='polymer-ui-dark-theme')

			flownote-flow-submenu(icon='tag', label='Subject', active)
				flownote-flow-item(icon='settings', label='TEST')
				flownote-flow-item(icon='settings', label='TEST')
				flownote-flow-item(icon='settings', label='TEST')
				flownote-flow-item(icon='settings', label='TEST')
				flownote-flow-item(icon='settings', label='TEST')
				flownote-flow-item(icon='settings', label='TEST')
				flownote-flow-item(icon='settings', label='TEST')

		script

			window.addEventListener('WebComponentsReady', function() {
				$(window).on('keyup', function(e) {
					if (e.keyCode == 13) {
						console.log('sdfasdfasdf');
					}
				});
			});
<commit_msg>Using MDV to handle flow items<commit_after>html
	head
		title Flownote
		script(type='text/javascript', src='/frex')
		script(type='text/javascript', src='/js/index.js')
		script(type='text/javascript', src='/js/polymer.min.js')
		script(type='text/javascript', src='/js/jquery-1.10.2.min.js')
		link(href='/css/default.css', media='all', rel='stylesheet', type='text/css')
		link(rel='import', href='/polymer/polymer-elements/polymer-collapse/polymer-collapse.html')
		link(rel='import', href='/polymer/polymer-ui-elements/polymer-ui-menu/polymer-ui-menu.html')
		link(rel='import', href='/polymer/polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html')
		link(rel='import', href='/polymer/polymer-ui-elements/polymer-ui-submenu-item/polymer-ui-submenu-item.html')
		link(rel='import', href='/polymer/polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html')

	body

		polymer-element(name='flownote-flow-submenu', extends='polymer-ui-submenu-item')

			template
				style
					.hide {
						display: none;
					}

					input {
						height: 40px;
						padding: 0px 10px;
						border: 1px solid transparent;
						border-radius: 3px;
						width: 100%;
					}


				link(rel='stylesheet', href='/polymer/polymer-ui-elements/polymer-ui-submenu-item/polymer-ui-submenu-item.css')

				div#labelItem
					polymer-ui-menu-item#item(icon='{{icon}}', label='{{label}}', active?='{{active}}', on-tap='activate')
						content(select='.item-content')

				input#labelInput.hide(value='{{label}}', on-keyup='keyup')

				polymer-ui-menu#menu(selected='{{selected}}', selectedItem='{{selectedItem}}')
					content

				polymer-collapse(targetId='menu', closed='{{collapsed}}', defaultClosed)

			script

				Polymer('flownote-flow-submenu', {
					active: false,
					collapsed: true,
					selected: null,
					selectedItem: null,
					ready: function() {
						var self = this;
						self.$.labelInput.addEventListener('blur', function(e) {
							self.$.labelItem.className = '';
							self.$.labelInput.className = 'hide';
						});
					},
					labelChanged: function() {
						
					},
					activate: function() {

						// Switch to editmode
						if ($(this).hasClass('polymer-selected')) {
							this.originalLabel = this.label;
							this.$.labelItem.className = 'hide';
							this.$.labelInput.className = '';
							this.$.labelInput.select();
							this.$.labelInput.focus();
						}
					},
					keyup: function(e) {
						switch(e.keyCode) {
						case 13:
							// Enter
							this.$.labelInput.blur();
							break;

						case 27:
							// ESCAPE
							this.label = this.originalLabel;
							this.$.labelInput.blur();
							break;
						}
					}
				});

		polymer-element(name='flownote-flow-item', extends='polymer-ui-menu-item')
			template
				style
					.hide {
						display: none;
					}

					input {
						width: 100%;
						height: 40px;
						padding: 0px 10px;
						border: 1px solid transparent;
						border-radius: 3px;
					}

				div#labelItem
					polymer-ui-menu-item(icon='{{icon}}', label='{{label}}', active?='{{active}}', on-click='setFocus')
						content

				input#labelInput.hide(value='{{label}}', on-keyup='keyup')

			script
				Polymer('flownote-flow-item', {
					icon: null,
					label: null,
					active: null,
					ready: function() {
						var self = this;
						self.$.labelInput.addEventListener('blur', function(e) {
							self.$.labelItem.className = '';
							self.$.labelInput.className = 'hide';
						});
					},
					labelChanged: function() {
						
					},
					setFocus: function() {

						// Switch to editmode
						if ($(this).hasClass('polymer-selected')) {
							this.originalLabel = this.label;
							this.$.labelItem.className = 'hide';
							this.$.labelInput.className = '';
							this.$.labelInput.select();
							this.$.labelInput.focus();
						}
					},
					keyup: function(e) {
						switch(e.keyCode) {
						case 13:
							// Enter
							this.$.labelInput.blur();
							break;

						case 27:
							// ESCAPE
							this.label = this.originalLabel;
							this.$.labelInput.blur();
							break;
						}
					}
				});

		polymer-element(name='flownote-flow')
			template

				polymer-ui-menu(theme='polymer-ui-dark-theme')

					flownote-flow-submenu#flownote_flow(icon='tag', label='Subject', active)

						template(repeat='{{ model.items }}')

							flownote-flow-item(icon='{{ icon }}', label='{{ label }}')

			script

				Polymer('flownote-flow', {
					model: {
						items: [
							{ icon: 'settings', label: 'Hello' },
							{ icon: 'settings', label: 'Hello' }
						]
					},
					ready: function() {
						var self = this;
					},
					addItem: function(item) {
						this.model.items.push(item);
					}
				});

		flownote-flow

		script

			window.addEventListener('WebComponentsReady', function() {

				var flow = document.querySelector('flownote-flow');

				// Initializing hotkey
				$(window).on('keyup', function(e) {
					if (e.keyCode == 13) {
						flow.addItem({ icon: 'tag', label: 'Fred' });
					}
				});
			});

{'fraction_non_alphanumeric': 0.17697249548283478, 'fraction_numerical': 0.006825938566552901, 'mean_word_length': 2.6308309037900877, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5957127', 'n_tokens_mistral': 4652, 'n_tokens_neox': 3179, 'n_words': 472}