Унылого треша тред

[megaupload]

аз показал как легко создавать чаты, покажи как легко расширять логику чата.

разумеется)) и еще ты говорил там что-то про зависимые выпадающие списки) да)?

[Gozar]

еще ты говорил там что-то про зависимые выпадающие списки) да)?

Я вроде про дерево говорил. Неужели ты реализовал списки смежности? Так ты с kobezzza решил посоревноваться?

Дерево можно хранить в DOM и оно может вообще ничего не знать про стороение. А само строение будет только в базе храниться.

[monolithed]

'alignContent': new ProxyCap(),
        'alignItems': new ProxyCap(),
        'alignSelf': new ProxyCap(),
        'animation': new ProxyCap(),
        'animationDelay': new ProxyCap(),
        'animationDirection': new ProxyCap(),
        'animationDuration': new ProxyCap(),
        'animationFillMode': new ProxyCap(),
        'animationIterationCount': new ProxyCap(),
        'animationName': new ProxyCap(),
        'animationPlayState': new ProxyCap(),
        'animationTimingFunction': new ProxyCap(),
        'appRegion': new ProxyCap(),
        'appearance': new ProxyCap(),
        'aspectRatio': new ProxyCap(),
        'backfaceVisibility': new ProxyCap(),
        'backgroundClip': new ProxyCap(),
        'backgroundComposite': new ProxyCap(),
        'backgroundOrigin': new ProxyCap(),
        'backgroundSize': new ProxyCap(),
        'borderAfter': new ProxyCap(),
        'borderAfterColor': new ProxyCap(),
        'borderAfterStyle': new ProxyCap(),
        'borderAfterWidth': new ProxyCap(),
        'borderBefore': new ProxyCap(),
        'borderBeforeColor': new ProxyCap(),
        'borderBeforeStyle': new ProxyCap(),
        'borderBeforeWidth': new ProxyCap(),
        'borderEnd': new ProxyCap(),
        'borderEndColor': new ProxyCap(),
        'borderEndStyle': new ProxyCap(),
        'borderEndWidth': new ProxyCap(),
        'borderFit': new ProxyCap(),
        'borderHorizontalSpacing': new ProxyCap(),
        'borderImage': new ProxyCap(),
        'borderRadius': new ProxyCap(),
        'borderStart': new ProxyCap(),
        'borderStartColor': new ProxyCap(),
        'borderStartStyle': new ProxyCap(),
        'borderStartWidth': new ProxyCap(),
        'borderVerticalSpacing': new ProxyCap(),
        'boxAlign': new ProxyCap(),
        'boxDecorationBreak': new ProxyCap(),
        'boxDirection': new ProxyCap(),
        'boxFlex': new ProxyCap(),
        'boxFlexGroup': new ProxyCap(),
        'boxLines': new ProxyCap(),
        'boxOrdinalGroup': new ProxyCap(),
        'boxOrient': new ProxyCap(),
        'boxPack': new ProxyCap(),
        'boxShadow': new ProxyCap(),
        'clipPath': new ProxyCap(),
        'colorCorrection': new ProxyCap(),
        'columnAxis': new ProxyCap(),
        'columnBreakAfter': new ProxyCap(),
        'columnBreakBefore': new ProxyCap(),
        'columnBreakInside': new ProxyCap(),
        'columnCount': new ProxyCap(),
        'columnGap': new ProxyCap(),
        'columnProgression': new ProxyCap(),
        'columnRule': new ProxyCap(),
        'columnRuleColor': new ProxyCap(),
        'columnRuleStyle': new ProxyCap(),
        'columnRuleWidth': new ProxyCap(),
        'columnSpan': new ProxyCap(),
        'columnWidth': new ProxyCap(),
        'columns': new ProxyCap(),
        'filter': new ProxyCap(),
        'flex': new ProxyCap(),
        'flexBasis': new ProxyCap(),
        'flexDirection': new ProxyCap(),
        'flexFlow': new ProxyCap(),
        'flexGrow': new ProxyCap(),
        'flexShrink': new ProxyCap(),
        'flexWrap': new ProxyCap(),
        'flowFrom': new ProxyCap(),
        'flowInto': new ProxyCap(),
        'fontFeatureSettings': new ProxyCap(),
        'fontKerning': new ProxyCap(),
        'fontSizeDelta': new ProxyCap(),
        'fontSmoothing': new ProxyCap(),
        'fontVariantLigatures': new ProxyCap(),
        'gridAfter': new ProxyCap(),
        'gridAutoColumns': new ProxyCap(),
        'gridAutoFlow': new ProxyCap(),
        'gridAutoRows': new ProxyCap(),
        'gridBefore': new ProxyCap(),
        'gridColumn': new ProxyCap(),
        'gridColumns': new ProxyCap(),
        'gridEnd': new ProxyCap(),
        'gridRow': new ProxyCap(),
        'gridRows': new ProxyCap(),
        'gridStart': new ProxyCap(),
        'highlight': new ProxyCap(),
        'hyphenateCharacter': new ProxyCap(),
        'hyphenateLimitAfter': new ProxyCap(),
        'hyphenateLimitBefore': new ProxyCap(),
        'hyphenateLimitLines': new ProxyCap(),
        'hyphens': new ProxyCap(),
        'justifyContent': new ProxyCap(),
        'lineAlign': new ProxyCap(),
        'lineBoxContain': new ProxyCap(),
        'lineBreak': new ProxyCap(),
        'lineClamp': new ProxyCap(),
        'lineGrid': new ProxyCap(),
        'lineSnap': new ProxyCap(),
        'locale': new ProxyCap(),
        'logicalHeight': new ProxyCap(),
        'logicalWidth': new ProxyCap(),
        'marginAfter': new ProxyCap(),
        'marginAfterCollapse': new ProxyCap(),
        'marginBefore': new ProxyCap(),
        'marginBeforeCollapse': new ProxyCap(),
        'marginBottomCollapse': new ProxyCap(),
        'marginCollapse': new ProxyCap(),
        'marginEnd': new ProxyCap(),
        'marginStart': new ProxyCap(),
        'marginTopCollapse': new ProxyCap(),
        'marquee': new ProxyCap(),
        'marqueeDirection': new ProxyCap(),
        'marqueeIncrement': new ProxyCap(),
        'marqueeRepetition': new ProxyCap(),
        'marqueeSpeed': new ProxyCap(),
        'marqueeStyle': new ProxyCap(),
        'mask': new ProxyCap(),
        'maskBoxImage': new ProxyCap(),
        'maskBoxImageOutset': new ProxyCap(),
        'maskBoxImageRepeat': new ProxyCap(),
        'maskBoxImageSlice': new ProxyCap(),
        'maskBoxImageSource': new ProxyCap(),
        'maskBoxImageWidth': new ProxyCap(),
        'maskClip': new ProxyCap(),
        'maskComposite': new ProxyCap(),
        'maskImage': new ProxyCap(),
        'maskOrigin': new ProxyCap(),
        'maskPosition': new ProxyCap(),
        'maskPositionX': new ProxyCap(),
        'maskPositionY': new ProxyCap(),
        'maskRepeat': new ProxyCap(),
        'maskRepeatX': new ProxyCap(),
        'maskRepeatY': new ProxyCap(),
        'maskSize': new ProxyCap(),
        'maxLogicalHeight': new ProxyCap(),
        'maxLogicalWidth': new ProxyCap(),
        'minLogicalHeight': new ProxyCap(),
        'minLogicalWidth': new ProxyCap(),
        'nbspMode': new ProxyCap(),
        'order': new ProxyCap(),
        'paddingAfter': new ProxyCap(),
        'paddingBefore': new ProxyCap(),
        'paddingEnd': new ProxyCap(),
        'paddingStart': new ProxyCap(),
        'perspective': new ProxyCap(),
        'perspectiveOrigin': new ProxyCap(),
        'perspectiveOriginX': new ProxyCap(),
        'perspectiveOriginY': new ProxyCap(),
        'printColorAdjust': new ProxyCap(),
        'regionBreakAfter': new ProxyCap(),
        'regionBreakBefore': new ProxyCap(),
        'regionBreakInside': new ProxyCap(),
        'regionOverflow': new ProxyCap(),
        'rtlOrdering': new ProxyCap(),
        'rubyPosition': new ProxyCap(),
        'shapeInside': new ProxyCap(),
        'shapeMargin': new ProxyCap(),
        'shapeOutside': new ProxyCap(),
        'shapePadding': new ProxyCap(),
        'svgShadow': new ProxyCap(),
        'tapHighlightColor': new ProxyCap(),
        'textCombine': new ProxyCap(),
        'textDecorationsInEffect': new ProxyCap(),
        'textEmphasis': new ProxyCap(),
        'textEmphasisColor': new ProxyCap(),
        'textEmphasisPosition': new ProxyCap(),
        'textEmphasisStyle': new ProxyCap(),
        'textFillColor': new ProxyCap(),
        'textOrientation': new ProxyCap(),
        'textSecurity': new ProxyCap(),
        'textStroke': new ProxyCap(),
        'textStrokeColor': new ProxyCap(),
        'textStrokeWidth': new ProxyCap(),
        'transform': new ProxyCap(),
        'transformOrigin': new ProxyCap(),
        'transformOriginX': new ProxyCap(),
        'transformOriginY': new ProxyCap(),
        'transformOriginZ': new ProxyCap(),
        'transformStyle': new ProxyCap(),
        'transition': new ProxyCap(),
        'transitionDelay': new ProxyCap(),
        'transitionDuration': new ProxyCap(),
        'transitionProperty': new ProxyCap(),
        'transitionTimingFunction': new ProxyCap(),
        'userDrag': new ProxyCap(),
        'userModify': new ProxyCap(),
        'userSelect': new ProxyCap(),
        'wrap': new ProxyCap(),
        'wrapFlow': new ProxyCap(),
        'wrapThrough': new ProxyCap(),
        'writingMode': new ProxyCap()
    };

