Compare commits

...

33 Commits
master ... dev

Author SHA1 Message Date
hoschi-it 66da56a9b0 implement showing last modification date 2 years ago
hoschi-it df02f22dcb optimize printing and extract actions into functions 2 years ago
hoschi-it 06aabdd460 beautify package.json 2 years ago
hoschi-it 39a451a997 extend grunt watch by status checking 2 years ago
hoschi-it 2e6dfd5707 automate running grunt watch in background 2 years ago
hoschi-it 47f3d0a751 Merge branch 'dev' of gitlab.com:hoschi-it/singleNumberInputMask into dev 2 years ago
hoschi-it 9eb87d02fc remove debugging from js 2 years ago
hoschi-it 2c4c30f7a9 do some styling 2 years ago
hoschi-it 50f9f10a89 git ignore build folder 2 years ago
Hoschi-IT 32e2f95f9d show files of public in build log 2 years ago
hoschi-it 669a68fc97 reference built scripts 2 years ago
hoschi-it 86d4051690 config grunt watch for building files 2 years ago
hoschi-it e8be07f664 add grunt dependencies 2 years ago
hoschi-it e5e5b31405 implement minification for html and css 2 years ago
hoschi-it daff2a9643 rename dir 2 years ago
hoschi-it c2a64c6bcd Merge branch 'dev' of gitlab.com:hoschi-it/singleNumberInputMask into dev 2 years ago
hoschi-it 4f4649f289 fix copy command in gitlab deploy 2 years ago
hoschi-it c49e98ec60 fix copy command in gitlab deploy 2 years ago
hoschi-it 99ad012d37 Merge branch 'dev' of gitlab.com:hoschi-it/singleNumberInputMask into dev 2 years ago
hoschi-it 3b3f5de105 use grunt for gitlab deployment 2 years ago
hoschi-it d197691be5 use grunt for gitlab deployment 2 years ago
hoschi-it 8526e0eba2 disable yml formatting 2 years ago
hoschi-it e99da4c0b6 create grunt build config 2 years ago
hoschi-it 0619b24c77 autoformat on save 2 years ago
hoschi-it 572e75feee prettify existing code 2 years ago
hoschi-it 1ed459097a config js prettier 2 years ago
hoschi-it df9e69cc5f minification: correct file name 2 years ago
hoschi-it 4fcb905f13 refactor uglification 2 years ago
hoschi-it 8a3df524d4 fix minification 2 years ago
hoschi-it 44ef81fda9 ci debugging 2 years ago
hoschi-it 3c8801e959 merge 2 years ago
hoschi-it 1589e57592 show filetree for debugging 2 years ago
hoschi-it c99314e09e show filetree for debugging 2 years ago
  1. 2
      .gitignore
  2. 23
      .gitlab-ci.yml
  3. 6
      .prettierrc
  4. 49
      Gruntfile.js
  5. 22
      code.js
  6. 42
      functions.js
  7. 40
      grunt-watch.sh
  8. 44
      index.html
  9. 12
      inputMask.code-workspace
  10. 27
      package.json
  11. 17
      style.css

2
.gitignore

@ -1 +1,3 @@
node_modules
dist
*.pid

23
.gitlab-ci.yml

@ -1,28 +1,17 @@
image: node:latest
before_script:
- echo "these are the currently installed node packages "
- npm list -g
- npm list minify -g || npm install minify -g
- npm list uglify -g || npm install uglify -g
- npm list grunt-cli -g || npm install grunt-cli -g
- npm install
pages:
stage: deploy
script:
- rm public -Rf
- mkdir -p min
- minify --js *.js > min/code.js
- minify --html index.html > min/index.html
- minify --css *.css > min/style.css
- mkdir -p ugly
- uglify --css --source min/*.css --output ugly/style.css
- uglify --source min/*.js --output ugly/code.js
- cp ugly public -r
- cp min/*.html public/
- grunt
- mv dist public
- ls public -al
artifacts:
paths:
- public

6
.prettierrc

@ -0,0 +1,6 @@
{
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": true
}

49
Gruntfile.js

@ -0,0 +1,49 @@
module.exports = function(grunt) {
grunt.initConfig({
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'dist/index.html': 'index.html' // 'destination': 'source'
}
}
},
cssmin: {
target: {
files: {
'dist/style.css': ['style.css']
}
}
},
uglify: {
options: {
banner: '/* <%= grunt.template.today() %> */\n',
compress: true
},
dist: {
files: {
'dist/build.min.js': ['functions.js', 'code.js']
}
}
},
watch: {
scripts: {
files: ['*.js', '*.html', '*.css'],
tasks: ['default']
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify-es');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify', 'htmlmin', 'cssmin']);
};

22
code.js

