Giter VIP home page Giter VIP logo

tui.code-snippet's Introduction

TOAST UI Tools: Code Snippet

Group of utility methods to make ease with developing javascript applications.

GitHub release npm GitHub license PRs welcome code with hearth by NHN Cloud

๐Ÿšฉ Table of Contents

๐Ÿ“™ Documents

You can also see the older versions of API page on the releases page.

๐ŸŽจ Features

  • ajax
    • Send the Ajax request
  • array
    • Handle arrays
  • browser
    • Detect browser
  • collection
    • Process collections
    • Support util methods for collections
  • customEvents
    • Add/Remove/fire custom events
  • defineClass
    • Define classes
  • domEvent
    • Add, remove, fire DOM events
    • Control mouse events
  • domUtil
    • Control the information of DOM
    • Add, remove, find DOM class name
  • enum
    • Manage constant value
    • Make immutability values but IE8 low
  • formatDate
    • Format date strings
  • inheritance
    • Simple inheritance (Nicholas C. Zakas, YUI Library)
    • Call supur constructor of superclass
    • Have to get inheritance before define child
    • Use mixin and inner object
  • object
    • Support utils to control object
  • request
    • Request image ping
  • string
    • Support utils such as decodeHTMLEntity, encodeHTMLEntity
  • tricks
    • Creates a debounced function and a throttled function
  • type
    • Check data type

๐Ÿ’พ Install

TOAST UI products can be used by using the package manager or downloading the source directly. However, we highly recommend using the package manager.

Via Package Manager

TOAST UI products are registered in two package managers, npm. You can conveniently install it using the commands provided by each package manager. When using npm, be sure to use it in the environment Node.js is installed.

npm

$ npm install --save tui-code-snippet # Latest version
$ npm install --save tui-code-snippet@<version> # Specific version

Download Source Files

๐Ÿ”จ Usage

Import only functions that you need in your code:

// CommonJS
const func = require('tui-code-snippet/<folder>/<function>');

// for example,
const inArray = require('tui-code-snippet/array/inArray');
const customEvents = require('tui-code-snippet/customEvents/customEvents');
// ES6
import func from 'tui-code-snippet/<folder>/<function>';

// for example,
import inArray from 'tui-code-snippet/array/inArray';
import customEvents from 'tui-code-snippet/customEvents/customEvents';

The folder structure can be found here.

Bundle

Since v2.0, it does not provide bundle files. If you need a bundle file, you should make it yourself using the command npm run bundle.

$ git clone https://github.com/nhn/tui.code-snippet.git
$ cd tui.code-snippet
$ npm install
$ npm run bundle

After executing npm run bundle, the uncompressed(tui-code-snippet.js) and minified(tui-code-snippet.min.js) files are created in the dist folder.

tui.code-snippet/
โ”œโ”€ dist
โ”‚  โ”œโ”€ tui-code-snippet.js
โ”‚  โ”œโ”€ tui-code-snippet.min.js
โ”œโ”€ ...

The entry file is index.js. When you do not modify index.js, all methods of tui.code-snippet will be included in the bundle file. To bundle the methods you need, remove other methods in the entry file.

// index.js
// for example, you need inArray, forEach and isArray methods only.
require('./array/inArray');
require('./collection/forEach');
require('./type/isArray');

๐ŸŒ Browser Support

Chrome Chrome IE Internet Explorer Edge Edge Safari Safari Firefox Firefox
Yes 8+ Yes Yes Yes

๐Ÿ”ง Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork master branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check if there are any errors.

$ git clone https://github.com/{your-personal-repo}/tui.code-snippet.git
$ cd tui.code-snippet
$ npm install
$ npm run test

Develop

Let's start development! Don't miss adding test cases and then make green rights.

Running test

$ npm run test

Pull Request

Before uploading your PR, run test one last time to check if there are any errors. If it has no errors, commit and then push it!

For more information on PR's steps, please see links in the Contributing section.

๐Ÿ’ฌ Contributing

๐Ÿž TOAST UI Family

๐Ÿ“œ License

This software is licensed under the MIT License ยฉ NHN Cloud.

tui.code-snippet's People

Contributors

dependabot[bot] avatar dotaitch avatar dungsil avatar extremefe avatar icebelle avatar jajugoguma avatar jinwoo-kim-nhn avatar jkeen avatar johnny-mh avatar kyuwoo-choi avatar minhyeong-kim avatar seonim-ryu avatar sohee-lee7 avatar youjung-hong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tui.code-snippet's Issues

Add a sendHostname function for the tui components

Version

1.3.0

Development Environment

ALL

Current Behavior

  1. The every tui components make duplicated request image ping multiple times.
  2. The every tui components have to have an option for it.(usageStatistics)
    • It can be set on global space

Expected Behavior

CustomEvent#_offByContext ๋ฒ„๊ทธ

์•„๋ž˜์˜ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์Œ.

  1. ํŠน์ • ์ƒํ™ฉ์—์„œ off(context, type) ์ด context๋ฅผ ๊ตฌ๋ถ„ํ•˜์ง€ ์•Š๊ณ  ๋ชจ๋“  ์ด๋ฒคํŠธ๋ฅผ ์ œ๊ฑฐ
    ๐Ÿ‘‰ context์— ํ•ด๋‹นํ•˜๋Š” type ์˜ ์ด๋ฒคํŠธ๋งŒ ์ œ๊ฑฐํ•ด์•ผ ํ•จ
  2. '_play' ์ด๋ฒคํŠธ์™€ 'play' ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•˜๊ณ  off('play') ์‹คํ–‰ ์‹œ ๋ชจ๋“  ์ด๋ฒคํŠธ๋ฅผ ์ œ๊ฑฐ
    ๐Ÿ‘‰ _play ์ด๋ฒคํŠธ๋Š” ์ œ๊ฑฐํ•˜์ง€ ์•Š์•„์•ผ ํ•จ