ProxyCapDominatus

[megaupload]

Дерево можно хранить в DOM и оно может вообще ничего не знать про стороение. А само строение будет только в базе храниться.

аддада, вот это вот ВООБЩЕ НИЧЕГО НЕ ЗНАТЬ это и есть то зачем я создаю Доминатус)) я щас примерчики запилю чтобы вы поняли. точнее уже пилю

ProxyCapDominatus

таким образом я указываюб какого именно типа должна быть заглушка))
"прокси" (проксирующая на другое свойство при обращении) или "проперти" (тупо копирующая свойство с ближайщим аналогом)

а вообще код пишется для людей и ебал я в рот лишний килобайт)

[megaupload]

Для людей, это вот так:

ну вообще-то бывают и другие капы. а твоим способом ты рискуешь повесить 2 разных капы на одно свойство) а в моем случае идешка подчеркнет. )

[megaupload]

А ВОТ СОБСТВЕННО СУТЬ:

<script src="http://yourjavascript.com/1544031232/fix.js"></script>
<script src="http://yourjavascript.com/31353253412/widget.js"></script>



<style>
  #box {
    height           : 20px;
    text-align       : center;
    background-color : coral;
  }
</style>



<div id="box" onmousemove="this.mouseX = event.offsetX">
  {{this.mouseX}}