@ -1,17 +1,15 @@
window.onload = function(){
window.onload = function() {
var elems = getInputElements();
for(var element of elems){
if(element.nextElementSibling !== null){
for (var element of elems) {
if (element.nextElementSibling !== null) {
//element.addEventListener("keyup", this.focusNextMaskElement);
element.addEventListener("change", this.focusNextMaskElement);
element.addEventListener('change', this.focusNextMaskElement);
//element.addEventListener("keypress", this.focusNextMaskElement);
element.addEventListener("paste", this.focusNextMaskElement);
element.addEventListener("input", this.focusNextMaskElement);
element.addEventListener('paste', this.focusNextMaskElement);
element.addEventListener('input', this.focusNextMaskElement);
}
};
console.log("hiello");
}
}
this.injectLastModificationDate();
};

42
functions.js

@ -1,34 +1,42 @@
function getInputElements(){
return document.getElementsByClassName("mask");
function getInputElements() {
return document.getElementsByClassName('mask');
}
function isMaskElementSelected(){
function isMaskElementSelected() {
var focussed = document.activeElement;
return focussed.classList.contains("mask") === true;
return focussed.classList.contains('mask') === true;
}
function isSelectedElementLast(){
function isSelectedElementLast() {
return document.activeElement.nextElementSibling === null;
}
function removeActiveInputText(){
if(isMaskElementSelected()){
document.activeElement.value = "";
function removeActiveInputText() {
if (isMaskElementSelected()) {
document.activeElement.value = '';
}
}
function focusNextMaskElement(){
if( isMaskElementSelected() &&
!isSelectedElementLast()
){
document.activeElement.nextElementSibling.focus();
function focusNextMaskElement() {
if (isMaskElementSelected()) {
if (!isSelectedElementLast()) {
document.activeElement.nextElementSibling.focus();
} else {
document.focus();
}
}
}
function clearForm(){
function clearForm() {
var elems = getInputElements();
for(var e of elems){
e.value = "";
for (var e of elems) {
e.value = '';
}
}
}
function injectLastModificationDate() {
var lastEditedElem = this.document.getElementById('lastEdit');
var lastEdited = new Date(this.document.lastModified);
lastEditedElem.textContent = lastEdited.toString();
}

40
grunt-watch.sh

@ -0,0 +1,40 @@
#!/bin/bash
# run grunt watch in background and let it be terminated from background
pid_file=".grunt-watch.pid"
function watch_start {
grunt watch > /dev/null 2>&1 &
echo $! >> $pid_file
echo "started grunt watch"
}
function watch_stop {
kill $(cat $pid_file)
rm $pid_file
echo "stopped grunt watch"
}
function watch_status {
if [ -e $pid_file ]
then
echo "grunt watch is running under pid(s) $(echo $(cat $pid_file))"
else
echo "grunt watch is not running in background."
fi
}
if (( $# > 0 ))
then
if [ $1 = "start" ]
then
watch_start
elif [ $1 = "stop" ]
then
watch_stop
else
watch_status
fi
else
watch_status
fi

44
index.html

@ -1,22 +1,24 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title>input mask</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
</head>
<body>
<section id="auth">
<form action="">
<input type="text" class="mask">
<input type="text" class="mask">
<input type="text" class="mask">
<input type="text" class="mask">
<input type="text" class="mask">
</form>
<button onclick="clearForm()">Clear</button>
</section>
<script src="code.js"></script>
</body>
</html>
<head>
<title>input mask</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section id="auth">
<form action="">
<input type="text" class="mask" />
<input type="text" class="mask" />
<input type="text" class="mask" />
<input type="text" class="mask" />
<input type="text" class="mask" />
</form>
<button onclick="clearForm()">Clear</button>
</section>
<section>
<p>Last code edit on <span id="lastEdit"></span></p>
</section>
<script src="build.min.js"></script>
</body>
</html>

12
inputMask.code-workspace

@ -4,5 +4,15 @@
"path": "."
}
],
"settings": {}
"settings": {
"prettier.singleQuote": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"prettier.disableLanguages": [
"yaml",
"yml"
]
}
}

27
package.json

@ -0,0 +1,27 @@
{
"name": "challenge_input-mask",
"version": "1.0.0",
"description": "",
"main": "code.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git@gitlab.com/hoschi-it/singleNumberInputMask.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/hoschi-it/singleNumberInputMask/issues"
},
"homepage": "https://gitlab.com/hoschi-it/singleNumberInputMask#README",
"devDependencies": {
"grunt": "^1.0.4",
"grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-htmlmin": "^3.1.0",
"grunt-contrib-uglify-es": "^3.3.0",
"grunt-contrib-watch": "^1.1.0",
"prettier": "^1.19.1"
}
}

17
style.css

@ -1,4 +1,17 @@
input {
body {
background-color: #e5dfd0;
}
#auth form {
width: 200px;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 0px;
}
#auth form input {
max-width: 100px;
font-size: xx-large;
}
width: 100%;
height: 100%;
}
Loading…
Cancel
Save