update package-lock.json

Version

Development Environment

Current Behavior

A module with a potential security vulnerability is found on package-lock.json file.
This module is marked related to jsdoc and this module's version should be updated.

Reference :

Expected Behavior

Remove node_modules folder and package-lock.json file on local environment.
Install all packages and confirm to update version of marked on package-lock.json.

Change the getTarget function to return composedPath[0] to support web components

Version

2.3.2

Development Environment

MacOS 10.15.6
Chrome 84.0.4147.135

Current Behavior

toast-ui color-picker๋ฅผ web components๋กœ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•  ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ.

palette ์˜์—ญ ํด๋ฆญ ์‹œ, getTarget ํ•จ์ˆ˜๊ฐ€ e.target์„ ๋ฐ˜ํ™˜ํ•˜๋Š”๋ฐ, ์ด๋•Œ target์ด palette ์˜์—ญ์ด ์•„๋‹Œ web component๊ฐ€ ๋ฐ˜ํ™˜๋˜์–ด, click์— ๋Œ€ํ•œ ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒ
(lotstar87/twc-color-picker#1)

// domEvent/getTarget.js
function getTarget(e) {
  return e.target || e.srcElement; 
}

Expected Behavior

getTarget ํ•จ์ˆ˜๊ฐ€ e.composedPath()[0]์„ ๋ฐ˜ํ™˜ํ•˜๋„๋ก ๋ณ€๊ฒฝ

// domEvent/getTarget.js
function getTarget(e) {
  return e.composedPath()[0];
}

Separate functions into individual files

Version

Update a major version

Development Environment

Current Behavior

// Write example code

Expected Behavior

  • Separate functions into individual files
  • Add/Remove some functions

browser() occurs an error in Node.js

Version

latest

Development Environment

All

Current Behavior

browser() occurs an error in Node.js

// ReferenceError: window is not defined
if (window && window.navigator) {
  detectBrowser();
}

Expected Behavior

If browser() runs in Node.js, do not execute detectBrowser().

browser - Change iOS Chrome detection result to 'chrome: true'

Version

2.3.2

Development Environment

iOS Chrome

Current Behavior

  • iOS Chrome userAgent
    • Mozilla/5.0 (iPhone; CPU iPhone OS 13_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/84.0.4147.122 Mobile/15E148 Safari/604.1
  • codesandbox test code
// browser result
chrome : false,
....
others : true,
version : 0

Expected Behavior

// browser result
chrome : true,
....
others : false,
version : 84

Build failed since webpack cannot find entry module

Version

v2.0.0

Development Environment

$ lsb_release -a
No LSB modules are available.
Distributor ID: Debian
Description:    Debian GNU/Linux bullseye/sid
Release:        unstable
Codename:       sid
$ node --version
v12.13.0

Current Behavior

[askdna@bebop-i5 tui.code-snippet master]$ git checkout v2.0.0
Note: switching to 'v2.0.0'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

HEAD is now at fb0d71e Merge branch 'master' into production
[askdna@bebop-i5 tui.code-snippet (v2.0.0)]$ yarn install
yarn install v1.19.1
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 2.28s.
[askdna@bebop-i5 tui.code-snippet (v2.0.0)]$ npm run bundle

> tui-code-snippet@2.0.0 bundle /tmp/askdna/tui.code-snippet
> webpack & webpack --production

Hash: 451d148498b0218ba862
Version: webpack 1.15.0
Time: 13ms

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/js/index.js in /tmp/askdna/tui.code-snippet
Hash: 4cc2c8905467c5a2eeb0
Version: webpack 1.15.0
Time: 13ms

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/js/index.js in /tmp/askdna/tui.code-snippet
[askdna@bebop-i5 tui.code-snippet (v2.0.0)]$

Expected Behavior

I expect npm run bundle generates built result, but the build fails. Since d04b9cb commit removes the webpack entry file which is index.js, then webpack complains about that.

1.5.2?

Can we cut a new release of this? I'd like to see tui-calendar use a version of this library that includes the fix in #27, and that hasn't yet made it to a released version.

Google Analytics cannot be disabled as claimed in the Readme

Version

1.5.0

Development Environment

Windows, Linux, Chrome, Firefox
Running the image editor using the latest releases of the color picker, image editor and code snippet.

Current Behavior

The code snippet script is sending usage statistics to www.google-analytics.com
Setting tui.usageStatistics = false right before or after loading the script does not prevent that.

Here is an example: https://fiddle.sencha.com/#view/editor&fiddle/2p07
You can see that it silently sends a request to https://www.google-analytics.com/collect?v=1&t=event&tid=UA-115377265-9&cid=fiddle.sencha.com&dp=fiddle.sencha.com&dh=color-picker if you inspect the network traffic.

Expected Behavior

Setting tui.usageStatistics to false should reliably disable Google Analytics completely! This is absolutely crucial as it is illegal to collect such data without user consent in the EU and other countries.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.