diff options
Diffstat (limited to 'examples/showcase')
33 files changed, 1547 insertions, 0 deletions
diff --git a/examples/showcase/.gitignore b/examples/showcase/.gitignore new file mode 100644 index 00000000..4d615936 --- /dev/null +++ b/examples/showcase/.gitignore @@ -0,0 +1,4 @@ +.*/ +build/ +out/ +*.iml
\ No newline at end of file diff --git a/examples/showcase/build.gradle b/examples/showcase/build.gradle new file mode 100644 index 00000000..8ffec081 --- /dev/null +++ b/examples/showcase/build.gradle @@ -0,0 +1,92 @@ +buildscript { + ext.kotlin_version = '1.2.21' + ext.production = (findProperty('prod') ?: 'false') == 'true' + ext.npmdeps = new URL("file:///home/rjaros/git/kvision/npm.dependencies").getText() + + repositories { + jcenter() + maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' } + maven { url "https://plugins.gradle.org/m2/" } + } + + dependencies { + classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" + classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:0.0.26" + classpath "gradle.plugin.io.gitlab.arturbosch.detekt:detekt-gradle-plugin:1.0.0.RC6-2" + } +} + +apply plugin: 'kotlin2js' +apply plugin: 'org.jetbrains.kotlin.frontend' +apply plugin: "io.gitlab.arturbosch.detekt" + +repositories { + jcenter() + maven { url = 'https://dl.bintray.com/gbaldeck/kotlin' } + maven { url = 'https://dl.bintray.com/rjaros/kotlin' } + maven { + url "file:///home/rjaros/kotlin/mvn/" + } +} + +dependencies { + compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" + compile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version" // for now only compile configuration is supported + compile "pl.treksoft:kvision:0.0.1" +} + +kotlinFrontend { + npm { + npmdeps.eachLine { line -> + def (name, version) = line.tokenize(" ") + dependency(name, version) + } + devDependency("karma") + } + + webpackBundle { + bundleName = "main" + contentPath = file('src/main/web') + } + + define "PRODUCTION", production + +} + +detekt { + version = "1.0.0.RC6-2" + profile("main") { + input = "$projectDir/src/main/kotlin" + config = "$projectDir/detekt.yml" + filters = ".*test.*,.*/resources/.*,.*/tmp/.*" + } +} + +compileKotlin2Js { + kotlinOptions.metaInfo = true + kotlinOptions.outputFile = "$project.buildDir.path/js/${project.name}.js" + kotlinOptions.sourceMap = !production + kotlinOptions.moduleKind = 'commonjs' +} + +compileTestKotlin2Js { + kotlinOptions.metaInfo = true + kotlinOptions.outputFile = "$project.buildDir.path/js-tests/${project.name}-tests.js" + kotlinOptions.sourceMap = !production + kotlinOptions.moduleKind = 'commonjs' +} + +task copyResources(type: Copy) { + from "src/main/resources" + into file(buildDir.path + "/js") +} + +task copyResourcesForTests(type: Copy) { + from "src/main/resources" + into file(buildDir.path + "/js-tests/") +} + +afterEvaluate { + tasks.getByName("webpack-bundle") { dependsOn(copyResources) } + tasks.getByName("webpack-run") { dependsOn(copyResources, copyResourcesForTests) } +} diff --git a/examples/showcase/detekt.yml b/examples/showcase/detekt.yml new file mode 100644 index 00000000..a6fdea75 --- /dev/null +++ b/examples/showcase/detekt.yml @@ -0,0 +1,292 @@ +autoCorrect: true +failFast: false + +build: + warningThreshold: 5 + failThreshold: 10 + weights: + complexity: 2 + formatting: 1 + LongParameterList: 1 + comments: 1 + +processors: + active: true + exclude: + # - 'FunctionCountProcessor' + # - 'PropertyCountProcessor' + # - 'ClassCountProcessor' + # - 'PackageCountProcessor' + # - 'KtFileCountProcessor' + +console-reports: + active: true + exclude: + # - 'ProjectStatisticsReport' + # - 'ComplexityReport' + # - 'NotificationReport' + # - 'FindingsReport' + # - 'BuildFailureReport' + +output-reports: + active: true + exclude: + # - 'PlainOutputReport' + # - 'XmlOutputReport' + +potential-bugs: + active: true + DuplicateCaseInWhenExpression: + active: true + EqualsAlwaysReturnsTrueOrFalse: + active: false + EqualsWithHashCodeExist: + active: true + WrongEqualsTypeParameter: + active: false + ExplicitGarbageCollectionCall: + active: true + UnreachableCode: + active: true + LateinitUsage: + active: false + UnsafeCallOnNullableType: + active: false + UnsafeCast: + active: false + UselessPostfixExpression: + active: false + +performance: + active: true + ForEachOnRange: + active: true + SpreadOperator: + active: true + UnnecessaryTemporaryInstantiation: + active: true + +exceptions: + active: true + TooGenericExceptionCatched: + active: true + exceptions: + - ArrayIndexOutOfBoundsException + - Error + - Exception + - IllegalMonitorStateException + - IndexOutOfBoundsException + - NullPointerException + - RuntimeException + TooGenericExceptionThrown: + active: true + exceptions: + - Throwable + - ThrowError + - ThrowException + - ThrowNullPointerException + - ThrowRuntimeException + - ThrowThrowable + +empty-blocks: + active: true + EmptyCatchBlock: + active: true + EmptyClassBlock: + active: true + EmptyDefaultConstructor: + active: true + EmptyDoWhileBlock: + active: true + EmptyElseBlock: + active: true + EmptyFinallyBlock: + active: true + EmptyForBlock: + active: true + EmptyFunctionBlock: + active: true + EmptyIfBlock: + active: true + EmptyInitBlock: + active: true + EmptySecondaryConstructor: + active: true + EmptyWhenBlock: + active: true + EmptyWhileBlock: + active: true + +complexity: + active: true + LongMethod: + threshold: 20 + LongParameterList: + threshold: 5 + LargeClass: + threshold: 150 + ComplexMethod: + threshold: 10 + TooManyFunctions: + threshold: 10 + ComplexCondition: + threshold: 3 + LabeledExpression: + active: false + StringLiteralDuplication: + active: false + threshold: 2 + ignoreAnnotation: true + excludeStringsWithLessThan5Characters: true + ignoreStringsRegex: '$^' + +code-smell: + active: true + FeatureEnvy: + threshold: 0.5 + weight: 0.45 + base: 0.5 + +formatting: + active: true + useTabs: true + Indentation: + active: false + indentSize: 4 + ConsecutiveBlankLines: + active: true + autoCorrect: true + MultipleSpaces: + active: true + autoCorrect: true + SpacingAfterComma: + active: true + autoCorrect: true + SpacingAfterKeyword: + active: true + autoCorrect: true + SpacingAroundColon: + active: true + autoCorrect: true + SpacingAroundCurlyBraces: + active: true + autoCorrect: true + SpacingAroundOperator: + active: true + autoCorrect: true + TrailingSpaces: + active: true + autoCorrect: true + UnusedImports: + active: true + autoCorrect: true + OptionalSemicolon: + active: true + autoCorrect: true + OptionalUnit: + active: true + autoCorrect: true + ExpressionBodySyntax: + active: false + autoCorrect: false + ExpressionBodySyntaxLineBreaks: + active: false + autoCorrect: false + OptionalReturnKeyword: + active: true + autoCorrect: false + +style: + active: true + ReturnCount: + active: true + max: 2 + NewLineAtEndOfFile: + active: true + OptionalAbstractKeyword: + active: true + OptionalWhenBraces: + active: false + EqualsNullCall: + active: false + ForbiddenComment: + active: true + values: 'TODO:,FIXME:,STOPSHIP:' + ForbiddenImport: + active: false + imports: '' + ModifierOrder: + active: true + MagicNumber: + active: true + ignoreNumbers: '-1,0,1,2' + ignoreHashCodeFunction: false + ignorePropertyDeclaration: false + ignoreAnnotation: false + WildcardImport: + active: true + SafeCast: + active: true + MaxLineLength: + active: true + maxLineLength: 120 + excludePackageStatements: false + excludeImportStatements: false + PackageNaming: + active: true + packagePattern: '^[a-z]+(\.[a-z][a-z0-9]*)*$' + ClassNaming: + active: true + classPattern: '[A-Z$][a-zA-Z$]*' + EnumNaming: + active: true + enumEntryPattern: '^[A-Z$][a-zA-Z_$]*$' + FunctionNaming : + active: true + functionPattern: '^[a-z$][a-zA-Z$0-9]*$' + FunctionMaxLength: + active: false + maximumFunctionNameLength: 30 + FunctionMinLength: + active: false + minimumFunctionNameLength: 3 + VariableNaming : + active: true + variablePattern: '^(_)?[a-z$][a-zA-Z$0-9]*$' + ConstantNaming : + active: true + constantPattern: '^([A-Z_]*|serialVersionUID)$' + VariableMaxLength: + active: false + maximumVariableNameLength: 30 + VariableMinLength: + active: false + minimumVariableNameLength: 3 + ProtectedMemberInFinalClass: + active: false + UnnecessaryParentheses: + active: false + +comments: + active: true + CommentOverPrivateMethod: + active: true + CommentOverPrivateProperty: + active: true + UndocumentedPublicClass: + active: false + searchInNestedClass: true + searchInInnerClass: true + searchInInnerObject: true + searchInInnerInterface: true + UndocumentedPublicFunction: + active: false + +# *experimental feature* +# Migration rules can be defined in the same config file or a new one +migration: + active: true + imports: + # your.package.Class: new.package.or.Class + # for example: + # io.gitlab.arturbosch.detekt.api.Rule: io.gitlab.arturbosch.detekt.rule.Rule diff --git a/examples/showcase/gradle.properties b/examples/showcase/gradle.properties new file mode 100644 index 00000000..4ac81290 --- /dev/null +++ b/examples/showcase/gradle.properties @@ -0,0 +1,2 @@ +#org.gradle.jvmargs=-XX:+UnlockCommercialFeatures -XX:+FlightRecorder +#org.gradle.debug=true diff --git a/examples/showcase/gradle/wrapper/gradle-wrapper.jar b/examples/showcase/gradle/wrapper/gradle-wrapper.jar Binary files differnew file mode 100644 index 00000000..09f1fecb --- /dev/null +++ b/examples/showcase/gradle/wrapper/gradle-wrapper.jar diff --git a/examples/showcase/gradle/wrapper/gradle-wrapper.properties b/examples/showcase/gradle/wrapper/gradle-wrapper.properties new file mode 100644 index 00000000..ebc5a13a --- /dev/null +++ b/examples/showcase/gradle/wrapper/gradle-wrapper.properties @@ -0,0 +1,6 @@ +#Wed Jan 24 11:39:21 CET 2018 +distributionBase=GRADLE_USER_HOME +distributionPath=wrapper/dists +zipStoreBase=GRADLE_USER_HOME +zipStorePath=wrapper/dists +distributionUrl=https\://services.gradle.org/distributions/gradle-4.4.1-all.zip diff --git a/examples/showcase/gradlew b/examples/showcase/gradlew new file mode 100755 index 00000000..cccdd3d5 --- /dev/null +++ b/examples/showcase/gradlew @@ -0,0 +1,172 @@ +#!/usr/bin/env sh + +############################################################################## +## +## Gradle start up script for UN*X +## +############################################################################## + +# Attempt to set APP_HOME +# Resolve links: $0 may be a link +PRG="$0" +# Need this for relative symlinks. +while [ -h "$PRG" ] ; do + ls=`ls -ld "$PRG"` + link=`expr "$ls" : '.*-> \(.*\)$'` + if expr "$link" : '/.*' > /dev/null; then + PRG="$link" + else + PRG=`dirname "$PRG"`"/$link" + fi +done +SAVED="`pwd`" +cd "`dirname \"$PRG\"`/" >/dev/null +APP_HOME="`pwd -P`" +cd "$SAVED" >/dev/null + +APP_NAME="Gradle" +APP_BASE_NAME=`basename "$0"` + +# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +DEFAULT_JVM_OPTS="" + +# Use the maximum available, or set MAX_FD != -1 to use that value. +MAX_FD="maximum" + +warn () { + echo "$*" +} + +die () { + echo + echo "$*" + echo + exit 1 +} + +# OS specific support (must be 'true' or 'false'). +cygwin=false +msys=false +darwin=false +nonstop=false +case "`uname`" in + CYGWIN* ) + cygwin=true + ;; + Darwin* ) + darwin=true + ;; + MINGW* ) + msys=true + ;; + NONSTOP* ) + nonstop=true + ;; +esac + +CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar + +# Determine the Java command to use to start the JVM. +if [ -n "$JAVA_HOME" ] ; then + if [ -x "$JAVA_HOME/jre/sh/java" ] ; then + # IBM's JDK on AIX uses strange locations for the executables + JAVACMD="$JAVA_HOME/jre/sh/java" + else + JAVACMD="$JAVA_HOME/bin/java" + fi + if [ ! -x "$JAVACMD" ] ; then + die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." + fi +else + JAVACMD="java" + which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." +fi + +# Increase the maximum file descriptors if we can. +if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then + MAX_FD_LIMIT=`ulimit -H -n` + if [ $? -eq 0 ] ; then + if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then + MAX_FD="$MAX_FD_LIMIT" + fi + ulimit -n $MAX_FD + if [ $? -ne 0 ] ; then + warn "Could not set maximum file descriptor limit: $MAX_FD" + fi + else + warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" + fi +fi + +# For Darwin, add options to specify how the application appears in the dock +if $darwin; then + GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" +fi + +# For Cygwin, switch paths to Windows format before running java +if $cygwin ; then + APP_HOME=`cygpath --path --mixed "$APP_HOME"` + CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` + JAVACMD=`cygpath --unix "$JAVACMD"` + + # We build the pattern for arguments to be converted via cygpath + ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` + SEP="" + for dir in $ROOTDIRSRAW ; do + ROOTDIRS="$ROOTDIRS$SEP$dir" + SEP="|" + done + OURCYGPATTERN="(^($ROOTDIRS))" + # Add a user-defined pattern to the cygpath arguments + if [ "$GRADLE_CYGPATTERN" != "" ] ; then + OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" + fi + # Now convert the arguments - kludge to limit ourselves to /bin/sh + i=0 + for arg in "$@" ; do + CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` + CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option + + if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition + eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` + else + eval `echo args$i`="\"$arg\"" + fi + i=$((i+1)) + done + case $i in + (0) set -- ;; + (1) set -- "$args0" ;; + (2) set -- "$args0" "$args1" ;; + (3) set -- "$args0" "$args1" "$args2" ;; + (4) set -- "$args0" "$args1" "$args2" "$args3" ;; + (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; + (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; + (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; + (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; + (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; + esac +fi + +# Escape application args +save () { + for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done + echo " " +} +APP_ARGS=$(save "$@") + +# Collect all arguments for the java command, following the shell quoting and substitution rules +eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" + +# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong +if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then + cd "$(dirname "$0")" +fi + +exec "$JAVACMD" "$@" diff --git a/examples/showcase/gradlew.bat b/examples/showcase/gradlew.bat new file mode 100644 index 00000000..f9553162 --- /dev/null +++ b/examples/showcase/gradlew.bat @@ -0,0 +1,84 @@ +@if "%DEBUG%" == "" @echo off +@rem ########################################################################## +@rem +@rem Gradle startup script for Windows +@rem +@rem ########################################################################## + +@rem Set local scope for the variables with windows NT shell +if "%OS%"=="Windows_NT" setlocal + +set DIRNAME=%~dp0 +if "%DIRNAME%" == "" set DIRNAME=. +set APP_BASE_NAME=%~n0 +set APP_HOME=%DIRNAME% + +@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +set DEFAULT_JVM_OPTS= + +@rem Find java.exe +if defined JAVA_HOME goto findJavaFromJavaHome + +set JAVA_EXE=java.exe +%JAVA_EXE% -version >NUL 2>&1 +if "%ERRORLEVEL%" == "0" goto init + +echo. +echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. +echo. +echo Please set the JAVA_HOME variable in your environment to match the +echo location of your Java installation. + +goto fail + +:findJavaFromJavaHome +set JAVA_HOME=%JAVA_HOME:"=% +set JAVA_EXE=%JAVA_HOME%/bin/java.exe + +if exist "%JAVA_EXE%" goto init + +echo. +echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% +echo. +echo Please set the JAVA_HOME variable in your environment to match the +echo location of your Java installation. + +goto fail + +:init +@rem Get command-line arguments, handling Windows variants + +if not "%OS%" == "Windows_NT" goto win9xME_args + +:win9xME_args +@rem Slurp the command line arguments. +set CMD_LINE_ARGS= +set _SKIP=2 + +:win9xME_args_slurp +if "x%~1" == "x" goto execute + +set CMD_LINE_ARGS=%* + +:execute +@rem Setup the command line + +set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar + +@rem Execute Gradle +"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% + +:end +@rem End local scope for the variables with windows NT shell +if "%ERRORLEVEL%"=="0" goto mainEnd + +:fail +rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of +rem the _cmd.exe /c_ return code! +if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 +exit /b 1 + +:mainEnd +if "%OS%"=="Windows_NT" endlocal + +:omega diff --git a/examples/showcase/package.json.d/project.info b/examples/showcase/package.json.d/project.info new file mode 100644 index 00000000..a7749d63 --- /dev/null +++ b/examples/showcase/package.json.d/project.info @@ -0,0 +1,3 @@ +{ + "description": "KVision Showcase" +} diff --git a/examples/showcase/refresh.sh b/examples/showcase/refresh.sh new file mode 100755 index 00000000..2568701d --- /dev/null +++ b/examples/showcase/refresh.sh @@ -0,0 +1,26 @@ +./gradlew stop +rm -rf build/bundle +rm -rf build/js +rm -rf build/js-tests +rm -rf build/reports +rm -rf build/resources +rm -rf build/tmp +rm -rf build/logs +rm -rf build/package.json +rm -rf build/package-lock.json +rm -rf build/.modules.with.kotlin.txt +rm -rf build/.modules.with.types.txt +rm -rf build/.npmrc +rm -rf build/.unpack.txt +rm -rf build/kotlin +rm -rf build/kotlin-build +rm -rf build/*.js +rm -rf build/node_modules/kotlin +rm -rf build/node_modules/kotlin-test +rm -rf build/node_modules/kvision +rm -rf build/node_modules/navigo-kotlin +rm -rf build/node_modules/jquery-kotlin +rm -rf build/node_modules/snabbdom-kotlin +rm -rf build/node_modules/kotlin-observable-js +rm -rf build/node_modules_imported +./gradlew -t run diff --git a/examples/showcase/settings.gradle b/examples/showcase/settings.gradle new file mode 100644 index 00000000..d5254b37 --- /dev/null +++ b/examples/showcase/settings.gradle @@ -0,0 +1 @@ +rootProject.name = 'showcase' diff --git a/examples/showcase/src/main/kotlin/com/example/BasicTab.kt b/examples/showcase/src/main/kotlin/com/example/BasicTab.kt new file mode 100644 index 00000000..84e52b45 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/BasicTab.kt @@ -0,0 +1,38 @@ +package com.example + +import pl.treksoft.kvision.basic.Label +import pl.treksoft.kvision.html.IMAGESHAPE +import pl.treksoft.kvision.html.Image +import pl.treksoft.kvision.html.LIST +import pl.treksoft.kvision.html.Link +import pl.treksoft.kvision.html.ListTag +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag +import pl.treksoft.kvision.panel.FLEXALIGNITEMS +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.panel.VPanel +import pl.treksoft.kvision.utils.px + +class BasicTab : SimplePanel() { + init { + this.marginTop = 10.px() + this.minHeight = 400.px() + val panel = VPanel(spacing = 3) + panel.add(Label("A simple label")) + panel.add(Label("A list:")) + panel.add(ListTag(LIST.UL, listOf("First list element", "Second list element", "Third list element"))) + panel.add(Label("An image:")) + panel.add(Image(require("./img/dog.jpg"), shape = IMAGESHAPE.CIRCLE)) + panel.add(Tag(TAG.CODE, "Some text written in <code></code> HTML tag.")) + panel.add( + Tag( + TAG.DIV, + "Rich <b>text</b> <i>written</i> with <span style=\"font-family: Verdana; font-size: 14pt\">" + + "any <strong>forma</strong>tting</span>.", + rich = true + ) + ) + panel.add(Link("A link to Google", "http://www.google.com")) + this.add(panel) + } +}
\ No newline at end of file diff --git a/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt b/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt new file mode 100644 index 00000000..a09e005f --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt @@ -0,0 +1,47 @@ +package com.example + +import pl.treksoft.kvision.form.check.CHECKBOXSTYLE +import pl.treksoft.kvision.form.check.CheckBox +import pl.treksoft.kvision.form.check.RADIOSTYLE +import pl.treksoft.kvision.form.check.Radio +import pl.treksoft.kvision.html.BUTTONSTYLE +import pl.treksoft.kvision.html.Button +import pl.treksoft.kvision.panel.HPanel +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.panel.VPanel +import pl.treksoft.kvision.utils.px + +class ButtonsTab : SimplePanel() { + init { + this.marginTop = 10.px() + val mainPanel = HPanel(spacing = 100) + val buttonsPanel = VPanel(spacing = 7) + buttonsPanel.add(Button("Default button", style = BUTTONSTYLE.DEFAULT).apply { width = 200.px() }) + buttonsPanel.add(Button("Primary button", style = BUTTONSTYLE.PRIMARY).apply { width = 200.px() }) + buttonsPanel.add(Button("Success button", style = BUTTONSTYLE.SUCCESS).apply { width = 200.px() }) + buttonsPanel.add(Button("Info button", style = BUTTONSTYLE.INFO).apply { width = 200.px() }) + buttonsPanel.add(Button("Warning button", style = BUTTONSTYLE.WARNING).apply { width = 200.px() }) + buttonsPanel.add(Button("Danger button", style = BUTTONSTYLE.DANGER).apply { width = 200.px() }) + buttonsPanel.add(Button("Link button", style = BUTTONSTYLE.LINK).apply { width = 200.px() }) + mainPanel.add(buttonsPanel) + val ckPanel = VPanel() + ckPanel.add(CheckBox(true, label = "Default checkbox").apply { style = CHECKBOXSTYLE.DEFAULT }) + ckPanel.add(CheckBox(true, label = "Primary checkbox").apply { style = CHECKBOXSTYLE.PRIMARY }) + ckPanel.add(CheckBox(true, label = "Success checkbox").apply { style = CHECKBOXSTYLE.SUCCESS }) + ckPanel.add(CheckBox(true, label = "Info checkbox").apply { style = CHECKBOXSTYLE.INFO }) + ckPanel.add(CheckBox(true, label = "Warning checkbox").apply { style = CHECKBOXSTYLE.WARNING }) + ckPanel.add(CheckBox(true, label = "Danger checkbox").apply { style = CHECKBOXSTYLE.DANGER }) + ckPanel.add(CheckBox(true, label = "Circled checkbox").apply { circled = true }) + mainPanel.add(ckPanel) + val radioPanel = VPanel() + radioPanel.add(Radio(name = "radio", label = "Default radiobutton").apply { style = RADIOSTYLE.DEFAULT }) + radioPanel.add(Radio(name = "radio", label = "Primary radiobutton").apply { style = RADIOSTYLE.PRIMARY }) + radioPanel.add(Radio(name = "radio", label = "Success radiobutton").apply { style = RADIOSTYLE.SUCCESS }) + radioPanel.add(Radio(name = "radio", label = "Info radiobutton").apply { style = RADIOSTYLE.INFO }) + radioPanel.add(Radio(name = "radio", label = "Warning radiobutton").apply { style = RADIOSTYLE.WARNING }) + radioPanel.add(Radio(name = "radio", label = "Danger radiobutton").apply { style = RADIOSTYLE.DANGER }) + radioPanel.add(Radio(name = "radio", label = "Squared radiobutton").apply { squared = true }) + mainPanel.add(radioPanel) + this.add(mainPanel) + } +}
\ No newline at end of file diff --git a/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt b/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt new file mode 100644 index 00000000..66a45c39 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt @@ -0,0 +1,95 @@ +package com.example + +import pl.treksoft.kvision.core.Background +import pl.treksoft.kvision.core.COLOR +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.dropdown.DropDown +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag +import pl.treksoft.kvision.panel.DIRECTION +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.panel.SplitPanel +import pl.treksoft.kvision.panel.StackPanel +import pl.treksoft.kvision.panel.TabPanel +import pl.treksoft.kvision.panel.VPanel +import pl.treksoft.kvision.utils.px + +class ContainersTab : SimplePanel() { + init { + this.marginTop = 10.px() + val panel = VPanel(spacing = 5) + addStackPanel(panel) + addTabPanel(panel) + addVerticalSplitPanel(panel) + addHorizontalSplitPanel(panel) + this.add(panel) + } + + private fun addStackPanel(panel: Container) { + panel.add(Tag(TAG.H4, "Stack panel")) + + val stack = StackPanel() + stack.add(Tag(TAG.DIV, " ", rich = true).apply { + background = Background(COLOR.BLUE) + height = 40.px() + }, "/containers/blue") + stack.add(Tag(TAG.DIV, " ", rich = true).apply { + background = Background(COLOR.GREEN) + height = 40.px() + }, "/containers/green") + panel.add(stack) + + val ldd = DropDown( + "Activate panel from the stack", listOf( + "Blue panel" to "#!/containers/blue", + "Green panel" to "#!/containers/green" + ) + ) + panel.add(ldd) + } + + private fun addTabPanel(panel: Container) { + panel.add(Tag(TAG.H4, "Tab panel")) + + val tabs = TabPanel() + tabs.addTab("Blue panel", Tag(TAG.DIV, " ", rich = true).apply { + background = Background(COLOR.BLUE) + height = 40.px() + }) + tabs.addTab("Green panel", Tag(TAG.DIV, " ", rich = true).apply { + background = Background(COLOR.GREEN) + height = 40.px() + }) + panel.add(tabs) + } + + private fun addVerticalSplitPanel(panel: Container) { + panel.add(Tag(TAG.H4, "Vertical split panel")) + + val split = SplitPanel() + split.add(Tag(TAG.DIV, " ", rich = true).apply { + background = Background(COLOR.BLUE) + height = 200.px() + }) + split.add(Tag(TAG.DIV, " ", rich = true).apply { + background = Background(COLOR.GREEN) + height = 200.px() + }) + panel.add(split) + } + + private fun addHorizontalSplitPanel(panel: Container) { + panel.add(Tag(TAG.H4, "Horizontal split panel")) + + val split = SplitPanel(direction = DIRECTION.HORIZONTAL).apply { height = 220.px() } + split.add(Tag(TAG.DIV, " ", rich = true).apply { + background = Background(COLOR.BLUE) + height = 100.px() + }) + split.add(Tag(TAG.DIV, " ", rich = true).apply { + background = Background(COLOR.GREEN) + height = 100.px() + }) + panel.add(split) + } +} diff --git a/examples/showcase/src/main/kotlin/com/example/DataTab.kt b/examples/showcase/src/main/kotlin/com/example/DataTab.kt new file mode 100644 index 00000000..177167c4 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/DataTab.kt @@ -0,0 +1,76 @@ +package com.example + +import com.lightningkite.kotlin.observable.list.observableListOf +import pl.treksoft.kvision.data.DataComponent +import pl.treksoft.kvision.data.DataContainer +import pl.treksoft.kvision.form.check.CHECKBOXSTYLE +import pl.treksoft.kvision.form.check.CheckBox +import pl.treksoft.kvision.html.BUTTONSTYLE +import pl.treksoft.kvision.html.Button +import pl.treksoft.kvision.panel.FLEXDIR +import pl.treksoft.kvision.panel.FLEXWRAP +import pl.treksoft.kvision.panel.FlexPanel +import pl.treksoft.kvision.panel.HPanel +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.panel.VPanel +import pl.treksoft.kvision.utils.px + +class DataTab : SimplePanel() { + init { + this.marginTop = 10.px() + this.minHeight = 400.px() + + val panel = VPanel(spacing = 5) + + class DataModel(checked: Boolean, text: String) : DataComponent() { + var checked: Boolean by obs(checked) + var text: String by obs(text) + } + + val list = observableListOf( + DataModel(false, "January"), + DataModel(false, "February"), + DataModel(false, "March"), + DataModel(false, "April"), + DataModel(false, "May"), + DataModel(false, "June"), + DataModel(false, "July"), + DataModel(false, "August"), + DataModel(false, "September"), + DataModel(false, "October"), + DataModel(false, "November") + ) + val dataContainer = DataContainer(list, { index -> + CheckBox( + value = list[index].checked, + label = if (list[index].checked) "<b>${list[index].text}</b>" else "${list[index].text}" + ).apply { + rich = true + style = CHECKBOXSTYLE.PRIMARY + onClick { + list[index].checked = this.value + } + } + }, child = FlexPanel(FLEXDIR.ROW, spacing = 10, wrap = FLEXWRAP.WRAP)) + panel.add(dataContainer) + + val butPanel = HPanel(spacing = 10) + butPanel.add(Button("Add December", style = BUTTONSTYLE.SUCCESS).onClick { + list.add(DataModel(true, "December")) + }) + butPanel.add(Button("Check all", style = BUTTONSTYLE.INFO).onClick { + list.forEach { it.checked = true } + }) + butPanel.add(Button("Uncheck all", style = BUTTONSTYLE.INFO).onClick { + list.forEach { it.checked = false } + }) + butPanel.add(Button("Reverse list", style = BUTTONSTYLE.DANGER).onClick { + list.reverse() + }) + butPanel.add(Button("Remove checked", style = BUTTONSTYLE.DANGER).onClick { + list.filter { it.checked }.forEach { list.remove(it) } + }) + panel.add(butPanel) + this.add(panel) + } +} diff --git a/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt b/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt new file mode 100644 index 00000000..b98815f0 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt @@ -0,0 +1,63 @@ +package com.example + +import pl.treksoft.kvision.dropdown.DD +import pl.treksoft.kvision.dropdown.DropDown +import pl.treksoft.kvision.html.BUTTONSTYLE +import pl.treksoft.kvision.html.Button +import pl.treksoft.kvision.html.Image +import pl.treksoft.kvision.panel.HPanel +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.panel.VPanel +import pl.treksoft.kvision.utils.px + +class DropDownTab : SimplePanel() { + init { + this.marginTop = 10.px() + this.minHeight = 400.px() + val panel = VPanel(spacing = 30) + val ndd = DropDown( + "Dropdown with navigation menu", listOf( + "Basic formatting" to "#!/basic", + "Forms" to "#!/forms", + "Buttons" to "#!/buttons", + "Dropdowns" to "#!/dropdowns", + "Containers" to "#!/containers" + ), "fa-arrow-right", style = BUTTONSTYLE.SUCCESS + ).apply { + width = 250.px() + } + panel.add(ndd) + + val idd = DropDown("Dropdown with custom list", icon = "fa-picture-o", style = BUTTONSTYLE.WARNING).apply { + width = 250.px() + } + idd.add(Image(require("./img/cat.jpg")).apply { margin = 10.px(); title = "Cat" }) + idd.add(Image(require("./img/dog.jpg")).apply { margin = 10.px(); title = "Dog" }) + panel.add(idd) + + val hpanel = HPanel(spacing = 5) + val fdd = DropDown( + "Dropdown with special options", listOf( + "Header" to DD.HEADER.type, + "Basic formatting" to "#!/basic", + "Forms" to "#!/forms", + "Buttons" to "#!/buttons", + "Separator" to DD.SEPARATOR.type, + "Dropdowns (disabled)" to DD.DISABLED.type, + "Separator" to DD.SEPARATOR.type, + "Containers" to "#!/containers" + ), "fa-asterisk", style = BUTTONSTYLE.PRIMARY + ).apply { + dropup = true + width = 250.px() + } + hpanel.add(fdd) + val ddbutton = Button("Toggle dropdown", style = BUTTONSTYLE.INFO).onClick { e -> + fdd.toggle() + e.stopPropagation() + } + hpanel.add(ddbutton) + panel.add(hpanel) + this.add(panel) + } +}
\ No newline at end of file diff --git a/examples/showcase/src/main/kotlin/com/example/FormTab.kt b/examples/showcase/src/main/kotlin/com/example/FormTab.kt new file mode 100644 index 00000000..49c1f6fe --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/FormTab.kt @@ -0,0 +1,137 @@ +package com.example + +import pl.treksoft.kvision.form.FormPanel +import pl.treksoft.kvision.form.check.CheckBox +import pl.treksoft.kvision.form.check.Radio +import pl.treksoft.kvision.form.check.RadioGroup +import pl.treksoft.kvision.form.select.AjaxOptions +import pl.treksoft.kvision.form.select.Select +import pl.treksoft.kvision.form.spinner.Spinner +import pl.treksoft.kvision.form.text.Password +import pl.treksoft.kvision.form.text.RichText +import pl.treksoft.kvision.form.text.Text +import pl.treksoft.kvision.form.text.TextArea +import pl.treksoft.kvision.form.time.DateTime +import pl.treksoft.kvision.html.BUTTONSTYLE +import pl.treksoft.kvision.html.Button +import pl.treksoft.kvision.modal.Alert +import pl.treksoft.kvision.modal.Confirm +import pl.treksoft.kvision.panel.HPanel +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.snabbdom.obj +import pl.treksoft.kvision.utils.px +import kotlin.js.Date + +class Form(val map: Map<String, Any?>) { + val text: String? by map + val password: String? by map + val password2: String? by map + val textarea: String? by map + val richtext: String? by map + val date: Date? by map + val time: Date? by map + val checkbox: Boolean by map + val radio: Boolean by map + val select: String? by map + val spinner: Double? by map + val radiogroup: String? by map +} + + +class FormTab : SimplePanel() { + init { + this.marginTop = 10.px() + val formPanel = FormPanel { + Form(it) + }.apply { + add( + "text", + Text(label = "Required text field with regexp [0-9] validator").apply { + placeholder = "Enter your age" + }, + required = true, + validatorMessage = { "Only numbers are allowed" }) { + it.getValue()?.matches("^[0-9]+$") + } + add("password", Password(label = "Password field with minimum length validator"), + validatorMessage = { "Password too short" }) { + (it.getValue()?.length ?: 0) >= 8 + } + add("password2", Password(label = "Password confirmation"), + validatorMessage = { "Password too short" }) { + (it.getValue()?.length ?: 0) >= 8 + } + add("textarea", TextArea(label = "Text area field")) + add( + "richtext", + RichText(label = "Rich text field with a placeholder").apply { placeholder = "Add some info" }) + add( + "date", + DateTime(format = "YYYY-MM-DD", label = "Date field with a placeholder").apply { + placeholder = "Enter date" + }) + add( + "time", + DateTime(format = "HH:mm", label = "Time field") + ) + add("checkbox", CheckBox(label = "Required checkbox")) { it.getValue() } + add("radio", Radio(label = "Radio button")) + add( + "select", Select( + options = listOf("first" to "First option", "second" to "Second option"), + label = "Simple select" + ) + ) + + add("ajaxselect", Select(label = "Select with remote data source").apply { + emptyOption = true + ajaxOptions = AjaxOptions("https://api.github.com/search/repositories", processData = { + it.items.map { item -> + obj { + this.value = item.id + this.text = item.name + this.data = obj { + this.subtext = item.owner.login + } + } + } + }, processParams = obj { + q = "{{{q}}}" + }, minLength = 3, requestDelay = 1000) + }) + add("spinner", Spinner(label = "Spinner field 10 - 20", min = 10, max = 20)) + add( + "radiogroup", RadioGroup( + listOf("option1" to "First option", "option2" to "Second option"), + inline = true, label = "Radio button group" + ) + ) + validator = { + val result = it["password"] == it["password2"] + if (!result) { + it.getControl("password")?.validatorError = "Passwords are not the same" + it.getControl("password2")?.validatorError = "Passwords are not the same" + } + result + } + validatorMessage = { "The passwords are not the same." } + } + this.add(formPanel) + val buttonsPanel = HPanel(spacing = 10) + val validButton = Button("Validate", "fa-check", BUTTONSTYLE.INFO).onClick { + formPanel.validate() + } + buttonsPanel.add(validButton) + val dataButton = Button("Show data", "fa-info", BUTTONSTYLE.SUCCESS).onClick { + Alert.show("Form data in plain JSON", JSON.stringify(formPanel.getDataJson(), space = 1)) + } + buttonsPanel.add(dataButton) + val clearButton = Button("Clear data", "fa-times", BUTTONSTYLE.DANGER).onClick { + Confirm.show("Are you sure?", "Do you want to clear your data?") { + formPanel.clearData() + } + } + buttonsPanel.add(clearButton) + formPanel.add(buttonsPanel) + } +}
\ No newline at end of file diff --git a/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt b/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt new file mode 100644 index 00000000..f25da4fe --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt @@ -0,0 +1,160 @@ +package com.example + +import pl.treksoft.kvision.core.Background +import pl.treksoft.kvision.core.COLOR +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.CssSize +import pl.treksoft.kvision.html.ALIGN +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag +import pl.treksoft.kvision.panel.* +import pl.treksoft.kvision.utils.perc +import pl.treksoft.kvision.utils.px + +class LayoutsTab : SimplePanel() { + init { + this.marginTop = 10.px() + this.minHeight = 400.px() + val panel = VPanel(spacing = 5) + addHPanel(panel) + addVPanel(panel) + addFlexPanel1(panel) + addFlexPanel2(panel) + addFlexPanel3(panel) + addFlexPanel4(panel) + addFlexPanel5(panel) + addGridPanel1(panel) + addGridPanel2(panel) + addRespGridPanel(panel) + addDockPanel(panel) + this.add(panel) + } + + private fun addHPanel(panel: Container) { + panel.add(Tag(TAG.H4, "Horizontal layout")) + val hpanel = HPanel(spacing = 5) + hpanel.add(getDiv("1", 100)) + hpanel.add(getDiv("2", 150)) + hpanel.add(getDiv("3", 200)) + panel.add(hpanel) + } + + private fun addVPanel(panel: Container) { + panel.add(Tag(TAG.H4, "Vertical layout")) + val vpanel = VPanel(spacing = 5) + vpanel.add(getDiv("1", 100)) + vpanel.add(getDiv("2", 150)) + vpanel.add(getDiv("3", 200)) + panel.add(vpanel) + } + + private fun addFlexPanel1(panel: Container) { + panel.add(Tag(TAG.H4, "CSS flexbox layouts")) + val flexpanel = FlexPanel( + FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXEND, FLEXALIGNITEMS.CENTER, + spacing = 5 + ) + flexpanel.add(getDiv("1", 100)) + flexpanel.add(getDiv("2", 150)) + flexpanel.add(getDiv("3", 200)) + panel.add(flexpanel) + } + + private fun addFlexPanel2(panel: Container) { + val flexpanel = FlexPanel( + FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.SPACEBETWEEN, FLEXALIGNITEMS.CENTER, + spacing = 5 + ) + flexpanel.add(getDiv("1", 100)) + flexpanel.add(getDiv("2", 150)) + flexpanel.add(getDiv("3", 200)) + panel.add(flexpanel) + } + + private fun addFlexPanel3(panel: Container) { + val flexpanel = FlexPanel( + FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.CENTER, FLEXALIGNITEMS.CENTER, + spacing = 5 + ) + flexpanel.add(getDiv("1", 100)) + flexpanel.add(getDiv("2", 150)) + flexpanel.add(getDiv("3", 200)) + panel.add(flexpanel) + } + + private fun addFlexPanel4(panel: Container) { + val flexpanel = FlexPanel( + FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXSTART, FLEXALIGNITEMS.CENTER, + spacing = 5 + ) + flexpanel.add(getDiv("1", 100), order = 3) + flexpanel.add(getDiv("2", 150), order = 1) + flexpanel.add(getDiv("3", 200), order = 2) + panel.add(flexpanel) + } + + private fun addFlexPanel5(panel: Container) { + val flexpanel = FlexPanel( + FLEXDIR.COLUMN, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXSTART, FLEXALIGNITEMS.FLEXEND, + spacing = 5 + ) + flexpanel.add(getDiv("1", 100), order = 3) + flexpanel.add(getDiv("2", 150), order = 1) + flexpanel.add(getDiv("3", 200), order = 2) + panel.add(flexpanel) + } + + private fun addGridPanel1(panel: Container) { + panel.add(Tag(TAG.H4, "CSS grid layouts")) + val gridpanel = GridPanel(columnGap = 5, rowGap = 5, justifyItems = GRIDJUSTIFY.CENTER) + gridpanel.background = Background(COLOR.KHAKI) + gridpanel.add(getDiv("1,1", 100), 1, 1) + gridpanel.add(getDiv("1,2", 100), 1, 2) + gridpanel.add(getDiv("2,1", 100), 2, 1) + gridpanel.add(getDiv("2,2", 100), 2, 2) + panel.add(gridpanel) + } + + private fun addGridPanel2(panel: Container) { + val gridpanel = GridPanel(columnGap = 5, rowGap = 5, justifyItems = GRIDJUSTIFY.CENTER) + gridpanel.background = Background(COLOR.CORNFLOWERBLUE) + gridpanel.add(getDiv("1,1", 150), 1, 1) + gridpanel.add(getDiv("2,2", 150), 2, 2) + gridpanel.add(getDiv("3,3", 150), 3, 3) + panel.add(gridpanel) + } + + private fun addRespGridPanel(panel: Container) { + panel.add(Tag(TAG.H4, "Responsive grid layout")) + val gridpanel = ResponsiveGridPanel() + gridpanel.background = Background(COLOR.SILVER) + gridpanel.add(getDiv("1,1", 150), 1, 1) + gridpanel.add(getDiv("3,1", 150), 3, 1) + gridpanel.add(getDiv("2,2", 150), 2, 2) + gridpanel.add(getDiv("3,3", 150), 3, 3) + panel.add(gridpanel) + } + + private fun addDockPanel(panel: Container) { + panel.add(Tag(TAG.H4, "Dock layout")) + val dockpanel = DockPanel() + dockpanel.background = Background(COLOR.YELLOW) + dockpanel.add(getDiv("CENTER", 150), SIDE.CENTER) + dockpanel.add(getDiv("LEFT", 150), SIDE.LEFT) + dockpanel.add(getDiv("RIGHT", 150), SIDE.RIGHT) + dockpanel.add(getDiv("UP", 150).apply { marginBottom = 10.px() }, SIDE.UP) + dockpanel.add(getDiv("DOWN", 150).apply { marginTop = 10.px() }, SIDE.DOWN) + panel.add(dockpanel) + } + + + private fun getDiv(value: String, size: Int): Tag { + return Tag(TAG.DIV, value).apply { + paddingTop = ((size / 2) - 10).px() + align = ALIGN.CENTER + background = Background(COLOR.GREEN) + width = size.px() + height = size.px() + } + } +} diff --git a/examples/showcase/src/main/kotlin/com/example/Main.kt b/examples/showcase/src/main/kotlin/com/example/Main.kt new file mode 100644 index 00000000..98c94f25 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/Main.kt @@ -0,0 +1,41 @@ +package com.example + +import pl.treksoft.kvision.ApplicationBase +import pl.treksoft.kvision.core.KVManager +import pl.treksoft.kvision.module +import kotlin.browser.document + +external fun require(name: String): String + +fun main(args: Array<String>) { + var application: ApplicationBase? = null + + val state: dynamic = module.hot?.let { hot -> + hot.accept() + + hot.dispose { data -> + data.appState = application?.dispose() + KVManager.shutdown() + application = null + } + + hot.data + } + + if (document.body != null) { + application = start(state) + } else { + KVManager.init() + application = null + document.addEventListener("DOMContentLoaded", { application = start(state) }) + } +} + +fun start(state: dynamic): ApplicationBase? { + if (document.getElementById("showcase") == null) return null + val application = Showcase() + @Suppress("UnsafeCastFromDynamic") + application.start(state?.appState ?: emptyMap()) + return application +} + diff --git a/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt b/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt new file mode 100644 index 00000000..46da97f7 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt @@ -0,0 +1,78 @@ +package com.example + +import pl.treksoft.kvision.html.ALIGN +import pl.treksoft.kvision.html.BUTTONSTYLE +import pl.treksoft.kvision.html.Button +import pl.treksoft.kvision.html.Image +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag +import pl.treksoft.kvision.modal.Alert +import pl.treksoft.kvision.modal.Confirm +import pl.treksoft.kvision.modal.Modal +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.panel.VPanel +import pl.treksoft.kvision.utils.px + +class ModalsTab : SimplePanel() { + init { + this.marginTop = 10.px() + this.minHeight = 400.px() + val panel = VPanel(spacing = 30) + val alertButton = Button("Alert dialog", style = BUTTONSTYLE.DANGER).onClick { + Alert.show( + "Alert dialog", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor." + ) + } + panel.add(alertButton) + val confirmButton = Button("Confirm dialog", style = BUTTONSTYLE.WARNING).onClick { + Confirm.show( + "Confirm dialog", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor.", + noCallback = { + Alert.show("Result", "You pressed NO button.") + }) { + Alert.show("Result", "You pressed YES button.") + } + } + panel.add(confirmButton) + val confirmButtonC = Button("Cancelable confirm dialog", style = BUTTONSTYLE.INFO).onClick { + Confirm.show( + "Cancelable confirm dialog", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor.", + align = ALIGN.CENTER, + cancelVisible = true, + noCallback = { + Alert.show("Result", "You pressed NO button.") + }) { + Alert.show("Result", "You pressed YES button.") + } + } + panel.add(confirmButtonC) + + val modal = Modal("Custom modal dialog") + modal.add( + Tag( + TAG.H4, + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor." + ) + ) + modal.add(Image(require("./img/dog.jpg"))) + modal.addButton(Button("Close").onClick { + modal.hide() + }) + val modalButton = Button("Custom modal dialog", style = BUTTONSTYLE.SUCCESS).onClick { + modal.show() + } + panel.add(modalButton) + val fastAlertButton = Button("Alert dialog without animation", style = BUTTONSTYLE.PRIMARY).onClick { + Alert.show( + "Alert dialog without animation", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor.", + animation = false + ) + } + panel.add(fastAlertButton) + this.add(panel) + } +} diff --git a/examples/showcase/src/main/kotlin/com/example/Showcase.kt b/examples/showcase/src/main/kotlin/com/example/Showcase.kt new file mode 100644 index 00000000..40a231e8 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/Showcase.kt @@ -0,0 +1,38 @@ +package com.example + +import pl.treksoft.kvision.ApplicationBase +import pl.treksoft.kvision.core.BORDERSTYLE +import pl.treksoft.kvision.core.Border +import pl.treksoft.kvision.core.COLOR +import pl.treksoft.kvision.core.Root +import pl.treksoft.kvision.panel.TabPanel +import pl.treksoft.kvision.utils.px + +class Showcase : ApplicationBase() { + + override fun start(state: Map<String, Any>) { + val root = Root("showcase", true) + val tabPanel = TabPanel().apply { + margin = 20.px() + padding = 20.px() + border = Border(2.px(), BORDERSTYLE.SOLID, COLOR.SILVER) + } + tabPanel.addTab("Basic formatting", BasicTab(), "fa-bars", route = "/basic") + tabPanel.addTab("Forms", FormTab(), "fa-edit", route = "/forms") + tabPanel.addTab("Buttons", ButtonsTab(), "fa-check-square-o", route = "/buttons") + tabPanel.addTab("Dropdowns", DropDownTab(), "fa-arrow-down", route = "/dropdowns") + tabPanel.addTab("Containers", ContainersTab(), "fa-database", route = "/containers") + tabPanel.addTab("Layouts", LayoutsTab(), "fa-th-list", route = "/layouts") + tabPanel.addTab("Modals", ModalsTab(), "fa-window-maximize", route = "/modals") + tabPanel.addTab("Data binding", DataTab(), "fa-retweet", route = "/data") + root.add(tabPanel) + } + + override fun dispose(): Map<String, Any> { + return mapOf() + } + + companion object { + val css = require("./css/style.css") + } +} diff --git a/examples/showcase/src/main/resources/css/style.css b/examples/showcase/src/main/resources/css/style.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/examples/showcase/src/main/resources/css/style.css diff --git a/examples/showcase/src/main/resources/img/cat.jpg b/examples/showcase/src/main/resources/img/cat.jpg Binary files differnew file mode 100644 index 00000000..235fd677 --- /dev/null +++ b/examples/showcase/src/main/resources/img/cat.jpg diff --git a/examples/showcase/src/main/resources/img/dog.jpg b/examples/showcase/src/main/resources/img/dog.jpg Binary files differnew file mode 100644 index 00000000..9c33275b --- /dev/null +++ b/examples/showcase/src/main/resources/img/dog.jpg diff --git a/examples/showcase/src/main/web/index.html b/examples/showcase/src/main/web/index.html new file mode 100644 index 00000000..4dfaccf4 --- /dev/null +++ b/examples/showcase/src/main/web/index.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>KVision Showcase</title> + <script type="text/javascript" src="main.bundle.js"></script> + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> + <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> +</head> +<body> +<div id="showcase"></div> +</body> +</html> diff --git a/examples/showcase/src/test/kotlin/test/com/example/ShowcaseSpec.kt b/examples/showcase/src/test/kotlin/test/com/example/ShowcaseSpec.kt new file mode 100644 index 00000000..64d46b18 --- /dev/null +++ b/examples/showcase/src/test/kotlin/test/com/example/ShowcaseSpec.kt @@ -0,0 +1,19 @@ +package test.com.example + +import com.example.Showcase +import kotlin.browser.document +import kotlin.test.Test +import kotlin.test.assertTrue + +class ShowcaseSpec : DomSpec { + + @Test + fun render() { + run { + Showcase().start(mapOf()) + val element = document.getElementById("showcase") + assertTrue(true, "True" + ) + } + } +} diff --git a/examples/showcase/src/test/kotlin/test/com/example/TestUtil.kt b/examples/showcase/src/test/kotlin/test/com/example/TestUtil.kt new file mode 100644 index 00000000..06d25a26 --- /dev/null +++ b/examples/showcase/src/test/kotlin/test/com/example/TestUtil.kt @@ -0,0 +1,32 @@ +package test.com.example + +import pl.treksoft.jquery.jQuery +import kotlin.browser.document + +interface TestSpec { + fun beforeTest() + + fun afterTest() + + fun run(code: () -> Unit) { + beforeTest() + code() + afterTest() + } +} + +interface DomSpec : TestSpec { + + override fun beforeTest() { + val fixture = "<div style=\"display: none\" id=\"pretest\">" + + "<div id=\"showcase\"></div></div>" + document.body?.insertAdjacentHTML("afterbegin", fixture) + } + + override fun afterTest() { + val div = document.getElementById("pretest") + div?.remove() + jQuery(`object` = ".modal-backdrop").remove() + } + +} diff --git a/examples/showcase/webpack.config.d/bootstrap.js b/examples/showcase/webpack.config.d/bootstrap.js new file mode 100644 index 00000000..32a7c4d0 --- /dev/null +++ b/examples/showcase/webpack.config.d/bootstrap.js @@ -0,0 +1,4 @@ +config.module.rules.push({test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'}); +config.module.rules.push({test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'}); +config.module.rules.push({test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'}); +config.module.rules.push({test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'}); diff --git a/examples/showcase/webpack.config.d/css.js b/examples/showcase/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/examples/showcase/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/examples/showcase/webpack.config.d/dce.js b/examples/showcase/webpack.config.d/dce.js new file mode 100644 index 00000000..b536a6bf --- /dev/null +++ b/examples/showcase/webpack.config.d/dce.js @@ -0,0 +1,2 @@ +var path = require("path"); +config.resolve.modules.unshift(path.resolve("./js/min")); diff --git a/examples/showcase/webpack.config.d/file.js b/examples/showcase/webpack.config.d/file.js new file mode 100644 index 00000000..8b853e7e --- /dev/null +++ b/examples/showcase/webpack.config.d/file.js @@ -0,0 +1,6 @@ +config.module.rules.push( + { + test: /\.(jpe?g|png|gif|svg)$/i, + loader: 'file-loader' + } +);
\ No newline at end of file diff --git a/examples/showcase/webpack.config.d/jquery.js b/examples/showcase/webpack.config.d/jquery.js new file mode 100644 index 00000000..40522595 --- /dev/null +++ b/examples/showcase/webpack.config.d/jquery.js @@ -0,0 +1,4 @@ +config.plugins.push(new webpack.ProvidePlugin({ + $: "jquery", + jQuery: "jquery" +})); diff --git a/examples/showcase/webpack.config.d/minify.js b/examples/showcase/webpack.config.d/minify.js new file mode 100644 index 00000000..34e706c9 --- /dev/null +++ b/examples/showcase/webpack.config.d/minify.js @@ -0,0 +1,4 @@ +if (defined.PRODUCTION) { + config.plugins.push(new webpack.optimize.UglifyJsPlugin({ + })); +} |