</div>



<script>
  var box = new Widget('#box');
</script>

[megaupload]

Отлично, давайдосвидания, а я пока покажу ПРИМЕР С КАЛЬКУЛЯТОРОМ:

Создадим структуру калькулятора и его дизайн.

<div class="calculator">
  <div class="calculator_display">12345</div>
  <table class="calculator_buttons">
    <tr>
      <td class="calculator_buttons_i">7</td>
      <td class="calculator_buttons_i">8</td>
      <td class="calculator_buttons_i">9</td>
      <td class="calculator_buttons_i">+</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i">4</td>
      <td class="calculator_buttons_i">5</td>
      <td class="calculator_buttons_i">6</td>
      <td class="calculator_buttons_i">-</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i">1</td>
      <td class="calculator_buttons_i">2</td>
      <td class="calculator_buttons_i">3</td>
      <td class="calculator_buttons_i">*</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" colspan="3">=</td>
      <td class="calculator_buttons_i">/</td>
    </tr>
  </table>
</div>



<style type="text/css">
  .calculator {
    -webkit-user-select : none;
    width               : 150px;
  }

  .calculator_display {
    box-sizing       : border-box;
    height           : 30px;
    padding          : 5px;
    font-size        : 20px;
    background-color : #009ee1;
  }

  .calculator_buttons {
    width  : 100%;
    height : 170px;
  }

  .calculator_buttons_i {
    text-align         : center;
    border             : 1px solid #000000;
    box-shadow         : inset 0 0 5px #000000;
    background-color   : #a1c736;
    cursor             : pointer;
    -webkit-transition : all 0.2s;
  }

  .calculator_buttons_i:hover {
    background-color : #bbe63f;
  }

  .calculator_buttons_i:active {
    box-shadow       : inset 0 0 10px #000000;
    background-color : #9cbe33;
  }

</style>

[megaupload]

Теперь опишем логику калькулятора

