Modify keys support added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ef.js",
-  "version": "0.1.3-alpha.1",
+  "version": "0.1.3-alpha.2",
   "description": "(maybe) An elegant HTML template engine & basic framework",
   "main": "dist/ef.min.js",
   "module": "src/ef.js",

src/lib/utils/element-creator.js

@@ -50,18 +50,29 @@ const addEvent = ({element, event, key, state, subscriber, innerData}) => {
 	 *  v: value                    : string/array/undefined
 	 */
 	const {m, s, i, p, v} = event
-	const [listener, ...k] = key.split('.')
+	const [listener, ...keys] = key.split('.')
 	const kc = []
-	for (let i of k) {
+	const mk = {
+		shift: false,
+		alt: false,
+		ctrl: false,
+		meta: false
+	}
+	for (let i of keys) {
 		const keyCode = parseInt(i, 10)
-		if (!isNaN(keyCode)) kc.push(keyCode)
+		if (isNaN(keyCode)) mk[i] = true
+		else kc.push(keyCode)
 	}
 	const {dataNode, _key} = (() => {
 		if (Array.isArray(v)) return initBinding({bind: v, state, subscriber, innerData})
 		return {dataNode: {_: v}, _key: '_'}
 	})()
 	element.addEventListener(listener, (e) => {
-		if (kc.length !== 0 && kc.indexOf(e.which) === -1) return
+		if (mk.shift !== e.shiftKey ||
+			mk.alt !== e.altKey ||
+			mk.ctrl !== e.ctrlKey ||
+			mk.meta !== e.metaKey ||
+			(kc.length !== 0 && kc.indexOf(e.which) === -1)) return
 		if (s) e.stopPropagation()
 		if (i) e.stopImmediatePropagation()
 		if (p) e.preventDefault()

test/test.js

@@ -68,6 +68,10 @@ var ast = [
 				t: 'textarea',
 				p: {
 					value: [['style'], 'background-color: #ECECEC']
+				},
+				e: {
+					'keydown.ctrl.13.27': { m: 'key' },
+					'keydown.13.32': { m: 'space' }
 				}
 			}
 		],
@@ -83,41 +87,41 @@ var ast = [
 		{
 			t: 'button',
 			e: {
-				click: {m: 'sendMsg', v: 'some data'}
+				click: { m: 'sendMsg', v: 'some data' }
 			}
 		},
 		'sendMsg'
 	],
 	{ n: 'list', t: 1 }
 ]
 
-var template = 'this is a comment\n' +
-'>div.{{class = some class name}}\n' +
-'	#style = {{attr.style}}\n' +
-'	#id = testdiv\n' +
-'	#some-attr = some text\n' +
-'	#content =\n' +
-'	%title = {{name}}\n' +
-'	%anotherProperty = text\n' +
-'	.Name: {{name}}&nJob: {{job}}\n' +
-'	>br\n' +
-'	-node1\n' +
-'	>p\n' +
-'		#class = some class name\n' +
-'		@click.stop = alertNotice\n' +
-'		/@mousedown = setState:test value\n' +
-'		>span\n' +
-'			.Notice: {{notice}}\n' +
-'		. test\n' +
-'		-node2\n' +
-'		+list1'
+var template = '  this is a comment\n' +
+'  >div.{{class = some class name}}\n' +
+'    #style = {{attr.style}}\n' +
+'    #id = testdiv\n' +
+'  	#some-attr = some text\n' +
+'  	#content =\n' +
+'  	%title = {{name}}\n' +
+'  	%anotherProperty = text\n' +
+'  	.Name: {{name}}&nJob: {{job}}\n' +
+'  	>br\n' +
+'  	-node1\n' +
+'  	>p\n' +
+'  		#class = some class name\n' +
+'  		@click.shift.alt.stop = alertNotice:{{attr.style = color: #666}}\n' +
+'  		/@mousedown = setState\n' +
+'  		>span\n' +
+'  	  	.Notice: {{notice = &u[2F804]]]}}\n' +
+'  		. test\n' +
+'  		-node2\n' +
+'  		+list1'
 
 var data1 = {
 	$data: {
 			class: 'box test class',
 			name: 'Bob',
 			job: 'Assit Alice',
-			notice: 'ooooooops'
+			notice: 'Click here with alt and shift key down. An alert should pop up'
 	},
 	$methods: {
 		alertNotice: function ({state}) {
@@ -147,7 +151,7 @@ state2.$data.root.text = 'component 2'
 state3.$data.class = 'box'
 state3.$data.name = 'Alice'
 state3.$data.job = 'Developer'
-state3.$data.notice = 'N/A'
+// state3.$data.notice = 'N/A'
 state4.$data.job = 'Assiting Alice'
 
 var data2 = {