たこ忍者

KITE NINJA


//スクロール要素に指定すると、スクロール操作できなくなる（chrome）
pointer-events: none!important;

//スクロール要素には高さ指定必須
max-height: 96vh;
overflow-y: auto;

【課題】

アップデート予定

ポップアップ要素が画面高さより大きい場合の処理が残念

１：android系chromeで下が切れる

~~挿入位置の変更~~　完了！

~~０：ポップアップポジションの自動最適化~~ 完了！

１．開閉ボタンの有無：btn_pos : 'd-none',で可能（WINDOWSを開いたとき等）

２：⇒スワイプイベントへの対応

３：ポップアップギャラリー

ポップアップギャラリー:⇒ photoswipe

○○○後に自動で閉じるオプション

ポップアップ内で木の葉起動やタブを実現 ⇒ done()

ポップアップ内での苦無連動。

A:クリックボタン化　$(ボタン要素).nJa_kite();

クリック・ポップアップ

動的に中身要素生成

HTML内の要素

要素が多い場合

オーバー要素の⇒ボタン固定化参考


//要素をポップアップボタンにする。
$('#fortest0').nJa_kite({
 kite_main: 'ここに動的に生成する中身を記述！',
});

//A:ポップアップの中身（html内指定）
kite_target: '', //html内の要素をポップアップ要素に指定
//※中身を隠したい場合は中身要素を隠し要素でラップしておく。
//中身要素自体には、display:none;は指定しない。

//B:ポップアップの中身（動的生成）
kite_main: '', //メインに配置するコンテンツ

//共通:ポップアップのヘッダー・フッター（動的生成）
kite_header: '', //ヘッダーに配置するコンテンツ
kite_footer: '', //フッターに配置するコンテンツ
↓　廃止して　kite_funcでまとめたほうがよい？
kite_header_btn: '',
kite_footer_btn: '',

ドロップダウンは「苦無」でやるべきでは？

凧と「指示忍者」は統合したほうがよくね？

凧にデザインオプションを作って継承して「指示表示」させる。

html内要素を凧にする場合は、要素を隠し要素でラップしとく。

デザイン：ポップアップ

メインとバック

幅100%


//ポップアップのデザイン
kite_class: '', //ポップアップにクラス指定する場合
kite_style: '', //ポップアップにcss直書き（style="ここ"）
kite_shadow: 'off', //ポップアップの影ありにする場合、on

//最小幅（端末幅で調整）
kite_width: '800px',

//ポップアップのバックエリアデザイン（全面背面オーバーレイとは別）
bg_class: '',
bg_style: '#fff', //ポップエリアのstyle

//ポップアップのテンプレ
tmpl_close: //閉じるボタン

$('#popds002').nJa_kite({
  kite_width: '100%',
  kite_shadow: 'on', //ポップアップの影ありにする場合、on
  kite_class: 'bg-line white-text rounded', //ポップアップにcss直書き（style="ここ"）
});

デザイン：ボタン

⇒ボタンアイコンアニメ

左上のメニューバー

標準

ボタンカラーを白

ボタン上左

ボタン下右

ボタン下左


//ボタンのテンプレート kite-btn-x, クラス要素は必須
  tmpl_close: '',
//ボタンの位置　t-l：左上、t-r：右上、b-l:左下、b-r:右下
  btn_pos : 't-l',

//ボタンカラー　bk:ブラック（デフォルト）、wt:白
//ボタンのテンプレートデフォルトパターンのみ有効
  btn_color: 'wt',

//ボタンのCLICK時の動作（ボタンのアニメ用）
// $tは、.kite-btn-x要素
  btn_open: function($t) {
    $t.addClass('toggle');
  },
  btn_close: function($t) {
    $t.removeClass('toggle');
  },

デザイン：全面・背景オーバーレイ

背景なし

背景白透過

背景真っ白

背景画像


//全面・背景オーバーレイのデザイン
kite_kage: 'on', //バックなしにする場合、off
kage_id : 'kage-overlay',
kage_class: '',  //クラス指定
kage_style: '',  //バックにcss直書き（style="ここ"）

$('#bgds004').nJa_kite({
  kage_style: 'background-image: url(/image/for_back2.jpg); background-size: cover; background-position: center top; background-repeat: no-repeat;',
});
//background-size: auto 100vh;　縦基準の場合
//要素自体でfixedさせているので、background-attachment: fixed;  は使わない！！！

エフェクト（vivfy.css）

スライドダウン

スライドアップ

スライドライト

スライドレフト

HOld

rollInTop

↓ iosで乱れるので使わないほうば無難？

flipX

filpY

⇒ vivfy.css　ほかのエフェクト（Effeckt.css）も整理して参考にしたい。


//開閉時のアニメーション
animate: 'fadeIn',
close_anime: 'fadeOut',

//※ 標準で vivfy.cssを使用

位置（defult,full,top,left, right,bottom）

トップ

ボトム

レフト

ライト

背景ベタ白・FULLなど


//ポップアップの位置
kite_position: 'center', //デフォルト,中央固定

//上下左右（メニュー化で使えそう）
kite_position: 'top', //上下左右,top,bottom,left,right

//フルサイズ
kite_position: 'full', //全部覆う

応用：ガイド

トップ

ボトム

レフト

ライト

左下

右下



//開閉時に実行したい関数
done: function() {
//開いた直後に実行
},
close: function() {
//閉じた直後に実行
},

//モバイル用の開閉メニューを実装してみた
$('#fortest4').nJa_kite({
  kite_main: '#takoyaki2',
  tmpl_close: '',
  kage_style: 'background: #fff; opacity: 1;',
  kite_shadow: 'off',
  kite_position: 'full',
  done: function() {
    $('#takoyaro').addClass('animate');
    $('#takosyuke').addClass('animate');
   },
  close: function() {
   $('#takoyaro').removeClass('animate');
   $('#takosyuke').removeClass('animate');
  },
});

// ※位置指定
// kite_position: 'full', ⇒　kite_size: 'full', に変える？
// に伴い、kite_width:廃止する？
// 各パーツをタイムスタンプでID化
// スクロールでインするコンテンツを複数使う場合とか
// だとすると苦無と凧は、まとめたほうがよくね！？
// でも、ポップアップ内での苦無連動を考えたら別がよさそ！

メモ


//ie対策

//その１.flex内の position:sticky が効かない

//polyfillでなんちゃって解決
// script src="./stickyfill.min.js"
//script

if (isIe() && isDomH($kite)) {
  let $h =  document.getElementById($kiteID).getElementsByClassName(op.class_header)
  let $f =  document.getElementById($kiteID).getElementsByClassName(op.class_footer)
  Stickyfill.add($h);
  Stickyfill.add($f);
}
//※動的要素のせいか、すぐには対応しなしない。


//その２：ie11で.remove()が使えないため、
$shade.remove();
//こうやって回避
$shade.parentElement.removeChild($shade);

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。