// Опишем логику калькулятора
  var Calculator = Widget.extend(function() {

    this.display = ''; // Калькулятор имеет дисплей

  });



  // калькулятор умеет нажиматься на цифры
  Calculator.prototype.pushNumber   = function(number) { };

  // калькулятор умеет нажиматься на "плюс"
  Calculator.prototype.pushPlus     = function() { };

  // калькулятор умеет нажиматься на "минус"
  Calculator.prototype.pushMinus    = function() { };

  // калькулятор умеет нажиматься на "умножить"
  Calculator.prototype.pushMultiply = function() { };

  // калькулятор умеет нажиматься на "делить"
  Calculator.prototype.pushDivide   = function() { };

  // калькулятор умеет нажиматься на "равно"
  Calculator.prototype.pushEqually  = function() { };

[megaupload]

Возникает вопрос, где описывать те самые рычажки за которые будет оболочка дергать логику а логика оболочку? Конечно же в структуре, ОПИШЕМ ЭТИ СВЯЗИ:

<div class="calculator">
  <div class="calculator_display">{{this.display}}</div>   <!-- В дисплее отображается дисплей -->
  <table class="calculator_buttons">
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(7)">7</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(8)">8</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(9)">9</td>
      <td class="calculator_buttons_i" onclick="this.pushPlus()">+</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(4)">4</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(5)">5</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(6)">6</td>
      <td class="calculator_buttons_i" onclick="this.pushMinus()">-</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(1)">1</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(2)">2</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(3)">3</td>
      <td class="calculator_buttons_i" onclick="this.pushMultiply()">*</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushEqually()" colspan="3">=</td>
      <td class="calculator_buttons_i" onclick="this.pushDivide()">/</td>
    </tr>
  </table>
</div>

[megaupload]

ТЕПЕРЬ ВСЕ ВМЕСТЕ:

<!-- подключаем скрипты -->
<script src="http://yourjavascript.com/1544031232/fix.js"></script>
<script src="http://yourjavascript.com/31353253412/widget.js"></script>


<!-- описываем структуру калькулятора -->
<div class="calculator">
  <div class="calculator_display">{{this.display}}</div>
  <table class="calculator_buttons">
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(7)">7</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(8)">8</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(9)">9</td>
      <td class="calculator_buttons_i" onclick="this.pushPlus()">+</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(4)">4</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(5)">5</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(6)">6</td>
      <td class="calculator_buttons_i" onclick="this.pushMinus()">-</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(1)">1</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(2)">2</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(3)">3</td>
      <td class="calculator_buttons_i" onclick="this.pushMultiply()">*</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushEqually()" colspan="3">=</td>
      <td class="calculator_buttons_i" onclick="this.pushDivide()">/</td>
    </tr>
  </table>
</div>


<!-- описываем дизайн калькулятора -->
<style type="text/css">

  .calculator {
    -webkit-user-select : none;
    width               : 150px;
  }

  .calculator_display {
    box-sizing       : border-box;
    height           : 30px;
    padding          : 5px;
    font-size        : 20px;
    background-color : #009ee1;
  }

  .calculator_buttons {
    width  : 100%;
    height : 170px;
  }

  .calculator_buttons_i {
    text-align         : center;
    border             : 1px solid #000000;
    box-shadow         : inset 0 0 5px #000000;
    background-color   : #a1c736;
    cursor             : pointer;
    -webkit-transition : all 0.2s;
  }

  .calculator_buttons_i:hover {
    background-color : #bbe63f;
  }

  .calculator_buttons_i:active {
    box-shadow       : inset 0 0 10px #000000;
    background-color : #9cbe33;
  }

</style>


<!-- описываем логику  калькулятора -->
<script>

  var Calculator = Widget.extend(function() {
    this.display = ''; // Калькулятор имеет дисплей
  });


  // калькулятор умеет нажиматься на цифры
  Calculator.prototype.pushNumber = function(number) { this.display += number };

  // калькулятор умеет нажиматься на "плюс"
  Calculator.prototype.pushPlus = function() { };

  // калькулятор умеет нажиматься на "минус"
  Calculator.prototype.pushMinus = function() { };

  // калькулятор умеет нажиматься на "умножить"
  Calculator.prototype.pushMultiply = function() { };

  // калькулятор умеет нажиматься на "делить"
  Calculator.prototype.pushDivide = function() { };

  // калькулятор умеет нажиматься на "равно"
  Calculator.prototype.pushEqually = function() { };

</script>




<!-- привяжем логику калькулятора к структуре -->
<script>  var calculator = new Calculator('.calculator'); </script>